mirror of
https://github.com/nasa/openmct.git
synced 2025-01-25 21:59:23 +00:00
248f160e73
* Added telemetry filters to the API * Support multiple inspector views * Renamed InspectorView.vue to InspectorViews.vue * first cut of filter inspector plugin * abstract for better readability * third times the charm * working persist checkbox selections * fix typo * working persisted filters from inspector * add prop validations for FitlerValue and FilterObject * enable filter inspector view for overlay and stacked plots * remove object from persisted filter when object is removed from composition * update filterValue to filterField for clarity * Added filter code to tables * add filter support to Telemetry Tables * fix errors when old domainObject does not have configuration property * working filters on overlay plots * make requested changes * Add filters as 'options' object on subscribe * Significant mods to Filtering - Styling; - Added Browse view in Inspector; - Added .c-checkbox-list class; - "PLOT SERIES" header changed to "PLOT SERIES OPTIONS" for clarity; * make filter update pass updated filters to telemetry adapter * Tolerate undefined configuration * Conditionally destroy filters listener * use @change event instead of @blur'
681 lines
16 KiB
SCSS
681 lines
16 KiB
SCSS
/*****************************************************************************
|
|
* 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.
|
|
*****************************************************************************/
|
|
|
|
/********* Buttons */
|
|
// Optionally can include icon in :before via markup
|
|
button {
|
|
@include htmlInputReset();
|
|
}
|
|
|
|
.c-button,
|
|
.c-button--menu {
|
|
@include cButton();
|
|
}
|
|
|
|
.c-button {
|
|
&--menu {
|
|
&:after {
|
|
content: $glyph-icon-arrow-down;
|
|
font-family: symbolsfont;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.c-compact-button {
|
|
@include cCompactButtons($bg: $colorBtnBg, $fg: $colorBtnFg, $bgHov: $colorBtnBgHov);
|
|
}
|
|
|
|
/********* Icon Buttons */
|
|
.c-click-icon,
|
|
.c-click-swatch {
|
|
@include cClickIcon();
|
|
|
|
&--menu {
|
|
&:after {
|
|
content: $glyph-icon-arrow-down;
|
|
font-family: symbolsfont;
|
|
font-size: 0.7em;
|
|
margin-left: floor($interiorMarginSm * 0.8);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.c-click-icon {
|
|
.c-click-icon__label {
|
|
margin-left: $interiorMargin;
|
|
}
|
|
|
|
&--swatched {
|
|
// Color control, show swatch element
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
> [class*='swatch'] {
|
|
box-shadow: inset rgba(black, 0.2) 0 0 1px;
|
|
flex: 0 0 auto;
|
|
height: 4px;
|
|
width: 100%;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
&:before {
|
|
// Reduce size of icon to make a bit of room
|
|
flex: 1 1 auto;
|
|
font-size: 1.1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
/******************************************************** DISCLOSURE CONTROLS */
|
|
/********* Disclosure Button */
|
|
// Provides a downward arrow icon that when clicked displays a context menu
|
|
// Always placed AFTER an element
|
|
.c-disclosure-button {
|
|
@include cClickIcon();
|
|
margin-left: $interiorMarginSm;
|
|
|
|
&:before {
|
|
content: $glyph-icon-arrow-down;
|
|
font-family: symbolsfont;
|
|
font-size: 0.7em;
|
|
}
|
|
}
|
|
/********* Disclosure Triangle */
|
|
// Provides an arrow icon that when clicked expands an element to reveal its contents.
|
|
// 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;
|
|
flex: 0 0 auto;
|
|
width: $d;
|
|
position: relative;
|
|
|
|
&.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 {
|
|
&:before {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
/******************************************************** FORM ELEMENTS */
|
|
input, textarea {
|
|
font-family: inherit;
|
|
font-weight: inherit;
|
|
letter-spacing: inherit;
|
|
}
|
|
|
|
input[type=text],
|
|
input[type=search],
|
|
input[type=number],
|
|
textarea {
|
|
@include reactive-input();
|
|
padding: $inputTextP;
|
|
&.numeric {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
margin-right: -5px !important;
|
|
margin-top: -1px !important;
|
|
}
|
|
|
|
.c-input {
|
|
&--flex {
|
|
width: 100%;
|
|
min-width: 20px;
|
|
}
|
|
|
|
&--datetime {
|
|
// Sized for values such as 2018-09-28 22:32:33.468Z
|
|
width: 160px;
|
|
}
|
|
|
|
&--hrs-min-sec {
|
|
// Sized for values such as 00:25:00
|
|
width: 60px;
|
|
}
|
|
|
|
&-inline,
|
|
&--inline {
|
|
// A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
|
|
@include reactive-input($bg: transparent);
|
|
box-shadow: none;
|
|
display: block !important;
|
|
min-width: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
overflow: hidden;
|
|
transition: all 250ms ease;
|
|
white-space: nowrap;
|
|
|
|
&:not(:focus) {
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: $colorInputBg;
|
|
padding-left: $inputTextPLeftRight;
|
|
padding-right: $inputTextPLeftRight;
|
|
}
|
|
}
|
|
|
|
&--labeled {
|
|
// TODO: replace .c-labeled-input with this
|
|
// An input used in the Toolbar
|
|
// Assumes label is before the input
|
|
@include cControl();
|
|
|
|
input {
|
|
margin-left: $interiorMarginSm;
|
|
}
|
|
}
|
|
}
|
|
|
|
.c-labeled-input {
|
|
// An input used in the Toolbar
|
|
// Assumes label is before the input
|
|
@include cControl();
|
|
|
|
input {
|
|
margin-left: $interiorMarginSm;
|
|
}
|
|
}
|
|
|
|
// SELECTS
|
|
select {
|
|
@include appearanceNone();
|
|
@include themedSelect();
|
|
background-repeat: no-repeat, no-repeat;
|
|
background-position: right .4em top 80%, 0 0;
|
|
border: none;
|
|
border-radius: $controlCr;
|
|
padding: 1px 20px 1px $interiorMargin;
|
|
}
|
|
|
|
// CHECKBOX LISTS
|
|
// __input followed by __label
|
|
.c-checkbox-list {
|
|
// Rows
|
|
&__row + &__row { margin-top: $interiorMarginSm; }
|
|
|
|
// input and label in each __row
|
|
&__row {
|
|
> * + * { margin-left: $interiorMargin; }
|
|
}
|
|
}
|
|
|
|
/******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
|
|
.c-hyperlink {
|
|
&--link {
|
|
color: $colorKey;
|
|
}
|
|
|
|
&--button {
|
|
@include cButton();
|
|
}
|
|
}
|
|
|
|
/******************************************************** MENUS */
|
|
@mixin menuOuter() {
|
|
border-radius: $basicCr;
|
|
background: $colorMenuBg;
|
|
text-shadow: $shdwMenuText;
|
|
padding: $interiorMarginSm;
|
|
box-shadow: $shdwMenu;
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 100;
|
|
}
|
|
|
|
@mixin menuInner() {
|
|
li {
|
|
@include cControl();
|
|
justify-content: start;
|
|
color: $colorMenuFg;
|
|
cursor: pointer;
|
|
display: flex;
|
|
padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
|
|
transition: $transIn;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background: $colorMenuHovBg;
|
|
color: $colorMenuHovFg;
|
|
&:before {
|
|
color: $colorMenuHovIc;
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
color: $colorMenuIc;
|
|
font-size: 1em;
|
|
margin-right: $interiorMargin;
|
|
}
|
|
}
|
|
}
|
|
|
|
.c-menu {
|
|
@include menuOuter();
|
|
@include menuInner();
|
|
}
|
|
|
|
.c-super-menu {
|
|
// Two column layout, menu items on left with detail of hover element on right
|
|
@include menuOuter();
|
|
display: flex;
|
|
padding: $interiorMarginLg;
|
|
flex-direction: row;
|
|
|
|
> [class*="__"] {
|
|
$m: $interiorMarginLg;
|
|
flex: 1 1 50%;
|
|
&:first-child {
|
|
margin-right: $m;
|
|
}
|
|
|
|
&:last-child {
|
|
border-left: 1px solid $colorInteriorBorder;
|
|
padding-left: $m;
|
|
}
|
|
}
|
|
|
|
&__menu {
|
|
@include menuInner();
|
|
overflow: auto;
|
|
|
|
ul {
|
|
margin-right: $interiorMarginSm; // Fend off scrollbar
|
|
}
|
|
|
|
li {
|
|
border-radius: $controlCr;
|
|
}
|
|
}
|
|
|
|
&__item-description {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: stretch;
|
|
|
|
.l-item-description {
|
|
&__name,
|
|
&__description {
|
|
margin-top: $interiorMarginLg;
|
|
}
|
|
|
|
&__icon {
|
|
min-height: 20%;
|
|
margin: 10% 25%;
|
|
}
|
|
|
|
&__name {
|
|
color: $colorMenuFg;
|
|
flex: 0 0 auto;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
&__description {
|
|
font-size: $fontBaseSize;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/******************************************************** PALETTES */
|
|
.c-palette {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
|
|
&__items {
|
|
flex: 1 1 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 12px);
|
|
grid-gap: 1px;
|
|
}
|
|
|
|
&__item {
|
|
$d: 12px;
|
|
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
min-width: $d; min-height: $d;
|
|
transition: $transOut;
|
|
|
|
&:hover {
|
|
transition: $transIn;
|
|
$o: 0.7;
|
|
border-color: rgba($paletteItemBorderOuterColorSelected, $o);
|
|
box-shadow: inset rgba($paletteItemBorderInnerColorSelected, $o) 0 0 0 1px;
|
|
}
|
|
|
|
&.is-selected {
|
|
border-color: $paletteItemBorderOuterColorSelected !important;
|
|
border-width: 2px;
|
|
box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
|
|
}
|
|
}
|
|
|
|
&__item-none {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: $interiorMarginSm;
|
|
|
|
.c-palette__item {
|
|
@include noColor();
|
|
border-color: $paletteItemBorderInnerColor;
|
|
margin-right: $interiorMarginSm;
|
|
}
|
|
}
|
|
}
|
|
|
|
/******************************************************** SWATCHES */
|
|
.c-color-swatch {
|
|
border: 1px solid rgba(#fff, 0.2);
|
|
box-shadow: rgba(#000, 0.2) 0 0 0 1px;
|
|
}
|
|
|
|
/******************************************************** TOOLBAR */
|
|
.c-ctrl-wrapper {
|
|
@include cCtrlWrapper();
|
|
}
|
|
|
|
.c-toolbar,
|
|
.c-toolbar .c-ctrl-wrapper {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
@mixin cToolbarSeparator() {
|
|
$m: 1px;
|
|
$b: 1px;
|
|
display: block;
|
|
width: $m + $b; // Allow for border
|
|
border-right: $b solid $colorInteriorBorder;
|
|
margin-right: $m;
|
|
}
|
|
|
|
.c-toolbar {
|
|
$p: $interiorMargin;
|
|
background: $editUIBaseColor;
|
|
border-radius: $basicCr;
|
|
height: $p + 24px; // Need to standardize the height
|
|
padding: $p;
|
|
|
|
> * + * {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
&__separator {
|
|
@include cToolbarSeparator();
|
|
}
|
|
|
|
.c-click-icon,
|
|
.c-labeled-input {
|
|
color: $editUIBaseColorFg;
|
|
}
|
|
|
|
.c-click-icon {
|
|
@include cControl();
|
|
$pLR: $interiorMargin - 1;
|
|
$pTB: 2px;
|
|
padding: $pTB $pLR;
|
|
|
|
&:hover {
|
|
background: $editUIBaseColorHov !important;
|
|
color: $editUIBaseColorFg !important;
|
|
}
|
|
|
|
&--swatched {
|
|
padding-bottom: floor($pTB / 2);
|
|
width: 2em; // Standardize the width
|
|
}
|
|
|
|
&[class*='--caution'] {
|
|
&:before {
|
|
color: $colorBtnCautionBg;
|
|
}
|
|
|
|
&:hover {
|
|
background: rgba($colorBtnCautionBgHov, 0.2);
|
|
:before {
|
|
color: $colorBtnCautionBgHov;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.c-labeled-input {
|
|
font-size: 0.9em;
|
|
input[type='number'] {
|
|
width: 40px; // Number input sucks and must have size set using this method
|
|
}
|
|
|
|
+ .c-labeled-input {
|
|
margin-left: $interiorMargin;
|
|
}
|
|
}
|
|
|
|
.c-palette {
|
|
min-width: 136px;
|
|
}
|
|
}
|
|
|
|
/********* Button Sets */
|
|
.c-button-set {
|
|
// When one set is adjacent to another, provides a divider between
|
|
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
|
|
> * {
|
|
// Assume buttons are immediate descendants
|
|
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-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;
|
|
|
|
+ * {
|
|
margin-left: 1px;
|
|
}
|
|
|
|
&:first-child {
|
|
border-top-left-radius: $controlCr;
|
|
border-bottom-left-radius: $controlCr;
|
|
}
|
|
|
|
&:last-child {
|
|
border-top-right-radius: $controlCr;
|
|
border-bottom-right-radius: $controlCr;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/***************************************************** SLIDERS */
|
|
.c-slider {
|
|
@include cControl();
|
|
> * + * { 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
|
|
@include abs();
|
|
background-color: $colorDropHintBg;
|
|
color: $colorDropHintFg;
|
|
border-radius: $basicCr;
|
|
border: 1px dashed $colorDropHintFg;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: $transOut;
|
|
z-index: 50;
|
|
|
|
&:not(.c-drop-hint--always-show) {
|
|
opacity: 0; // Must use this (rather than display: none) to enable transition effects
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:before {
|
|
$h: 80%;
|
|
$mh: 25px;
|
|
background: $bg-icon-plus;
|
|
background-size: contain;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
content: '';
|
|
display: block;
|
|
filter: $colorKeyFilterHov;
|
|
height: $h; width: $h;
|
|
max-height: $mh; max-width: $mh;
|
|
}
|
|
|
|
.is-dragging &,
|
|
&.is-dragging {
|
|
pointer-events: inherit;
|
|
transition: $transIn;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.is-mouse-over &,
|
|
&.is-mouse-over {
|
|
transition: $transIn;
|
|
background-color: $colorDropHintBgHov;
|
|
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;
|
|
}
|
|
}
|