aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.scss')
-rw-r--r--src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.scss599
1 files changed, 599 insertions, 0 deletions
diff --git a/src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.scss b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.scss
new file mode 100644
index 000000000..22ce8c8f2
--- /dev/null
+++ b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaView.scss
@@ -0,0 +1,599 @@
+@import '../../global/globalCssVariables.scss';
+// @import '../../../../../node_modules/react-table/react-table.css';
+.collectionSchemaView-container {
+ border-width: $COLLECTION_BORDER_WIDTH;
+ border-color: $medium-gray;
+ border-style: solid;
+ border-radius: $border-radius;
+ box-sizing: border-box;
+ position: relative;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ margin-top: 0;
+ transition: top 0.5s;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: nowrap;
+ touch-action: none;
+ div {
+ touch-action: none;
+ }
+ .collectionSchemaView-tableContainer {
+ width: 100%;
+ height: 100%;
+ }
+ .collectionSchemaView-dividerDragger {
+ position: relative;
+ height: 100%;
+ width: $SCHEMA_DIVIDER_WIDTH;
+ z-index: 20;
+ right: 0;
+ top: 0;
+ background: gray;
+ cursor: col-resize;
+ }
+ // .documentView-node:first-child {
+ // background: $white;
+ // }
+}
+
+.collectionSchemaView-searchContainer {
+ border-width: $COLLECTION_BORDER_WIDTH;
+ border-color: $medium-gray;
+ border-style: solid;
+ border-radius: $border-radius;
+ box-sizing: border-box;
+ position: relative;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ margin-top: 0;
+ transition: top 0.5s;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: nowrap;
+ touch-action: none;
+ padding: 2px;
+ div {
+ touch-action: none;
+ }
+ .collectionSchemaView-tableContainer {
+ width: 100%;
+ height: 100%;
+ }
+ .collectionSchemaView-dividerDragger {
+ position: relative;
+ height: 100%;
+ width: 20px;
+ z-index: 20;
+ right: 0;
+ top: 0;
+ background: gray;
+ cursor: col-resize;
+ }
+ // .documentView-node:first-child {
+ // background: $white;
+ // }
+}
+
+.ReactTable {
+ width: 100%;
+ background: white;
+ box-sizing: border-box;
+ border: none !important;
+ float: none !important;
+ .rt-table {
+ height: 100%;
+ display: -webkit-inline-box;
+ direction: ltr;
+ overflow: visible;
+ }
+ .rt-noData {
+ display: none;
+ }
+ .rt-thead {
+ width: 100%;
+ z-index: 100;
+ overflow-y: visible;
+ &.-header {
+ font-size: 12px;
+ height: 30px;
+ box-shadow: none;
+ z-index: 100;
+ overflow-y: visible;
+ }
+ .rt-resizable-header-content {
+ height: 100%;
+ overflow: visible;
+ }
+ .rt-th {
+ padding: 0;
+ border-left: solid 1px $light-gray;
+ }
+ }
+ .rt-th {
+ font-size: 13px;
+ text-align: center;
+ &:last-child {
+ overflow: visible;
+ }
+ }
+ .rt-tbody {
+ width: 100%;
+ direction: rtl;
+ overflow: visible;
+ .rt-td {
+ border-right: 1px solid rgba(0, 0, 0, 0.2);
+ }
+ }
+ .rt-tr-group {
+ direction: ltr;
+ flex: 0 1 auto;
+ min-height: 30px;
+ border: 0 !important;
+ }
+ .rt-tr-group:nth-of-type(even) {
+ direction: ltr;
+ flex: 0 1 auto;
+ min-height: 30px;
+ border: 0 !important;
+ background-color: red;
+ }
+ .rt-tr {
+ width: 100%;
+ min-height: 30px;
+ }
+ .rt-td {
+ padding: 0;
+ font-size: 13px;
+ text-align: center;
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+ .imageBox-cont {
+ position: relative;
+ max-height: 100%;
+ }
+ .imageBox-cont img {
+ object-fit: contain;
+ max-width: 100%;
+ height: 100%;
+ }
+ .videoBox-cont {
+ object-fit: contain;
+ width: auto;
+ height: 100%;
+ }
+ }
+ .rt-td.rt-expandable {
+ display: flex;
+ align-items: center;
+ height: inherit;
+ }
+ .rt-resizer {
+ width: 8px;
+ right: -4px;
+ }
+ .rt-resizable-header {
+ padding: 0;
+ height: 30px;
+ }
+ .rt-resizable-header:last-child {
+ overflow: visible;
+ .rt-resizer {
+ width: 5px !important;
+ }
+ }
+}
+
+.documentView-node-topmost {
+ text-align: left;
+ transform-origin: center top;
+ display: inline-block;
+}
+
+.collectionSchema-col {
+ height: 100%;
+}
+
+.collectionSchema-header-menu {
+ height: auto;
+ z-index: 100;
+ position: absolute;
+ background: white;
+ padding: 5px;
+ position: fixed;
+ background: white;
+ border: black 1px solid;
+ .collectionSchema-header-toggler {
+ z-index: 100;
+ width: 100%;
+ height: 100%;
+ padding: 4px;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ svg {
+ margin-right: 4px;
+ }
+ }
+}
+
+.collectionSchemaView-header {
+ height: 100%;
+ color: gray;
+ z-index: 100;
+ overflow-y: visible;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+}
+
+button.add-column {
+ width: 28px;
+}
+
+.collectionSchemaView-menuOptions-wrapper {
+ background: rgb(241, 239, 235);
+ display: flex;
+ cursor: default;
+ height: 100%;
+ align-content: center;
+ align-items: center;
+}
+
+.collectionSchema-header-menuOptions {
+ color: black;
+ width: 180px;
+ text-align: left;
+ .collectionSchema-headerMenu-group {
+ padding: 7px 0;
+ border-bottom: 1px solid lightgray;
+ cursor: pointer;
+ &:first-child {
+ padding-top: 0;
+ }
+ &:last-child {
+ border: none;
+ text-align: center;
+ padding: 12px 0 0 0;
+ }
+ }
+ label {
+ color: $medium-gray;
+ font-weight: normal;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ }
+ input {
+ color: black;
+ width: 100%;
+ }
+ .columnMenu-option {
+ cursor: pointer;
+ padding: 3px;
+ background-color: white;
+ transition: background-color 0.2s;
+ &:hover {
+ background-color: $light-gray;
+ }
+ &.active {
+ font-weight: bold;
+ border: 2px solid $light-gray;
+ }
+ svg {
+ color: gray;
+ margin-right: 5px;
+ width: 10px;
+ }
+ }
+
+ .keys-dropdown {
+ position: relative;
+ //width: 100%;
+ background-color: white;
+ input {
+ border: 2px solid $light-gray;
+ padding: 3px;
+ height: 28px;
+ font-weight: bold;
+ letter-spacing: '2px';
+ text-transform: 'uppercase';
+ &:focus {
+ font-weight: normal;
+ }
+ }
+ }
+ .columnMenu-colors {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ .columnMenu-colorPicker {
+ cursor: pointer;
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ &.active {
+ border: 2px solid white;
+ box-shadow: 0 0 0 2px lightgray;
+ }
+ }
+ }
+}
+
+.schema-icon {
+ cursor: pointer;
+ width: 25px;
+ height: 25px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ align-content: center;
+ background-color: $medium-blue;
+ color: white;
+ margin-right: 5px;
+ font-size: 10px;
+ border-radius: 3px;
+}
+
+.keys-options-wrapper {
+ position: absolute;
+ text-align: left;
+ height: fit-content;
+ top: 100%;
+ z-index: 21;
+ background-color: #ffffff;
+ box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%);
+ padding: 1px;
+ .key-option {
+ cursor: pointer;
+ color: #000000;
+ width: 100%;
+ height: 25px;
+ font-weight: 400;
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ padding-left: 5px;
+ &:hover {
+ background-color: $light-gray;
+ }
+ }
+}
+
+.collectionSchema-row {
+ height: 100%;
+ background-color: white;
+ &.row-focused .rt-td {
+ background-color: $light-blue; //$light-gray;
+ overflow: visible;
+ }
+ &.row-wrapped {
+ .rt-td {
+ white-space: normal;
+ }
+ }
+ .row-dragger {
+ display: flex;
+ justify-content: space-evenly;
+ width: 58px;
+ position: absolute;
+ /* max-width: 50px; */
+ min-height: 30px;
+ align-items: center;
+ color: lightgray;
+ background-color: white;
+ transition: color 0.1s ease;
+ .row-option {
+ color: black;
+ cursor: pointer;
+ position: relative;
+ transition: color 0.1s ease;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ z-index: 2;
+ border-radius: 3px;
+ padding: 3px;
+ &:hover {
+ background-color: $light-gray;
+ }
+ }
+ }
+ .collectionSchema-row-wrapper {
+ &.row-above {
+ border-top: 1px solid $medium-blue;
+ }
+ &.row-below {
+ border-bottom: 1px solid $medium-blue;
+ }
+ &.row-inside {
+ border: 2px dashed $medium-blue;
+ }
+ .row-dragging {
+ background-color: blue;
+ }
+ }
+}
+
+.collectionSchemaView-cellContainer {
+ width: 100%;
+ height: unset;
+}
+
+.collectionSchemaView-cellContents {
+ width: 100%;
+}
+
+.collectionSchemaView-cellWrapper {
+ display: flex;
+ height: 100%;
+ text-align: left;
+ padding-left: 19px;
+ position: relative;
+ align-items: center;
+ align-content: center;
+ &:focus {
+ outline: none;
+ }
+ &.editing {
+ padding: 0;
+ box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
+ transform: scale(1.1);
+ z-index: 40;
+ input {
+ outline: 0;
+ border: none;
+ background-color: $white;
+ width: 100%;
+ height: fit-content;
+ min-height: 26px;
+ }
+ }
+ &.focused {
+ overflow: hidden;
+ &.inactive {
+ border: none;
+ }
+ }
+ p {
+ width: 100%;
+ height: 100%;
+ }
+ &:hover .collectionSchemaView-cellContents-docExpander {
+ display: block;
+ }
+ .collectionSchemaView-cellContents-document {
+ display: inline-block;
+ }
+ .collectionSchemaView-cellContents-docButton {
+ float: right;
+ width: '15px';
+ height: '15px';
+ }
+ .collectionSchemaView-dropdownWrapper {
+ border: grey;
+ border-style: solid;
+ border-width: 1px;
+ height: 30px;
+ .collectionSchemaView-dropdownButton {
+ //display: inline-block;
+ float: left;
+ height: 100%;
+ }
+ .collectionSchemaView-dropdownText {
+ display: inline-block;
+ //float: right;
+ height: 100%;
+ display: 'flex';
+ font-size: 13;
+ justify-content: 'center';
+ align-items: 'center';
+ }
+ }
+ .collectionSchemaView-dropdownContainer {
+ position: absolute;
+ border: 1px solid rgba(0, 0, 0, 0.04);
+ box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14);
+ .collectionSchemaView-dropdownOption:hover {
+ background-color: rgba(0, 0, 0, 0.14);
+ cursor: pointer;
+ }
+ }
+}
+
+.collectionSchemaView-cellContents-docExpander {
+ height: 30px;
+ width: 30px;
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ background-color: lightgray;
+}
+
+.doc-drag-over {
+ background-color: red;
+}
+
+.collectionSchemaView-toolbar {
+ z-index: 100;
+}
+
+.collectionSchemaView-toolbar {
+ height: 30px;
+ display: flex;
+ justify-content: flex-end;
+ padding: 0 10px;
+ border-bottom: 2px solid gray;
+ .collectionSchemaView-toolbar-item {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+}
+
+#preview-schema-checkbox-div {
+ margin-left: 20px;
+ font-size: 12px;
+}
+
+.collectionSchemaView-table {
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ padding: 3px;
+}
+
+.rt-td.rt-expandable {
+ overflow: visible;
+ position: relative;
+ height: 100%;
+ z-index: 1;
+}
+
+.reactTable-sub {
+ background-color: rgb(252, 252, 252);
+ width: 100%;
+ .rt-thead {
+ display: none;
+ }
+ .row-dragger {
+ background-color: rgb(252, 252, 252);
+ }
+ .rt-table {
+ background-color: rgb(252, 252, 252);
+ }
+ .collectionSchemaView-table {
+ width: 100%;
+ border: solid 1px;
+ overflow: visible;
+ padding: 0px;
+ }
+}
+
+.collectionSchemaView-expander {
+ height: 100%;
+ min-height: 30px;
+ position: absolute;
+ color: gray;
+ width: 20;
+ height: auto;
+ left: 55;
+ svg {
+ position: absolute;
+ top: 50%;
+ left: 10;
+ transform: translate(-50%, -50%);
+ }
+}
+
+.collectionSchemaView-addRow {
+ color: gray;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ cursor: pointer;
+ font-size: 10.5px;
+ margin-left: 50px;
+ margin-top: 10px;
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 19:48:04 +0000