[Frontend] Messages major work

open #159
open #170
CSS, markup and JS test files initially complete;
Templates renamed for consistency;
message-type icons styled;
Added severity constant "alert";
TO-DO: check refactored CSS against mobile,
see what's broken;

platform/commonUI/dialog/bundle.json

@@ -4,6 +4,7 @@
             {
                 "key": "messageSeverity",
                 "value": {
+                    "ALERT": "alert",
                     "ERROR": "error",
                     "INFO": "info",
                     "SUCCESS": "success"
@@ -44,8 +45,8 @@
                 "templateUrl": "templates/message.html"
             },
             {
-                "key": "message-list",
-                "templateUrl": "templates/message-list.html"
+                "key": "overlay-message-list",
+                "templateUrl": "templates/overlay-message-list.html"
             }
         ],
         "containers": [

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

@@ -1,24 +0,0 @@
-<mct-container key="overlay" class="t-message severity-{{ngModel.dialog.severity}}">
-    <div class="abs ui-symbol type-icon message-type">&#xe610;</div>
-    <div class="abs message-contents">
-        <div class="abs top-bar">
-            <div class="title">{{ngModel.dialog.title}}</div>
-            <div class="hint" ng-hide="ngModel.dialog.hint === undefined">{{ngModel.dialog.hint}}</div>
-        </div>
-        <div class="abs editor">
-            <ul>
-                <li ng-repeat="msg in ngModel.dialog.messages">
-                    Message: {{msg.title}}
-                    <mct-include key="'message'" ng-model="msg.ngModel"></mct-include>
-                </li>
-            </ul>
-        </div>
-        <div class="abs bottom-bar">
-            <a ng-repeat="dialogAction in ngModel.dialog.actions"
-               class="s-btn major"
-               ng-click="dialogAction.action()">
-                {{dialogAction.label}}
-            </a>
-        </div>
-    </div>
-</mct-container>

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

@@ -1,22 +1,24 @@
-<div class="abs ui-symbol type-icon message-type">!</div>
-<div class="abs message-contents">
-    <div class="abs top-bar">
-        <div class="title">Title: {{ngModel.dialog.title}}</div>
-        <div class="hint" ng-hide="ngModel.dialog.hint === undefined">{{ngModel.dialog.hint}}</div>
-    </div>
-    <div class="abs editor">
-        <div class="message-action">
-            {{ngModel.dialog.actionText}}
+<div class="l-message message-severity-{{ngModel.dialog.severity}}">
+    <div class="ui-symbol type-icon message-type"></div>
+    <div class="message-contents">
+        <div class="top-bar">
+            <div class="title">{{ngModel.dialog.title}}</div>
+            <div class="hint" ng-hide="ngModel.dialog.hint === undefined">{{ngModel.dialog.hint}}</div>
+        </div>
+        <div class="message-body">
+            <div class="message-action">
+                {{ngModel.dialog.actionText}} message-severity-{{ngModel.dialog.severity}}
+            </div>
+            <mct-include key="'progress-bar'"
+                         ng-model="ngModel"
+                         ng-hide="ngModel.dialog.progress === undefined"></mct-include>
+        </div>
+        <div class="bottom-bar">
+            <a ng-repeat="dialogAction in ngModel.dialog.actions"
+               class="s-btn major"
+               ng-click="dialogAction.action()">
+                {{dialogAction.label}}
+            </a>
         </div>
-        <mct-include key="'progress-bar'"
-                     ng-model="ngModel"
-                     ng-hide="ngModel.dialog.progress === undefined"></mct-include>
-    </div>
-    <div class="abs bottom-bar">
-        <a ng-repeat="dialogAction in ngModel.dialog.actions"
-           class="s-btn major"
-           ng-click="dialogAction.action()">
-            {{dialogAction.label}}
-        </a>
     </div>
 </div>

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

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<mct-container key="overlay" class="t-message severity-{{ngModel.dialog.severity}}">
+<mct-container key="overlay" class="t-message-single">
     <mct-include key="'message'" ng-model="ngModel">
     </mct-include>
 </mct-container>

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

@@ -0,0 +1,25 @@
+<mct-container key="overlay" class="t-message-list">
+    <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>
+        </div>
+        <div class="abs message-body">
+            <mct-include ng-repeat="msg in ngModel.dialog.messages" key="'message'" ng-model="msg.ngModel"></mct-include>
+<!--            <ul>
+                <li ng-repeat="msg in ngModel.dialog.messages">
+                    &lt;!&ndash;Message: {{msg.title}}&ndash;&gt;
+
+                </li>
+            </ul>-->
+        </div>
+        <div class="abs bottom-bar">
+            <a ng-repeat="dialogAction in ngModel.dialog.actions"
+               class="s-btn major"
+               ng-click="dialogAction.action()">
+                {{dialogAction.label}}
+            </a>
+        </div>
+    </div>
+</mct-container>

platform/commonUI/dialog/src/DialogService.js

@@ -176,7 +176,7 @@ define(
 
         /**
          * dialogModel: {
-         *     severity: string "error" | "info",
+         *     severity: string "error" | "info" | "alert",
          *     title: string,
          *     hint: string,
          *     actionText: string,
@@ -258,9 +258,9 @@ define(
                 // Add the overlay using the OverlayService, which
                 // will handle actual insertion into the DOM
                 this.overlay = this.overlayService.createOverlay(
-                    "message-list",
+                    "overlay-message-list",
                     {dialog: dialogModel},
-                    "t-dialog t-message-list"
+                    "t-dialog"
                 );
                 this.dialogVisible = true;
                 return true;