ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-17 14:48:13 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Refinements to active edit styles

Browse Source 
open #199
open #278
Styling finalized for tree/search items;
Mods to pulse mixins;
Colors for both themes finessed and finalized;
This commit is contained in:
Charles Hacskaylo
2015-11-18 16:46:56 -08:00
parent b9cd26aaf6
commit cc7df05a43
5 changed files with 39 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
platform/commonUI/general/res/sass/_effects.scss
View File

@ -51,14 +51,11 @@ a.disabled {
@include animation-name(pulse, 0.2); @include animation-name(pulse, 0.2);
} }
@include keyframes(pulse) { @mixin pulse($dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
0% { opacity: 0.5; } @include keyframes(pulse) {
100% { opacity: 1; } 0% { opacity: $opacity0; }
} 100% { opacity: $opacity100; }
}
@mixin pulse($dur: 500ms, $iteration: infinite) {
//@include customKeyframes(pulse, 0.2);
@include animation-name(pulse); @include animation-name(pulse);
@include animation-duration($dur); @include animation-duration($dur);
@include animation-direction(alternate); @include animation-direction(alternate);
@ -66,10 +63,10 @@ a.disabled {
@include animation-timing-function(ease-in-out); @include animation-timing-function(ease-in-out);
} }
@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s) { @mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) {
@include keyframes(pulseBorder) { @include keyframes(pulseBorder) {
0% { border-color: transparent; } 0% { border-color: rgba($c, $opacity0); }
100% { border-color: $c; } 100% { border-color: rgba($c, $opacity100); }
} }
@include animation-name(pulseBorder); @include animation-name(pulseBorder);
@include animation-duration($dur); @include animation-duration($dur);

18
platform/commonUI/general/res/sass/tree/_tree.scss
View File

@ -145,15 +145,26 @@ ul.tree {
&.active { &.active {
// The item is being edited // The item is being edited
background: rgba($colorItemTreeEditingBg, 0.5) !important; background: $colorItemTreeEditingBg; //rgba($colorItemTreeSelectedBg, 0.2) !important;
pointer-events: none; pointer-events: none;
&:before { &:before {
// Pencil icon // Pencil icon
@extend .ui-symbol; @extend .ui-symbol;
color: $colorItemTreeEditingBg; @include pulse($dur: 1s, $opacity0: 0.25);
color: $colorItemTreeEditingFg;
content: '\70'; content: '\70';
margin-left: $interiorMarginSm; margin-left: $interiorMarginSm;
} }
.t-object-label {
.t-item-icon,
.t-title-label {
color: $colorItemTreeEditingFg;
@include text-shadow(none);
}
.t-title-label {
font-style: italic;
}
}
.view-control, + .tree-item-subtree { display: none; } .view-control, + .tree-item-subtree { display: none; }
} }
@ -174,7 +185,8 @@ ul.tree {
} }
} }
.tree-item { .tree-item,
.search-result-item.active {
.t-object-label { .t-object-label {
left: $interiorMargin + $treeVCW; left: $interiorMargin + $treeVCW;
} }

13
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@ -235,10 +235,10 @@
} }
&.active { &.active {
@include pulseBorder($colorKey, 150ms, 8, 0.5s); @include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3);
@include border-radius($controlCr); @include border-radius($controlCr);
background-color: $colorEditAreaBg; background-color: $colorEditAreaBg;
border-color: $colorKey; border-color: $colorEditAreaFg;
border-width: 2px; border-width: 2px;
border-style: dotted; border-style: dotted;
.l-object-wrapper-inner { .l-object-wrapper-inner {
@ -252,14 +252,15 @@
} }
.l-edit-controls { .l-edit-controls {
@include trans-prop-nice-resize(0.25s); @include trans-prop-nice((opacity, height), 0.25s);
height: 0; border-bottom: 1px solid $colorInteriorBorder;
line-height: $ueEditToolBarH;
height: 0px;
opacity: 0; opacity: 0;
overflow: hidden; overflow: hidden;
&.active { &.active {
border-bottom: 1px solid $colorInteriorBorder;
height: $ueEditToolBarH + $interiorMargin; height: $ueEditToolBarH + $interiorMargin;
line-height: $ueEditToolBarH; margin-bottom: $interiorMargin;
opacity: 1; opacity: 1;
} }
} }

6
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -6,7 +6,8 @@ $colorFooterBg: #000;
$colorKey: #0099cc; $colorKey: #0099cc;
$colorKeySelectedBg: #005177; $colorKeySelectedBg: #005177;
$colorKeyFg: #fff; $colorKeyFg: #fff;
$colorEditAreaBg: rgba(#1f4fa2, 0.1); $colorEditAreaBg: #31363e;
$colorEditAreaFg: #587ab5;
$colorInteriorBorder: rgba($colorBodyFg, 0.1); $colorInteriorBorder: rgba($colorBodyFg, 0.1);
$colorA: #ccc; $colorA: #ccc;
$colorAHov: #fff; $colorAHov: #fff;
@ -157,7 +158,8 @@ $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeFg: $colorBodyFg; $colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: pushBack($colorKey, 15%); $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
$colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%); $colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
$colorItemTreeEditingBg: #b2624a; $colorItemTreeEditingBg: #344154;
$colorItemTreeEditingFg: $colorEditAreaFg;
$colorItemTreeVC: rgba(#fff, 0.3); $colorItemTreeVC: rgba(#fff, 0.3);
$colorItemTreeSelectedVC: $colorItemTreeVC; $colorItemTreeSelectedVC: $colorItemTreeVC;
$colorItemTreeVCHover: $colorAlt1; $colorItemTreeVCHover: $colorAlt1;

6
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -6,7 +6,8 @@ $colorFooterBg: #000;
$colorKey: #0099cc; $colorKey: #0099cc;
$colorKeySelectedBg: $colorKey; $colorKeySelectedBg: $colorKey;
$colorKeyFg: #fff; $colorKeyFg: #fff;
$colorEditAreaBg: rgba($colorKey, 0.075); $colorEditAreaBg: #eafaff;
$colorEditAreaFg: #4bb1c7; //587ab5;
$colorInteriorBorder: rgba($colorBodyFg, 0.2); $colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #999; $colorA: #999;
$colorAHov: $colorKey; $colorAHov: $colorKey;
@ -156,7 +157,8 @@ $colorItemTreeVCHover: $colorKey;
$colorItemTreeFg: $colorBodyFg; $colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: pushBack($colorKey, 15%); $colorItemTreeSelectedBg: pushBack($colorKey, 15%);
$colorItemTreeSelectedFg: $colorBodyBg; $colorItemTreeSelectedFg: $colorBodyBg;
$colorItemTreeEditingBg: #b2624a; $colorItemTreeEditingBg: #caf1ff; //#c6e3ff;
$colorItemTreeEditingFg: $colorEditAreaFg;
$colorItemTreeVC: $colorBodyFg; $colorItemTreeVC: $colorBodyFg;
$colorItemTreeSelectedVC: $colorBodyBg; $colorItemTreeSelectedVC: $colorBodyBg;
$shdwItemTreeIcon: none; $shdwItemTreeIcon: none;