ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-07 11:26:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

R&I Misc UI 3 (#2253)

Browse Source 
* Limits-related changes; WIP

- Renamed CSS classes: `s-limit-*` > `is-limit--*`;
- Removed load of legacy _status.scss and added new _status.scss file;
- Minor re-org of limit/status constants in theme files;
- Limit colors in theme constants all updated;

* Fixes for s-selected always displaying the move cursor

- Mod s-selected;
- Reinstitute `.is-moveable` class;

* Layout-related cleanup and refinements

- LineView cleaned up;
- Selection, hover, etc. classes for c-frame cleaned up;
- Constant names normalized, theme files updated;

* Fixes for editing plot options

- Color palette now more flexible;
- Styles for color palette button refined;
- c-input--flex added for more flexible inputs;

* Various swatch-related changes

- Swatch refinements, new .c-click-swatch class;
- Added .c-click-icon--major modifier style, applied in markup;

* Local controls class application and behavior cleanup

- Remmoved .has-local-controls from selected markup;
- Refined CSS selector for better hover behavior;

* Misc UI tweaks

- click-icon--major in Notebook;
- .test mixin improved;

* Update _constants-espresso.scss

* Update _constants-maelstrom.scss
This commit is contained in:
Charles Hacskaylo 2018-12-20 13:17:44 -08:00 committed by Pete Richards
parent b0917a9866
commit 30a4888363
20 changed files with 303 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
example/generator/SinewaveLimitProvider.js
View File

@ -37,25 +37,25 @@ define([
},
LIMITS = {
rh: {
cssClass: "s-limit-upr s-limit-red",
cssClass: "is-limit--upr is-limit--red",
low: RED,
high: Number.POSITIVE_INFINITY,
name: "Red High"
},
rl: {
cssClass: "s-limit-lwr s-limit-red",
cssClass: "is-limit--lwr is-limit--red",
high: -RED,
low: Number.NEGATIVE_INFINITY,
name: "Red Low"
},
yh: {
cssClass: "s-limit-upr s-limit-yellow",
cssClass: "is-limit--upr is-limit--yellow",
low: YELLOW,
high: RED,
name: "Yellow High"
},
yl: {
cssClass: "s-limit-lwr s-limit-yellow",
cssClass: "is-limit--lwr is-limit--yellow",
low: -RED,
high: -YELLOW,
name: "Yellow Low"

2
src/plugins/displayLayout/components/DisplayLayout.vue
View File

@ -77,7 +77,7 @@
.l-shell__main-container {
> .l-layout {
[s-selected] {
border: $browseBorderSelected;
border: $browseSelectedBorder;
}
}
}

2
src/plugins/displayLayout/components/LayoutFrame.vue
View File

@ -21,7 +21,7 @@
*****************************************************************************/
<template>
<div class="l-layout__frame c-frame has-local-controls"
<div class="l-layout__frame c-frame"
:class="{
'no-frame': !item.hasFrame,
'u-inspectable': inspectable,

8
src/plugins/displayLayout/components/LineView.vue
View File

@ -21,10 +21,9 @@
*****************************************************************************/
<template>
<div class="l-layout__frame c-frame has-local-controls no-frame"
<div class="l-layout__frame c-frame no-frame"
:style="style">
<svg width="100%"
height="100%">
<svg width="100%" height="100%">
<line v-bind="linePosition"
:stroke="item.stroke"
stroke-width="2">
@ -101,9 +100,6 @@
top: `${top}px`,
width: `${width}px`,
height: `${height}px`,
minWidth: `${width}px`,
minHeight: `${height}px`,
position: 'absolute'
};
},
startHandleClass() {

2
src/plugins/notebook/res/templates/entry.html
View File

@ -28,7 +28,7 @@
</div>
<div class="c-ne__local-controls--hidden">
<button class="c-click-icon icon-trash"
<button class="c-click-icon c-click-icon--major icon-trash"
title="Delete this entry"
v-on:click="deleteEntry"></button>
</div>

12
src/plugins/plot/res/templates/plot-options-browse.html
View File

@ -70,17 +70,9 @@
<div class="grid-cell label"
title="The plot line and marker color for this series.">Color</div>
<div class="grid-cell value">
<!-- TODO: get this into a class -->
<span class="color-swatch"
<span class="c-color-swatch"
ng-style="{
'background': series.get('color').asHexString(),
'display': 'inline-block',
'border': '1px solid rgba(255, 255, 255, 0.2)',
'height': '10px',
'width': '10px',
'vertical-align': 'middle',
'margin-left': '3px',
'margin-top': -'2px'
'background': series.get('color').asHexString()
}">
</span>
</div>

22
src/plugins/plot/res/templates/plot-options-edit.html
View File

@ -78,7 +78,7 @@
<li class="grid-row" ng-show="form.markers || form.alarmMarkers">
<div class="grid-cell label"
title="The size of regular and alarm markers for this series.">Marker Size:</div>
<div class="grid-cell value"><input class="sm" type="text" ng-model="form.markerSize"/></div>
<div class="grid-cell value"><input class="c-input--flex" type="text" ng-model="form.markerSize"/></div>
</li>
<li class="grid-row"
ng-controller="ClickAwayController as toggle"
@ -86,14 +86,14 @@
<div class="grid-cell label"
title="Manually set the plot line and marker color for this series.">Color</div>
<div class="grid-cell value">
<div class="s-menu-button" ng-click="toggle.toggle()">
<span class="color-swatch" ng-style="{ background: series.get('color').asHexString() }">
<div class="c-click-swatch c-click-swatch--menu" ng-click="toggle.toggle()">
<span class="c-color-swatch"
ng-style="{ background: series.get('color').asHexString() }">
</span>
</div>
<div class="l-inline-palette" ng-show="toggle.isActive()">
<!-- TODO: redo this as a grid -->
<div class="l-palette-row" ng-repeat="group in config.series.palette.groups()">
<div class="l-palette-item s-palette-item"
<div class="c-palette--inline c-palette__items" ng-show="toggle.isActive()">
<div class="u-contents" ng-repeat="group in config.series.palette.groups()">
<div class="c-palette__item"
ng-repeat="color in group"
ng-class="{ 'selected': series.get('color').equalTo(color) }"
ng-style="{ background: color.asHexString() }"
@ -115,7 +115,7 @@
<li class="grid-row">
<div class="grid-cell label"
title="Manually override how the Y axis is labeled.">Label</div>
<div class="grid-cell value"><input class="control" type="text" ng-model="form.label"/></div>
<div class="grid-cell value"><input class="c-input--flex" type="text" ng-model="form.label"/></div>
</li>
</ul>
<ul class="l-inspector-part">
@ -130,7 +130,7 @@
title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc.">
Padding</div>
<div class="grid-cell value">
<input class="sm" type="text" ng-model="form.autoscalePadding"/>
<input class="c-input--flex" type="text" ng-model="form.autoscalePadding"/>
</div>
</li>
</ul>
@ -143,13 +143,13 @@
<div class="grid-cell label"
title="Minimum Y axis value.">Minimum Value</div>
<div class="grid-cell value">
<input class="sm" type="number" ng-model="form.range.min"/>
<input class="c-input--flex" type="number" ng-model="form.range.min"/>
</div>
</li>
<li class="grid-row">
<div class="grid-cell label"
title="Maximum Y axis value.">Maximum Value</div>
<div class="grid-cell value"><input class="sm" type="number" ng-model="form.range.max"/></div>
<div class="grid-cell value"><input class="c-input--flex" type="number" ng-model="form.range.max"/></div>
</li>
</ul>
</div>

59
src/styles-new/_constants-espresso.scss
View File

@ -110,6 +110,7 @@ $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
// Base Colors
$dlSpread: 20%;
$editColor: #00c7c3;
$editColorAlt: #9971ff;
$editColorBgBase: darken($editColor, $dlSpread);
$editColorBg: rgba($editColorBgBase, 0.2);
$editColorFg: lighten($editColor, $dlSpread);
@ -126,16 +127,17 @@ $editSelectableColorSelected: $editSelectableColorHov;
$editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%);
$editSelectableColorFg: darken($editSelectableColor, 40%);
$editSelectableBorder: 1px dotted $editSelectableColor;
$editSelectableBorderHov: 1px dotted $editColor;
$editSelectableBorderHov: 1px dotted $editColorAlt;
$editSelectableBorderSelected: 1px solid $editColor;
$editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
$editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
$editBorderDrilledIn: 1px dashed #9971ff;
$editBorderDrilledIn: 1px dashed $editColorAlt;
$colorGridLines: rgba($editColor, 0.2);
/************************************************** BROWSING */
$browseBorderSelectableHov: 1px dotted rgba($colorBodyFg, 0.2);
$browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px;
$browseBorderSelected: 1px solid rgba($colorBodyFg, 0.6);
$browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2);
$browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px;
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6);
// Icons
$colorIconAlias: #4af6f3;
@ -221,18 +223,31 @@ $overlayBrightnessAdjust: brightness(1.3);
// Indicator colors
$colorIndicatorAvailable: $colorKey;
$colorIndicatorDisabled: #444;
$colorIndicatorDisabled: #555555;
$colorIndicatorOn: $colorOk;
$colorIndicatorOff: #666;
$colorIndicatorOff: #777777;
// Limits and staleness colors//
// Staleness
$colorTelemFresh: lighten($colorBodyFg, 20%);
$colorTelemStale: darken($colorBodyFg, 20%);
$styleTelemStale: italic;
$colorLimitYellowBg: rgba(#ffaa00, 0.3);
$colorLimitYellowIc: #ffaa00;
$colorLimitRedBg: rgba(red, 0.3);
$colorLimitRedIc: red;
// Limits
$colorLimitYellowBg: #ac7300;
$colorLimitYellowFg: #ffe64d;
$colorLimitYellowIc: #ffb607;
$colorLimitRedBg: #940000;
$colorLimitRedFg: #ffa489;
$colorLimitRedIc: #ff4222;
// Status
$colorAlert: #ff3c00;
$colorWarningHi: #990000;
$colorWarningLo: #ff9900;
$colorDiagnostic: #a4b442;
$colorCommand: #3693bd;
$colorInfo: #2294a2;
$colorOk: #33cc33;
// Bubble colors
$colorInfoBubbleBg: $colorMenuBg;
@ -354,14 +369,16 @@ $createBtnTextTransform: uppercase;
}
/**************************************************** NOT USED, LEAVE FOR NOW */
// Content status
// Slider controls, not in use
/*
$colorAlert: #ff3c00;
$colorWarningHi: #990000;
$colorWarningLo: #ff9900;
$colorDiagnostic: #a4b442;
$colorCommand: #3693bd;
$colorInfo: #2294a2;
$colorOk: #33cc33;
$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;
*/

41
src/styles-new/_constants-maelstrom.scss
View File

@ -114,6 +114,7 @@ $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
// Base Colors
$dlSpread: 20%;
$editColor: #00c7c3;
$editColorAlt: #9971ff;
$editColorBgBase: darken($editColor, $dlSpread);
$editColorBg: rgba($editColorBgBase, 0.2);
$editColorFg: lighten($editColor, $dlSpread);
@ -130,16 +131,17 @@ $editSelectableColorSelected: $editSelectableColorHov;
$editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%);
$editSelectableColorFg: darken($editSelectableColor, 40%);
$editSelectableBorder: 1px dotted $editSelectableColor;
$editSelectableBorderHov: 1px dotted $editColor;
$editSelectableBorderHov: 1px dotted $editColorAlt;
$editSelectableBorderSelected: 1px solid $editColor;
$editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
$editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
$editBorderDrilledIn: 1px dashed #9971ff;
$editBorderDrilledIn: 1px dashed $editColorAlt;
$colorGridLines: rgba($editColor, 0.2);
/************************************************** BROWSING */
$browseBorderSelectableHov: 1px dotted rgba($colorBodyFg, 0.2);
$browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px;
$browseBorderSelected: 1px solid rgba($colorBodyFg, 0.6);
$browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2);
$browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px;
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6);
// Icons
$colorIconAlias: #4af6f3;
@ -225,18 +227,31 @@ $overlayBrightnessAdjust: brightness(1.3);
// Indicator colors
$colorIndicatorAvailable: $colorKey;
$colorIndicatorDisabled: #444;
$colorIndicatorDisabled: #555555;
$colorIndicatorOn: $colorOk;
$colorIndicatorOff: #666;
$colorIndicatorOff: #777777;
// Limits and staleness colors//
// Staleness
$colorTelemFresh: lighten($colorBodyFg, 20%);
$colorTelemStale: darken($colorBodyFg, 20%);
$styleTelemStale: italic;
$colorLimitYellowBg: rgba(#ffaa00, 0.3);
$colorLimitYellowIc: #ffaa00;
$colorLimitRedBg: rgba(red, 0.3);
$colorLimitRedIc: red;
// Limits
$colorLimitYellowBg: #ac7300;
$colorLimitYellowFg: #ffe64d;
$colorLimitYellowIc: #ffb607;
$colorLimitRedBg: #940000;
$colorLimitRedFg: #ffa489;
$colorLimitRedIc: #ff4222;
// Status
$colorAlert: #ff3c00;
$colorWarningHi: #990000;
$colorWarningLo: #ff9900;
$colorDiagnostic: #a4b442;
$colorCommand: #3693bd;
$colorInfo: #2294a2;
$colorOk: #33cc33;
// Bubble colors
$colorInfoBubbleBg: $colorMenuBg;
@ -371,4 +386,4 @@ $createBtnTextTransform: uppercase;
border-right: $bLR !important;;
padding: 5px 10px 10px 10px !important;
}
}
}

37
src/styles-new/_constants-snow.scss
View File

@ -110,6 +110,7 @@ $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
// Base Colors
$dlSpread: 20%;
$editColor: #00c7c3;
$editColorAlt: #9971ff;
$editColorBgBase: darken($editColor, $dlSpread);
$editColorBg: darken($editColor, $dlSpread);
$editColorFg: lighten($editColor, $dlSpread);
@ -122,20 +123,21 @@ $editSelectableColor: #acdad6;
$editSelectableColorFg: darken($editSelectableColor, 20%);
$editSelectableColorHov: darken($editSelectableColor, 10%);
// Selectable selected
$editSelectableColorSelected: $editColor; //$editSelectableColorHov;
$editSelectableColorSelected: $editColor;
$editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 50%);
$editSelectableColorFg: darken($editSelectableColor, 40%);
$editSelectableBorder: 1px dotted $editSelectableColor;
$editSelectableBorderHov: 1px dotted $editColor;
$editSelectableBorderHov: 1px dotted $editColorAlt;
$editSelectableBorderSelected: 1px solid $editColor;
$editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
$editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
$editBorderDrilledIn: 1px dashed #9971ff;
$editBorderDrilledIn: 1px dashed $editColorAlt;
$colorGridLines: rgba($editColor, 0.2);
/************************************************** BROWSING */
$browseBorderSelectableHov: 1px dotted rgba($colorBodyFg, 0.2);
$browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px;
$browseBorderSelected: 1px solid rgba($colorBodyFg, 0.6);
$browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2);
$browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px;
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6);
// Icons
$colorIconAlias: #4af6f3;
@ -225,14 +227,27 @@ $colorIndicatorDisabled: #444;
$colorIndicatorOn: $colorOk;
$colorIndicatorOff: #666;
// Limits and staleness colors//
// Staleness
$colorTelemFresh: darken($colorBodyFg, 20%);
$colorTelemStale: lighten($colorBodyFg, 20%);
$styleTelemStale: italic;
$colorLimitYellowBg: rgba(#ffaa00, 0.3);
$colorLimitYellowIc: #ffaa00;
$colorLimitRedBg: rgba(red, 0.3);
$colorLimitRedIc: red;
// Limits
$colorLimitYellowBg: #ffe64d;
$colorLimitYellowFg: #7f4f20;
$colorLimitYellowIc: #e7a115;
$colorLimitRedBg: #ff0000;
$colorLimitRedFg: #fff;
$colorLimitRedIc: #ffa99a;
// Status
$colorAlert: #ff3c00;
$colorWarningHi: #990000;
$colorWarningLo: #ff9900;
$colorDiagnostic: #a4b442;
$colorCommand: #3693bd;
$colorInfo: #2294a2;
$colorOk: #33cc33;
// Bubble colors
$colorInfoBubbleBg: $colorMenuBg;

54
src/styles-new/_controls.scss
View File

@ -31,11 +31,13 @@ button {
@include cButton();
}
.c-button--menu {
&:after {
content: $glyph-icon-arrow-down;
font-family: symbolsfont;
opacity: 0.5;
.c-button {
&--menu {
&:after {
content: $glyph-icon-arrow-down;
font-family: symbolsfont;
opacity: 0.5;
}
}
}
@ -44,23 +46,25 @@ button {
}
/********* Icon Buttons */
.c-click-icon {
.c-click-icon,
.c-click-swatch {
@include cClickIcon();
.c-click-icon__label {
margin-left: $interiorMargin;
}
&--menu {
&:after {
content: $glyph-icon-arrow-down;
font-family: symbolsfont;
font-size: 0.6em;
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
@ -162,6 +166,11 @@ input[type=number]::-webkit-outer-spin-button {
}
.c-input {
&--flex {
width: 100%;
min-width: 20px;
}
&--datetime {
// Sized for values such as 2018-09-28 22:32:33.468Z
width: 160px;
@ -260,6 +269,7 @@ input[type=number]::-webkit-outer-spin-button {
color: $colorMenuHovIc;
}
}
&:before {
color: $colorMenuIc;
font-size: 1em;
@ -343,16 +353,16 @@ input[type=number]::-webkit-outer-spin-button {
&__items {
flex: 1 1 auto;
display: grid;
grid-template-columns: repeat(10, [col] auto );
grid-template-columns: repeat(auto-fill, 12px);
grid-gap: 1px;
}
&__item {
$d: 16px;
$d: 12px;
border: 1px solid transparent;
cursor: pointer;
width: 16px; height: 16px;
min-width: $d; min-height: $d;
transition: $transOut;
&:hover {
@ -383,6 +393,12 @@ input[type=number]::-webkit-outer-spin-button {
}
}
/******************************************************** 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();
@ -449,6 +465,10 @@ input[type=number]::-webkit-outer-spin-button {
margin-left: $interiorMargin;
}
}
.c-palette {
min-width: 136px;
}
}
/********* Button Sets */
@ -461,10 +481,6 @@ input[type=number]::-webkit-outer-spin-button {
> * {
// Assume buttons are immediate descendants
flex: 0 0 auto;
+ * {
// margin-left: $interiorMarginSm;
}
}
+ .c-button-set {

34
src/styles-new/_global.scss
View File

@ -141,17 +141,22 @@ li {
// Local Controls: Controls placed in proximity to or overlaid on components and views
body.desktop .has-local-controls {
// Provides hover ability to show local controls
&:hover [class*="local-controls--hidden"] {
transition: opacity 50ms ease-in-out;
opacity: 1;
pointer-events: inherit;
}
[class*="local-controls--hidden"] {
[class*='local-controls--hidden'] {
transition: opacity 500ms ease-in-out;
opacity: 0;
pointer-events: none;
}
// Look down up to two levels and display hidden LC's on hover
&:hover {
> [class*='local-controls--hidden'],
> * > [class*='local-controls--hidden'],
> * > * > [class*='local-controls--hidden'] {
transition: opacity 50ms ease-in-out;
opacity: 1;
pointer-events: inherit;
}
}
}
/******************************************************** ICON BACKGROUNDS */
@ -193,7 +198,7 @@ body.desktop .has-local-controls {
/*************************** SELECTION */
.u-inspectable {
&:hover {
box-shadow: $browseShdwSelectableHov;
box-shadow: $browseSelectableShdwHov;
}
}
@ -202,13 +207,14 @@ body.desktop .has-local-controls {
*:not(.is-drilled-in).c-frame {
border: $editSelectableBorder;
&:hover {
border: $editSelectableBorderHov;
&:not([s-selected]) {
&:hover {
border: $editSelectableBorderHov;
}
}
&[s-selected],
&.is-selected {
border: $editSelectableBorderSelected;
&[s-selected] {
box-shadow: $editSelectableShdwSelected;
> .c-frame-edit {
display: block; // Show the editing rect and handles
@ -220,7 +226,7 @@ body.desktop .has-local-controls {
border: $editBorderDrilledIn;
}
*[s-selected] {
.is-moveable {
cursor: move;
}

9
src/styles-new/_mixins.scss
View File

@ -294,7 +294,7 @@
padding: $interiorMargin floor($interiorMargin * 1.25);
&:after,
> * {
> * + * {
margin-left: $interiorMarginSm;
}
@ -333,7 +333,6 @@
background: none;
box-shadow: none;
border-radius: $controlCr;
color: $colorKey;
cursor: pointer;
padding: $pTB $pLR ;
@ -348,6 +347,10 @@
// Needed for c-togglebutton.
font-size: 1.25em;
}
&[class*="--major"] {
color: $colorKey;
}
}
@mixin cCtrlWrapper {
@ -506,5 +509,7 @@
}
@mixin test($c: deeppink, $a: 0.3) {
background: rgba($c, $a) !important;
background-color: rgba($c, $a) !important;
box-shadow: deeppink 0 0 10px 1px !important;
}

113
src/styles-new/_status.scss Normal file
View File

@ -0,0 +1,113 @@
/*****************************************************************************
* 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.
*****************************************************************************/
/*************************************************** MIXINS */
@mixin statusStyle($bg, $fg, $ic) {
background: $bg !important;
background-color: $bg !important;
color: $fg !important;
&:before {
color: $ic;
display: inline-block;
font-family: symbolsfont;
font-size: 0.7em;
margin-right: $interiorMargin;
}
}
@mixin elementStatusColors($c) {
// Sets bg and icon colors for elements
background: rgba($c, 0.5) !important;
&:before {
color: $c !important;
}
}
@mixin indicatorStatusColors($c) {
&:before, .count {
color: $c;
}
}
.is-limit--yellow {
@include statusStyle($colorLimitYellowBg, $colorLimitYellowFg, $colorLimitYellowIc);
&.is-limit--upr:before { content: $glyph-icon-arrow-up; }
&.is-limit--lwr:before { content: $glyph-icon-arrow-down; }
}
.is-limit--red {
@include statusStyle($colorLimitRedBg, $colorLimitRedFg, $colorLimitRedIc);
&.is-limit--upr:before { content: $glyph-icon-arrow-double-up; }
&.is-limit--lwr:before { content: $glyph-icon-arrow-double-down; }
}
/*************************************************** STATUS */
[class*='s-status'] {
&:before {
margin-right: $interiorMargin;
}
}
.s-status-warning-hi, .s-status-icon-warning-hi { @include elementStatusColors($colorWarningHi); }
.s-status-warning-lo, .s-status-icon-warning-lo { @include elementStatusColors($colorWarningLo); }
.s-status-diagnostic, .s-status-icon-diagnostic { @include elementStatusColors($colorDiagnostic); }
.s-status-info, .s-status-icon-info { @include elementStatusColors($colorInfo); }
.s-status-ok, .s-status-icon-ok { @include elementStatusColors($colorOk); }
.s-status-icon-warning-hi:before { content: $glyph-icon-alert-triangle; }
.s-status-icon-warning-lo:before { content: $glyph-icon-alert-rect; }
.s-status-icon-diagnostic:before { content: $glyph-icon-eye-open; }
.s-status-icon-info:before { content: $glyph-icon-info; }
.s-status-icon-ok:before { content: $glyph-icon-check; }
/*************************************************** INDICATOR COLORING */
.ls-indicator {
&.s-status-info {
@include indicatorStatusColors($colorInfo);
}
&.s-status-disabled {
@include indicatorStatusColors($colorIndicatorDisabled);
}
&.s-status-available {
@include indicatorStatusColors($colorIndicatorAvailable);
}
&.s-status-on,
&.s-status-enabled {
@include indicatorStatusColors($colorIndicatorOn);
}
&.s-status-off {
@include indicatorStatusColors($colorIndicatorOff);
}
&.s-status-caution,
&.s-status-warning,
&.s-status-alert {
@include indicatorStatusColors($colorStatusAlert);
}
&.s-status-error {
@include indicatorStatusColors($colorStatusError);
}
}

1
src/styles-new/core.scss
View File

@ -26,6 +26,7 @@
/******************** RENDERS CSS */
@import "glyphs";
@import "global";
@import "status";
@import "controls";
@import "table";
@import "legacy-plots";

2
src/styles-new/legacy-styles.scss
View File

@ -14,7 +14,7 @@
//@import "../styles/about";
//@import "../styles/text";
@import "../styles/icons";
@import "../styles/status";
//@import "../styles/status";
@import "../styles/data-status";
@import "../styles/helpers/bubbles";
@import "../styles/helpers/splitter";

2
src/ui/components/ObjectFrame.vue
View File

@ -20,7 +20,7 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
<template>
<div class="u-contents c-so-view"
<div class="u-contents c-so-view has-local-controls"
:class="{
'c-so-view--no-frame': !hasFrame
}">

11
src/ui/inspector/Inspector.vue
View File

@ -49,6 +49,14 @@
}
}
.c-color-swatch {
$d: 12px;
display: block;
flex: 0 0 auto;
width: $d;
height: $d;
}
/************************************************************** LEGACY */
// TODO: refactor when legacy properties markup can be converted
.inspector-location {
@ -128,9 +136,6 @@
grid-column: 1 / 3;
}
+ .c-properties {
// Margin between components
margin-top: $interiorMarginLg;

2
src/ui/layout/BrowseBar.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="l-browse-bar">
<div class="l-browse-bar__start">
<button class="l-browse-bar__nav-to-parent-button c-click-icon icon-pointer-left"></button>
<button class="l-browse-bar__nav-to-parent-button c-click-icon c-click-icon--major icon-pointer-left"></button>
<div class="l-browse-bar__object-name--w"
:class="type.cssClass">
<span

4
src/ui/layout/Layout.vue
View File

@ -5,11 +5,11 @@
<div class="l-shell__head">
<CreateButton class="l-shell__create-button"></CreateButton>
<div class="l-shell__controls">
<button class="c-click-icon icon-new-window" title="Open in a new browser tab"
<button class="c-click-icon c-click-icon--major icon-new-window" title="Open in a new browser tab"
@click="openInNewTab"
target="_blank">
</button>
<button v-bind:class="['c-click-icon', fullScreen ? 'icon-fullscreen-collapse' : 'icon-fullscreen-expand']"
<button v-bind:class="['c-click-icon c-click-icon--major', fullScreen ? 'icon-fullscreen-collapse' : 'icon-fullscreen-expand']"
v-bind:title="`${fullScreen ? 'Exit' : 'Enable'} full screen mode`"
@click="fullScreenToggle">
</button>