mirror of
https://github.com/nasa/openmct.git
synced 2025-04-13 22:23:13 +00:00
Merge branch 'topic-core-refactor' into flex-layout-selection
This commit is contained in:
Pegah Sarram
commit
104cd0ed29
@ -49,7 +49,7 @@ define(
|
||||
name: "Properties",
|
||||
rows: this.properties.map(function (property, index) {
|
||||
// Property definition is same as form row definition
|
||||
var row = Object.create(property.getDefinition());
|
||||
var row = JSON.parse(JSON.stringify(property.getDefinition()));
|
||||
row.key = index;
|
||||
return row;
|
||||
}).filter(function (row) {
|
||||
|
||||
@ -66,7 +66,7 @@ define(
|
||||
name: "Properties",
|
||||
rows: this.properties.map(function (property, index) {
|
||||
// Property definition is same as form row definition
|
||||
var row = Object.create(property.getDefinition());
|
||||
var row = JSON.parse(JSON.stringify(property.getDefinition()));
|
||||
|
||||
// Use index as the key into the formValue;
|
||||
// this correlates to the indexing provided by
|
||||
|
||||
@ -79,7 +79,7 @@ $colorKeyHov: #26d8ff;
|
||||
$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
|
||||
$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
|
||||
$colorKeySelectedBg: $colorKey;
|
||||
$uiColor: #00b2ff; // Resize bars, splitter bars, etc.
|
||||
$uiColor: #0093ff; // Resize bars, splitter bars, etc.
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||
$colorA: #ccc;
|
||||
$colorAHov: #fff;
|
||||
@ -143,6 +143,8 @@ $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
|
||||
|
||||
/************************************************** EDITING */
|
||||
$editUIColor: $uiColor; // Base color
|
||||
$editUIColorBg: $editUIColor;
|
||||
$editUIColorFg: #fff;
|
||||
$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
|
||||
$editUIBaseColor: #344b8d; // Base color, toolbar bg
|
||||
$editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
|
||||
|
||||
@ -147,6 +147,8 @@ $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
|
||||
|
||||
/************************************************** EDITING */
|
||||
$editUIColor: $uiColor; // Base color
|
||||
$editUIColorBg: $editUIColor;
|
||||
$editUIColorFg: #fff;
|
||||
$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
|
||||
$editUIBaseColor: #344b8d; // Base color, toolbar bg
|
||||
$editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
|
||||
|
||||
@ -143,6 +143,8 @@ $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
|
||||
|
||||
/************************************************** EDITING */
|
||||
$editUIColor: $uiColor; // Base color
|
||||
$editUIColorBg: $editUIColor;
|
||||
$editUIColorFg: #fff;
|
||||
$editUIColorHov: pullForward(saturate($uiColor, 10%), 20%); // Hover color when $editUIColor is applied as a base color
|
||||
$editUIBaseColor: #cae1ff; // Base color, toolbar bg
|
||||
$editUIBaseColorHov: pushBack($editUIBaseColor, 20%);
|
||||
@ -159,8 +161,8 @@ $editFrameBorderHov: 1px solid $editFrameColorHov; // Hover on selectable frames
|
||||
$editFrameColorSelected: #333; // Border of selected frames
|
||||
$editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make handle standout
|
||||
$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
|
||||
$editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
|
||||
$editFrameSelectedBorder: 1px solid $editFrameColorHov; // Selected frame element
|
||||
$editFrameSelectedShdw: rgba(black, 0.5) 0 1px 5px 2px;
|
||||
$editFrameSelectedBorder: 1px dashed $editFrameColorSelected; // Selected frame element
|
||||
$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
|
||||
$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
|
||||
$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
|
||||
|
||||
@ -20,19 +20,38 @@
|
||||
* 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;
|
||||
@mixin statusStyle($bg, $fg, $imp: false) {
|
||||
$impStr: null;
|
||||
@if $imp {
|
||||
$impStr: !important;
|
||||
}
|
||||
background: $bg $impStr;
|
||||
background-color: $bg $impStr;
|
||||
color: $fg $impStr;
|
||||
}
|
||||
|
||||
@mixin statusIcon($ic, $glyph: null, $imp: false) {
|
||||
$impStr: null;
|
||||
@if $imp {
|
||||
$impStr: !important;
|
||||
}
|
||||
&:before {
|
||||
color: $ic;
|
||||
display: inline-block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 0.7em;
|
||||
font-size: 0.8em;
|
||||
margin-right: $interiorMargin;
|
||||
@if $glyph != null {
|
||||
content: $glyph $impStr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin statusStyleCombined($bg, $fg, $ic) {
|
||||
@include statusStyle($bg, $fg, $imp: true);
|
||||
@include statusIcon($ic);
|
||||
}
|
||||
|
||||
@mixin elementStatusColors($c) {
|
||||
// Sets bg and icon colors for elements
|
||||
background: rgba($c, 0.5) !important;
|
||||
@ -47,16 +66,45 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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; }
|
||||
@mixin andUprLwr {
|
||||
&.is-limit--upr:before { content: $glyph-icon-arrow-up !important; }
|
||||
&.is-limit--lwr:before { content: $glyph-icon-arrow-down !important; }
|
||||
}
|
||||
|
||||
.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; }
|
||||
/*************************************************** STYLES */
|
||||
*:not(tr) {
|
||||
&.is-limit--yellow {
|
||||
@include statusStyle($colorLimitYellowBg, $colorLimitYellowFg, true);
|
||||
@include statusIcon($colorLimitYellowIc, $glyph-icon-alert-rect);
|
||||
@include andUprLwr();
|
||||
}
|
||||
|
||||
&.is-limit--red {
|
||||
@include statusStyle($colorLimitRedBg, $colorLimitRedFg, true);
|
||||
@include statusIcon($colorLimitRedIc, $glyph-icon-alert-triangle);
|
||||
@include andUprLwr();
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&.is-limit--yellow {
|
||||
@include statusStyle($colorLimitYellowBg, $colorLimitYellowFg);
|
||||
td:first-child {
|
||||
@include statusIcon($colorLimitYellowIc, $glyph-icon-alert-rect);
|
||||
}
|
||||
td { color: $colorLimitYellowFg; }
|
||||
}
|
||||
|
||||
&.is-limit--red {
|
||||
@include statusStyle($colorLimitRedBg, $colorLimitRedFg);
|
||||
td:first-child {
|
||||
@include statusIcon($colorLimitRedIc, $glyph-icon-alert-triangle);
|
||||
}
|
||||
td { color: $colorLimitRedFg; }
|
||||
}
|
||||
|
||||
&.is-limit--upr { td:first-child:before { content: $glyph-icon-arrow-up !important; } }
|
||||
&.is-limit--lwr { td:first-child:before { content: $glyph-icon-arrow-down !important; } }
|
||||
}
|
||||
|
||||
/*************************************************** STATUS */
|
||||
|
||||
@ -53,6 +53,24 @@ table {
|
||||
a { color: $colorBtnMajorBg; }
|
||||
}
|
||||
|
||||
.is-editing {
|
||||
td.is-selectable {
|
||||
&:hover {
|
||||
background: rgba($editUIColorBg, 0.1);
|
||||
box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
|
||||
}
|
||||
|
||||
&[s-selected] {
|
||||
background: $editUIColorBg !important;
|
||||
border: 1px solid $editUIColorFg !important;
|
||||
color: $editUIColorFg !important;
|
||||
box-shadow: $editFrameSelectedShdw;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** C-TABLE */
|
||||
div.c-table {
|
||||
// When c-table is used as a wrapper element in more complex table views
|
||||
height: 100%;
|
||||
|
||||
@ -63,7 +63,11 @@
|
||||
}
|
||||
|
||||
&__object-view {
|
||||
background: $colorBodyBg;
|
||||
border: 1px solid $colorInteriorBorder;
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
padding: $interiorMargin;
|
||||
|
||||
> div:not([class]) {
|
||||
// Target an immediate child div without a class and make it display: contents
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user