[Frontend] Refactoring glyphs to classes

Fixes #1047
In-progress; plot options, imagery buttons,
cleanups in buttons.scss, edit-action buttons,
.s-btn .no-label class added.

platform/commonUI/edit/bundle.js

@@ -208,6 +208,7 @@ define([
                     "category": "conclude-editing",
                     "implementation": SaveAction,
                     "name": "Save",
+                    "cssclass": "icon-save",
                     "description": "Save changes made to these objects.",
                     "depends": [
                         "dialogService"
@@ -218,7 +219,8 @@ define([
                     "key": "save",
                     "category": "conclude-editing",
                     "implementation": SaveAsAction,
-                    "name": "Save",
+                    "name": "Save As...",
+                    "cssclass": "icon-save",
                     "description": "Save changes made to these objects.",
                     "depends": [
                         "$injector",
@@ -234,6 +236,7 @@ define([
                     "category": "conclude-editing",
                     "implementation": CancelAction,
                     "name": "Cancel",
+                    "cssclass": "icon-x no-label",
                     "description": "Discard changes made to these objects.",
                     "depends": []
                 }

platform/commonUI/edit/res/templates/edit-action-buttons.html

@@ -21,7 +21,7 @@
 -->
 <span ng-controller="EditActionController">
     <span ng-repeat="currentAction in editActions">
-        <a class='s-btn t-{{currentAction.getMetadata().key}}'
+        <a class='s-btn {{currentAction.getMetadata().cssclass}}'
            title='{{currentAction.getMetadata().name}}'
            ng-click="currentAction.perform()"
            ng-class="{ major: $index === 0 }">

platform/commonUI/general/res/sass/controls/_buttons.scss

@@ -38,6 +38,11 @@ $pad: $interiorMargin * $baseRatio;
     vertical-align: top;
     @include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon);
 
+    &:before {
+        // Icon when it's included
+        margin-right: $interiorMarginSm;
+    }
+
 	&.lg {
 		font-size: 1rem;
 	}
@@ -56,45 +61,19 @@ $pad: $interiorMargin * $baseRatio;
         @include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
     }
 
-    &.t-save {
+    &.no-label {
-        @extend .icon-save;
+        .label, .title-label { display: none; }
-    }
-    &.t-save-as:before {
-        content:'\e612';
-        font-family: symbolsfont;
-        margin-right: $interiorMarginSm;
-    }
-    &.t-cancel {
-        @extend .icon-x;
-        .title-label { display: none; }
     }
 
     &.pause-play {
-        // TO-DO: glyph refactoring
+        @extend .icon-pause;
-        .icon:before {
-            content: "\0000F1";
-        }
         &.paused {
             @include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
-            .icon {
+            @extend .icon-play;
-                @include pulse($dur: 1000ms);
+            &:before { @include pulse($dur: 1000ms); }
-                :before {
-                    content: "\0000EF";
-                }
-            }
         }
     }
 
-    &.show-thumbs {
-        .icon:before {
-            content: "\000039";
-        }
-    }
-
-    &.t-export {
-        @extend .icon-download;
-    }
-
     .icon {
         font-size: 0.8rem;
     }
@@ -105,7 +84,7 @@ $pad: $interiorMargin * $baseRatio;
 }
 
 .s-icon-btn {
-    // TO-DO: glyph refactoring
+    // TODO: glyph refactoring
     $c: $colorKey;
     @extend .s-btn;
     &:before {

platform/commonUI/general/res/sass/controls/_menus.scss

@@ -73,7 +73,7 @@
 }
 
 .menu {
-    // TO-DO: reduce size of icons
+    // TODO: reduce size of icons
 	@extend .s-menu;
 	display: block;
 	position: absolute;

platform/features/imagery/bundle.js

@@ -42,6 +42,7 @@ define([
                     "name": "Imagery",
                     "key": "imagery",
                     "glyph": "ã",
+                    "cssclass": "icon-image",
                     "template": imageryTemplate,
                     "priority": "preferred",
                     "needs": [

platform/features/imagery/res/templates/imagery.html

@@ -5,18 +5,16 @@
         <div
             class="l-local-controls s-local-controls"
             ng-show="false && showLocalControls">
-            <a class="s-btn"
+            <a class="s-btn icon-arrow-left"
                ng-click="plot.stepBackPanZoom()"
                ng-show="1"
                title="Restore previous pan/zoom">
-                <span class="ui-symbol icon">&lt;</span>
             </a>
 
-            <a class="s-btn"
+            <a class="s-btn icon-arrows-out"
                ng-click="plot.unzoom()"
                ng-show="1"
                title="Reset pan/zoom">
-                <span class="ui-symbol icon">I</span>
             </a>
         </div>
 
@@ -27,8 +25,8 @@
 
         <div class="l-image-main-controlbar flex-elem l-flex-row">
             <div class="left flex-elem grows">
-                <a class="s-btn show-thumbs sm hidden"
+                <a class="s-btn show-thumbs sm hidden icon-thumbs-strip"
-                    ng-click="showThumbsBubble = (showThumbsBubble)? false:true"><span class="ui-symbol icon"></span></a>
+                    ng-click="showThumbsBubble = (showThumbsBubble)? false:true"></a>
                 <span class="l-timezone">{{imagery.getZone()}}</span>
                 <span class="l-time">{{imagery.getTime()}}</span>
                 <span class="l-date">{{imagery.getDate()}}</span>
@@ -36,15 +34,15 @@
             <div class="right flex-elem">
                 <a class="s-btn pause-play"
                     ng-click="imagery.paused(!imagery.paused())"
-                    ng-class="{ paused: imagery.paused() }"><span class="ui-symbol icon"></span></a>
+                    ng-class="{ paused: imagery.paused() }"></a>
                 <a href="{{imagery.getImageUrl()}}"
                    ng-if="imagery.getImageUrl()"
                    target="_blank"
                    title="Open image in new tab."
-                   class="s-btn">
+                   class="s-btn icon-new-window">
-                    <span class="ui-symbol icon">y</span></a>
+                   </a>
                 <a href=""
-                    class="s-btn l-mag s-mag ui-symbol vsm"
+                    class="s-btn l-mag s-mag ui-symbol vsm icon-arrows-out"
                     ng-click="clipped = false"
                     ng-show="clipped === true"
                     title="Not all of image is visible; click to reset."></a>

platform/features/plot/res/templates/plot.html

@@ -87,33 +87,27 @@
             <!-- TODO: Move into correct position; make part of group; infer from set of actions -->
             <div class="l-local-controls gl-plot-local-controls t-plot-display-controls"
                  ng-if="$first">
-                <a class="s-btn"
+                <a class="s-btn icon-arrow-left"
                    ng-click="plot.stepBackPanZoom()"
                    ng-show="plot.isZoomed()"
                    title="Restore previous pan/zoom">
-                    <span class="ui-symbol icon">&lt;</span>
                 </a>
-                <a class="s-btn"
+                <a class="s-btn icon-arrows-out"
                    ng-click="plot.unzoom()"
                    ng-show="plot.isZoomed()"
                    title="Reset pan/zoom">
-                    <span class="ui-symbol icon">I</span>
                 </a>
-                <div class="menu-element s-menu-btn menus-to-left"
+                <div class="menu-element s-menu-btn menus-to-left {{plot.getMode().cssclass}}"
                      ng-if="plot.getModeOptions().length > 1"
                      ng-controller="ClickAwayController as toggle">
                     <span class="l-click-area" ng-click="toggle.toggle()"></span>
-                    <span class="ui-symbol icon type-icon">{{plot.getMode().glyph}}</span>
                     <span>{{plot.getMode().name}}</span>
                     <div class="menu" ng-show="toggle.isActive()">
                         <ul>
-                            <li ng-repeat="option in plot.getModeOptions()">
+                            <li ng-repeat="option in plot.getModeOptions()"
-                                <a href="" ng-click="plot.setMode(option); toggle.setState(false)">
+                                ng-click="plot.setMode(option); toggle.setState(false)"
-                                    <span class="ui-symbol type-icon icon">
+                                class="{{option.cssclass}}">
-                                        {{option.glyph}}
-                                    </span>
                                     {{option.name}}
-                                </a>
                             </li>
                         </ul>
                     </div>

platform/features/plot/src/modes/PlotModeOptions.js

@@ -28,12 +28,14 @@ define(
                 key: "stacked",
                 name: "Stacked",
                 glyph: "m",
+                cssclass: "icon-menu-hamburger",
                 Constructor: PlotStackMode
             },
             OVERLAID = {
                 key: "overlaid",
                 name: "Overlaid",
                 glyph: "6",
+                cssclass: "icon-sine",
                 Constructor: PlotOverlayMode
             };
 

platform/features/table/res/templates/mct-table.html

@@ -1,4 +1,4 @@
-<a class="t-btn l-btn s-btn t-export"
+<a class="t-btn l-btn s-btn t-export icon-download"
    ng-click="exportAsCSV()"
    title="Export This View's Data">
     Export