diff --git a/platform/features/imagery/res/templates/imagery.html b/platform/features/imagery/res/templates/imagery.html index 2971b846b7..8aedff7163 100644 --- a/platform/features/imagery/res/templates/imagery.html +++ b/platform/features/imagery/res/templates/imagery.html @@ -1,22 +1,18 @@ -
+
-
-
- +
+
+ - + ng-model="filters.brightness" /> - + ng-model="filters.contrast" /> - + diff --git a/src/plugins/plot/res/templates/mct-plot.html b/src/plugins/plot/res/templates/mct-plot.html index d0d4dec6cc..aaf63106f9 100644 --- a/src/plugins/plot/res/templates/mct-plot.html +++ b/src/plugins/plot/res/templates/mct-plot.html @@ -136,7 +136,7 @@ -
+
-
- -
-
- - - - +
+
+ + +
+
+ +
- - + +
+
+
+
+ class="abs holder holder-plot has-control-bar">
- - + +
+
- +
diff --git a/src/plugins/plot/res/templates/stacked-plot.html b/src/plugins/plot/res/templates/stacked-plot.html index c236e093d0..c12ba21355 100644 --- a/src/plugins/plot/res/templates/stacked-plot.html +++ b/src/plugins/plot/res/templates/stacked-plot.html @@ -20,26 +20,29 @@ at runtime from the About dialog for additional information. --> - + class="abs holder holder-plot has-control-bar t-plot-stacked">
- - + + +
+
- Export As CSV - +
diff --git a/src/styles-new/_constants-espresso.scss b/src/styles-new/_constants-espresso.scss index 1d5cc109ee..d713f5d1a1 100644 --- a/src/styles-new/_constants-espresso.scss +++ b/src/styles-new/_constants-espresso.scss @@ -183,6 +183,9 @@ $colorDropHintFg: pullForward($colorDropHint, 40%); $colorDisclosureCtrl: rgba($colorBodyFg, 0.5); $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7); $btnStdH: 24px; +$colorCursorGuide: rgba(white, 0.6); +$shdwCursorGuide: rgba(black, 0.4) 0 0 2px; +$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8); // Menus $colorMenuBg: pullForward($colorBodyBg, 15%); diff --git a/src/styles-new/_constants-maelstrom.scss b/src/styles-new/_constants-maelstrom.scss index 6635fd1f04..548efabdcf 100644 --- a/src/styles-new/_constants-maelstrom.scss +++ b/src/styles-new/_constants-maelstrom.scss @@ -187,6 +187,9 @@ $colorDropHintFg: pullForward($colorDropHint, 40%); $colorDisclosureCtrl: rgba($colorBodyFg, 0.5); $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7); $btnStdH: 24px; +$colorCursorGuide: rgba(white, 0.6); +$shdwCursorGuide: rgba(black, 0.4) 0 0 2px; +$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8); // Menus $colorMenuBg: pullForward($colorBodyBg, 15%); diff --git a/src/styles-new/_constants-snow.scss b/src/styles-new/_constants-snow.scss index a52ad38561..d5e35f9b2a 100644 --- a/src/styles-new/_constants-snow.scss +++ b/src/styles-new/_constants-snow.scss @@ -183,6 +183,9 @@ $colorDropHintFg: pushBack($colorDropHint, 0); $colorDisclosureCtrl: rgba($colorBodyFg, 0.5); $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7); $btnStdH: 24px; +$colorCursorGuide: rgba(black, 0.6); +$shdwCursorGuide: rgba(white, 0.4) 0 0 2px; +$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8); // Menus $colorMenuBg: pushBack($colorBodyBg, 10%); diff --git a/src/styles-new/_controls.scss b/src/styles-new/_controls.scss index f61efc6fc9..b6dc3208bd 100644 --- a/src/styles-new/_controls.scss +++ b/src/styles-new/_controls.scss @@ -557,8 +557,6 @@ select { /********* Button Sets */ .c-button-set { - // When one set is adjacent to another, provides a divider between - display: inline-flex; flex: 0 0 auto; @@ -567,21 +565,25 @@ select { flex: 0 0 auto; } - + .c-button-set { - &:before { - @include cToolbarSeparator(); - content: ''; - } - } - &[class*='--strip'] { // Buttons are smashed together with minimal margin - // c-buttons don't have border-radius between buttons, creates a tool-button-strip look + // c-buttons don't have border-radius between buttons, creates a horizontal tool-button-strip look // c-click-icons get grouped more closely together + [class^="c-button"] { // Only apply the following to buttons that have background, eg. c-button border-radius: 0; + } + } + &[class*='--strip-h'] { + // Horizontal strip + + + .c-button-set { + margin-left: $interiorMargin; + } + + [class^="c-button"] { + * { margin-left: 1px; } @@ -653,6 +655,46 @@ input[type="range"] { } } +/***************************************************** LOCAL CONTROLS */ +.h-local-controls { + // Holder for local controls + &--horz { + // Horizontal layout be + display: inline-flex; + align-items: center; + } + + &--overlay-content { + > .c-button { + background: $colorLocalControlOvrBg; + border-radius: $controlCr; + box-shadow: $colorLocalControlOvrBg 0 0 0 2px; + } + } +} + +.c-local-controls { + // Controls that are in close proximity to an element they effect + &--show-on-hover { + // Hidden by default; requires a hover 1 - 3 levels above to display + transition: $transOut; + opacity: 0; + pointer-events: none; + } +} + +.has-local-controls:hover { + > .c-local-controls--show-on-hover, + > * > .c-local-controls--show-on-hover, + > * > * > .c-local-controls--show-on-hover, + > * > * > * > .c-local-controls--show-on-hover + { + transition: $transIn; + opacity: 1; + pointer-events: inherit; + } +} + /***************************************************** DRAG AND DROP */ .c-drop-hint { // Used in Tabs View, Flexible Grid Layouts @@ -707,19 +749,3 @@ input[type="range"] { display: flex; align-items: center; } - -.h-local-controls { - &-overlay-content { - box-shadow: $colorBodyBg 0 0 0 2px; - display: inline-block; - position: absolute; - right: $interiorMargin; top: $interiorMargin; - z-index: 2; - } - - &-trans { - // Has a translucent background plate - background: rgba($colorBodyBg, 0.8); - border-radius: $controlCr; - } -} diff --git a/src/styles-new/_global.scss b/src/styles-new/_global.scss index 84a8621d78..d7abc0fafe 100644 --- a/src/styles-new/_global.scss +++ b/src/styles-new/_global.scss @@ -233,6 +233,7 @@ mct-container { padding: 1em; } +*[disabled], .disabled, a.disabled { opacity: $controlDisabledOpacity; diff --git a/src/styles-new/_legacy-plots.scss b/src/styles-new/_legacy-plots.scss new file mode 100644 index 0000000000..8621afddb1 --- /dev/null +++ b/src/styles-new/_legacy-plots.scss @@ -0,0 +1,550 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2018, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/********************************************************************* PLOTS */ +mct-plot { + display: contents; +} + +/*********************** STACKED PLOT LAYOUT */ +.t-plot-stacked { + .l-view-section { + // Make this a flex container + display: flex; + flex-flow: column nowrap; + .gl-plot.child-frame { + mct-plot { + display: flex; + flex: 1 1 auto; + height: 100%; + position: relative; + } + flex: 1 1 auto; + &:not(:first-child) { + margin-top: $interiorMargin; + } + } + } + + .s-status-timeconductor-unsynced .holder-plot { + .t-object-alert.t-alert-unsynced { + display: block; + } + } +} + +.gl-plot { + color: $colorPlotFg; + display: flex; + //font-size: 0.7rem; + position: relative; + width: 100%; + height: 100%; + min-height: $plotMinH; + + /*********************** AXIS AND DISPLAY AREA */ + .plot-wrapper-axis-and-display-area { + margin-top: $interiorMargin; // Keep the top tick label from getting clipped + position: relative; + flex: 1 1 auto; + .t-object-alert { + position: absolute; + display: block; + font-size: 1.5em; + top: $interiorMarginSm; + left: $interiorMarginSm; + z-index: 2; + } + } + + .gl-plot-wrapper-display-area-and-x-axis { + // Holds the plot area and the X-axis only + position: absolute; + top: nth($plotDisplayArea, 1); + right:0; + bottom: 0; + left: nth($plotDisplayArea, 4); + + .gl-plot-display-area { + position: absolute; + top: 0; + right: 0; + bottom: nth($plotDisplayArea, 3); + left: 0; + } + + .gl-plot-axis-area.gl-plot-x { + top: auto; + right: 0; + bottom: 0; + left: 0; + height: $plotXBarH; + width: auto; + overflow: hidden; + } + } + + .gl-plot-axis-area { + position: absolute; + &.gl-plot-y { + top: nth($plotDisplayArea, 1); + right: auto; + bottom: nth($plotDisplayArea, 3); + left: 0; + width: $plotYBarW; + } + } + + .gl-plot-coords { + box-sizing: border-box; + border-radius: $controlCr; + background: black; + color: lighten($colorBodyFg, 30%); + padding: 2px 5px; + position: absolute; + top: nth($plotDisplayArea,1) + $interiorMarginLg; + right: auto; + bottom: auto; + left: nth($plotDisplayArea,4) + $interiorMarginLg; + z-index: 10; + &:empty { + display: none; + } + } + + .gl-plot-label, + .l-plot-label { + color: $colorPlotLabelFg; + position: absolute; + text-align: center; + + &.gl-plot-x-label, + &.l-plot-x-label { + top: auto; + right: 0; + bottom: 0; + left: 0; + height: auto; + } + + &.gl-plot-y-label, + &.l-plot-y-label { + $x: -50%; + $r: -90deg; + transform-origin: 50% 0; + transform: translateX($x) rotate($r); + display: inline-block; + margin-left: $interiorMargin; // Kick off the left edge + left: 0; + top: 50%; + white-space: nowrap; + } + } + + .gl-plot-x-options, + .gl-plot-y-options { + $h: 24px; + position: absolute; + height: $h; + min-height: $h; + z-index: 2; + } + + .gl-plot-x-options { + transform: translateX(-50%); + bottom: 0; + left: 50%; + } + + .gl-plot-y-options { + transform: translateY(-50%); + min-width: 150px; // Need this due to enclosure of .select + top: 50%; + left: $plotYLabelW + $interiorMargin * 2; + } + + .t-plot-display-controls { + position: absolute; + top: $interiorMargin; + right: $interiorMargin; + } + + .gl-plot-hash { + position: absolute; + opacity: $opacityPlotHash; + &.hash-v { + border-right: 1px $colorPlotHash $stylePlotHash; + height: 100%; + } + &.hash-h { + border-bottom: 1px $colorPlotHash $stylePlotHash; + width: 100%; + } + } + + &__local-controls { + // Plot local controls + $m: $interiorMargin; + display: flex; + align-items: center; + position: absolute; + top: $m; + right: $m; + z-index: 9; + + &__reset { + transition: right 100ms; + top: $m; + right: $m; + } + + &__zoom-and-guides { + top: $m; + right: $m; + } + } +} + +.gl-plot-display-area, +.plot-display-area { + @if $colorPlotBg != none { + background-color: $colorPlotBg; + } + cursor: crosshair; + border: 1px solid $colorPlotAreaBorder; +} + +.tick { + position: absolute; + border: 0 $colorPlotHash solid; + &.tick-x { + border-right-width: 1px; + height: 100%; // Assumption is that the tick will be in a holder that will set it's height; + } +} + +.gl-plot-tick, +.tick-label { + @include reverseEllipsis(); + font-size: 0.7rem; + position: absolute; + &.gl-plot-x-tick-label, + &.tick-label-x { + right: auto; + bottom: auto; + left: auto; + height: auto; + width: 20%; + margin-left: -10%; + text-align: center; + } + &.gl-plot-y-tick-label, + &.tick-label-y { + top: auto; + height: 1em; + width: auto; + margin-bottom: -0.5em; + text-align: right; + } +} + +.gl-plot-tick { + &.gl-plot-x-tick-label { + top: $interiorMargin; + } + &.gl-plot-y-tick-label { + right: $interiorMargin; + left: $interiorMargin; + } +} + +.tick-label { + &.tick-label-x { + top: 0; + } + &.tick-label-y { + right: 0; + left: 0; + } +} + +.export-plot { + $bg: white; + $fg: black; + $gry: #999; + + background: $bg !important; + z-index: -10; + + .l-view-section { + $m: $interiorMargin; + top: $m !important; + right: $m; + bottom: $m; + left: $m; + + .s-status-timeconductor-unsynced .holder-plot { + .t-object-alert.t-alert-unsynced { + display: none; + } + } + } + + .gl-plot-display-area { + background: none !important; + border-color: $gry !important; + + .gl-plot-local-controls, + .h-local-controls { + opacity: 0; + } + } + + .gl-plot { + color: $fg; + + .gl-plot-hash { + opacity: 0.1; + border-color: $fg; + } + } + + table { + thead { + border-bottom: none; + + th { + background: #eee; + border-left-color: $bg; + color: #666; + } + + tr { + border: none; + } + } + tbody { + tr { + border-top: 1px solid #ccc; + } + + td { + color: $fg; + } + } + } +} + +/****************** _LEGEND.SCSS */ +.gl-plot-legend { + display: flex; + align-items: flex-start; + + &__view-control { + padding-top: 2px; + margin-right: $interiorMarginSm; + } + + table { + table-layout: fixed; + th, + td { + @include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed. + padding: 1px 3px; // Tighter than standard tabular padding + } + } + + &.hover-on-plot { + // User is hovering over the plot to get a value at a point + .hover-value-enabled { + background-color: $legendHoverValueBg; + border-radius: $smallCr; + padding: 0 $interiorMarginSm; + + &.value-to-display-min:before { + content: 'MIN '; + } + &.value-to-display-max:before { + content: 'MAX '; + } + } + } +} + +/***************** GENERAL STYLES, ALL STATES */ +.plot-legend-item { + // General styles for legend items, both expanded and collapsed legend states + .plot-series-color-swatch { + border-radius: $smallCr; + border: 1px solid $colorBodyBg; + display: inline-block; + height: $plotSwatchD; + width: $plotSwatchD; + } + .plot-series-name { + display: inline; + } + + .plot-series-value { + @include ellipsize(); + } +} + +.plot-wrapper-expanded-legend { + flex: 1 1 auto; +} + +.gl-plot { + &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; } + &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; } + + /***************** GENERAL STYLES, COLLAPSED */ + &.plot-legend-collapsed { + // .plot-legend-item is a span of spans. + &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; } + &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; } + &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; } + &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; } + + .plot-legend-item { + display: flex; + align-items: center; + justify-content: stretch; + &:not(:first-child) { + margin-left: $interiorMarginLg; + } + .plot-series-swatch-and-name, + .plot-series-value { + @include ellipsize(); + flex: 1 1 auto; + } + + .plot-series-swatch-and-name { + margin-right: $interiorMarginSm; + } + + .plot-series-value { + text-align: left; + } + } + } + + /***************** GENERAL STYLES, EXPANDED */ + &.plot-legend-expanded { + .gl-plot-legend { + max-height: 70%; + } + + .plot-wrapper-expanded-legend { + overflow-y: auto; + } + } + + /***************** TOP OR BOTTOM */ + &.plot-legend-top, + &.plot-legend-bottom { + // General styles when legend is on the top or bottom + flex-direction: column; + + &.plot-legend-collapsed { + // COLLAPSED ON TOP OR BOTTOM + .plot-wrapper-collapsed-legend { + display: flex; + flex: 1 1 auto; + overflow: hidden; + } + } + } + + /***************** EITHER SIDE */ + &.plot-legend-left, + &.plot-legend-right { + // If the legend is expanded, use flex-col instead so that the legend gets the width it needs. + &.plot-legend-expanded { + // EXPANDED, ON EITHER SIDE + flex-direction: column; + } + + &.plot-legend-collapsed { + // COLLAPSED, ON EITHER SIDE + .gl-plot-legend { + max-height: inherit; + width: 25%; + } + .plot-wrapper-collapsed-legend { + display: flex; + flex-flow: column nowrap; + min-width: 0; + flex: 1 1 auto; + overflow-y: auto; + } + .plot-legend-item { + margin-bottom: 1px; + margin-left: 0; + flex-wrap: wrap; + .plot-series-swatch-and-name { + flex: 0 1 auto; + min-width: 20%; + } + .plot-series-value { + flex: 0 1 auto; + width: auto; + } + } + } + } + + /***************** ON BOTTOM OR RIGHT */ + &.plot-legend-right:not(.plot-legend-expanded), + &.plot-legend-bottom { + .gl-plot-legend { + order: 2; + } + .plot-wrapper-axis-and-display-area { + order: 1; + } + } +} + +/***************** CURSOR GUIDES */ +[class*='c-cursor-guide'] { + box-shadow: $shdwCursorGuide; + background-color: $colorCursorGuide; + display: none; // Displayed when an element with has-cursor-guides gets a hover; see below + pointer-events: none; + position: absolute; +} + +.has-cursor-guides:hover [class*='c-cursor-guide'] { + display: block; +} + +.c-cursor-guide { + &--h { + height: 1px; + left: 0; right: 0; + } + + &--v { + width: 1px; + top: 0; bottom: 0; + } +} diff --git a/src/styles-new/_legacy.scss b/src/styles-new/_legacy.scss index 0fde6e8f90..f3e8b5c1be 100644 --- a/src/styles-new/_legacy.scss +++ b/src/styles-new/_legacy.scss @@ -19,491 +19,6 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ - -/********************************************************************* PLOTS */ -mct-plot { - display: contents; -} - -/*********************** STACKED PLOT LAYOUT */ -.t-plot-stacked { - .l-view-section { - // Make this a flex container - display: flex; - flex-flow: column nowrap; - .gl-plot.child-frame { - mct-plot { - display: flex; - flex: 1 1 auto; - height: 100%; - position: relative; - } - flex: 1 1 auto; - &:not(:first-child) { - margin-top: $interiorMargin; - } - } - } - - .s-status-timeconductor-unsynced .holder-plot { - .t-object-alert.t-alert-unsynced { - display: block; - } - } -} - -.gl-plot { - color: $colorPlotFg; - display: flex; - font-size: 0.7rem; - position: relative; - width: 100%; - height: 100%; - min-height: $plotMinH; - - /*********************** AXIS AND DISPLAY AREA */ - .plot-wrapper-axis-and-display-area { - margin-top: $interiorMargin; // Keep the top tick label from getting clipped - position: relative; - flex: 1 1 auto; - .t-object-alert { - position: absolute; - display: block; - font-size: 1.5em; - top: $interiorMarginSm; - left: $interiorMarginSm; - z-index: 2; - } - } - - .gl-plot-wrapper-display-area-and-x-axis { - // Holds the plot area and the X-axis only - position: absolute; - top: nth($plotDisplayArea, 1); - right:0; - bottom: 0; - left: nth($plotDisplayArea, 4); - - .gl-plot-display-area { - position: absolute; - top: 0; - right: 0; - bottom: nth($plotDisplayArea, 3); - left: 0; - } - - .gl-plot-axis-area.gl-plot-x { - top: auto; - right: 0; - bottom: 0; - left: 0; - height: $plotXBarH; - width: auto; - overflow: hidden; - } - } - - .gl-plot-axis-area { - position: absolute; - &.gl-plot-y { - top: nth($plotDisplayArea, 1); - right: auto; - bottom: nth($plotDisplayArea, 3); - left: 0; - width: $plotYBarW; - } - } - - .gl-plot-coords { - box-sizing: border-box; - border-radius: $controlCr; - background: black; - color: lighten($colorBodyFg, 30%); - padding: 2px 5px; - position: absolute; - top: nth($plotDisplayArea,1) + $interiorMarginLg; - right: auto; - bottom: auto; - left: nth($plotDisplayArea,4) + $interiorMarginLg; - z-index: 10; - &:empty { - display: none; - } - } - - .gl-plot-label, - .l-plot-label { - color: $colorPlotLabelFg; - position: absolute; - text-align: center; - - &.gl-plot-x-label, - &.l-plot-x-label { - top: auto; - right: 0; - bottom: 0; - left: 0; - height: auto; - } - - &.gl-plot-y-label, - &.l-plot-y-label { - $x: -50%; - $r: -90deg; - transform-origin: 50% 0; - transform: translateX($x) rotate($r); - display: inline-block; - margin-left: $interiorMargin; // Kick off the left edge - left: 0; - top: 50%; - white-space: nowrap; - } - } - - .gl-plot-x-options, - .gl-plot-y-options { - $h: 24px; - position: absolute; - height: $h; - min-height: $h; - z-index: 2; - } - - .gl-plot-x-options { - transform: translateX(-50%); - bottom: 0; - left: 50%; - } - - .gl-plot-y-options { - transform: translateY(-50%); - min-width: 150px; // Need this due to enclosure of .select - top: 50%; - left: $plotYLabelW + $interiorMargin * 2; - } - - .t-plot-display-controls { - position: absolute; - top: $interiorMargin; - right: $interiorMargin; - } - - .gl-plot-hash { - position: absolute; - opacity: $opacityPlotHash; - &.hash-v { - border-right: 1px $colorPlotHash $stylePlotHash; - height: 100%; - } - &.hash-h { - border-bottom: 1px $colorPlotHash $stylePlotHash; - width: 100%; - } - } -} - -.gl-plot-display-area, -.plot-display-area { - @if $colorPlotBg != none { - background-color: $colorPlotBg; - } - cursor: crosshair; - border: 1px solid $colorPlotAreaBorder; -} - -.tick { - position: absolute; - border: 0 $colorPlotHash solid; - &.tick-x { - border-right-width: 1px; - height: 100%; // Assumption is that the tick will be in a holder that will set it's height; - } -} - -.gl-plot-tick, -.tick-label { - @include reverseEllipsis(); - font-size: 0.7rem; - position: absolute; - &.gl-plot-x-tick-label, - &.tick-label-x { - right: auto; - bottom: auto; - left: auto; - height: auto; - width: 20%; - margin-left: -10%; - text-align: center; - } - &.gl-plot-y-tick-label, - &.tick-label-y { - top: auto; - height: 1em; - width: auto; - margin-bottom: -0.5em; - text-align: right; - } -} - -.gl-plot-tick { - &.gl-plot-x-tick-label { - top: $interiorMargin; - } - &.gl-plot-y-tick-label { - right: $interiorMargin; - left: $interiorMargin; - } -} - -.tick-label { - &.tick-label-x { - top: 0; - } - &.tick-label-y { - right: 0; - left: 0; - } -} - -.export-plot { - $bg: white; - $fg: black; - $gry: #999; - - background: $bg !important; - z-index: -10; - - .l-view-section { - $m: $interiorMargin; - top: $m !important; - right: $m; - bottom: $m; - left: $m; - - .s-status-timeconductor-unsynced .holder-plot { - .t-object-alert.t-alert-unsynced { - display: none; - } - } - } - - .gl-plot-display-area { - background: none !important; - border-color: $gry !important; - - .gl-plot-local-controls, - .h-local-controls { - opacity: 0; - } - } - - .gl-plot { - color: $fg; - - .gl-plot-hash { - opacity: 0.1; - border-color: $fg; - } - } - - table { - thead { - border-bottom: none; - - th { - background: #eee; - border-left-color: $bg; - color: #666; - } - - tr { - border: none; - } - } - tbody { - tr { - border-top: 1px solid #ccc; - } - - td { - color: $fg; - } - } - } -} - -/****************** _LEGEND.SCSS */ -.gl-plot-legend { - display: flex; - align-items: flex-start; - - &__view-control { - padding-top: 2px; - margin-right: $interiorMarginSm; - } - - table { - table-layout: fixed; - th, - td { - @include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed. - padding: 1px 3px; // Tighter than standard tabular padding - //width: 1%; - } - } - - &.hover-on-plot { - // User is hovering over the plot to get a value at a point - .hover-value-enabled { - background-color: $legendHoverValueBg; - border-radius: $smallCr; - padding: 0 $interiorMarginSm; - - &.value-to-display-min:before { - content: 'MIN '; - } - &.value-to-display-max:before { - content: 'MAX '; - } - } - } -} - -/***************** GENERAL STYLES, ALL STATES */ -.plot-legend-item { - // General styles for legend items, both expanded and collapsed legend states - .plot-series-color-swatch { - border-radius: $smallCr; - border: 1px solid $colorBodyBg; - display: inline-block; - height: $plotSwatchD; - width: $plotSwatchD; - } - .plot-series-name { - display: inline; - } - - .plot-series-value { - @include ellipsize(); - } -} - -.plot-wrapper-expanded-legend { - flex: 1 1 auto; -} - -.gl-plot { - &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; } - &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; } - - /***************** GENERAL STYLES, COLLAPSED */ - &.plot-legend-collapsed { - // .plot-legend-item is a span of spans. - &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; } - &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; } - &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; } - &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; } - - .plot-legend-item { - display: flex; - align-items: center; - justify-content: stretch; - &:not(:first-child) { - margin-left: $interiorMarginLg; - } - .plot-series-swatch-and-name, - .plot-series-value { - @include ellipsize(); - flex: 1 1 auto; - } - - .plot-series-swatch-and-name { - margin-right: $interiorMarginSm; - } - - .plot-series-value { - text-align: left; - } - } - } - - /***************** GENERAL STYLES, EXPANDED */ - &.plot-legend-expanded { - .gl-plot-legend { - max-height: 70%; - } - - .plot-wrapper-expanded-legend { - overflow-y: auto; - } - } - - /***************** TOP OR BOTTOM */ - &.plot-legend-top, - &.plot-legend-bottom { - // General styles when legend is on the top or bottom - flex-direction: column; - - &.plot-legend-collapsed { - // COLLAPSED ON TOP OR BOTTOM - .plot-wrapper-collapsed-legend { - display: flex; - flex: 1 1 auto; - overflow: hidden; - } - } - } - - /***************** EITHER SIDE */ - &.plot-legend-left, - &.plot-legend-right { - // If the legend is expanded, use flex-col instead so that the legend gets the width it needs. - &.plot-legend-expanded { - // EXPANDED, ON EITHER SIDE - flex-direction: column; - } - - &.plot-legend-collapsed { - // COLLAPSED, ON EITHER SIDE - .gl-plot-legend { - max-height: inherit; - width: 25%; - } - .plot-wrapper-collapsed-legend { - display: flex; - flex-flow: column nowrap; - min-width: 0; - flex: 1 1 auto; - overflow-y: auto; - } - .plot-legend-item { - margin-bottom: 1px; - margin-left: 0; - flex-wrap: wrap; - .plot-series-swatch-and-name { - flex: 0 1 auto; - min-width: 20%; - } - .plot-series-value { - flex: 0 1 auto; - width: auto; - } - } - } - } - - /***************** ON BOTTOM OR RIGHT */ - &.plot-legend-right:not(.plot-legend-expanded), - &.plot-legend-bottom { - .gl-plot-legend { - order: 2; - } - .plot-wrapper-axis-and-display-area { - order: 1; - } - } -} - /******************************************************************* VIEWS */ // From _views.scss // Legacy overlay and stacked plots depend on this for now @@ -582,7 +97,6 @@ mct-plot { } .l-image-main-controlbar { - font-size: 0.8em; line-height: inherit; .l-datetime-w, .l-controls-w { direction: rtl; @@ -624,7 +138,6 @@ mct-plot { } /*************************************** THUMBS */ - .l-image-thumbs-wrapper { overflow-x: hidden; overflow-y: auto; @@ -639,7 +152,6 @@ mct-plot { direction: ltr; display: inline-block; float: left; - font-size: 0.8em; padding: 1px; margin-left: $interiorMarginSm; position: relative; @@ -679,9 +191,14 @@ mct-plot { } /*************************************** LOCAL CONTROLS */ -.t-imagery { +.c-imagery { display: contents; - .h-local-controls.h-local-controls-overlay-content { + .h-local-controls--overlay-content { + position: absolute; + right: $interiorMargin; top: $interiorMargin; + z-index: 2; + background: $colorLocalControlOvrBg; + border-radius: $basicCr; max-width: 200px; min-width: 100px; width: 35%; @@ -699,8 +216,10 @@ mct-plot { margin-right: $interiorMarginSm; } } + } - .t-reset-btn-holder { + &__lc { + &__reset-btn { $bc: $scrollbarTrackColorBg; &:before, &:after { @@ -730,8 +249,8 @@ mct-plot { .l-image-main-wrapper { bottom: 0 !important; height: 100% !important; - .l-image-main-controlbar { - font-size: 0.7em; + .l-image-main-controlbar .c-button { + //font-size: 0.7em; } } .l-image-thumbs-wrapper, @@ -1723,6 +1242,10 @@ body.desktop { display: none; } } + + &.c-loading--overlay { + @include abs(); + } } /******************************************************************* FLEX STYLES */ diff --git a/src/styles-new/_mixins.scss b/src/styles-new/_mixins.scss index 25e1461d24..6a162d49a6 100644 --- a/src/styles-new/_mixins.scss +++ b/src/styles-new/_mixins.scss @@ -391,7 +391,8 @@ color: $colorBtnFgHov; } - &[class*="--major"] { + &[class*="--major"], + &[class*='is-active']{ background: $colorBtnMajorBg; color: $colorBtnMajorFg; diff --git a/src/styles-new/core.scss b/src/styles-new/core.scss index 4dfbfa107f..f3c4f5ab43 100644 --- a/src/styles-new/core.scss +++ b/src/styles-new/core.scss @@ -31,3 +31,4 @@ @import "forms"; @import "table"; @import "legacy"; +@import "legacy-plots"; diff --git a/src/ui/components/ObjectFrame.vue b/src/ui/components/ObjectFrame.vue index f312b88dfe..2816e1bb80 100644 --- a/src/ui/components/ObjectFrame.vue +++ b/src/ui/components/ObjectFrame.vue @@ -113,6 +113,12 @@ } } } + + .c-click-icon, + .c-button { + // Shrink buttons a bit when they appear in a frame + font-size: 0.8em; + } }