[Frontend] Refactoring glyphs to classes

Fixes #1047
In-progress; overlay close, search inputs,
messages and message banners,
ui-symbol removal in-progress.

platform/commonUI/browse/res/templates/back-arrow.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 
-<a class='type-icon icon ui-symbol s-back'
+<a class='icon icon-pointer-left'
    ng-show="context.getPath().length > 2"
    ng-click="context.getParent().getCapability('action').perform('navigate')">
 </a>

platform/commonUI/browse/res/templates/browse/object-header.html

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<span class='type-icon ui-symbol flex-elem {{type.getCssClass()}}'></span>
+<span class='type-icon flex-elem {{type.getCssClass()}}'></span>
 <span class="l-elem-wrapper l-flex-row flex-elem grows">
     <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
     <span class='title-label flex-elem flex-can-shrink'>{{model.name}}</span>

platform/commonUI/dialog/res/templates/overlay-message-list.html

@@ -2,7 +2,8 @@
     <div class="message-contents">
         <div class="abs top-bar">
             <div class="title">{{ngModel.dialog.title}}</div>
-            <div class="hint">Displaying {{ngModel.dialog.messages.length}} message<span ng-show="ngModel.dialog.messages.length > 1">s</span>
+            <div class="hint">Displaying {{ngModel.dialog.messages.length}} message<span ng-show="ngModel.dialog.messages.length > 1 ||
+                                                                                                  ngModel.dialog.messages.length == 0">s</span>
             </div>
         </div>
         <div class="abs message-body">

platform/commonUI/dialog/res/templates/overlay.html

@@ -24,7 +24,7 @@
     <div class="abs holder">
         <a ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="clk-icon icon ui-symbol close">x</a>
+           class="close icon-x"></a>
         <div class="abs contents" ng-transclude></div>
     </div>
 </div>

platform/commonUI/edit/res/templates/create/create-menu.html

@@ -32,7 +32,7 @@
         </ul>
     </div>
     <div class="pane right menu-item-description">
-        <div class="desc-area ui-symbol icon type-icon {{ representation.activeMetadata.cssclass }}"></div>
+        <div class="desc-area icon {{ representation.activeMetadata.cssclass }}"></div>
         <div class="desc-area title">
             {{representation.activeMetadata.name}}
         </div>

platform/commonUI/general/res/sass/_icons.scss

@@ -30,12 +30,6 @@
 
 .ui-symbol {
     font-family: 'symbolsfont';
-	&.type-icon {
-		color: $colorObjHdrIc;
-	}
-	&.icon-calendar:after {
-		content: "\e605";
-	}
 }
 
 .ui-symbol.icon {
@@ -69,14 +63,6 @@
 	position: absolute;
 }
 
-.l-icon-alert {
-	display: none !important;
-	&:before {
-		color: $colorAlert;
-		content: "!";
-	}
-}
-
 .t-item-icon {
 	// Used in grid-item.html, tree-item, inspector location
 	@extend .ui-symbol;

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

@@ -233,7 +233,7 @@
 @mixin messageBlock($iconW: 32px) {
     .type-icon.message-type {
         @include txtShdw($shdwStatusIc);
-        &:before { content:"\e920"; }
+        @extend .icon-bell;
         color: $colorStatusDefault;
         font-size: $iconW;
         padding: 1px;
@@ -241,15 +241,15 @@
     }
 
     .message-severity-info .type-icon.message-type {
-        &:before { content:"\e920"; }
+        @extend .icon-info;
         color: $colorStatusInfo;
     }
     .message-severity-alert .type-icon.message-type {
-        &:before { content:"\e911"; }
+        @extend .icon-bell;
         color: $colorStatusAlert;
     }
     .message-severity-error .type-icon.message-type {
-        &:before { content:"\e900"; }
+        @extend .icon-alert-rect;
         color: $colorStatusError;
     }
 }
@@ -272,12 +272,10 @@
     @include flex-direction(row);
     @include align-items(stretch);
     .type-icon.message-type {
-        //@include test(red);
         @include flex(0 1 auto);
         position: relative;
     }
     .message-contents {
-        //@include test(blue);
         @include flex(1 1 auto);
         margin-left: $overlayMargin;
         position: relative;

platform/commonUI/general/res/sass/forms/_filter.scss

@@ -144,11 +144,4 @@
     &:hover:before {
         color: pullForward($colorInputIcon, 10%);
     }
-
-    .clear-icon {
-        // 'x' in circle icon
-        &:before {
-            content: '\e607';
-        }
-    }
 }

platform/commonUI/general/res/sass/overlay/_overlay.scss

@@ -25,7 +25,7 @@
         background: $colorOvrBlocker;
         z-index: 100;
     }
-    .clk-icon.close {
+    .close {
         font-size: 0.8rem;
         position: absolute;
         top: $interiorMarginLg;

platform/commonUI/general/res/sass/search/_search.scss

@@ -23,15 +23,9 @@
 .clear-icon,
 .menu-icon {
     cursor: pointer;
-    font-family: symbolsfont;
     @include trans-prop-nice((opacity, color), 150ms);
 }
 
-.clear-icon {
-    // 'x' in circle icon
-    @extend .icon-x-in-circle;
-}
-
 .holder-search {
 	$iconWidth: 20px;
 
@@ -51,6 +45,7 @@
 		&:before,
 		.clear-icon,
 		.menu-icon {
+            // :before is magnify glass icon
 			box-sizing: border-box;
 			color: $colorInputIcon;
 			height: $iconD;
@@ -104,7 +99,6 @@
 
 		.menu-icon {
             // 'v' invoke menu icon
-            &:before { content: '\e902'; }
 			font-size: 0.8em;
 			padding-right: $iconEdgeM;
 			right: $iconEdgeM;

platform/commonUI/general/res/templates/controls/input-filter.html

@@ -25,7 +25,7 @@
 	<input type="search"
            class="t-filter-input"
            ng-model="getterSetter.value"/>
-	<a class="clear-icon"
+	<a class="clear-icon icon-x-in-circle"
        ng-class="{show: !(getterSetter.value === '' || getterSetter.value === undefined)}"
        ng-click="getterSetter.value = ''">
     </a>

platform/commonUI/general/res/templates/controls/time-controller.html

@@ -22,7 +22,7 @@
 <div ng-controller="TimeRangeController as trCtrl" class="l-flex-col">
     <form class="l-time-range-inputs-holder l-flex-row flex-elem"
           ng-submit="trCtrl.updateBoundsFromForm()">
-        <span class="l-time-range-inputs-elem ui-symbol type-icon flex-elem">&#x43;</span>
+        <span class="l-time-range-inputs-elem flex-elem icon-clock"></span>
         <span class="l-time-range-inputs-elem t-inputs-w l-flex-row flex-elem">
             <span class="l-time-range-input-w flex-elem">
                 <mct-control key="'datetime-field'"

platform/commonUI/general/res/templates/message-banner.html

@@ -16,6 +16,5 @@
        ng-click="action(active.notification.model.primaryOption.callback, $event)">
         {{active.notification.model.primaryOption.label}}
     </a>
-    <a class="banner-elem ui-symbol close" ng-click="dismiss(active.notification, $event)">
+    <a class="banner-elem close icon-x" ng-click="dismiss(active.notification, $event)"></a>
-        &#x78;</a>
 </div>

platform/search/res/templates/search.html

@@ -27,10 +27,10 @@
                type="text"
                ng-model="ngModel.input"
                ng-keyup="controller.search()"/>
-        <a class="clear-icon"
+        <a class="clear-icon icon-x-in-circle"
            ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
            ng-click="ngModel.input = ''; controller.search()"></a>
-        <a class="menu-icon"
+        <a class="menu-icon context-available"
            ng-click="toggle.toggle()"></a>
         <mct-include key="'search-menu'"
                      class="menu-element search-menu-holder"