diff --git a/src/plugins/imagery/components/ImageryViewLayout.vue b/src/plugins/imagery/components/ImageryViewLayout.vue index 9a08fb91e9..c308e4c366 100644 --- a/src/plugins/imagery/components/ImageryViewLayout.vue +++ b/src/plugins/imagery/components/ImageryViewLayout.vue @@ -1,90 +1,68 @@ diff --git a/src/ui/components/toggle-switch.scss b/src/ui/components/toggle-switch.scss index 045cd827fa..20ca28a648 100644 --- a/src/ui/components/toggle-switch.scss +++ b/src/ui/components/toggle-switch.scss @@ -2,15 +2,40 @@ $d: 12px; $m: 2px; $br: $d/1.5; - cursor: pointer; - overflow: hidden; - display: inline; + display: inline-flex; + align-items: center; vertical-align: middle; + &__control, + &__label { + flex: 0 0 auto; + } + + &__control { + cursor: pointer; + overflow: hidden; + display: block; + } + + input { + opacity: 0; + width: 0; + height: 0; + + &:checked { + + .c-toggle-switch__slider { + background: $colorKey; // TODO: make discrete theme constants for these colors + &:before { + transform: translateX(100%); + } + } + } + } + &__slider { + // Sits within __switch background: $colorBtnBg; // TODO: make discrete theme constants for these colors border-radius: $br; - //box-shadow: inset rgba($colorBtnFg, 0.4) 0 0 0 1px; display: inline-block; height: $d + ($m*2); position: relative; @@ -31,18 +56,9 @@ } } - input { - opacity: 0; - width: 0; - height: 0; - - &:checked { - + .c-toggle-switch__slider { - background: $colorKey; // TODO: make discrete theme constants for these colors - &:before { - transform: translateX(100%); - } - } - } + &__label { + margin-left: $interiorMarginSm; + margin-right: $interiorMargin; + white-space: nowrap; } } diff --git a/src/ui/layout/pane.scss b/src/ui/layout/pane.scss index 9e4126b119..fbd6a44ef2 100644 --- a/src/ui/layout/pane.scss +++ b/src/ui/layout/pane.scss @@ -62,6 +62,8 @@ } &[class*="--horizontal"] { + padding-left: $interiorMargin; + padding-right: $interiorMargin; &.l-pane--collapsed { padding-left: 0 !important; padding-right: 0 !important; @@ -69,9 +71,11 @@ } &[class*="--vertical"] { + padding-top: $interiorMargin; + padding-bottom: $interiorMargin; &.l-pane--collapsed { padding-top: 0 !important; - padding-top: 0 !important; + padding-bottom: 0 !important; } } @@ -277,6 +281,9 @@ /************************** Vertical Splitter Before */ // Pane collapses downward. Used by Elements pool in Inspector &[class*="-before"] { + $m: $interiorMarginLg; + margin-top: $m; + padding-top: $m; > .l-pane__handle { top: 0; transform: translateY(floor($splitterHandleD / -1)); diff --git a/src/ui/layout/tree-item.vue b/src/ui/layout/tree-item.vue index 9122b14bcb..d2fb93d682 100644 --- a/src/ui/layout/tree-item.vue +++ b/src/ui/layout/tree-item.vue @@ -2,7 +2,7 @@
  • !path.startsWith(this.navigateToPath)); + } + + localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(expandedPaths)); + }, + removeLocalStorageExpanded() { + let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED); + expandedPaths = expandedPaths ? JSON.parse(expandedPaths) : []; + expandedPaths = expandedPaths.filter(path => !path.startsWith(this.navigateToPath)); + localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(expandedPaths)); } } }