ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-20 17:33:23 +00:00
Code Issues Actions 1 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
Show Stats 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 keyframes(pulse) {
0% { opacity: 0.5; }
100% { opacity: 1; }
}
@mixin pulse($dur: 500ms, $iteration: infinite) {
//@include customKeyframes(pulse, 0.2);
@mixin pulse($dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
@include keyframes(pulse) {
0% { opacity: $opacity0; }
100% { opacity: $opacity100; }
}
@include animation-name(pulse);
@include animation-duration($dur);
@include animation-direction(alternate);
@ -66,10 +63,10 @@ a.disabled {
@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) {
0% { border-color: transparent; }
100% { border-color: $c; }
0% { border-color: rgba($c, $opacity0); }
100% { border-color: rgba($c, $opacity100); }
}
@include animation-name(pulseBorder);
@include animation-duration($dur);

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

@ -145,15 +145,26 @@ ul.tree {
&.active {
// The item is being edited
background: rgba($colorItemTreeEditingBg, 0.5) !important;
background: $colorItemTreeEditingBg; //rgba($colorItemTreeSelectedBg, 0.2) !important;
pointer-events: none;
&:before {
// Pencil icon
@extend .ui-symbol;
color: $colorItemTreeEditingBg;
@include pulse($dur: 1s, $opacity0: 0.25);
color: $colorItemTreeEditingFg;
content: '\70';
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; }
}
@ -174,8 +185,9 @@ ul.tree {
}
}
.tree-item {
.tree-item,
.search-result-item.active {
.t-object-label {
left: $interiorMargin + $treeVCW;
}
}
}

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

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

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

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

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

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