[Frontend] Standardizing styles

Fixes #1047 - Finessing mini-tab and making able to control per theme; s-clickable and s-toggle-icon classes cleaned up
nasa · Jul 28, 2016 · 3e7eb98 · 3e7eb98
1 parent 18e0807
commit 3e7eb98
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 34 deletions.
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
@@ -43,9 +43,8 @@ $ueColMargin: 1.5%;
 $ueAppLogoW: 80px;
 $ueEditToolBarH: 25px;
 $ueCollapsedPaneEdgeM: 22px;
-$uePaneMiniTabH: $ueTopBarH;
 $uePaneMiniTabH: 22px;
-$uePaneMiniTabW: 10px;
+$uePaneMiniTabW: 8px;
 $uePaneMiniTabFontSize: 8px;
 $uePaneMiniTabCollapsedW: 18px;
 $ueEditLeftPaneW: 75%;
@@ -75,7 +74,7 @@ $treeTypeIconHPx: 16px;
 $treeTypeIconW: 18px;
 $treeContextTriggerW: 20px;
 /*************** Tabular */
-$tabularHeaderH: 22px; //18px
+$tabularHeaderH: 22px;
 $tabularTdPadLR: $itemPadLR;
 $tabularTdPadTB: 3px;
 /*************** Imagery */

diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -95,10 +95,8 @@ body.desktop .mini-tab-icon {
     overflow: hidden;
     text-align: center;
 
-    &:before,
-    &:after {
-        display: block;
-        position: absolute;
+    &:before {
+        display: inline-block;
     }
 
     &:hover {

diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -74,17 +74,21 @@
 
 .s-clickable-icon {
     // Clickable icon elements that have hover
-    // .s-toggles means the element is capable of having .active applied to it
     @extend .ui-symbol;
     color: $colorClickIcon;
-    &:hover { color: $colorClickIconHov; }
-    &.s-toggles {
-        color: rgba($colorClickIcon, 0.5) !important;
-        &.active { color: $colorClickIconActive !important; }
-        &:hover { color: rgba($colorClickIconHov, 0.5) !important; }
+    &:hover {
+        color: $colorClickIconHov;
     }
 }
 
+.s-toggle-icon {
+    // Has default (in-active) and .active states
+    @extend .s-clickable-icon;
+    color: $colorToggleIcon;
+    &:hover { color: rgba($colorToggleIconHov, 0.5); }
+    &.active { color: $colorToggleIconActive; }
+}
+
 .l-composite-control {
     vertical-align: middle;
     &:not(.l-inline) {
@@ -555,10 +559,9 @@ textarea {
 /******************************************************** MISC */
 .context-available {
     @extend .icon-arrow-down;
-    $c: $colorKey;
-    color: $c;
+    color: $colorKey;
     &:hover {
-        color: lighten($c, 10%);
+        color: $colorKeyHov;
     }
 }
 

diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -6,7 +6,7 @@ $colorStatusBarBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: #005177;
 $colorKeyFg: #fff;
-$colorKeyHov: pullForward($colorKey, 20%);
+$colorKeyHov: #00c0f6;
 $colorEditAreaBg: #31363e;
 $colorEditAreaFg: #587ab5;
 $colorInteriorBorder: rgba($colorBodyFg, 0.1);
@@ -29,10 +29,11 @@ $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent);
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent);
-// TODO: make clickable icon initially use the key color; also, introduce a toggle-able icon with different color approach
-$colorClickIcon: $colorBodyFg;
-$colorClickIconActive: $colorKey;
-$colorClickIconHov: $colorClickIconActive;
+$colorClickIcon: $colorKey;
+$colorClickIconHov: $colorKeyHov;
+$colorToggleIcon: rgba($colorBodyFg, 0.5);
+$colorToggleIconActive: $colorKey;
+$colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
 $colorInvokeMenu: #fff;
 $contrastInvokeMenuPercent: 20%;
 $shdwBtns: rgba(black, 0.2) 0 1px 2px;
@@ -204,6 +205,8 @@ $colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent);
 $colorSplitterActive: $colorKey;
 
 // Minitabs
+$uePaneMiniTabH: 24px;
+$uePaneMiniTabW: 8px;
 $colorMiniTabBg: $colorSplitterBg;
 $colorMiniTabFg: pushBack($colorMiniTabBg, 10%);
 $colorMiniTabBgHov: $colorSplitterHover;

diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -6,7 +6,7 @@ $colorStatusBarBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
-$colorKeyHov: pullForward($colorKey, 20%);
+$colorKeyHov: #00c0f6;
 $colorEditAreaBg: #eafaff;
 $colorEditAreaFg: #4bb1c7;
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
@@ -26,12 +26,14 @@ $colorBtnFgHov: $colorBtnFg;
 $colorBtnIcon: #eee;
 $colorBtnIconHov: $colorBtnFgHov;
 $colorBtnMajorBg: $colorKey;
-$colorBtnMajorBgHov: #007fbc;
+$colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
-$colorClickIcon: $colorBodyFg;
-$colorClickIconActive: $colorKey;
-$colorClickIconHov: $colorClickIconActive;
+$colorClickIcon: $colorKey;
+$colorClickIconHov: $colorKeyHov;
+$colorToggleIcon: rgba($colorClickIcon, 0.5);
+$colorToggleIconActive: $colorKey;
+$colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
 $colorInvokeMenu: #000;
 $contrastInvokeMenuPercent: 40%;
 $shdwBtns: none;
@@ -203,6 +205,8 @@ $colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
 $colorSplitterActive: $colorKey;
 
 // Minitabs
+$uePaneMiniTabH: 24px;
+$uePaneMiniTabW: 8px;
 $colorMiniTabBg: $colorSplitterBg;
 $colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
 $colorMiniTabBgHov: $colorSplitterHover;

diff --git a/platform/features/timeline/res/sass/_timelines.scss b/platform/features/timeline/res/sass/_timelines.scss
@@ -300,13 +300,6 @@
 			top: $timelineTopPaneHeaderElemMargin; bottom: $timelineTopPaneHeaderElemMargin;
 		}
 
-        .l-swimlanes-holder .l-cols {
-            .l-col-icon,
-            .l-col-icon a:not(.s-toggles) {
-                color: $colorKey;
-            }
-        }
-
 		.l-pane-l {
 			// Left pane of the tabular area
 			.l-cols {

diff --git a/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html b/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html
@@ -31,7 +31,7 @@
         <span class="l-col l-col-icon l-plot-resource"
               ng-click="ngModel.toggleGraph(); parameters.commit()"
               title="Click to enable or disable inclusion in Resource Graphing">
-            <span class="icon-plot-resource s-clickable-icon s-toggles"
+            <span class="icon-plot-resource s-toggle-icon"
                   ng-class="{ active: ngModel.graph() }">
             </span>
         </span>