[Frontend] Message list initially working

open #159
open #170
Thank you @akhenry;
launchMessages function added to DialogLaunchController.js;
New message-list.html template;
message.html is now its own include;
blocking-message.html renamed to
overlay-blocking-message.html;

platform/commonUI/dialog/bundle.json

@@ -36,8 +36,16 @@
                 "templateUrl": "templates/dialog.html"
             },
             {
-                "key": "blocking-message",
-                "templateUrl": "templates/blocking-message.html"
+                "key": "overlay-blocking-message",
+                "templateUrl": "templates/overlay-blocking-message.html"
+            },
+            {
+                "key": "message",
+                "templateUrl": "templates/message.html"
+            },
+            {
+                "key": "message-list",
+                "templateUrl": "templates/message-list.html"
             }
         ],
         "containers": [

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

@@ -1,17 +1,17 @@
 <mct-container key="overlay" class="t-message severity-{{ngModel.dialog.severity}}">
-    <div class="abs ui-symbol type-icon message-type">!</div>
+    <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">
-            <div class="message-action">
-                {{ngModel.dialog.actionText}}
-            </div>
-            <mct-include key="'progress-bar'"
-                         ng-model="ngModel"
-                         ng-hide="ngModel.dialog.progress === undefined"></mct-include>
+            <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"

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

@@ -0,0 +1,22 @@
+<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>
+        <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

@@ -0,0 +1,25 @@
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ 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-include key="'message'" ng-model="ngModel">
+    </mct-include>
+</mct-container>

platform/commonUI/dialog/src/DialogService.js

@@ -239,7 +239,7 @@ define(
                 // Add the overlay using the OverlayService, which
                 // will handle actual insertion into the DOM
                 this.overlay = this.overlayService.createOverlay(
-                    "blocking-message",
+                    "overlay-blocking-message",
                     {dialog: dialogModel},
                     "t-dialog-sm"
                 );
@@ -253,6 +253,24 @@ define(
 
         };
 
+        DialogService.prototype.showMessageList = function(dialogModel) {
+            if (this.canShowDialog(dialogModel)) {
+                // Add the overlay using the OverlayService, which
+                // will handle actual insertion into the DOM
+                this.overlay = this.overlayService.createOverlay(
+                    "message-list",
+                    {dialog: dialogModel},
+                    "t-dialog t-message-list"
+                );
+                this.dialogVisible = true;
+                return true;
+            } else {
+                //Could not show a dialog, so return indication of this to
+                //client code.
+                return false;
+            }
+
+        };
 
         return DialogService;
     }

testing/dialogTest/res/dialog-launch.html

@@ -3,7 +3,8 @@
     <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="launchError()">Error</a> |
+        <a ng-click="launchMessages()">Messages</a>
     </span>
     <span class="count">Dialogs</span>
 </span>

testing/dialogTest/src/DialogLaunchController.js

@@ -99,6 +99,53 @@ define(
                     $log.error("Could not display modal dialog");
                 }
             };
+
+            $scope.launchMessages = function () {
+                var model = {
+                    title: "Messages",
+                    severity: messageSeverity.MESSAGES,
+                    actions: [
+                        {
+                            label: "Done",
+                            action: function () {
+                                $log.debug("Done pressed");
+                                dialogService.dismiss();
+                            }
+                        }
+                    ],
+                    messages: []
+                };
+
+                function createMessage (messageNumber) {
+                    var messageModel = {
+                        ngModel: {
+                            dialog: {
+                                title: "Message " + messageNumber,
+                                severity: messageSeverity.INFO,
+                                actions: [
+                                    {
+                                        label: "Cancel Duplication",
+                                        action: function () {
+                                            $log.debug("Cancel Duplication pressed");
+                                            $log.debug("Message should be dismissed");
+                                        }
+                                    }
+                                ]
+                            }
+                        }
+                    };
+                    return messageModel;
+                }
+
+                if (dialogService.showMessageList(model)) {
+                    //Do processing here
+                    for (var i = 0; i < 4; i++) {
+                        model.messages.push(createMessage(i));
+                    }
+                } else {
+                    $log.error("Could not display modal dialog");
+                }
+            };
         }
         return DialogLaunchController;
     }