mirror of
https://github.com/nasa/openmct.git
synced 2025-04-08 20:04:27 +00:00
Misc ui 2 (#2248)
* Create button disabled when editing * New disabled mixin; * Tree styling * Fixed icons for fullscreen toggle button * Local controls fixed for Imagery and Plots * Range control styling updated; * Plot styling, significant mods * Disclosure controls improved; * New _legacy-plots.scss file added, no longer loads legacy plot SCSS files; * Removed 12px crosshair cursor in legend hover; * Inspector tree styling in plot options * Fix z-indexing related to Overlays
This commit is contained in:
Charles Hacskaylo
Andrew Henry
parent
850fa28bf6
commit
ec4c443299
@ -20,13 +20,13 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div class="gl-plot plot-legend-{{legend.get('position')}} {{legend.get('expanded')? 'plot-legend-expanded' : 'plot-legend-collapsed'}}">
|
||||
<div class="gl-plot-legend flex-elem l-flex-row"
|
||||
<div class="gl-plot-legend"
|
||||
ng-class="{ 'hover-on-plot': !!highlights.length }"
|
||||
ng-show="legend.get('position') !== 'hidden'">
|
||||
<span class="view-control flex-elem"
|
||||
ng-class="{ expanded: legend.get('expanded') }"
|
||||
<div class="gl-plot-legend__view-control c-disclosure-triangle is-enabled"
|
||||
ng-class="{ 'c-disclosure-triangle--expanded': legend.get('expanded') }"
|
||||
ng-click="legend.set('expanded', !legend.get('expanded'));">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- COLLAPSED PLOT LEGEND -->
|
||||
<div class="plot-wrapper-collapsed-legend">
|
||||
@ -52,7 +52,7 @@
|
||||
</div>
|
||||
|
||||
<!-- EXPANDED PLOT LEGEND -->
|
||||
<div class="plot-wrapper-expanded-legend flex-elem grows">
|
||||
<div class="plot-wrapper-expanded-legend">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -133,7 +133,9 @@
|
||||
ng-style="{
|
||||
left: (tickWidth + 30) + 'px'
|
||||
}">
|
||||
<span class="t-object-alert t-alert-unsynced" title="This plot is not currently displaying the latest data. Reset Pan/zoom to return to view latest data."></span>
|
||||
<span class="t-object-alert t-alert-unsynced"
|
||||
title="This plot is not currently displaying the latest data.
|
||||
Reset Pan/zoom to return to view latest data."></span>
|
||||
<div class="gl-plot-display-area">
|
||||
<mct-ticks axis="xAxis">
|
||||
<div class="gl-plot-hash hash-v"
|
||||
|
||||
@ -20,20 +20,20 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div ng-controller="PlotOptionsController">
|
||||
<ul class="tree">
|
||||
<ul class="tree c-tree">
|
||||
<h2 title="Plot series display properties in this object">Plot Series</h2>
|
||||
<li ng-repeat="series in config.series.models">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span class='ui-symbol view-control flex-elem'
|
||||
ng-class="{ expanded: series.expanded }"
|
||||
<div class="c-tree__item menus-to-left">
|
||||
<span class='c-disclosure-triangle is-enabled flex-elem'
|
||||
ng-class="{ 'c-disclosure-triangle--expanded': series.expanded }"
|
||||
ng-click="series.expanded = !series.expanded">
|
||||
</span>
|
||||
<mct-representation
|
||||
class="rep-object-label"
|
||||
class="rep-object-label c-tree__item__label"
|
||||
key="'label'"
|
||||
mct-object="series.oldObject">
|
||||
</mct-representation>
|
||||
</span>
|
||||
</div>
|
||||
<ul class="grid-properties" ng-show="series.expanded">
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label"
|
||||
|
||||
@ -20,21 +20,21 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div ng-controller="PlotOptionsController">
|
||||
<ul class="tree l-inspector-part">
|
||||
<h2 title="Display properties for this object">Plot Series Options</h2>
|
||||
<ul class="tree c-tree">
|
||||
<h2 title="Display properties for this object">Plot Series</h2>
|
||||
<li ng-repeat="series in plotSeries"
|
||||
ng-controller="PlotSeriesFormController"
|
||||
form-model="series">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span class='ui-symbol view-control flex-elem'
|
||||
ng-class="{ expanded: expanded }"
|
||||
<div class="c-tree__item menus-to-left">
|
||||
<span class='c-disclosure-triangle is-enabled flex-elem'
|
||||
ng-class="{ 'c-disclosure-triangle--expanded': expanded }"
|
||||
ng-click="expanded = !expanded">
|
||||
</span>
|
||||
<mct-representation class="rep-object-label"
|
||||
<mct-representation class="rep-object-label c-tree__item__label"
|
||||
key="'label'"
|
||||
mct-object="series.oldObject">
|
||||
</mct-representation>
|
||||
</span>
|
||||
</div>
|
||||
<ul class="grid-properties" ng-show="expanded">
|
||||
<li class="grid-row">
|
||||
<!-- Value to be displayed -->
|
||||
|
||||
@ -106,7 +106,6 @@
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
@import "~styles/table";
|
||||
|
||||
.c-telemetry-table__drop-target {
|
||||
position: absolute;
|
||||
@ -128,6 +127,10 @@
|
||||
vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
|
||||
}
|
||||
|
||||
td {
|
||||
color: $colorTelemFresh;
|
||||
}
|
||||
|
||||
/******************************* WRAPPERS */
|
||||
&__headers-w {
|
||||
// Wraps __headers table
|
||||
|
||||
@ -165,6 +165,8 @@ $colorDropHint: $colorKey;
|
||||
$colorDropHintBg: darken($colorDropHint, 10%);
|
||||
$colorDropHintBgHov: $colorDropHint;
|
||||
$colorDropHintFg: lighten($colorDropHint, 40%);
|
||||
$colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
|
||||
$colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
|
||||
|
||||
// Menus
|
||||
$colorMenuBg: lighten($colorBodyBg, 15%);
|
||||
@ -261,7 +263,6 @@ $opacityPlotHash: 0.2;
|
||||
$stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: darken($colorPlotFg, 20%);
|
||||
$legendCollapsedNameMaxW: 50%;
|
||||
$legendHoverValueBg: rgba($colorBodyFg, 0.2);
|
||||
|
||||
// Tree
|
||||
@ -277,8 +278,8 @@ $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
|
||||
$colorItemTreeEditingBg: darken($editColor, 20%);
|
||||
$colorItemTreeEditingFg: $editColorFg;
|
||||
$colorItemTreeEditingIcon: $editColorFg;
|
||||
$colorItemTreeVC: rgba($colorBodyFg, 0.5);
|
||||
$colorItemTreeVCHover: $colorKey;
|
||||
$colorItemTreeVC: $colorDisclosureCtrl;
|
||||
$colorItemTreeVCHover: $colorDisclosureCtrlHov;
|
||||
$shdwItemTreeIcon: none;
|
||||
|
||||
// Images
|
||||
@ -353,19 +354,6 @@ $createBtnTextTransform: uppercase;
|
||||
}
|
||||
|
||||
/**************************************************** NOT USED, LEAVE FOR NOW */
|
||||
// Slider controls, not in use
|
||||
/*
|
||||
$sliderColorBase: $colorKey;
|
||||
$sliderColorRangeHolder: rgba(black, 0.07);
|
||||
$sliderColorRange: rgba($sliderColorBase, 0.2);
|
||||
$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
|
||||
$sliderColorKnob: darken($sliderColorBase, 20%);
|
||||
$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
|
||||
$sliderColorRangeValHovBg: $sliderColorRange;
|
||||
$sliderColorRangeValHovFg: $colorBodyFg;
|
||||
$sliderKnobW: 15px;
|
||||
$sliderKnobR: 2px;
|
||||
*/
|
||||
|
||||
// Content status
|
||||
/*
|
||||
|
||||
@ -114,12 +114,13 @@ $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
|
||||
// Base Colors
|
||||
$dlSpread: 20%;
|
||||
$editColor: #00c7c3;
|
||||
$editColorBg: darken($editColor, $dlSpread);
|
||||
$editColorBgBase: darken($editColor, $dlSpread);
|
||||
$editColorBg: rgba($editColorBgBase, 0.2);
|
||||
$editColorFg: lighten($editColor, $dlSpread);
|
||||
$editColorHov: lighten($editColor, 20%);
|
||||
// Canvas
|
||||
$editCanvasColorBg: #002524;
|
||||
$editCanvasColorGrid: darken($editCanvasColorBg, 2%);
|
||||
$editCanvasColorBg: $editColorBg; //#002524;
|
||||
$editCanvasColorGrid: rgba($editColorBgBase, 0.4); //lighten($editCanvasColorBg, 3%);
|
||||
// Selectable
|
||||
$editSelectableColor: #006563;
|
||||
$editSelectableColorFg: lighten($editSelectableColor, 20%);
|
||||
@ -168,6 +169,8 @@ $colorDropHint: $colorKey;
|
||||
$colorDropHintBg: darken($colorDropHint, 10%);
|
||||
$colorDropHintBgHov: $colorDropHint;
|
||||
$colorDropHintFg: lighten($colorDropHint, 40%);
|
||||
$colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
|
||||
$colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
|
||||
|
||||
// Menus
|
||||
$colorMenuBg: lighten($colorBodyBg, 15%);
|
||||
@ -264,7 +267,6 @@ $opacityPlotHash: 0.2;
|
||||
$stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: darken($colorPlotFg, 20%);
|
||||
$legendCollapsedNameMaxW: 50%;
|
||||
$legendHoverValueBg: rgba($colorBodyFg, 0.2);
|
||||
|
||||
// Tree
|
||||
@ -280,8 +282,8 @@ $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
|
||||
$colorItemTreeEditingBg: darken($editColor, 20%);
|
||||
$colorItemTreeEditingFg: $editColorFg;
|
||||
$colorItemTreeEditingIcon: $editColorFg;
|
||||
$colorItemTreeVC: rgba($colorBodyFg, 0.5);
|
||||
$colorItemTreeVCHover: $colorKey;
|
||||
$colorItemTreeVC: $colorDisclosureCtrl;
|
||||
$colorItemTreeVCHover: $colorDisclosureCtrlHov;
|
||||
$shdwItemTreeIcon: none;
|
||||
|
||||
// Images
|
||||
|
||||
@ -165,6 +165,8 @@ $colorDropHint: $colorKey;
|
||||
$colorDropHintBg: lighten($colorDropHint, 30%);
|
||||
$colorDropHintBgHov: lighten($colorDropHint, 40%);
|
||||
$colorDropHintFg: lighten($colorDropHint, 0);
|
||||
$colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
|
||||
$colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
|
||||
|
||||
// Menus
|
||||
$colorMenuBg: lighten($colorBodyBg, 10%);
|
||||
@ -261,7 +263,6 @@ $opacityPlotHash: 0.2;
|
||||
$stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: lighten($colorPlotFg, 20%);
|
||||
$legendCollapsedNameMaxW: 50%;
|
||||
$legendHoverValueBg: rgba($colorBodyFg, 0.2);
|
||||
|
||||
// Tree
|
||||
@ -277,8 +278,8 @@ $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
|
||||
$colorItemTreeEditingBg: $editColor;
|
||||
$colorItemTreeEditingFg: $editColorFg;
|
||||
$colorItemTreeEditingIcon: $editColorFg;
|
||||
$colorItemTreeVC: rgba($colorBodyFg, 0.5);
|
||||
$colorItemTreeVCHover: $colorKey;
|
||||
$colorItemTreeVC: $colorDisclosureCtrl;
|
||||
$colorItemTreeVCHover: $colorDisclosureCtrlHov;
|
||||
$shdwItemTreeIcon: none;
|
||||
|
||||
// Images
|
||||
@ -353,19 +354,6 @@ $createBtnTextTransform: uppercase;
|
||||
|
||||
|
||||
/**************************************************** NOT USED, LEAVE FOR NOW */
|
||||
// Slider controls, not in use
|
||||
/*
|
||||
$sliderColorBase: $colorKey;
|
||||
$sliderColorRangeHolder: rgba(black, 0.07);
|
||||
$sliderColorRange: rgba($sliderColorBase, 0.2);
|
||||
$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
|
||||
$sliderColorKnob: lighten($sliderColorBase, 20%);
|
||||
$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
|
||||
$sliderColorRangeValHovBg: $sliderColorRange;
|
||||
$sliderColorRangeValHovFg: $colorBodyFg;
|
||||
$sliderKnobW: 15px;
|
||||
$sliderKnobR: 2px;
|
||||
*/
|
||||
|
||||
// Content status
|
||||
/*
|
||||
|
||||
@ -50,6 +50,15 @@ $gridItemMobile: 32px;
|
||||
$tabularHeaderH: 22px;
|
||||
$tabularTdPadLR: $itemPadLR;
|
||||
$tabularTdPadTB: 2px;
|
||||
/*************** Plots */
|
||||
$plotYBarW: 60px;
|
||||
$plotYLabelMinH: 20px;
|
||||
$plotYLabelW: 10px;
|
||||
$plotXBarH: 20px;
|
||||
$plotLegendH: 20px;
|
||||
$plotSwatchD: 8px;
|
||||
$plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
|
||||
$plotMinH: 95px;
|
||||
|
||||
/************************** MOBILE */
|
||||
$mobileMenuIconD: 24px; // Used
|
||||
|
||||
@ -101,9 +101,10 @@ button {
|
||||
}
|
||||
/********* Disclosure Triangle */
|
||||
// Provides an arrow icon that when clicked expands an element to reveal its contents.
|
||||
// Used in tree items. Always placed BEFORE an element.
|
||||
// Used in tree items, plot legends. Always placed BEFORE an element.
|
||||
.c-disclosure-triangle {
|
||||
$d: 12px;
|
||||
color: $colorDisclosureCtrl;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -111,15 +112,22 @@ button {
|
||||
width: $d;
|
||||
position: relative;
|
||||
|
||||
&.is-enabled:before {
|
||||
$s: .65;
|
||||
content: $glyph-icon-arrow-right-equilateral;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1rem * $s;
|
||||
position: absolute;
|
||||
transform-origin: floor(($d / 2) * $s); // This is slightly better than 'center'
|
||||
transition: transform 100ms ease-in-out;
|
||||
&.is-enabled {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $colorDisclosureCtrlHov;
|
||||
}
|
||||
|
||||
&:before {
|
||||
$s: .65;
|
||||
content: $glyph-icon-arrow-right-equilateral;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1rem * $s;
|
||||
transform-origin: center;
|
||||
transition: transform 100ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
@ -497,6 +505,54 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
> * + * { margin-left: $interiorMargin; }
|
||||
}
|
||||
|
||||
|
||||
/******************************************************** SLIDERS AND RANGE */
|
||||
@mixin sliderKnobRound() {
|
||||
$h: 12px;
|
||||
@include themedButton();
|
||||
cursor: pointer;
|
||||
width: $h;
|
||||
height: $h;
|
||||
border-radius: 50% !important;
|
||||
transform: translateY(-42%);
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
// HTML5 range inputs
|
||||
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
|
||||
background: transparent; /* Otherwise white in Chrome */
|
||||
&:focus {
|
||||
outline: none; /* Removes the blue border. */
|
||||
}
|
||||
|
||||
// Thumb
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
@include sliderKnobRound();
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
border: none;
|
||||
@include sliderKnobRound();
|
||||
}
|
||||
&::-ms-thumb {
|
||||
border: none;
|
||||
@include sliderKnobRound();
|
||||
}
|
||||
|
||||
// Track
|
||||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
@include sliderTrack();
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
@include sliderTrack();
|
||||
}
|
||||
}
|
||||
|
||||
/***************************************************** DRAG AND DROP */
|
||||
.c-drop-hint {
|
||||
// Used in Tabs View, Flexible Grid Layouts
|
||||
@ -545,3 +601,27 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
/***************************************************** LEGACY */
|
||||
|
||||
.l-btn-set {
|
||||
// Fixes
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -174,30 +174,6 @@ body.desktop .has-local-controls {
|
||||
}
|
||||
}
|
||||
|
||||
//[class*="local-controls"] {
|
||||
// // An explicit outer holder for controls. Typically placed in upper right.
|
||||
// //font-size: 0.7rem;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: flex-end;
|
||||
//
|
||||
//
|
||||
// &.h-local-controls-overlay-content {
|
||||
// // Imagery controls
|
||||
// $p: $interiorMargin;
|
||||
// position: absolute;
|
||||
// top: $p; right: $p;
|
||||
// z-index: 2;
|
||||
// }
|
||||
|
||||
//.l-btn-set,
|
||||
//.s-button {
|
||||
// &:not(:first-child) {
|
||||
// margin-left: $interiorMargin;
|
||||
// }
|
||||
//}
|
||||
//}
|
||||
|
||||
/******************************************************** SELECTION AND EDITING */
|
||||
// Provides supporting styles for Display Layouts and augmented legacy Fixed Position view
|
||||
|
||||
|
||||
504
src/styles-new/_legacy-plots.scss
Normal file
504
src/styles-new/_legacy-plots.scss
Normal file
@ -0,0 +1,504 @@
|
||||
/*****************************************************************************
|
||||
* 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.
|
||||
*****************************************************************************/
|
||||
|
||||
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; //nth($plotDisplayArea, 2);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -133,6 +133,12 @@
|
||||
background-repeat: $repeatDir;
|
||||
}
|
||||
|
||||
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
background-color: $bg;
|
||||
}
|
||||
|
||||
@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||
background-image: linear-gradient(-90deg,
|
||||
rgba($c, $a) 0%, rgba($c, $a) 50%,
|
||||
|
||||
@ -21,10 +21,36 @@
|
||||
*****************************************************************************/
|
||||
|
||||
/******************************************************** TABLE */
|
||||
table {
|
||||
$minW: 50px;
|
||||
width: 100%;
|
||||
|
||||
thead {
|
||||
background: $colorTabHeaderBg;
|
||||
th + th {
|
||||
border-left: 1px solid $colorTabHeaderBorder;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr + tr {
|
||||
border-top: 1px solid $colorTabBorder;
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
white-space: nowrap;
|
||||
min-width: $minW;
|
||||
padding: $tabularTdPadTB $tabularTdPadLR;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.c-table {
|
||||
// Can be used by any type of table, scrolling, LAD, etc.
|
||||
$min-w: 50px;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: flex-start;
|
||||
@ -37,39 +63,11 @@
|
||||
}
|
||||
|
||||
/******************************* ELEMENTS */
|
||||
th, td {
|
||||
white-space: nowrap;
|
||||
min-width: $min-w;
|
||||
padding: $tabularTdPadTB $tabularTdPadLR;
|
||||
}
|
||||
|
||||
td {
|
||||
color: $colorTelemFresh;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&__control-bar {
|
||||
margin-bottom: $interiorMarginSm;
|
||||
}
|
||||
|
||||
[class*="__header"] {
|
||||
background: $colorTabHeaderBg;
|
||||
|
||||
th {
|
||||
&:not(:first-child) {
|
||||
border-left: 1px solid $colorTabHeaderBorder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
tr {
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $colorTabBorder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--sortable {
|
||||
.is-sorting {
|
||||
&:after {
|
||||
|
||||
@ -27,6 +27,8 @@
|
||||
@import "glyphs";
|
||||
@import "global";
|
||||
@import "controls";
|
||||
@import "table";
|
||||
@import "legacy-plots";
|
||||
|
||||
/******************** LEGACY CSS */
|
||||
$output-bourbon-deprecation-warnings: false;
|
||||
|
||||
@ -57,8 +57,8 @@
|
||||
//!********************************* VIEWS *!
|
||||
@import "../styles/fixed-position";
|
||||
//@import "../styles/lists/tabular";
|
||||
@import "../styles/plots/plots-main";
|
||||
@import "../styles/plots/legend";
|
||||
//@import "../styles/plots/plots-main";
|
||||
//@import "../styles/plots/legend";
|
||||
@import "../styles/iframe";
|
||||
@import "../styles/views";
|
||||
@import "../styles/items/item";
|
||||
@ -75,5 +75,3 @@
|
||||
//!********************************* APP STARTUP *!
|
||||
//@import "../styles/app-start";
|
||||
|
||||
@import "../styles/conductor/time-conductor-snow";
|
||||
//@import "../styles/notebook/notebook-snow";
|
||||
@ -53,7 +53,7 @@
|
||||
}
|
||||
|
||||
> .abs.outer-holder {
|
||||
z-index: 72;
|
||||
z-index: 70;
|
||||
> .abs.inner-holder {
|
||||
$m: $overlayMargin;
|
||||
top: $m;
|
||||
|
||||
@ -176,6 +176,27 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
/********************************************* LEGACY SUPPORT */
|
||||
.c-inspector {
|
||||
li.grid-row + li.grid-row {
|
||||
> * {
|
||||
border-top: 1px solid $colorInspectorSectionHeaderBg;
|
||||
}
|
||||
}
|
||||
|
||||
li.grid-row .label {
|
||||
color: $colorInspectorPropName;
|
||||
}
|
||||
|
||||
li.grid-row .value {
|
||||
color: $colorInspectorPropVal;
|
||||
word-break: break-all;
|
||||
&:first-child {
|
||||
// If there is no preceding .label element, make value span columns
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@ -71,7 +71,6 @@
|
||||
}
|
||||
|
||||
&__view-control {
|
||||
color: $colorItemTreeVC;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user