[Frontend] Refactoring glyphs to classes

fixes #1047 In progress: moved limits classes out of _contants and into _glyphs; timers, entanglement context menu items, form validation, date picker.
nasa · Jun 30, 2016 · 272b4b6 · 272b4b6
1 parent 95d26e6
commit 272b4b6
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 26 deletions.
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
@@ -136,8 +136,3 @@ $dirImgs: $dirCommonRes + 'images/';
 $controlFadeMs: 100ms;
 $browseToEditAnimMs: 400ms;
 $editBorderPulseMs: 500ms;
-
-/************************** LIMITS */
-$glyphLimit: $glyph-icon-alert-triangle;
-$glyphLimitUpr: $glyph-icon-arrow-double-up;
-$glyphLimitLwr: $glyph-icon-arrow-double-down;
diff --git a/platform/commonUI/general/res/sass/_glyphs.scss b/platform/commonUI/general/res/sass/_glyphs.scss
@@ -5,6 +5,8 @@
     }
 }
 
+/************************** CHAR UNICODES */
+
 $glyph-icon-alert-rect: '\e900';
 $glyph-icon-alert-triangle: '\e901';
 $glyph-icon-arrow-down: '\e902';
@@ -99,6 +101,8 @@ $glyph-icon-timeline: '\e1124';
 $glyph-icon-timer: '\e1125';
 $glyph-icon-topic: '\e1126';
 
+/************************** CLASSES */
+
 .icon-alert-rect {  @include glyph($glyph-icon-alert-rect); }
 .icon-alert-triangle {  @include glyph($glyph-icon-alert-triangle); }
 .icon-arrow-down {  @include glyph($glyph-icon-arrow-down); }
@@ -191,4 +195,10 @@ $glyph-icon-topic: '\e1126';
 .icon-telemetry-panel {  @include glyph($glyph-icon-telemetry-panel); }
 .icon-timeline {  @include glyph($glyph-icon-timeline); }
 .icon-timer {  @include glyph($glyph-icon-timer); }
-.icon-topic {  @include glyph($glyph-icon-topic); }
+.icon-topic {  @include glyph($glyph-icon-topic); }
+
+/************************** LIMITS */
+
+$glyphLimit: $glyph-icon-alert-triangle;
+$glyphLimitUpr: $glyph-icon-arrow-double-up;
+$glyphLimitLwr: $glyph-icon-arrow-double-down;
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -444,17 +444,13 @@ input[type="search"] {
             width: $pagerW;
             @extend .ui-symbol;
             &.prev {
+                @extend .icon-arrow-left;
                 right: auto;
-                &:before {
-                    content: "\e903";
-                }
             }
             &.next {
+                @extend .icon-arrow-right;
                 left: auto;
                 text-align: right;
-                &:before {
-                    content: "\e903";
-                }
             }
         }
         .val {

diff --git a/platform/commonUI/general/res/sass/features/_time-display.scss b/platform/commonUI/general/res/sass/features/_time-display.scss
@@ -8,6 +8,15 @@
 	}
 
 	&.l-timer {
+        .l-value:before,
+        .control {
+            font-size: 0.8em;
+        }
+
+        .l-value:before {
+            // Direction +/- element
+            margin-right: $interiorMarginSm;
+        }
         .control {
             @include trans-prop-nice((width, opacity), $transTime);
             line-height: inherit;
@@ -25,8 +34,5 @@
     .value {
         color: pullForward($colorBodyFg, 50%);
         font-weight: 400;
-        .direction {
-            font-size: 0.8em;
-        }
     }
 }
diff --git a/platform/commonUI/general/res/sass/forms/_validation.scss b/platform/commonUI/general/res/sass/forms/_validation.scss
@@ -22,10 +22,9 @@
 .validates {
     > .label {
         padding-right: $reqSymbolM; // Keep room for validation element
-        &::after {
+        &:before {
             position: absolute;
             right: $interiorMargin;
-            font-family: symbolsfont;
             font-size: $reqSymbolFontSize;
             height: 100%;
             line-height: 200%;
@@ -34,22 +33,28 @@
     }
     &.invalid,
     &.invalid.req {
-        > .label::after {
-            color: $colorFormInvalid;
-            content: "x";
+        > .label {
+            @extend .icon-x;
+            &:before {
+                color: $colorFormInvalid;
+            }
         }
     }
     &.valid,
     &.valid.req {
-        > .label::after {
-            color: $colorFormValid;
-            content: "2";
+        > .label {
+            @extend .icon-check;
+            &:before {
+                color: $colorFormValid;
+            }
         }
     }
     &.req {
-        > .label::after {
-            color: $colorFormRequired;
-            content: "*";
+        > .label {
+            @extend .icon-asterisk;
+            &:before {
+                color: $colorFormRequired;
+            }
         }
     }
 }

diff --git a/platform/entanglement/bundle.js b/platform/entanglement/bundle.js
@@ -112,6 +112,7 @@ define([
                     "name": "Go To Original",
                     "description": "Go to the original, un-linked instance of this object.",
                     "glyph": "",
+                    "cssclass": "",
                     "category": "contextual",
                     "implementation": GoToOriginalAction
                 },
@@ -120,6 +121,7 @@ define([
                     "name": "Set Primary Location",
                     "description": "Set a domain object's primary location.",
                     "glyph": "",
+                    "cssclass": "",
                     "category": "contextual",
                     "implementation": SetPrimaryLocationAction
                 }