[Frontend] Markup, CSS changes

#442
Removed white space from markup;
Moved getGlyphClass up to status-block-holder
element out of status-block;
CSS mods to selectors and style defs
in _messages.scss;

example/notifications/res/dialog-launch.html

@@ -1,10 +1,9 @@
 <span class="status block ok" ng-controller="DialogLaunchController">
-    <span class="ui-symbol status-indicator">&#xe600;</span>
+    <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <span class="label">
+    <span class="ui-symbol status-indicator">&#xe600;</span><span class="label">
         <a ng-click="launchProgress(true)">Known</a> |
         <a ng-click="launchProgress(false)">Unknown</a> |
         <a ng-click="launchError()">Error</a> |
         <a ng-click="launchInfo()">Info</a>
-    </span>
+    </span><span class="count">Dialogs</span>
-    <span class="count">Dialogs</span>
 </span>

example/notifications/res/notification-launch.html

@@ -1,10 +1,9 @@
 <span class="status block ok" ng-controller="NotificationLaunchController">
-    <span class="ui-symbol status-indicator">&#xe600;</span>
+    <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <span class="label">
+    <span class="ui-symbol status-indicator">&#xe600;</span><span class="label">
         <a ng-click="newInfo()">Success</a> |
         <a ng-click="newError()">Error</a> |
         <a ng-click="newAlert()">Alert</a> |
         <a ng-click="newProgress()">Progress</a>
-    </span>
+    </span><span class="count">Notifications</span>
-    <span class="count">Notifications</span>
 </span>

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

@@ -36,43 +36,49 @@
 	}
 }
 
-mct-include.status-block-holder {
+// Status coloring
-    // mct-include that wraps status.block
+.ok, .info {
-    // Must use display: inline-block to fix white space problems
+    .status-indicator {
-    display: inline-block;
+        color: $colorStatusInfo;
+    }
 }
 
-.status.block {
+.alert, .caution, .warning {
+    .status-indicator, .count {
+        color: $colorStatusAlert;
+    }
+
+}
+
+.error, .err {
+    .status-indicator, .count {
+        color: $colorStatusError;
+    }
+}
+
+.available {
+    .status-indicator, .count {
+        color: $colorStatusAvailable;
+    }
+}
+
+.status-block-holder {
+    // Applied to mct-include element
+    // Contains status.block elements
     $transDelay: 1.5s;
     $transSpeed: .25s;
-	color: $colorStatusDefault;
+    display: inline-block;
-	display: inline-block;
-	margin-right: $interiorMargin;
-	.status-indicator,
-	.label,
-	.count {
-		display: inline-block;
-		vertical-align: top;
-	}
-
     &.clickable { cursor: pointer; }
     &:not(.clickable) { cursor: default; }
-
+    &.no-icon .status.block {
-    &.no-icon {
         .status-indicator {
             display: none;
         }
     }
-
     &.float-right {
         float: right;
     }
-
+    &:not(.no-collapse) .status.block {
-	.status-indicator {
-		margin-right: $interiorMarginSm;
-	}
-
-    &:not(.no-collapse) {
         .label {
             // Max-width silliness is necessary for width transition
             @include trans-prop-nice(max-width, $transSpeed, $transDelay);
@@ -92,21 +98,25 @@ mct-include.status-block-holder {
         }
     }
 
-	&.ok .status-indicator,
+}
-    &.info .status-indicator {
+
-		color: $colorStatusInfo;
+.status.block {
+    $transDelay: 1.5s;
+    $transSpeed: .25s;
+	color: $colorStatusDefault;
+	display: inline-block;
+	margin-right: $interiorMargin;
+	.status-indicator,
+	.label,
+	.count {
+		display: inline-block;
+		vertical-align: top;
 	}
-    &.alert .status-indicator,
+
-	&.warning .status-indicator,
+	.status-indicator {
-	&.caution .status-indicator {
+		margin-right: $interiorMarginSm;
-		color: $colorStatusAlert;
 	}
-	&.error .status-indicator {
+
-		color: $colorStatusError;
-	}
-    &.available .status-indicator {
-        color: $colorStatusAvailable;
-    }
 	.count {
 		@include trans-prop-nice(opacity, $transSpeed, $transDelay);
 		font-weight: bold;
@@ -191,12 +201,6 @@ mct-include.status-block-holder {
 	z-index: 10;
 }
 
-.s-message-banner {
-    //@include transition-property(left, opacity);
-    //@include transition-duration(0.35s);
-    //@include transition-timing-function(ease-in-out);
-}
-
 .s-message-banner {
 	border-radius: $controlCr;
 	@include statusBannerColors($colorStatusDefault, $colorStatusFg);

platform/commonUI/general/res/templates/bottombar.html

@@ -24,7 +24,8 @@
         <mct-include ng-repeat="indicator in bar.getIndicators()"
                      ng-model="indicator.ngModel"
                      key="indicator.template"
-                     class="status-block-holder">
+                     class="status-block-holder"
+                     ng-class='indicator.ngModel.getGlyphClass()'>
         </mct-include>
     </div>
     <mct-include key="'message-banner'"></mct-include>

platform/commonUI/general/res/templates/indicator.html

@@ -23,7 +23,6 @@
 <div class='status block'
 	 title="{{ngModel.getDescription()}}"
 	 ng-click='ngModel.configure()'
-	 ng-class='ngModel.getGlyphClass()'
 	 ng-show="ngModel.getText().length > 0">
 	<span class="ui-symbol status-indicator">
 		{{ngModel.getGlyph()}}
@@ -32,6 +31,5 @@
 		{{ngModel.getText()}}
         <a class="s-btn ui-symbol" ng-if="ngModel.configure">G</a>
 	</span><span class="count">
-		<!-- Add int count value here if this type of indicator has one or more messages associated with it -->
 	</span>
 </div>

platform/commonUI/notification/res/notification-indicator.html

@@ -1,10 +1,9 @@
+<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
 <span ng-show="notifications.length > 0" class="status block"
       ng-class="highest.severity"
       ng-controller="NotificationIndicatorController">
-    <span class="ui-symbol status-indicator">&#xe610;</span>
+    <span class="ui-symbol status-indicator">&#xe610;</span><span class="label">
-    <span class="label">
         <a ng-click="showNotificationsList()">{{notifications.length}}
             Notifications</a>
-    </span>
+    </span><span class="count">{{notifications.length}}</span>
-    <span class="count">{{notifications.length}}</span>
 </span>