From 917ebb4a7b6840f57abbf8dbcc197919f3ee3aac Mon Sep 17 00:00:00 2001 From: geireann Date: Wed, 18 Aug 2021 17:27:07 -0400 Subject: updates towards a menu --- src/client/views/collections/CollectionMenu.scss | 1255 +++++++++++----------- 1 file changed, 643 insertions(+), 612 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.scss') diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index f04b19ef7..163566d22 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -1,628 +1,659 @@ @import "../global/globalCssVariables"; -.collectionMenu-cont { - position: relative; - display: inline-flex; - width: 100%; - opacity: 0.9; - z-index: 901; - transition: top .5s; - background: $dark-gray; - color: $white; - transform-origin: top left; - top: 0; - width: 100%; - - .recordButtonOutline { - border-radius: 100%; - width: 18px; - height: 18px; - border: solid 1px $white; - display: flex; - align-items: center; - justify-content: center; - } - - .recordButtonInner { - border-radius: 100%; - width: 70%; - height: 70%; - background: $white; - } - - .collectionMenu { - display: flex; - height: 100%; - overflow: visible; - z-index: 901; - border: unset; - - .collectionMenu-divider { - height: 100%; - margin-left: 3px; - margin-right: 3px; - width: 2px; - background-color: $medium-gray; - } - - .collectionViewBaseChrome { - display: flex; - align-items: center; - - .collectionViewBaseChrome-viewPicker { - font-size: $small-text; - outline-color: $black; - color: $white; - border: none; - background: $dark-gray; - } - - .collectionViewBaseChrome-viewPicker:focus { - outline: none; - border: none; - } - - .collectionViewBaseChrome-viewPicker:active { - outline-color: $black; - } - - .collectionViewBaseChrome-button { - font-size: $small-text; - text-transform: uppercase; - letter-spacing: 2px; - background: $white; - color: $pink; - outline-color: $black; - border: none; - padding: 12px 10px 11px 10px; - margin-left: 10px; - } - - .collectionViewBaseChrome-cmdPicker { - margin-left: 3px; - margin-right: 0px; - font-size: $small-text; - text-transform: capitalize; - color: $white; - border: none; - background: $dark-gray; - } - - .collectionViewBaseChrome-cmdPicker:focus { - border: none; - outline: none; - } - - .commandEntry-outerDiv { - pointer-events: all; - background-color: transparent; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - height: 100%; - overflow: hidden; - - .commandEntry-drop { - color: $white; - width: 30px; - margin-top: auto; - margin-bottom: auto; - } - } - - .commandEntry-outerDiv:hover{ - background-color: $drop-shadow; - - .collectionViewBaseChrome-viewPicker, - .collectionViewBaseChrome-cmdPicker{ - background: $dark-gray; - } - } - - .collectionViewBaseChrome-collapse { - transition: all .5s, opacity 0.3s; - position: absolute; - width: 30px; - transform-origin: top left; - pointer-events: all; - // margin-top: 10px; - } - - @media only screen and (max-device-width: 480px) { - .collectionViewBaseChrome-collapse { - display: none; - } - } - - .collectionViewBaseChrome-template, - .collectionViewBaseChrome-viewModes { - align-items: center; - height: 100%; - display: flex; - background: transparent; - color: $medium-gray; - justify-content: center; - } - - .collectionViewBaseChrome-viewSpecs { - margin-left: 5px; - display: grid; - border: none; - border-right: solid $medium-gray 1px; - - .collectionViewBaseChrome-filterIcon { - position: relative; - display: flex; - margin: auto; - background: $dark-gray; - color: $white; - width: 30px; - height: 30px; - align-items: center; - justify-content: center; - border: none; - border-right: solid $medium-gray 1px; - } - - .collectionViewBaseChrome-viewSpecsInput { - padding: 12px 10px 11px 10px; - border: 0px; - color: $medium-gray; - text-align: center; - letter-spacing: 2px; - outline-color: $black; - font-size: $small-text; - background: $white; - height: 100%; - width: 75px; - } - - .collectionViewBaseChrome-viewSpecsMenu { - overflow: hidden; - transition: height .5s, display .5s; - position: absolute; - top: 60px; - z-index: 100; - display: flex; - flex-direction: column; - background: $white; - box-shadow: $medium-gray 2px 2px 4px; - - .qs-datepicker { - left: unset; - right: 0; - } - - .collectionViewBaseChrome-viewSpecsMenu-row { - display: grid; - grid-template-columns: 150px 200px 150px; - margin-top: 10px; - margin-right: 10px; - - .collectionViewBaseChrome-viewSpecsMenu-rowLeft, - .collectionViewBaseChrome-viewSpecsMenu-rowMiddle, - .collectionViewBaseChrome-viewSpecsMenu-rowRight { - font-size: $small-text; - letter-spacing: 2px; - color: $medium-gray; - margin-left: 10px; - padding: 5px; - border: none; - outline-color: $black; - } - } - - .collectionViewBaseChrome-viewSpecsMenu-lastRow { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-gap: 10px; - margin: 10px; - } - } - } - } - - .collectionStackingViewChrome-cont, - .collectionTreeViewChrome-cont, - .collection3DCarouselViewChrome-cont { - display: flex; - justify-content: space-between; - } - - .collectionGridViewChrome-cont { - display: flex; - margin-left: 10; - - .collectionGridViewChrome-viewPicker { - font-size: $small-text; - //text-transform: uppercase; - //letter-spacing: 2px; - background: $dark-gray; - color: $white; - outline-color: $black; - color: $white; - border: none; - border-right: solid $medium-gray 1px; - } - - .collectionGridViewChrome-viewPicker:active { - outline-color: $black; - } - - .grid-control { - align-self: center; - display: flex; - flex-direction: row; - margin-right: 5px; - - .grid-icon { - margin-right: 5px; - align-self: center; - } - - .flexLabel { - margin-bottom: 0; - } - - .collectionGridViewChrome-entryBox { - width: 50%; - color: $black; - } - - .collectionGridViewChrome-columnButton { - color: $black; - } - } - } - - .collectionStackingViewChrome-sort, - .collectionTreeViewChrome-sort { - display: flex; - align-items: center; - justify-content: space-between; - - .collectionStackingViewChrome-sortIcon, - .collectionTreeViewChrome-sortIcon { - transition: transform .5s; - margin-left: 10px; - } - } - - button:hover { - transform: scale(1); - } - - - .collectionStackingViewChrome-pivotField-cont, - .collectionTreeViewChrome-pivotField-cont, - .collection3DCarouselViewChrome-scrollSpeed-cont { - justify-self: right; - align-items: center; - display: flex; - grid-auto-columns: auto; - font-size: $small-text; - letter-spacing: 2px; - - .collectionStackingViewChrome-pivotField-label, - .collectionTreeViewChrome-pivotField-label, - .collection3DCarouselViewChrome-scrollSpeed-label { - grid-column: 1; - margin-right: 7px; - user-select: none; - font-family: $sans-serif; - letter-spacing: normal; - } - - .collectionStackingViewChrome-sortIcon { - transition: transform .5s; - grid-column: 3; - text-align: center; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - width: 25px; - height: 25px; - border-radius: 100%; - } - - .collectionStackingViewChrome-sortIcon:hover { - background-color: $drop-shadow; - } - - .collectionStackingViewChrome-pivotField, - .collectionTreeViewChrome-pivotField, - .collection3DCarouselViewChrome-scrollSpeed { - color: $white; - grid-column: 2; - grid-row: 1; - width: 90%; - min-width: 100px; - display: flex; - height: 80%; - border-radius: 7px; - align-items: center; - background: $white; - - .editable-view-input, - input, - .editableView-container-editing-oneLine, - .editableView-container-editing { - margin: auto; - border: 0px; - color: $light-gray !important; - text-align: center; - letter-spacing: 2px; - outline-color: $black; - height: 100%; - } - - .react-autosuggest__container { - margin: 0; - color: $medium-gray; - padding: 0px; - } - } - } - - .collectionStackingViewChrome-pivotField:hover, - .collectionTreeViewChrome-pivotField:hover, - .collection3DCarouselViewChrome-scrollSpeed:hover { - cursor: text; - } - - } -} - -.collectionMenu-webUrlButtons { - margin-left: 44; - background: lightGray; +.collectionMenu-container { display: flex; -} - -.webBox-urlEditor { - position: relative; - opacity: 0.9; - z-index: 901; - transition: top .5s; - - .urlEditor { - display: grid; - grid-template-columns: 1fr auto; - padding-bottom: 10px; - overflow: hidden; - margin-top: 5px; - height: 35px; - - .editorBase { - display: flex; - - .editor-collapse { - transition: all .5s, opacity 0.3s; - position: absolute; - width: 40px; - transform-origin: top left; - } - - .switchToText { - color: $medium-gray; - } - - .switchToText:hover { - color: $dark-gray; - } - } - - button:hover { - transform: scale(1); - } - } -} - -.collectionMenu-urlInput { - padding: 12px 10px 11px 10px; - border: 0px; - color: $black; - font-size: $small-text; - letter-spacing: 2px; - outline-color: $black; - background: $white; - width: 100%; - min-width: 350px; - margin-right: 10px; - height: 100%; -} - -.collectionFreeFormMenu-cont { - display: inline-flex; position: relative; + align-content: center; + justify-content: space-between; + background-color: $dark-gray; + height: 35px; + border-bottom: $standard-border; + padding-right: 5px; align-items: center; - height: 100%; - - .color-previewI { - width: 60%; - top: 80%; - position: absolute; - height: 4px; - } - - .color-previewII { - width: 80%; - height: 80%; - margin-left: 10%; - position: absolute; - bottom: 5; - } - - .btn-group { - display: grid; - grid-template-columns: auto auto auto auto; - margin: auto; - /* Make the buttons appear below each other */ - } - .btn-draw { - display: inline-flex; - margin: auto; - /* Make the buttons appear below each other */ - } - - .fwdKeyframe, - .numKeyframe, - .backKeyframe { + .collectionMenu-hardCodedButton { cursor: pointer; - position: relative; - width: 20; - height: 30; - bottom: 0; - background: $dark-gray; - display: inline-flex; - align-items: center; color: $white; - } - - .backKeyframe { - svg { - display: block; - margin: auto; - } - } - - - .numKeyframe { - flex-direction: column; - padding-top: 5px; - } - - .fwdKeyframe { - svg { - display: block; - margin: auto; - } - - border-right: solid $medium-gray 1px; - } -} - -.collectionSchemaViewChrome-cont { - display: flex; - font-size: $small-text; - - .collectionSchemaViewChrome-toggle { - display: flex; - margin-left: 10px; - } - - .collectionSchemaViewChrome-label { - text-transform: uppercase; - letter-spacing: 2px; - margin-right: 5px; + width: 31.5px; + height: 90%; + padding: 5; + text-align: center; display: flex; - flex-direction: column; justify-content: center; - } - - .collectionSchemaViewChrome-toggler { - width: 100px; - height: 35px; - background-color: $black; + align-items: center; position: relative; - } - - .collectionSchemaViewChrome-togglerButton { - width: 47px; - height: 30px; - background-color: $light-gray; - // position: absolute; - transition: all 0.5s ease; - // top: 3px; - margin-top: 3px; - color: $medium-gray; - letter-spacing: 2px; - text-transform: uppercase; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; + transition: 0.2s; - &.on { - margin-left: 3px; - } - - &.off { - margin-left: 50px; + &:hover { + border-radius:5px; + background-color: rgba(0,0,0,0.2); } } } - -.commandEntry-outerDiv { - display: flex; - flex-direction: column; - height: 40px; -} - -.commandEntry-inputArea { - display: flex; - flex-direction: row; - width: 150px; - margin: auto auto auto auto; -} - -.react-autosuggest__container { - position: relative; - width: 100%; - margin-left: 5px; - margin-right: 5px; -} - -.react-autosuggest__input { - border: 1px solid $light-gray; - border-radius: 4px; - width: 100%; -} - -.react-autosuggest__input--focused { - outline: none; -} - -.react-autosuggest__input--open { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -.react-autosuggest__suggestions-container { - display: none; -} - -.react-autosuggest__suggestions-container--open { - display: block; - position: fixed; - overflow-y: auto; - max-height: 400px; - width: 180px; - border: 1px solid $light-gray; - background-color: $white; - font-family: $sans-serif; - font-weight: 300; - font-size: $large-header; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - z-index: 2; -} - -.react-autosuggest__suggestions-list { - margin: 0; - padding: 0; - list-style-type: none; -} - -.react-autosuggest__suggestion { - cursor: pointer; - padding: 10px 20px; -} - -.react-autosuggest__suggestion--highlighted { - background-color: $light-gray; -} \ No newline at end of file +// .collectionMenu-cont { +// position: relative; +// display: inline-flex; +// width: 100%; +// opacity: 0.9; +// z-index: 901; +// transition: top .5s; +// background: $dark-gray; +// color: $white; +// transform-origin: top left; +// top: 0; +// width: 100%; + +// .recordButtonOutline { +// border-radius: 100%; +// width: 18px; +// height: 18px; +// border: solid 1px $white; +// display: flex; +// align-items: center; +// justify-content: center; +// } + +// .recordButtonInner { +// border-radius: 100%; +// width: 70%; +// height: 70%; +// background: $white; +// } + +// .collectionMenu { +// display: flex; +// height: 100%; +// overflow: visible; +// z-index: 901; +// border: unset; + +// .collectionMenu-divider { +// height: 100%; +// margin-left: 3px; +// margin-right: 3px; +// width: 2px; +// background-color: $medium-gray; +// } + +// .collectionViewBaseChrome { +// display: flex; +// align-items: center; + +// .collectionViewBaseChrome-viewPicker { +// font-size: $small-text; +// outline-color: $black; +// color: $white; +// border: none; +// background: $dark-gray; +// } + +// .collectionViewBaseChrome-viewPicker:focus { +// outline: none; +// border: none; +// } + +// .collectionViewBaseChrome-viewPicker:active { +// outline-color: $black; +// } + +// .collectionViewBaseChrome-button { +// font-size: $small-text; +// text-transform: uppercase; +// letter-spacing: 2px; +// background: $white; +// color: $pink; +// outline-color: $black; +// border: none; +// padding: 12px 10px 11px 10px; +// margin-left: 10px; +// } + +// .collectionViewBaseChrome-cmdPicker { +// margin-left: 3px; +// margin-right: 0px; +// font-size: $small-text; +// text-transform: capitalize; +// color: $white; +// border: none; +// background: $dark-gray; +// } + +// .collectionViewBaseChrome-cmdPicker:focus { +// border: none; +// outline: none; +// } + +// .commandEntry-outerDiv { +// pointer-events: all; +// background-color: transparent; +// display: flex; +// flex-direction: row; +// align-items: center; +// justify-content: center; +// height: 100%; +// overflow: hidden; + +// .commandEntry-drop { +// color: $white; +// width: 30px; +// margin-top: auto; +// margin-bottom: auto; +// } +// } + +// .commandEntry-outerDiv:hover{ +// background-color: $drop-shadow; + +// .collectionViewBaseChrome-viewPicker, +// .collectionViewBaseChrome-cmdPicker{ +// background: $dark-gray; +// } +// } + +// .collectionViewBaseChrome-collapse { +// transition: all .5s, opacity 0.3s; +// position: absolute; +// width: 30px; +// transform-origin: top left; +// pointer-events: all; +// // margin-top: 10px; +// } + +// @media only screen and (max-device-width: 480px) { +// .collectionViewBaseChrome-collapse { +// display: none; +// } +// } + +// .collectionViewBaseChrome-template, +// .collectionViewBaseChrome-viewModes { +// align-items: center; +// height: 100%; +// display: flex; +// background: transparent; +// color: $medium-gray; +// justify-content: center; +// } + +// .collectionViewBaseChrome-viewSpecs { +// margin-left: 5px; +// display: grid; +// border: none; +// border-right: solid $medium-gray 1px; + +// .collectionViewBaseChrome-filterIcon { +// position: relative; +// display: flex; +// margin: auto; +// background: $dark-gray; +// color: $white; +// width: 30px; +// height: 30px; +// align-items: center; +// justify-content: center; +// border: none; +// border-right: solid $medium-gray 1px; +// } + +// .collectionViewBaseChrome-viewSpecsInput { +// padding: 12px 10px 11px 10px; +// border: 0px; +// color: $medium-gray; +// text-align: center; +// letter-spacing: 2px; +// outline-color: $black; +// font-size: $small-text; +// background: $white; +// height: 100%; +// width: 75px; +// } + +// .collectionViewBaseChrome-viewSpecsMenu { +// overflow: hidden; +// transition: height .5s, display .5s; +// position: absolute; +// top: 60px; +// z-index: 100; +// display: flex; +// flex-direction: column; +// background: $white; +// box-shadow: $medium-gray 2px 2px 4px; + +// .qs-datepicker { +// left: unset; +// right: 0; +// } + +// .collectionViewBaseChrome-viewSpecsMenu-row { +// display: grid; +// grid-template-columns: 150px 200px 150px; +// margin-top: 10px; +// margin-right: 10px; + +// .collectionViewBaseChrome-viewSpecsMenu-rowLeft, +// .collectionViewBaseChrome-viewSpecsMenu-rowMiddle, +// .collectionViewBaseChrome-viewSpecsMenu-rowRight { +// font-size: $small-text; +// letter-spacing: 2px; +// color: $medium-gray; +// margin-left: 10px; +// padding: 5px; +// border: none; +// outline-color: $black; +// } +// } + +// .collectionViewBaseChrome-viewSpecsMenu-lastRow { +// display: grid; +// grid-template-columns: 1fr 1fr 1fr; +// grid-gap: 10px; +// margin: 10px; +// } +// } +// } +// } + +// .collectionStackingViewChrome-cont, +// .collectionTreeViewChrome-cont, +// .collection3DCarouselViewChrome-cont { +// display: flex; +// justify-content: space-between; +// } + +// .collectionGridViewChrome-cont { +// display: flex; +// margin-left: 10; + +// .collectionGridViewChrome-viewPicker { +// font-size: $small-text; +// //text-transform: uppercase; +// //letter-spacing: 2px; +// background: $dark-gray; +// color: $white; +// outline-color: $black; +// color: $white; +// border: none; +// border-right: solid $medium-gray 1px; +// } + +// .collectionGridViewChrome-viewPicker:active { +// outline-color: $black; +// } + +// .grid-control { +// align-self: center; +// display: flex; +// flex-direction: row; +// margin-right: 5px; + +// .grid-icon { +// margin-right: 5px; +// align-self: center; +// } + +// .flexLabel { +// margin-bottom: 0; +// } + +// .collectionGridViewChrome-entryBox { +// width: 50%; +// color: $black; +// } + +// .collectionGridViewChrome-columnButton { +// color: $black; +// } +// } +// } + +// .collectionStackingViewChrome-sort, +// .collectionTreeViewChrome-sort { +// display: flex; +// align-items: center; +// justify-content: space-between; + +// .collectionStackingViewChrome-sortIcon, +// .collectionTreeViewChrome-sortIcon { +// transition: transform .5s; +// margin-left: 10px; +// } +// } + +// button:hover { +// transform: scale(1); +// } + + +// .collectionStackingViewChrome-pivotField-cont, +// .collectionTreeViewChrome-pivotField-cont, +// .collection3DCarouselViewChrome-scrollSpeed-cont { +// justify-self: right; +// align-items: center; +// display: flex; +// grid-auto-columns: auto; +// font-size: $small-text; +// letter-spacing: 2px; + +// .collectionStackingViewChrome-pivotField-label, +// .collectionTreeViewChrome-pivotField-label, +// .collection3DCarouselViewChrome-scrollSpeed-label { +// grid-column: 1; +// margin-right: 7px; +// user-select: none; +// font-family: $sans-serif; +// letter-spacing: normal; +// } + +// .collectionStackingViewChrome-sortIcon { +// transition: transform .5s; +// grid-column: 3; +// text-align: center; +// display: flex; +// justify-content: center; +// align-items: center; +// cursor: pointer; +// width: 25px; +// height: 25px; +// border-radius: 100%; +// } + +// .collectionStackingViewChrome-sortIcon:hover { +// background-color: $drop-shadow; +// } + +// .collectionStackingViewChrome-pivotField, +// .collectionTreeViewChrome-pivotField, +// .collection3DCarouselViewChrome-scrollSpeed { +// color: $white; +// grid-column: 2; +// grid-row: 1; +// width: 90%; +// min-width: 100px; +// display: flex; +// height: 80%; +// border-radius: 7px; +// align-items: center; +// background: $white; + +// .editable-view-input, +// input, +// .editableView-container-editing-oneLine, +// .editableView-container-editing { +// margin: auto; +// border: 0px; +// color: $light-gray !important; +// text-align: center; +// letter-spacing: 2px; +// outline-color: $black; +// height: 100%; +// } + +// .react-autosuggest__container { +// margin: 0; +// color: $medium-gray; +// padding: 0px; +// } +// } +// } + +// .collectionStackingViewChrome-pivotField:hover, +// .collectionTreeViewChrome-pivotField:hover, +// .collection3DCarouselViewChrome-scrollSpeed:hover { +// cursor: text; +// } + +// } +// } + +// .collectionMenu-webUrlButtons { +// margin-left: 44; +// background: lightGray; +// display: flex; +// } + +// .webBox-urlEditor { +// position: relative; +// opacity: 0.9; +// z-index: 901; +// transition: top .5s; + +// .urlEditor { +// display: grid; +// grid-template-columns: 1fr auto; +// padding-bottom: 10px; +// overflow: hidden; +// margin-top: 5px; +// height: 35px; + +// .editorBase { +// display: flex; + +// .editor-collapse { +// transition: all .5s, opacity 0.3s; +// position: absolute; +// width: 40px; +// transform-origin: top left; +// } + +// .switchToText { +// color: $medium-gray; +// } + +// .switchToText:hover { +// color: $dark-gray; +// } +// } + +// button:hover { +// transform: scale(1); +// } +// } +// } + +// .collectionMenu-urlInput { +// padding: 12px 10px 11px 10px; +// border: 0px; +// color: $black; +// font-size: $small-text; +// letter-spacing: 2px; +// outline-color: $black; +// background: $white; +// width: 100%; +// min-width: 350px; +// margin-right: 10px; +// height: 100%; +// } + +// .collectionFreeFormMenu-cont { +// display: inline-flex; +// position: relative; +// align-items: center; +// height: 100%; + +// .color-previewI { +// width: 60%; +// top: 80%; +// position: absolute; +// height: 4px; +// } + +// .color-previewII { +// width: 80%; +// height: 80%; +// margin-left: 10%; +// position: absolute; +// bottom: 5; +// } + +// .btn-group { +// display: grid; +// grid-template-columns: auto auto auto auto; +// margin: auto; +// /* Make the buttons appear below each other */ +// } + +// .btn-draw { +// display: inline-flex; +// margin: auto; +// /* Make the buttons appear below each other */ +// } + +// .fwdKeyframe, +// .numKeyframe, +// .backKeyframe { +// cursor: pointer; +// position: relative; +// width: 20; +// height: 30; +// bottom: 0; +// background: $dark-gray; +// display: inline-flex; +// align-items: center; +// color: $white; +// } + +// .backKeyframe { +// svg { +// display: block; +// margin: auto; +// } +// } + + +// .numKeyframe { +// flex-direction: column; +// padding-top: 5px; +// } + +// .fwdKeyframe { +// svg { +// display: block; +// margin: auto; +// } + +// border-right: solid $medium-gray 1px; +// } +// } + +// .collectionSchemaViewChrome-cont { +// display: flex; +// font-size: $small-text; + +// .collectionSchemaViewChrome-toggle { +// display: flex; +// margin-left: 10px; +// } + +// .collectionSchemaViewChrome-label { +// text-transform: uppercase; +// letter-spacing: 2px; +// margin-right: 5px; +// display: flex; +// flex-direction: column; +// justify-content: center; +// } + +// .collectionSchemaViewChrome-toggler { +// width: 100px; +// height: 35px; +// background-color: $black; +// position: relative; +// } + +// .collectionSchemaViewChrome-togglerButton { +// width: 47px; +// height: 30px; +// background-color: $light-gray; +// // position: absolute; +// transition: all 0.5s ease; +// // top: 3px; +// margin-top: 3px; +// color: $medium-gray; +// letter-spacing: 2px; +// text-transform: uppercase; +// display: flex; +// flex-direction: column; +// justify-content: center; +// text-align: center; + +// &.on { +// margin-left: 3px; +// } + +// &.off { +// margin-left: 50px; +// } +// } +// } + + +// .commandEntry-outerDiv { +// display: flex; +// flex-direction: column; +// height: 40px; +// } + +// .commandEntry-inputArea { +// display: flex; +// flex-direction: row; +// width: 150px; +// margin: auto auto auto auto; +// } + +// .react-autosuggest__container { +// position: relative; +// width: 100%; +// margin-left: 5px; +// margin-right: 5px; +// } + +// .react-autosuggest__input { +// border: 1px solid $light-gray; +// border-radius: 4px; +// width: 100%; +// } + +// .react-autosuggest__input--focused { +// outline: none; +// } + +// .react-autosuggest__input--open { +// border-bottom-left-radius: 0; +// border-bottom-right-radius: 0; +// } + +// .react-autosuggest__suggestions-container { +// display: none; +// } + +// .react-autosuggest__suggestions-container--open { +// display: block; +// position: fixed; +// overflow-y: auto; +// max-height: 400px; +// width: 180px; +// border: 1px solid $light-gray; +// background-color: $white; +// font-family: $sans-serif; +// font-weight: 300; +// font-size: $large-header; +// border-bottom-left-radius: 4px; +// border-bottom-right-radius: 4px; +// z-index: 2; +// } + +// .react-autosuggest__suggestions-list { +// margin: 0; +// padding: 0; +// list-style-type: none; +// } + +// .react-autosuggest__suggestion { +// cursor: pointer; +// padding: 10px 20px; +// } + +// .react-autosuggest__suggestion--highlighted { +// background-color: $light-gray; +// } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 0eede4546f2ddc862a42a43e0daa1fc02dfe6cae Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Fri, 20 Aug 2021 13:05:04 -0400 Subject: more updates --- src/client/documents/Documents.ts | 3 ++- src/client/util/CurrentUserUtils.ts | 14 +++++++------- src/client/views/DocumentDecorations.scss | 6 +++++- src/client/views/collections/CollectionMenu.scss | 8 ++++---- src/client/views/collections/CollectionMenu.tsx | 19 +++++++++++-------- .../collectionLinearView/CollectionLinearView.scss | 13 +++++++------ .../collectionLinearView/CollectionLinearView.tsx | 16 +++++++++++----- src/client/views/global/globalCssVariables.scss | 9 +++++++-- src/client/views/global/globalEnums.tsx | 1 + src/client/views/nodes/button/FontIconBox.scss | 10 +++++----- src/client/views/topbar/TopBar.scss | 22 ++++++++++++---------- src/client/views/topbar/TopBar.tsx | 2 +- 12 files changed, 73 insertions(+), 50 deletions(-) (limited to 'src/client/views/collections/CollectionMenu.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index f6b2e0736..b7ba6f1fe 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -230,6 +230,8 @@ export class DocumentOptions { linearViewExpandable?: boolean; // can linear view be expanded linearViewToggleButton?: string; // button to open close linear view group linearViewSubMenu?: boolean; + flexGap?: number; // Linear view flex gap + flexDirection?: "unset" | "row" | "column" | "row-reverse" | "column-reverse"; layout_linkView?: Doc; // view template for a link document layout_keyValue?: string; // view tempalte for key value docs @@ -277,7 +279,6 @@ export class DocumentOptions { text?: string; textTransform?: string; // is linear view expanded letterSpacing?: string; // is linear view expanded - flexDirection?: "unset" | "row" | "column" | "row-reverse" | "column-reverse"; selectedIndex?: number; // which item in a linear view has been selected using the "thumb doc" ui clipboard?: Doc; searchQuery?: string; // for quersyBox diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 0440367de..0210b5a1d 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -892,10 +892,10 @@ export class CurrentUserUtils { CurrentUserUtils.setupUserDoc(doc); } - static blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, { - ...opts, _gridGap: 5, _xMargin: 5, _yMargin: 5, _width: 100, boxShadow: "0 0", _forceActive: true, + static linearButtonList = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, { + ...opts, _gridGap: 5, _xMargin: 5, _yMargin: 5, boxShadow: "0 0", _forceActive: true, dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), - _lockedPosition: true, linearViewIsExpanded: true, system: true + _lockedPosition: true, linearViewIsExpanded: true, system: true, flexDirection: "column" })) as any as Doc static ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ @@ -911,7 +911,7 @@ export class CurrentUserUtils { doc["dockedBtn-redo"] = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript("redo()"), dontUndo: true, _stayInCollection: true, _dropAction: "alias", _hideContextMenu: true, _removeDropProperties: new List(["dropAction", "_hideContextMenu", "stayInCollection"]), toolTip: "Click to redo", title: "redo", icon: "redo-alt", system: true }); } if (doc.dockedBtns === undefined) { - doc.dockedBtns = CurrentUserUtils.blist({ title: "docked buttons", linearViewExpandable: true, ignoreClick: true }, [doc["dockedBtn-undo"] as Doc, doc["dockedBtn-redo"] as Doc]); + doc.dockedBtns = CurrentUserUtils.linearButtonList({ title: "docked buttons", linearViewExpandable: true, ignoreClick: true }, [doc["dockedBtn-undo"] as Doc, doc["dockedBtn-redo"] as Doc]); } (doc["dockedBtn-undo"] as Doc).dontUndo = true; (doc["dockedBtn-redo"] as Doc).dontUndo = true; @@ -1013,7 +1013,7 @@ export class CurrentUserUtils { onClick: click ? ScriptField.MakeScript(click, { doc: Doc.name }) : undefined })); }); - docList.push(CurrentUserUtils.blist({ linearViewSubMenu: true, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, textDocList)); + docList.push(CurrentUserUtils.linearButtonList({ linearViewSubMenu: true, flexGap: 5, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, textDocList)); } else if (type === "InkMenu") { const inkBtns = (CurrentUserUtils.inkTools(doc)).map(({ title, toolTip, icon, btnType, click }) => { textDocList.push(Docs.Create.FontIconDocument({ @@ -1039,7 +1039,7 @@ export class CurrentUserUtils { onClick: click ? ScriptField.MakeScript(click, { doc: Doc.name }) : undefined })); }); - docList.push(CurrentUserUtils.blist({ linearViewSubMenu: true, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, textDocList)); + docList.push(CurrentUserUtils.linearButtonList({ linearViewSubMenu: true, flexGap: 5, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, textDocList)); } else { docList.push(Docs.Create.FontIconDocument({ _nativeWidth: width ? width : 25, @@ -1067,7 +1067,7 @@ export class CurrentUserUtils { }); if (doc.contextMenuBtns === undefined) { - doc.contextMenuBtns = CurrentUserUtils.blist({ title: "menu buttons", ignoreClick: true, linearViewExpandable: false, _height: 35 }, docList); + doc.contextMenuBtns = CurrentUserUtils.linearButtonList({ title: "menu buttons", flexGap: 0, ignoreClick: true, linearViewExpandable: false, _height: 35 }, docList); } } // sets up the default set of documents to be shown in the Overlay layer diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 316f63240..d34efd01a 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -51,6 +51,7 @@ $linkGap : 3px; pointer-events: auto; background: $medium-gray; opacity: 0.1; + &:hover { opacity: 1; } @@ -94,6 +95,7 @@ $linkGap : 3px; position: absolute; } } + .documentDecorations-rotation { background: transparent; right: -15; @@ -189,6 +191,7 @@ $linkGap : 3px; margin-left: 5px; height: 22px; position: absolute; + .documentDecorations-titleSpan { width: 100%; border-radius: 8px; @@ -263,7 +266,7 @@ $linkGap : 3px; } .link-button-container { - border-radius: 10px; + border-radius: 13px; width: max-content; height: auto; display: flex; @@ -338,6 +341,7 @@ $linkGap : 3px; .documentdecorations-icon { margin: 0px; } + .templating-button, .docDecs-tagButton { width: 20px; diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 163566d22..c35f088a6 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -14,8 +14,8 @@ .collectionMenu-hardCodedButton { cursor: pointer; color: $white; - width: 31.5px; - height: 90%; + width: 25px; + height: 25px; padding: 5; text-align: center; display: flex; @@ -23,10 +23,10 @@ align-items: center; position: relative; transition: 0.2s; + border-radius: 3px; &:hover { - border-radius:5px; - background-color: rgba(0,0,0,0.2); + background-color: rgba(0, 0, 0, 0.2); } } } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 1f36e94cf..77e5132fc 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -40,6 +40,7 @@ import { CollectionLinearView } from "./CollectionLinearView"; import "./CollectionMenu.scss"; import { CollectionViewType, COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { TabDocView } from "./TabDocView"; +import { Colors } from "../global/globalEnums"; @observer export class CollectionMenu extends AntimodeMenu { @@ -135,7 +136,9 @@ export class CollectionMenu extends AntimodeMenu { const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Properties Panel" : "Open Properties Panel"; const prop = {propTitle}} key="properties" placement="bottom"> -
0 ? Colors.MEDIUM_BLUE : undefined }} + key="properties" onPointerDown={this.toggleProperties}>
@@ -143,11 +146,11 @@ export class CollectionMenu extends AntimodeMenu { // NEW BUTTONS //dash col linear view buttons - const contMenuButtons = -
- {this.contMenuButtons} - {prop} -
; + const contMenuButtons = +
+ {this.contMenuButtons} + {prop} +
; return contMenuButtons; @@ -779,7 +782,7 @@ export class CollectionFreeFormViewChrome extends React.Component { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })} style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001, fontSize: this._dotsize[i], padding: 0, textAlign: "center" }}> • - + )} ; } @@ -1050,7 +1053,7 @@ export class CollectionTreeViewChrome extends React.Component
Sort -
+
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss index 2b3f8f2c9..44752e034 100644 --- a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss +++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss @@ -5,12 +5,12 @@ overflow: visible; height: 100%; pointer-events: none; - + &.true { padding-left: 5px; padding-right: 5px; border-left: $standard-border; - background-color: #4476f73d; + background-color: $medium-blue-alt; } >input:not(:checked)~&.true { @@ -21,8 +21,9 @@ display: flex; height: 100%; align-items: center; + gap: 5px; - .collectionView{ + .collectionView { overflow: visible !important; } @@ -56,7 +57,7 @@ } .bottomPopup-descriptions { - cursor:pointer; + cursor: pointer; display: inline; white-space: nowrap; padding-left: 8px; @@ -69,7 +70,7 @@ } .bottomPopup-exit { - cursor:pointer; + cursor: pointer; display: inline; white-space: nowrap; margin-right: 10px; @@ -97,7 +98,7 @@ transition: transform 0.2s; align-items: center; justify-content: center; - transition:0.1s; + transition: 0.1s; &:hover { transform: scale(1.05); diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx index 3327bef36..713d93f97 100644 --- a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx +++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx @@ -108,12 +108,13 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { } render() { - const guid = Utils.GenerateGuid(); - const flexDir: any = StrCast(this.Document.flexDirection); - const expandable: boolean = BoolCast(this.props.Document.linearViewExpandable); + const guid = Utils.GenerateGuid(); // Generate a unique ID to use as the label + const flexDir: any = StrCast(this.Document.flexDirection); // Specify direction of linear view content + const flexGap: number = NumCast(this.Document.flexGap); // Specify the gap between linear view content + const expandable: boolean = BoolCast(this.props.Document.linearViewExpandable); // Specify whether it is expandable or not const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); - const icon: string = StrCast(this.props.Document.icon); + const icon: string = StrCast(this.props.Document.icon); // Menu opener toggle const menuOpener =