[Frontend] Glyph-related style changes to Timelines

Fixes #1047
Timeline glyph refactoring; Resource Graph icons
in swimlanes now display grayed-out version when not
added to the Resource Graph; minor color tweaks

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

@@ -72,6 +72,14 @@
     }
 }
 
+.s-clickable-icon {
+    // Clickable icon elements that have hover
+    @extend .ui-symbol;
+    &:hover {
+        color: $colorKeyHov;
+    }
+}
+
 .l-composite-control {
     vertical-align: middle;
     &:not(.l-inline) {

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -6,6 +6,7 @@ $colorFooterBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: #005177;
 $colorKeyFg: #fff;
+$colorKeyHov: pullForward($colorKey, 20%);
 $colorEditAreaBg: #31363e;
 $colorEditAreaFg: #587ab5;
 $colorInteriorBorder: rgba($colorBodyFg, 0.1);

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -6,6 +6,7 @@ $colorFooterBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
+$colorKeyHov: pullForward($colorKey, 20%);
 $colorEditAreaBg: #eafaff;
 $colorEditAreaFg: #4bb1c7; //587ab5;
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);

platform/features/timeline/res/sass/_timeline-thematic.scss

@@ -52,8 +52,8 @@
     .l-pane-l {
         // Left pane of the tabular area
         .l-cols {
-            .s-label .ui-symbol.icon {
+            .t-object-label .t-item-icon {
-                color: $colorGanttBarTabularFgIcon;
+                color: pullForward($colorGanttBarBg, 10%);
             }
         }
     }
@@ -104,7 +104,7 @@
     }
 
     .s-ticks {
-        @include bgTicks($timelineColorAlt1);
+        @include bgTicks(   $timelineColorAlt1);
     }
     .s-hover-btns-holder {
         $bg: $timelineHeaderColorBg;

platform/features/timeline/res/sass/_timelines.scss

@@ -266,9 +266,6 @@
 				width: $timelineColIconW;
                 text-align: center;
                 padding: 0;
-				.ui-symbol {
-					color: $colorKey;
-				}
 			}
 
 			&.l-plot-resource {
@@ -303,6 +300,16 @@
 			top: $timelineTopPaneHeaderElemMargin; bottom: $timelineTopPaneHeaderElemMargin;
 		}
 
+        .l-swimlanes-holder .l-cols {
+            .l-col-icon,
+            .l-col-icon a {
+                color: $colorKey;
+            }
+            .t-toggle .inactive {
+                color: pullForward(rgba($colorBodyFg, 0.2));
+            }
+        }
+
 		.l-pane-l {
 			// Left pane of the tabular area
 			.l-cols {

platform/features/timeline/res/templates/activity-gantt.html

@@ -29,9 +29,7 @@
                } : {}">
 
     <div class="bar">
-		<span class="s-activity-type ui-symbol">
+		<span class="s-activity-type {{type.getCssClass()}}"></span>
-            {{type.getGlyph()}}
-        </span>
 		<span class="s-title">
             {{model.name}}
         </span>

platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html

@@ -28,23 +28,20 @@
                'drop-after': ngModel.highlightBottom()
                }">
     <div class="l-cols">
-        <span class="l-col l-col-icon l-plot-resource"
+        <span class="l-col l-col-icon l-plot-resource t-toggle"
               ng-click="ngModel.toggleGraph(); parameters.commit()"
               title="Click to enable or disable inclusion in Resource Graphing">
-            <span class="ui-symbol"
+            <span class="icon-plot-resource s-clickable-icon"
-                  ng-show="ngModel.graph()"
+                  ng-class="{ inactive: !ngModel.graph() }">
-                  >
-                &#x00e9;
             </span>
         </span>
         <span class="l-col l-col-icon l-link">
-            <a class="ui-symbol"
+            <a class="icon-chain-links"
                target="_blank"
                ng-href="{{ngModel.link()}}"
                ng-if="ngModel.link().length > 0"
                title="{{ngModel.link()}}"
                >
-                &#x00e8;
             </a>
         </span>
         <span class="l-col l-title"

platform/features/timeline/res/templates/timeline.html

@@ -35,8 +35,8 @@
 
                     <div class="t-header l-header s-header">
                         <div class="l-cols">
-                            <span title="Resource Graphing: click a row to toggle" class="l-col l-col-icon l-plot-resource ui-symbol">&#x00e9;</span>
+                            <span title="Resource Graphing: click a row to toggle" class="l-col l-col-icon l-plot-resource icon-plot-resource"></span>
-                            <span title="Activity Links" class="l-col  l-col-icon l-col-link ui-symbol">&#x00e8;</span>
+                            <span title="Activity Links" class="l-col  l-col-icon l-col-link icon-chain-links"></span>
                             <span class="l-col l-title">Title</span>
                         </div>
                     </div>
@@ -103,25 +103,22 @@
         <!-- TOP PANE GANTT BARS -->
         <div class="split-pane-component l-timeline-pane t-pane-h l-pane-top t-timeline-gantt l-timeline-gantt s-timeline-gantt">
             <div class="l-hover-btns-holder s-hover-btns-holder t-btns-zoom">
-                <a class="t-btn l-btn s-btn"
+                <a class="t-btn l-btn s-btn icon-arrows-out"
                    ng-click="zoomController.fit()"
                    ng-show="true"
                    title="Zoom to fit">
-                    <span class="ui-symbol icon zoom-in">I</span>
                 </a>
 
-                <a class="t-btn l-btn s-btn"
+                <a class="t-btn l-btn s-btn icon-magnify-in"
                    ng-click="zoomController.zoom(-1)"
                    ng-show="true"
                    title="Zoom in">
-                    <span class="ui-symbol icon zoom-in">X</span>
                 </a>
 
-                <a class="t-btn l-btn s-btn"
+                <a class="t-btn l-btn s-btn icon-magnify-out"
                    ng-click="zoomController.zoom(1)"
                    ng-show="true"
                    title="Zoom out">
-                    <span class="ui-symbol icon zoom-out">Y</span>
                 </a>
             </div>