[Merge] Resolve conflicts in open155

open #155 Conflicts: platform/commonUI/general/res/sass/user-environ/_layout.scss platform/commonUI/themes/espresso/res/css/theme-espresso.css platform/commonUI/themes/snow/res/css/theme-snow.css platform/commonUI/themes/snow/res/sass/_constants.scss
Removed notification from bundles
2015-10-26 13:20:26 -07:00 · 2015-10-23 17:02:25 -07:00 · 2015-10-23 16:30:51 -07:00 · 2015-10-23 16:28:42 -07:00 · 2015-10-23 12:11:37 -07:00 · 2015-10-23 12:03:56 -07:00
185 changed files with 17989 additions and 4517 deletions
--- a/2
+++ b/2
@@ -1 +1 @@
-web: node app.js --port $PORT --include example/localstorage
+web: node app.js --port $PORT
--- a/README.md
+++ b/README.md
@@ -103,6 +103,21 @@ This build will:

 Run as `mvn clean install`.

+### Building Documentation
+
+Open MCT Web's documentation is generated by an
+[npm](https://www.npmjs.com/)-based build:
+
+* `npm install` _(only needs to run once)_
+* `npm run docs`
+
+Documentation will be generated in `target/docs`. Note that diagram
+generation is dependent on having [Cairo](http://cairographics.org/download/)
+installed; see
+[node-canvas](https://github.com/Automattic/node-canvas#installation)'s
+documentation for help with installation.
+
+
 # Glossary

 Certain terms are used throughout Open MCT Web with consistent meanings
--- a/bundles.json
+++ b/bundles.json
@@ -10,6 +10,7 @@
    "platform/commonUI/inspect",
    "platform/commonUI/mobile",
    "platform/commonUI/themes/espresso",
+    "platform/commonUI/notification",
    "platform/containment",
    "platform/execution",
    "platform/telemetry",
--- a/docs/gendocs.js
+++ b/docs/gendocs.js
@@ -30,7 +30,8 @@
 var CONSTANTS = {
        DIAGRAM_WIDTH: 800,
        DIAGRAM_HEIGHT: 500
-    };
+    },
+    TOC_HEAD = "# Table of Contents";

 GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be defined
 (function () {
@@ -44,6 +45,7 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
        split = require("split"),
        stream = require("stream"),
        nomnoml = require('nomnoml'),
+        toc = require("markdown-toc"),
        Canvas = require('canvas'),
        options = require("minimist")(process.argv.slice(2));

@@ -110,6 +112,9 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
            done();
        };
        transform._flush = function (done) {
+            // Prepend table of contents
+            markdown =
+                [ TOC_HEAD, toc(markdown).content, "", markdown ].join("\n");
            this.push("<html><body>\n");
            this.push(marked(markdown));
            this.push("\n</body></html>\n");
@@ -133,8 +138,8 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
        customRenderer.link = function (href, title, text) {
            // ...but only if they look like relative paths
            return (href || "").indexOf(":") === -1 && href[0] !== "/" ?
-                renderer.link(href.replace(/\.md/, ".html"), title, text) :
-                renderer.link.apply(renderer, arguments);
+                    renderer.link(href.replace(/\.md/, ".html"), title, text) :
+                    renderer.link.apply(renderer, arguments);
        };
        return customRenderer;
    }
@@ -179,13 +184,17 @@ GLOBAL.window = GLOBAL.window ||  GLOBAL; // nomnoml expects window to be define
    glob(options['in'] + "/**/*.@(html|css|png)", {}, function (err, files) {
        files.forEach(function (file) {
            var destination = file.replace(options['in'], options.out),
-                destPath = path.dirname(destination);
-
+                destPath = path.dirname(destination),
+                streamOptions = {};
+            if (file.match(/png$/)){
+                streamOptions.encoding = 'binary';
+            } else {
+                streamOptions.encoding = 'utf8';
+            }
+            
            mkdirp(destPath, function (err) {
-                fs.createReadStream(file, { encoding: 'utf8' })
-                    .pipe(fs.createWriteStream(destination, {
-                        encoding: 'utf8'
-                    }));
+                fs.createReadStream(file, streamOptions)
+                    .pipe(fs.createWriteStream(destination, streamOptions));
            });
        });
    });
--- a/docs/src/architecture/Platform.md
+++ b/docs/src/architecture/Platform.md
@@ -35,16 +35,26 @@ in __any of these tiers__.
 * _DOM_: The rendered HTML document, composed from HTML templates which
  have been processed by AngularJS and will be updated by AngularJS
  to reflect changes from the presentation layer. User interactions
-  are initiated from here and invoke behavior in the presentation layer.
+  are initiated from here and invoke behavior in the presentation layer. HTML 
+  templates are written in Angular’s template syntax; see the [Angular documentation on templates](https://docs.angularjs.org/guide/templates). 
+  These describe the page as actually seen by the user. Conceptually, 
+  stylesheets (controlling the lookandfeel of the rendered templates) belong 
+  in this grouping as well. 
 * [_Presentation layer_](#presentation-layer): The presentation layer
  is responsible for updating (and providing information to update)
  the displayed state of the application. The presentation layer consists
  primarily of _controllers_ and _directives_. The presentation layer is
  concerned with inspecting the information model and preparing it for
  display.
-* [_Information model_](#information-model): The information model
-  describes the state and behavior of the objects with which the user
-  interacts.
+* [_Information model_](#information-model): Provides a common (within Open MCT 
+  Web) set of interfaces for dealing with “things”  domain objects  within the 
+  system. Userfacing concerns in a Open MCT Web application are expressed as 
+  domain objects; examples include folders (used to organize other domain 
+  objects), layouts (used to build displays), or telemetry points (used as 
+  handles for streams of remote measurements.) These domain objects expose a 
+  common set of interfaces to allow reusable user interfaces to be built in the 
+  presentation and template tiers; the specifics of these behaviors are then 
+  mapped to interactions with underlying services. 
 * [_Service infrastructure_](#service-infrastructure): The service
  infrastructure is responsible for providing the underlying general
  functionality needed to support the information model. This includes
@@ -52,7 +62,9 @@ in __any of these tiers__.
  back-end.
 * _Back-end_: The back-end is out of the scope of Open MCT Web, except
  for the interfaces which are utilized by adapters participating in the
-  service infrastructure.
+  service infrastructure. Includes the underlying persistence stores, telemetry 
+  streams, and so forth which the Open MCT Web client is being used to interact 
+  with.

 ## Application Start-up

--- a/docs/src/guide/index.md
+++ b/docs/src/guide/index.md
--- a/docs/src/index.html
+++ b/docs/src/index.html
@@ -29,8 +29,9 @@
    Sections:
    <ul>
        <li><a href="api/">API</a></li>
-        <li><a href="guide/">Developer Guide</a></li>
        <li><a href="architecture/">Architecture Overview</a></li>
+        <li><a href="guide/">Developer Guide</a></li>
+        <li><a href="tutorials/">Tutorials</a></li>
    </ul>
 </body>
 </html>
--- a/docs/src/tutorials/images/add-task.png
+++ b/docs/src/tutorials/images/add-task.png
--- a/docs/src/tutorials/images/bar-plot-2.png
+++ b/docs/src/tutorials/images/bar-plot-2.png
--- a/docs/src/tutorials/images/bar-plot-3.png
+++ b/docs/src/tutorials/images/bar-plot-3.png
--- a/docs/src/tutorials/images/bar-plot-4.png
+++ b/docs/src/tutorials/images/bar-plot-4.png
--- a/docs/src/tutorials/images/bar-plot.png
+++ b/docs/src/tutorials/images/bar-plot.png
--- a/docs/src/tutorials/images/chrome.png
+++ b/docs/src/tutorials/images/chrome.png
--- a/docs/src/tutorials/images/remove-task.png
+++ b/docs/src/tutorials/images/remove-task.png
--- a/docs/src/tutorials/images/telemetry-1.png
+++ b/docs/src/tutorials/images/telemetry-1.png
--- a/docs/src/tutorials/images/telemetry-2.png
+++ b/docs/src/tutorials/images/telemetry-2.png
--- a/docs/src/tutorials/images/telemetry-3.png
+++ b/docs/src/tutorials/images/telemetry-3.png
--- a/docs/src/tutorials/images/todo-edit.png
+++ b/docs/src/tutorials/images/todo-edit.png
--- a/docs/src/tutorials/images/todo-list.png
+++ b/docs/src/tutorials/images/todo-list.png
--- a/docs/src/tutorials/images/todo-restyled.png
+++ b/docs/src/tutorials/images/todo-restyled.png
--- a/docs/src/tutorials/images/todo-selection.png
+++ b/docs/src/tutorials/images/todo-selection.png
--- a/docs/src/tutorials/images/todo.png
+++ b/docs/src/tutorials/images/todo.png
--- a/docs/src/tutorials/index.md
+++ b/docs/src/tutorials/index.md
--- a/example/generator/bundle.json
+++ b/example/generator/bundle.json
@@ -34,6 +34,10 @@
                        {
                            "key": "time",
                            "name": "Time"
+                        },
+                        {
+                            "key": "yesterday",
+                            "name": "Yesterday"
                        }
                    ],
                    "ranges": [
@@ -61,4 +65,4 @@
            }
        ]
    }
-}
+}
--- a/example/generator/src/SinewaveTelemetryProvider.js
+++ b/example/generator/src/SinewaveTelemetryProvider.js
@@ -25,8 +25,8 @@
 * Module defining SinewaveTelemetryProvider. Created by vwoeltje on 11/12/14.
 */
 define(
-    ["./SinewaveTelemetry"],
-    function (SinewaveTelemetry) {
+    ["./SinewaveTelemetrySeries"],
+    function (SinewaveTelemetrySeries) {
        "use strict";

        /**
@@ -45,7 +45,7 @@ define(
            function generateData(request) {
                return {
                    key: request.key,
-                    telemetry: new SinewaveTelemetry(request)
+                    telemetry: new SinewaveTelemetrySeries(request)
                };
            }

@@ -112,4 +112,4 @@ define(

        return SinewaveTelemetryProvider;
    }
-);
+);
--- a/example/generator/src/SinewaveTelemetrySeries.js
+++ b/example/generator/src/SinewaveTelemetrySeries.js
@@ -29,35 +29,47 @@ define(
    function () {
        "use strict";

-        var firstObservedTime = Date.now();
+        var ONE_DAY = 60 * 60 * 24,
+            firstObservedTime = Math.floor(Date.now() / 1000) - ONE_DAY;

        /**
         *
         * @constructor
         */
-        function SinewaveTelemetry(request) {
-            var latestObservedTime = Date.now(),
-                count = Math.floor((latestObservedTime - firstObservedTime) / 1000),
-                period = request.period || 30,
-                generatorData = {};
+        function SinewaveTelemetrySeries(request) {
+            var timeOffset = (request.domain === 'yesterday') ? ONE_DAY : 0,
+                latestTime = Math.floor(Date.now() / 1000) - timeOffset,
+                firstTime = firstObservedTime - timeOffset,
+                endTime = (request.end !== undefined) ?
+                        Math.floor(request.end / 1000) : latestTime,
+                count = Math.min(endTime, latestTime) - firstTime,
+                period = +request.period || 30,
+                generatorData = {},
+                requestStart = (request.start === undefined) ? firstTime :
+                        Math.max(Math.floor(request.start / 1000), firstTime),
+                offset = requestStart - firstTime;
+
+            if (request.size !== undefined) {
+                offset = Math.max(offset, count - request.size);
+            }

            generatorData.getPointCount = function () {
-                return count;
+                return count - offset;
            };

            generatorData.getDomainValue = function (i, domain) {
-                return i * 1000 +
-                        (domain !== 'delta' ? firstObservedTime : 0);
+                return (i + offset) * 1000 + firstTime * 1000 -
+                    (domain === 'yesterday' ? ONE_DAY : 0);
            };

            generatorData.getRangeValue = function (i, range) {
                range = range || "sin";
-                return Math[range](i * Math.PI * 2 / period);
+                return Math[range]((i + offset) * Math.PI * 2 / period);
            };

            return generatorData;
        }

-        return SinewaveTelemetry;
+        return SinewaveTelemetrySeries;
    }
-);
+);
--- a/example/notifications/bundle.json
+++ b/example/notifications/bundle.json
@@ -0,0 +1,47 @@
+{
+    "extensions": {
+        "templates": [
+            {
+                "key": "dialogLaunchTemplate",
+                "templateUrl": "dialog-launch.html"
+            },
+            {
+                "key": "notificationLaunchTemplate",
+                "templateUrl": "notification-launch.html"
+            }
+        ],
+        "controllers": [
+            {
+                "key": "DialogLaunchController",
+                "implementation": "DialogLaunchController.js",
+                "depends": [
+                    "$scope",
+                    "$timeout",
+                    "$log",
+                    "dialogService",
+                    "notificationService"
+                ]
+            },
+            {
+                "key": "NotificationLaunchController",
+                "implementation": "NotificationLaunchController.js",
+                "depends": [
+                    "$scope",
+                    "$timeout",
+                    "$log",
+                    "notificationService"
+                ]
+            }
+        ],
+        "indicators": [
+            {
+                "implementation": "DialogLaunchIndicator.js",
+                "priority": "fallback"
+            },
+            {
+                "implementation": "NotificationLaunchIndicator.js",
+                "priority": "fallback"
+            }
+        ]
+    }
+}
--- a/example/notifications/res/dialog-launch.html
+++ b/example/notifications/res/dialog-launch.html
@@ -0,0 +1,10 @@
+<span class="status block ok" ng-controller="DialogLaunchController">
+    <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 class="count">Dialogs</span>
+</span>
--- a/example/notifications/res/notification-launch.html
+++ b/example/notifications/res/notification-launch.html
@@ -0,0 +1,10 @@
+<span class="status block ok" ng-controller="NotificationLaunchController">
+    <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 class="count">Notifications</span>
+</span>
--- a/example/notifications/src/DialogLaunchController.js
+++ b/example/notifications/src/DialogLaunchController.js
@@ -0,0 +1,150 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * A controller for the dialog launch view. This view allows manual
+         * launching of dialogs for demonstration and testing purposes. It
+         * also demonstrates the use of the DialogService.
+         * @param $scope
+         * @param $timeout
+         * @param $log
+         * @param dialogService
+         * @param notificationService
+         * @constructor
+         */
+        function DialogLaunchController($scope, $timeout, $log, dialogService, notificationService) {
+
+            /*
+            Demonstrates launching a progress dialog and updating it
+             periodically with the progress of an ongoing process.
+             */
+            $scope.launchProgress = function (knownProgress) {
+                var model = {
+                    title: "Progress Dialog Example",
+                    progress: 0,
+                    hint: "Do not navigate away from this page or close this browser tab while this operation is in progress.",
+                    actionText: "Calculating...",
+                    unknownProgress: !knownProgress,
+                    unknownDuration: false,
+                    severity: "info",
+                    options: [
+                        {
+                            label: "Cancel Operation",
+                            callback: function () {
+                                $log.debug("Operation cancelled");
+                                dialogService.dismiss();
+                            }
+                        },
+                        {
+                            label: "Do something else...",
+                            callback: function () {
+                                $log.debug("Something else pressed");
+                            }
+                        }
+                    ]
+                };
+
+                function incrementProgress() {
+                    model.progress = Math.min(100, Math.floor(model.progress + Math.random() * 30));
+                    model.progressText = ["Estimated time remaining: about ", 60 - Math.floor((model.progress / 100) * 60), " seconds"].join(" ");
+                    if (model.progress < 100) {
+                        $timeout(incrementProgress, 1000);
+                    }
+                }
+
+                if (dialogService.showBlockingMessage(model)) {
+                    //Do processing here
+                    model.actionText = "Processing 100 objects...";
+                    if (knownProgress) {
+                        $timeout(incrementProgress, 1000);
+                    }
+                } else {
+                    $log.error("Could not display modal dialog");
+                }
+            };
+
+
+            /*
+             Demonstrates launching an error dialog
+             */
+            $scope.launchError = function () {
+                var model = {
+                    title: "Error Dialog Example",
+                    actionText: "Something happened, and it was not good.",
+                    severity: "error",
+                    options: [
+                        {
+                            label: "Try Again",
+                            callback: function () {
+                                $log.debug("Try Again Pressed");
+                                dialogService.dismiss();
+                            }
+                        },
+                        {
+                            label: "Cancel",
+                            callback: function () {
+                                $log.debug("Cancel Pressed");
+                                dialogService.dismiss();
+                            }
+                        }
+                    ]
+                };
+
+                if (!dialogService.showBlockingMessage(model)) {
+                    $log.error("Could not display modal dialog");
+                }
+            };
+
+            /*
+             Demonstrates launching an error dialog
+             */
+            $scope.launchInfo = function () {
+                var model = {
+                    title: "Info Dialog Example",
+                    actionText: "This is an example of a blocking info" +
+                    " dialog. This dialog can be used to draw the user's" +
+                    " attention to an event.",
+                    severity: "info",
+                    primaryOption: {
+                            label: "OK",
+                            callback: function () {
+                                $log.debug("OK Pressed");
+                                dialogService.dismiss();
+                            }
+                        }
+                };
+
+                if (!dialogService.showBlockingMessage(model)) {
+                    $log.error("Could not display modal dialog");
+                }
+            };
+
+        }
+        return DialogLaunchController;
+    }
+);
--- a/example/notifications/src/DialogLaunchIndicator.js
+++ b/example/notifications/src/DialogLaunchIndicator.js
@@ -0,0 +1,56 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,window*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * A tool for manually invoking dialogs. When included this
+         * indicator will allow for dialogs of different types to be
+         * launched for demonstration and testing purposes.
+         * @constructor
+         */
+        function DialogLaunchIndicator() {
+
+        }
+
+        DialogLaunchIndicator.template = 'dialogLaunchTemplate';
+
+        DialogLaunchIndicator.prototype.getGlyph = function () {
+            return "i";
+        };
+        DialogLaunchIndicator.prototype.getGlyphClass = function () {
+            return 'caution';
+        };
+        DialogLaunchIndicator.prototype.getText = function () {
+            return "Launch test dialog";
+        };
+        DialogLaunchIndicator.prototype.getDescription = function () {
+            return "Launch test dialog";
+        };
+
+        return DialogLaunchIndicator;
+    }
+);
--- a/example/notifications/src/NotificationLaunchController.js
+++ b/example/notifications/src/NotificationLaunchController.js
@@ -0,0 +1,172 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * Allows launching of notification messages for the purposes of
+         * demonstration and testing. Also demonstrates use of
+         * the NotificationService. Notifications are non-blocking messages that
+         * appear at the bottom of the screen to inform the user of events
+         * in a non-intrusive way. For more information see the
+         * {@link NotificationService}
+         * @param $scope
+         * @param $timeout
+         * @param $log
+         * @param notificationService
+         * @constructor
+         */
+        function NotificationLaunchController($scope, $timeout, $log, notificationService) {
+            var messageCounter = 1;
+
+            function getExampleActionText() {
+                var actionTexts = [
+                    "Adipiscing turpis mauris in enim elementu hac, enim aliquam etiam.",
+                    "Eros turpis, pulvinar turpis eros eu",
+                    "Lundium nascetur a, lectus montes ac, parturient in natoque, duis risus risus pulvinar pid rhoncus, habitasse auctor natoque!"
+                ];
+                return actionTexts[Math.floor(Math.random()*3)];
+            }
+
+            function getExampleActions() {
+                var actions = [
+                    {
+                        label: "Try Again",
+                        callback: function () {
+                            $log.debug("Try Again pressed");
+                        }
+                    },
+                    {
+                        label: "Remove",
+                        callback: function () {
+                            $log.debug("Remove pressed");
+                        }
+                    },
+                    {
+                        label: "Cancel",
+                        callback: function () {
+                            $log.debug("Cancel pressed");
+                        }
+                    }
+                ];
+
+                // Randomly remove some actions off the top; leave at least one
+                actions.splice(0,Math.floor(Math.random() * actions.length));
+
+                return actions;
+            }
+
+            function getExampleSeverity() {
+                var severities = [
+                    "info",
+                    "alert",
+                    "error"
+                ];
+                return severities[Math.floor(Math.random() * severities.length)];
+            }
+
+            /**
+             * Launch a new notification with a severity level of 'Error'.
+             */
+            $scope.newError = function(){
+
+                notificationService.notify({
+                    title: "Example error notification " + messageCounter++,
+                    hint: "An error has occurred",
+                    severity: "error",
+                    primaryOption: {
+                        label: 'Retry',
+                        callback: function() {
+                            $log.info('Retry clicked');
+                        }
+                    },
+                    options: getExampleActions()});
+            };
+            /**
+             * Launch a new notification with a severity of 'Alert'.
+             */
+            $scope.newAlert = function(){
+
+                notificationService.notify({
+                    title: "Alert notification " + (messageCounter++),
+                    hint: "This is an alert message",
+                    severity: "alert",
+                    primaryOption: {
+                        label: 'Retry',
+                        callback: function() {
+                            $log.info('Retry clicked');
+                        }
+                    },
+                    options: getExampleActions()});
+            };
+
+
+            /**
+             * Launch a new notification with a progress bar that is updated
+             * periodically, tracking an ongoing process.
+             */
+            $scope.newProgress = function(){
+
+                var notificationModel = {
+                    title: "Progress notification example",
+                    severity: "info",
+                    progress: 0,
+                    actionText: getExampleActionText(),
+                    unknownProgress: false
+                };
+
+                /**
+                 * Simulate an ongoing process and update the progress bar.
+                 * @param notification
+                 */
+                function incrementProgress(notificationModel) {
+                    notificationModel.progress = Math.min(100, Math.floor(notificationModel.progress + Math.random() * 30));
+                    notificationModel.progressText = ["Estimated time" +
+                    " remaining:" +
+                    " about ", 60 - Math.floor((notificationModel.progress / 100) * 60), " seconds"].join(" ");
+                    if (notificationModel.progress < 100) {
+                        $timeout(function(){incrementProgress(notificationModel);}, 1000);
+                    }
+                }
+
+                notificationService.notify(notificationModel);
+                incrementProgress(notificationModel);
+            };
+
+            /**
+             * Launch a new notification with severity level of INFO.
+             */
+            $scope.newInfo = function(){
+
+                notificationService.info({
+                    title: "Example Info notification " + messageCounter++
+                });
+            };
+
+        }
+        return NotificationLaunchController;
+    }
+);
--- a/example/notifications/src/NotificationLaunchIndicator.js
+++ b/example/notifications/src/NotificationLaunchIndicator.js
@@ -0,0 +1,50 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,window*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        function NotificationLaunchIndicator() {
+
+        }
+
+        NotificationLaunchIndicator.template = 'notificationLaunchTemplate';
+
+        NotificationLaunchIndicator.prototype.getGlyph = function () {
+            return "i";
+        };
+        NotificationLaunchIndicator.prototype.getGlyphClass = function () {
+            return 'caution';
+        };
+        NotificationLaunchIndicator.prototype.getText = function () {
+            return "Launch notification";
+        };
+        NotificationLaunchIndicator.prototype.getDescription = function () {
+            return "Launch notification";
+        };
+
+        return NotificationLaunchIndicator;
+    }
+);
--- a/example/profiling/bundle.json
+++ b/example/profiling/bundle.json
@@ -4,7 +4,11 @@
            {
                "implementation": "WatchIndicator.js",
                "depends": ["$interval", "$rootScope"]
+            },
+            {
+                "implementation": "DigestIndicator.js",
+                "depends": ["$interval", "$rootScope"]
            }
        ]
    }
-}
+}
--- a/example/profiling/src/DigestIndicator.js
+++ b/example/profiling/src/DigestIndicator.js
@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * Displays the number of digests that have occurred since the
+         * indicator was first instantiated.
+         * @constructor
+         * @param $interval Angular's $interval
+         * @implements {Indicator}
+         */
+        function DigestIndicator($interval, $rootScope) {
+            var digests = 0,
+                displayed = 0,
+                start = Date.now();
+
+            function update() {
+                var secs = (Date.now() - start) / 1000;
+                displayed = Math.round(digests / secs);
+            }
+
+            function increment() {
+                digests += 1;
+            }
+
+            $rootScope.$watch(increment);
+
+            // Update state every second
+            $interval(update, 1000);
+
+            // Provide initial state, too
+            update();
+
+            return {
+                getGlyph: function () {
+                    return ".";
+                },
+                getGlyphClass: function () {
+                    return undefined;
+                },
+                getText: function () {
+                    return displayed + " digests/sec";
+                },
+                getDescription: function () {
+                    return "";
+                }
+            };
+        }
+
+        return DigestIndicator;
+
+    }
+);
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
    "split": "^1.0.0",
    "mkdirp": "^0.5.1",
    "nomnoml": "^0.0.3",
-    "canvas": "^1.2.7"
+    "canvas": "^1.2.7",
+    "markdown-toc": "^0.11.7"
  },
  "scripts": {
    "start": "node app.js",
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -1,4 +1,9 @@
 {
+    "configuration": {
+        "paths": {
+            "uuid": "uuid"
+        }
+    },
    "extensions": {
        "routes": [
            {
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -42,9 +42,8 @@
        </div>
    </div>

-    <div class='object-holder abs vscroll'>
-        <mct-representation key="representation.selected.key"
-                            mct-object="representation.selected.key && domainObject">
-        </mct-representation>
-    </div>
+    <mct-representation key="representation.selected.key"
+                        mct-object="representation.selected.key && domainObject"
+                        class="abs object-holder">
+    </mct-representation>
 </span>
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -28,7 +28,9 @@
        <mct-split-pane class='contents abs' anchor='left'>
            <div class='split-pane-component treeview pane left'>
                <div class="holder abs l-mobile">
-                    <mct-representation key="'create-button'" mct-object="navigatedObject">
+                    <mct-representation key="'create-button'"
+                                        mct-object="navigatedObject"
+                                        mct-device="desktop">
                    </mct-representation>
                    <div class='holder search-holder abs'
                         ng-class="{active: treeModel.search}">
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@@ -20,7 +20,7 @@
 at runtime from the About dialog for additional information.
 -->
 <div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
-    <div class="s-menu major create-btn" ng-click="createController.toggle()">
+    <div class="s-menu-btn major create-btn" ng-click="createController.toggle()">
 		<span class="ui-symbol icon type-icon">&#x2b;</span>
 		<span class="title-label">Create</span>
    </div>
--- a/platform/commonUI/browse/src/creation/CreationService.js
+++ b/platform/commonUI/browse/src/creation/CreationService.js
@@ -25,7 +25,7 @@
 * Module defining CreateService. Created by vwoeltje on 11/10/14.
 */
 define(
-    ["../../lib/uuid"],
+    ["uuid"],
    function (uuid) {
        "use strict";

--- a/platform/commonUI/dialog/bundle.json
+++ b/platform/commonUI/dialog/bundle.json
@@ -24,6 +24,18 @@
            {
                "key": "form-dialog",
                "templateUrl": "templates/dialog.html"
+            },
+            {
+                "key": "overlay-blocking-message",
+                "templateUrl": "templates/overlay-blocking-message.html"
+            },
+            {
+                "key": "message",
+                "templateUrl": "templates/message.html"
+            },
+            {
+                "key": "overlay-message-list",
+                "templateUrl": "templates/overlay-message-list.html"
            }
        ],
        "containers": [
--- a/platform/commonUI/dialog/res/templates/dialog.html
+++ b/platform/commonUI/dialog/res/templates/dialog.html
@@ -21,17 +21,13 @@
 -->
 <div class="abs top-bar">
    <div class="title">{{ngModel.title}}</div>
-    <div class="hint">
-        All fields marked <span class="ui-symbol req">*</span> are required.
-    </div>
+    <div class="hint">All fields marked <span class="ui-symbol req">*</span> are required.</div>
 </div>
-<div class="abs form editor">
-    <div class='abs contents l-dialog'>
-        <mct-form ng-model="ngModel.value"
-                  structure="ngModel.structure"
-                  name="createForm">
-        </mct-form>
-    </div>
+<div class='abs editor'>
+    <mct-form ng-model="ngModel.value"
+              structure="ngModel.structure"
+              name="createForm">
+    </mct-form>
 </div>
 <div class="abs bottom-bar">
    <a class='s-btn major'
--- a/platform/commonUI/dialog/res/templates/message.html
+++ b/platform/commonUI/dialog/res/templates/message.html
@@ -0,0 +1,32 @@
+<div class="l-message"
+     ng-class="'message-severity-' + ngModel.severity">
+    <div class="ui-symbol type-icon message-type"></div>
+    <div class="message-contents">
+        <div class="top-bar">
+            <div class="title">{{ngModel.title}}</div>
+            <div class="hint" ng-hide="ngModel.hint === undefined">{{ngModel.hint}}</div>
+        </div>
+        <div class="message-body">
+            <div class="message-action">
+                {{ngModel.actionText}}
+            </div>
+            <mct-include key="'progress-bar'"
+                         ng-model="ngModel"
+                         ng-show="ngModel.progress !== undefined || ngModel.unknownProgress"></mct-include>
+        </div>
+        <div class="bottom-bar">
+            <a ng-repeat="dialogOption in ngModel.options"
+               class="s-btn major"
+               ng-click="dialogOption.callback()">
+                {{dialogOption.label}}
+            </a>
+            <a class="s-btn major"
+               ng-if="ngModel.primaryOption"
+               ng-click="ngModel.primaryOption.callback()">
+                {{ngModel.primaryOption.label}}
+            </a>
+
+        </div>
+
+    </div>
+</div>
--- a/platform/commonUI/dialog/res/templates/overlay-blocking-message.html
+++ b/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-single">
+    <mct-include key="'message'" ng-model="ngModel">
+    </mct-include>
+</mct-container>
--- a/platform/commonUI/dialog/res/templates/overlay-message-list.html
+++ b/platform/commonUI/dialog/res/templates/overlay-message-list.html
@@ -0,0 +1,19 @@
+<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 | orderBy: '-'" key="'message'" ng-model="msg"></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>
+</mct-container>
--- a/platform/commonUI/dialog/res/templates/overlay-options.html
+++ b/platform/commonUI/dialog/res/templates/overlay-options.html
@@ -24,13 +24,11 @@
        <div class="title">{{ngModel.dialog.title}}</div>
        <div class="hint">{{ngModel.dialog.hint}}</div>
    </div>
-    <div class="abs form outline editor">
-        <div class='abs contents l-dialog'>
-            <mct-include key="ngModel.dialog.template"
-                         parameters="ngModel.dialog.parameters"
-                         ng-model="ngModel.dialog.model">
-            </mct-include>
-        </div>
+    <div class='abs editor'>
+        <mct-include key="ngModel.dialog.template"
+                     parameters="ngModel.dialog.parameters"
+                     ng-model="ngModel.dialog.model">
+        </mct-include>
    </div>
    <div class="abs bottom-bar">
        <a ng-repeat="option in ngModel.dialog.options"
--- a/platform/commonUI/dialog/res/templates/overlay.html
+++ b/platform/commonUI/dialog/res/templates/overlay.html
@@ -22,14 +22,9 @@
 <div class="abs overlay">
    <div class="abs blocker"></div>
    <div class="abs holder">
-        <a href=""
-           ng-click="ngModel.cancel()"
+        <a ng-click="ngModel.cancel()"
           ng-if="ngModel.cancel"
-           class="clk-icon icon ui-symbol close">
-            x
-        </a>
-        <div class="abs contents" ng-transclude>
-
-        </div>
+           class="clk-icon icon ui-symbol close">x</a>
+        <div class="abs contents" ng-transclude></div>
    </div>
 </div>
--- a/platform/commonUI/dialog/src/DialogService.js
+++ b/platform/commonUI/dialog/src/DialogService.js
@@ -55,7 +55,7 @@ define(
            this.dialogVisible = false;
        };

-        DialogService.prototype.getDialogResponse = function (key, model, resultGetter) {
+        DialogService.prototype.getDialogResponse = function (key, model, resultGetter, typeClass) {
            // We will return this result as a promise, because user
            // input is asynchronous.
            var deferred = this.$q.defer(),
@@ -84,27 +84,20 @@ define(
            model.confirm = confirm;
            model.cancel = cancel;

-            if (this.dialogVisible) {
-                // Only one dialog should be shown at a time.
-                // The application design should be such that
-                // we never even try to do this.
-                this.$log.warn([
-                    "Dialog already showing; ",
-                    "unable to show ",
-                    model.name
-                ].join(""));
-                deferred.reject();
-            } else {
+            if (this.canShowDialog(model)) {
                // Add the overlay using the OverlayService, which
                // will handle actual insertion into the DOM
                this.overlay = this.overlayService.createOverlay(
                    key,
-                    model
+                    model,
+                    typeClass || "t-dialog"
                );

                // Track that a dialog is already visible, to
                // avoid spawning multiple dialogs at once.
                this.dialogVisible = true;
+            } else {
+                deferred.reject();
            }

            return deferred.promise;
@@ -157,6 +150,99 @@ define(
            );
        };

+        /**
+         * Tests if a dialog can be displayed. A modal dialog may only be
+         * displayed if one is not already visible.
+         * Will log a warning message if it can't display a dialog.
+         * @returns {boolean} true if dialog is currently visible, false
+         * otherwise
+         */
+        DialogService.prototype.canShowDialog = function(dialogModel){
+            if (this.dialogVisible){
+                // Only one dialog should be shown at a time.
+                // The application design should be such that
+                // we never even try to do this.
+                this.$log.warn([
+                    "Dialog already showing; ",
+                    "unable to show ",
+                    dialogModel.title
+                ].join(""));
+
+                return false;
+            } else {
+                return true;
+            }
+        };
+
+        /**
+         * A user action that can be performed from a blocking dialog. These
+         * actions will be rendered as buttons within a blocking dialog.
+         *
+         * @typedef DialogOption
+         * @property {string} label a label to be displayed as the button
+         * text for this action
+         * @property {function} action a function to be called when the
+         * button is clicked
+         */
+
+        /**
+         * A description of the model options that may be passed to the
+         * showBlockingMessage method. Note that the DialogModel desribed
+         * here is shared with the Notifications framework.
+         * @see NotificationService
+         *
+         * @typedef DialogModel
+         * @property {string} title the title to use for the dialog
+         * @property {string} severity the severity level of this message.
+         * These are defined in a bundle constant with key 'dialogSeverity'
+         * @property {string} hint the 'hint' message to show below the title
+         * @property {string} actionText text that indicates a current action,
+         * shown above a progress bar to indicate what's happening.
+         * @property {number} progress a percentage value (1-100)
+         * indicating the completion of the blocking task
+         * @property {string} progressText the message to show below a
+         * progress bar to indicate progress. For example, this might be
+         * used to indicate time remaining, or items still to process.
+         * @property {boolean} unknownProgress some tasks may be
+         * impossible to provide an estimate for. Providing a true value for
+         * this attribute will indicate to the user that the progress and
+         * duration cannot be estimated.
+         * @property {DialogOption} primaryOption an action that will
+         * be added to the dialog as a button. The primary action can be
+         * used as the suggested course of action for the user. Making it
+         * distinct from other actions allows it to be styled differently,
+         * and treated preferentially in banner mode.
+         * @property {DialogOption[]} options a list of actions that will
+         * be added to the dialog as buttons.
+         */
+
+        /**
+         * Displays a blocking (modal) dialog. This dialog can be used for
+         * displaying messages that require the user's
+         * immediate attention. The message may include an indication of
+         * progress, as well as a series of actions that
+         * the user can take if necessary
+         * @param {DialogModel} dialogModel defines options for the dialog
+         * @param {typeClass} string tells overlayService that this overlay should use appropriate CSS class
+         * @returns {boolean}
+         */
+        DialogService.prototype.showBlockingMessage = 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(
+                    "overlay-blocking-message",
+                    dialogModel,
+                    "t-dialog-sm"
+                );
+                // Track that a dialog is already visible, to
+                // avoid spawning multiple dialogs at once.
+                this.dialogVisible = true;
+                return true;
+            } else {
+                return false;
+            }
+        };

        return DialogService;
    }
--- a/platform/commonUI/dialog/src/OverlayService.js
+++ b/platform/commonUI/dialog/src/OverlayService.js
@@ -28,7 +28,7 @@ define(

        // Template to inject into the DOM to show the dialog; really just points to
        // the a specific template that can be included via mct-include
-        var TEMPLATE = '<mct-include ng-model="overlay" key="key"></mct-include>';
+        var TEMPLATE = '<mct-include ng-model="overlay" key="key" ng-class="typeClass"></mct-include>';


        /**
@@ -71,8 +71,11 @@ define(
         * @param {object} overlayModel the model to pass to the
         *        included overlay template (this will be passed
         *        in via ng-model)
+         * @param {string} typeClass the element class to use in rendering
+         *        the overlay. Can be specified to provide custom styling of
+         *        overlays
         */
-        OverlayService.prototype.createOverlay = function (key, overlayModel) {
+        OverlayService.prototype.createOverlay = function (key, overlayModel, typeClass) {
            // Create a new scope for this overlay
            var scope = this.newScope(),
                element;
@@ -90,6 +93,7 @@ define(
            // Populate the scope; will be passed directly to the template
            scope.overlay = overlayModel;
            scope.key = key;
+            scope.typeClass = typeClass || 't-dialog';

            // Create the overlay element and add it to the document's body
            element = this.$compile(TEMPLATE)(scope);
--- a/platform/commonUI/dialog/test/DialogServiceSpec.js
+++ b/platform/commonUI/dialog/test/DialogServiceSpec.js
@@ -116,10 +116,22 @@ define(
                        dialog: dialogModel,
                        confirm: jasmine.any(Function),
                        cancel: jasmine.any(Function)
-                    }
+                    },
+                    't-dialog'
+                );
+            });
+
+            it("invokes the overlay service with the correct parameters when" +
+                " a blocking dialog is requested", function() {
+                var dialogModel = {};
+                expect(dialogService.showBlockingMessage(dialogModel)).toBe(true);
+                expect(mockOverlayService.createOverlay).toHaveBeenCalledWith(
+                    "overlay-blocking-message",
+                    dialogModel,
+                    "t-dialog-sm"
                );
            });

        });
    }
-);
+);
--- a/platform/commonUI/edit/res/templates/edit-object.html
+++ b/platform/commonUI/edit/res/templates/edit-object.html
@@ -30,12 +30,11 @@
                         structure="toolbar.structure"
                         ng-model="toolbar.state">
            </mct-toolbar>
-            <div class='holder abs object-holder work-area'>
-                <mct-representation key="representation.selected.key"
-                                    toolbar="toolbar"
-                                    mct-object="representation.selected.key && domainObject">
-                </mct-representation>
-            </div>
+            <mct-representation key="representation.selected.key"
+                                toolbar="toolbar"
+                                mct-object="representation.selected.key && domainObject"
+                                class="holder abs object-holder work-area">
+            </mct-representation>
        </div>
        <mct-splitter></mct-splitter>
        <div
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -8,6 +8,11 @@
                "key": "urlService",
                "implementation": "services/UrlService.js",
                "depends": [ "$location" ]
+            },
+            {
+                "key": "popupService",
+                "implementation": "services/PopupService.js",
+                "depends": [ "$document", "$window" ]
            }
        ],
        "runs": [
@@ -39,12 +44,30 @@
                "key": "indicator",
                "templateUrl": "templates/indicator.html"
            },
+            {
+                "key": "message-banner",
+                "templateUrl": "templates/message-banner.html"
+            },
+            {
+                "key": "progress-bar",
+                "templateUrl": "templates/progress-bar.html"
+            },
            {
              "key": "time-controller",
              "templateUrl": "templates/controls/time-controller.html"
            }
        ],
        "controllers": [
+            {
+                "key": "TimeRangeController",
+                "implementation": "controllers/TimeRangeController.js",
+                "depends": [ "$scope", "now" ]
+            },
+            {
+                "key": "DateTimePickerController",
+                "implementation": "controllers/DateTimePickerController.js",
+                "depends": [ "$scope", "now" ]
+            },
            {
                "key": "TreeNodeController",
                "implementation": "controllers/TreeNodeController.js",
@@ -92,6 +115,11 @@
                "key": "SelectorController",
                "implementation": "controllers/SelectorController.js",
                "depends": [ "objectService", "$scope" ]
+            },
+            {
+                "key": "BannerController",
+                "implementation": "controllers/BannerController.js",
+                "depends": ["$scope", "notificationService", "dialogService"]
            }
        ],
        "directives": [
@@ -105,11 +133,21 @@
                "implementation": "directives/MCTDrag.js",
                "depends": [ "$document" ]
            },
+            {
+                "key": "mctClickElsewhere",
+                "implementation": "directives/MCTClickElsewhere.js",
+                "depends": [ "$document" ]
+            },
            {
                "key": "mctResize",
                "implementation": "directives/MCTResize.js",
                "depends": [ "$timeout" ]
            },
+            {
+                "key": "mctPopup",
+                "implementation": "directives/MCTPopup.js",
+                "depends": [ "$compile", "popupService" ]
+            },
            {
                "key": "mctScrollX",
                "implementation": "directives/MCTScroll.js",
@@ -213,6 +251,10 @@
            {
                "key": "selector",
                "templateUrl": "templates/controls/selector.html"
+            },
+            {
+                "key": "datetime-picker",
+                "templateUrl": "templates/controls/datetime-picker.html"
            }
        ],
        "licenses": [
--- a/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
+++ b/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
@@ -1,14 +1,30 @@
 {
 	"metadata": {
-		"name": "WTD Symbols v24",
-		"lastOpened": 1441992412958,
-		"created": 1441992410384
+		"name": "WTD Symbols v2.3",
+		"lastOpened": 1444267493342,
+		"created": 1444266013303
 	},
 	"iconSets": [
 		{
 			"selection": [
 				{
-					"order": 86,
+					"order": 90,
+					"id": 87,
+					"prevSize": 32,
+					"code": 58896,
+					"name": "icon-bell",
+					"tempChar": ""
+				},
+				{
+					"order": 91,
+					"id": 86,
+					"prevSize": 32,
+					"code": 58889,
+					"name": "icon-hourglass",
+					"tempChar": ""
+				},
+				{
+					"order": 92,
 					"id": 85,
 					"prevSize": 32,
 					"code": 58888,
@@ -18,119 +34,119 @@
 						58890
 					],
 					"name": "icon-info-v15",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 82,
+					"order": 93,
 					"id": 84,
 					"prevSize": 32,
 					"code": 58887,
 					"name": "icon-x-in-circle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 77,
+					"order": 94,
 					"id": 83,
 					"prevSize": 32,
 					"code": 58881,
 					"name": "icon-datatable",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 78,
+					"order": 95,
 					"id": 82,
 					"prevSize": 32,
 					"code": 58882,
 					"name": "icon-tabular-scrolling",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 79,
+					"order": 96,
 					"id": 81,
 					"prevSize": 32,
 					"code": 58884,
 					"name": "icon-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 80,
+					"order": 97,
 					"id": 80,
 					"prevSize": 32,
 					"code": 58885,
 					"name": "icon-calendar",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 83,
+					"order": 98,
 					"id": 78,
 					"prevSize": 32,
 					"code": 58886,
 					"name": "icon-paint-bucket",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 1,
+					"order": 99,
 					"id": 75,
 					"prevSize": 32,
 					"code": 123,
 					"name": "icon-pointer-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 3,
+					"order": 100,
 					"id": 74,
 					"prevSize": 32,
 					"code": 125,
 					"name": "icon-pointer-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 4,
+					"order": 101,
 					"id": 73,
 					"prevSize": 32,
 					"code": 80,
 					"name": "icon-person",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 5,
+					"order": 102,
 					"id": 72,
 					"prevSize": 32,
 					"code": 232,
 					"name": "icon-chain-links",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 6,
+					"order": 103,
 					"id": 71,
 					"prevSize": 32,
 					"code": 115,
 					"name": "icon-database-in-brackets",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 7,
+					"order": 104,
 					"id": 70,
 					"prevSize": 32,
 					"code": 114,
 					"name": "icon-refresh",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 8,
+					"order": 105,
 					"id": 69,
 					"prevSize": 32,
 					"code": 108,
 					"name": "icon-lock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 9,
+					"order": 106,
 					"id": 68,
 					"prevSize": 32,
 					"code": 51,
 					"name": "icon-box-with-dashed-lines",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 10,
@@ -138,7 +154,7 @@
 					"prevSize": 32,
 					"code": 58880,
 					"name": "icon-box-with-arrow-cursor",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 11,
@@ -146,7 +162,7 @@
 					"prevSize": 32,
 					"code": 65,
 					"name": "icon-activity-mode",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 12,
@@ -154,15 +170,15 @@
 					"prevSize": 32,
 					"code": 97,
 					"name": "icon-activity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
-					"order": 13,
+					"order": 87,
 					"id": 64,
 					"prevSize": 32,
 					"code": 33,
 					"name": "icon-alert-rect",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 14,
@@ -170,7 +186,7 @@
 					"prevSize": 32,
 					"code": 58883,
 					"name": "icon-alert-triangle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 15,
@@ -178,7 +194,7 @@
 					"prevSize": 32,
 					"code": 238,
 					"name": "icon-arrow-double-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 16,
@@ -186,7 +202,7 @@
 					"prevSize": 32,
 					"code": 235,
 					"name": "icon-arrow-double-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 2,
@@ -194,7 +210,7 @@
 					"prevSize": 32,
 					"code": 118,
 					"name": "icon-arrow-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 19,
@@ -202,7 +218,7 @@
 					"prevSize": 32,
 					"code": 60,
 					"name": "icon-arrow-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 20,
@@ -210,7 +226,7 @@
 					"prevSize": 32,
 					"code": 62,
 					"name": "icon-arrow-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 21,
@@ -218,7 +234,7 @@
 					"prevSize": 32,
 					"code": 236,
 					"name": "icon-arrow-tall-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 22,
@@ -226,7 +242,7 @@
 					"prevSize": 32,
 					"code": 237,
 					"name": "icon-arrow-tall-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 23,
@@ -234,7 +250,7 @@
 					"prevSize": 32,
 					"code": 94,
 					"name": "icon-arrow-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 24,
@@ -242,7 +258,7 @@
 					"prevSize": 32,
 					"code": 73,
 					"name": "icon-arrows-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 25,
@@ -250,7 +266,7 @@
 					"prevSize": 32,
 					"code": 58893,
 					"name": "icon-arrows-right-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 33,
@@ -258,7 +274,7 @@
 					"prevSize": 32,
 					"code": 53,
 					"name": "icon-arrows-up-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 26,
@@ -266,7 +282,7 @@
 					"prevSize": 32,
 					"code": 42,
 					"name": "icon-asterisk",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 27,
@@ -274,7 +290,7 @@
 					"prevSize": 32,
 					"code": 72,
 					"name": "icon-autoflow-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 28,
@@ -282,7 +298,7 @@
 					"prevSize": 32,
 					"code": 224,
 					"name": "icon-box",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 29,
@@ -290,7 +306,7 @@
 					"prevSize": 32,
 					"code": 50,
 					"name": "icon-check",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 30,
@@ -298,7 +314,7 @@
 					"prevSize": 32,
 					"code": 67,
 					"name": "icon-clock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 31,
@@ -306,7 +322,7 @@
 					"prevSize": 32,
 					"code": 46,
 					"name": "icon-connectivity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 32,
@@ -314,7 +330,7 @@
 					"prevSize": 32,
 					"code": 100,
 					"name": "icon-database-query",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 17,
@@ -322,7 +338,7 @@
 					"prevSize": 32,
 					"code": 68,
 					"name": "icon-database",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 35,
@@ -330,7 +346,7 @@
 					"prevSize": 32,
 					"code": 81,
 					"name": "icon-dictionary",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 36,
@@ -338,7 +354,7 @@
 					"prevSize": 32,
 					"code": 242,
 					"name": "icon-duplicate",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 37,
@@ -346,7 +362,7 @@
 					"prevSize": 32,
 					"code": 102,
 					"name": "icon-folder-new",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 38,
@@ -354,7 +370,7 @@
 					"prevSize": 32,
 					"code": 70,
 					"name": "icon-folder",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 39,
@@ -362,7 +378,7 @@
 					"prevSize": 32,
 					"code": 95,
 					"name": "icon-fullscreen-collapse",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 40,
@@ -370,7 +386,7 @@
 					"prevSize": 32,
 					"code": 122,
 					"name": "icon-fullscreen-expand",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 41,
@@ -378,7 +394,7 @@
 					"prevSize": 32,
 					"code": 71,
 					"name": "icon-gear",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 49,
@@ -386,7 +402,7 @@
 					"prevSize": 32,
 					"code": 227,
 					"name": "icon-image",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 42,
@@ -394,7 +410,7 @@
 					"prevSize": 32,
 					"code": 225,
 					"name": "icon-layers",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 43,
@@ -402,7 +418,7 @@
 					"prevSize": 32,
 					"code": 76,
 					"name": "icon-layout",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 44,
@@ -410,7 +426,7 @@
 					"prevSize": 32,
 					"code": 226,
 					"name": "icon-line-horz",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 75,
@@ -418,7 +434,7 @@
 					"prevSize": 32,
 					"code": 244,
 					"name": "icon-link",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 46,
@@ -426,7 +442,7 @@
 					"prevSize": 32,
 					"code": 88,
 					"name": "icon-magnify-in",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 47,
@@ -434,7 +450,7 @@
 					"prevSize": 32,
 					"code": 89,
 					"name": "icon-magnify-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 48,
@@ -442,7 +458,7 @@
 					"prevSize": 32,
 					"code": 77,
 					"name": "icon-magnify",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 34,
@@ -450,7 +466,7 @@
 					"prevSize": 32,
 					"code": 109,
 					"name": "icon-menu",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 50,
@@ -458,7 +474,7 @@
 					"prevSize": 32,
 					"code": 243,
 					"name": "icon-move",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 51,
@@ -466,7 +482,7 @@
 					"prevSize": 32,
 					"code": 121,
 					"name": "icon-new-window",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 52,
@@ -474,7 +490,7 @@
 					"prevSize": 32,
 					"code": 111,
 					"name": "icon-object",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 73,
@@ -482,7 +498,7 @@
 					"prevSize": 32,
 					"code": 63,
 					"name": "icon-object-unknown",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 53,
@@ -490,7 +506,7 @@
 					"prevSize": 32,
 					"code": 86,
 					"name": "icon-packet",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 54,
@@ -498,7 +514,7 @@
 					"prevSize": 32,
 					"code": 234,
 					"name": "icon-page",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 55,
@@ -506,7 +522,7 @@
 					"prevSize": 32,
 					"code": 241,
 					"name": "icon-pause",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 56,
@@ -514,7 +530,7 @@
 					"prevSize": 32,
 					"code": 112,
 					"name": "icon-pencil",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 65,
@@ -522,7 +538,7 @@
 					"prevSize": 32,
 					"code": 79,
 					"name": "icon-people",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 57,
@@ -530,7 +546,7 @@
 					"prevSize": 32,
 					"code": 239,
 					"name": "icon-play",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 58,
@@ -538,7 +554,7 @@
 					"prevSize": 32,
 					"code": 233,
 					"name": "icon-plot-resource",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 59,
@@ -546,7 +562,7 @@
 					"prevSize": 32,
 					"code": 43,
 					"name": "icon-plus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 60,
@@ -554,7 +570,7 @@
 					"prevSize": 32,
 					"code": 45,
 					"name": "icon-minus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 61,
@@ -562,7 +578,7 @@
 					"prevSize": 32,
 					"code": 54,
 					"name": "icon-sine",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 62,
@@ -570,7 +586,7 @@
 					"prevSize": 32,
 					"code": 228,
 					"name": "icon-T",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 63,
@@ -578,7 +594,7 @@
 					"prevSize": 32,
 					"code": 116,
 					"name": "icon-telemetry-panel",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 64,
@@ -586,7 +602,7 @@
 					"prevSize": 32,
 					"code": 84,
 					"name": "icon-telemetry",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 18,
@@ -594,7 +610,7 @@
 					"prevSize": 32,
 					"code": 246,
 					"name": "icon-thumbs-strip",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 67,
@@ -602,7 +618,7 @@
 					"prevSize": 32,
 					"code": 83,
 					"name": "icon-timeline",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 68,
@@ -610,7 +626,7 @@
 					"prevSize": 32,
 					"code": 245,
 					"name": "icon-timer",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 69,
@@ -618,7 +634,7 @@
 					"prevSize": 32,
 					"code": 90,
 					"name": "icon-trash",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 70,
@@ -626,7 +642,7 @@
 					"prevSize": 32,
 					"code": 229,
 					"name": "icon-two-parts-both",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 71,
@@ -634,7 +650,7 @@
 					"prevSize": 32,
 					"code": 231,
 					"name": "icon-two-parts-one-only",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 72,
@@ -642,7 +658,7 @@
 					"prevSize": 32,
 					"code": 120,
 					"name": "icon-x-heavy",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 66,
@@ -650,7 +666,7 @@
 					"prevSize": 32,
 					"code": 58946,
 					"name": "icon-x",
-					"tempChar": ""
+					"tempChar": ""
 				}
 			],
 			"id": 2,
@@ -665,6 +681,58 @@
 			"height": 1024,
 			"prevSize": 32,
 			"icons": [
+				{
+					"id": 87,
+					"paths": [
+						"M512 1024c106 0 192-86 192-192h-384c0 106 86 192 192 192z",
+						"M896 448v-64c0-212-172-384-384-384s-384 172-384 384v64c0 70.6-57.4 128-128 128v128h1024v-128c-70.6 0-128-57.4-128-128z"
+					],
+					"attrs": [
+						{
+							"fill": "rgb(6, 161, 75)"
+						},
+						{
+							"fill": "rgb(6, 161, 75)"
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-bell"
+					],
+					"colorPermutations": {
+						"125525525516161751": [
+							1,
+							1
+						]
+					}
+				},
+				{
+					"id": 86,
+					"paths": [
+						"M1024 0h-1024c0 282.8 229.2 512 512 512s512-229.2 512-512zM512 384c-102.6 0-199-40-271.6-112.4-41.2-41.2-72-90.2-90.8-143.6h724.6c-18.8 53.4-49.6 102.4-90.8 143.6-72.4 72.4-168.8 112.4-271.4 112.4z",
+						"M512 512c-282.8 0-512 229.2-512 512h1024c0-282.8-229.2-512-512-512z"
+					],
+					"attrs": [
+						{
+							"fill": "rgb(6, 161, 75)"
+						},
+						{
+							"fill": "rgb(6, 161, 75)"
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-hourglass"
+					],
+					"colorPermutations": {
+						"125525525516161751": [
+							1,
+							1
+						]
+					}
+				},
 				{
 					"id": 85,
 					"paths": [
@@ -698,7 +766,8 @@
 						"icon-x-in-circle"
 					],
 					"colorPermutations": {
-						"16161751": []
+						"16161751": [],
+						"125525525516161751": []
 					}
 				},
 				{
@@ -899,6 +968,11 @@
 							1,
 							1,
 							1
+						],
+						"125525525516161751": [
+							1,
+							1,
+							1
 						]
 					}
 				},
@@ -1051,18 +1125,28 @@
 				{
 					"id": 67,
 					"paths": [
-						"M832 512.4c0-0.2 0-0.2 0-0.4v-320c0-105.6-86.4-192-192-192h-448c-105.6 0-192 86.4-192 192v320c0 105.6 86.4 192 192 192h263.6l-197.2-445.6 573.6 254z",
-						"M766.8 659.8l193.8-20.4-576.6-255.4 255.4 576.6 20.4-193.8 257 257.2 107.2-107.2z"
+						"M894-2h-768c-70.4 0-128 57.6-128 128v768c0 70.4 57.6 128 128 128h400c-2.2-3.8-4-7.6-5.8-11.4l-255.2-576.8c-21.4-48.4-10.8-105 26.6-142.4 24.4-24.4 57.2-37.4 90.4-37.4 17.4 0 35.2 3.6 51.8 11l576.6 255.4c4 1.8 7.8 3.8 11.4 5.8v-400.2c0.2-70.4-57.4-128-127.8-128z",
+						"M958.6 637.4l-576.6-255.4 255.4 576.6 64.6-128.6 192 192 128-128-192-192z"
 					],
 					"attrs": [
-						{},
-						{}
+						{
+							"fill": "rgb(0, 0, 0)"
+						},
+						{
+							"fill": "rgb(0, 0, 0)"
+						}
 					],
 					"isMulticolor": false,
 					"grid": 0,
 					"tags": [
 						"icon-box-with-arrow-cursor"
-					]
+					],
+					"colorPermutations": {
+						"125525525516161751": [
+							0,
+							0
+						]
+					}
 				},
 				{
 					"id": 66,
@@ -1338,6 +1422,9 @@
 					"colorPermutations": {
 						"16161751": [
 							0
+						],
+						"125525525516161751": [
+							0
 						]
 					}
 				},
@@ -14853,6 +14940,5 @@
 		"gridSize": 16,
 		"showLiga": false
 	},
-	"uid": -1,
-	"time": 1441993324496
+	"uid": -1
 }
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
@@ -76,7 +76,7 @@
 <glyph unicode="&#xf4;" glyph-name="icon-link" d="M1024 448l-512 512v-307.2l-512-204.8v-256h512v-256z" />
 <glyph unicode="&#xf5;" glyph-name="icon-timer" d="M638 898c0 35.4-28.6 64-64 64h-128c-35.4 0-64-28.6-64-64s28.6-64 64-64h128c35.4 0 64 28.6 64 64zM510 834c-247.4 0-448-200.6-448-448s200.6-448 448-448 448 200.6 448 448-200.6 448-448 448zM510 386h-336c0 185.2 150.8 336 336 336v-336z" />
 <glyph unicode="&#xf6;" glyph-name="icon-thumbs-strip" d="M448 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM448 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320z" />
-<glyph unicode="&#xe600;" glyph-name="icon-box-with-arrow-cursor" d="M832 447.6c0 0.2 0 0.2 0 0.4v320c0 105.6-86.4 192-192 192h-448c-105.6 0-192-86.4-192-192v-320c0-105.6 86.4-192 192-192h263.6l-197.2 445.6 573.6-254zM766.8 300.2l193.8 20.4-576.6 255.4 255.4-576.6 20.4 193.8 257-257.2 107.2 107.2z" />
+<glyph unicode="&#xe600;" glyph-name="icon-box-with-arrow-cursor" d="M894 962h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h400c-2.2 3.8-4 7.6-5.8 11.4l-255.2 576.8c-21.4 48.4-10.8 105 26.6 142.4 24.4 24.4 57.2 37.4 90.4 37.4 17.4 0 35.2-3.6 51.8-11l576.6-255.4c4-1.8 7.8-3.8 11.4-5.8v400.2c0.2 70.4-57.4 128-127.8 128zM958.6 322.6l-576.6 255.4 255.4-576.6 64.6 128.6 192-192 128 128-192 192z" />
 <glyph unicode="&#xe601;" glyph-name="icon-datatable" d="M1024 768c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 448c-282.8 0-512 86-512 192v-512c0-106 229.2-192 512-192s512 86 512 192v512c0-106-229.2-192-512-192zM896 385v-256c-36.6-15.6-79.8-28.8-128-39.4v256c48.2 10.6 91.4 23.8 128 39.4zM256 345.6v-256c-48.2 10.4-91.4 23.8-128 39.4v256c36.6-15.6 79.8-28.8 128-39.4zM384 70v256c41-4 83.8-6 128-6s87 2.2 128 6v-256c-41-4-83.8-6-128-6s-87 2.2-128 6z" />
 <glyph unicode="&#xe602;" glyph-name="icon-tabular-scrolling" d="M64 960c-35.2 0-64-28.8-64-64v-192h448v256h-384zM1024 704v192c0 35.2-28.8 64-64 64h-384v-256h448zM0 576v-192c0-35.2 28.8-64 64-64h384v256h-448zM960 320c35.2 0 64 28.8 64 64v192h-448v-256h384zM512-64l-256 256h512z" />
 <glyph unicode="&#xe603;" glyph-name="icon-alert-triangle" d="M998.208 111.136l-422.702 739.728c-34.928 61.124-92.084 61.124-127.012 0l-422.702-739.728c-34.928-61.126-5.906-111.136 64.494-111.136h843.428c70.4 0 99.422 50.010 64.494 111.136zM512 128c-35.2 0-64 28.8-64 64s28.8 64 64 64 64-28.8 64-64c0-35.2-28.8-64-64-64zM627.448 577.242l-38.898-194.486c-6.902-34.516-41.35-62.756-76.55-62.756s-69.648 28.24-76.552 62.758l-38.898 194.486c-6.902 34.516 16.25 62.756 51.45 62.756h128c35.2 0 58.352-28.24 51.448-62.758z" />
@@ -85,6 +85,8 @@
 <glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M544 736v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-64c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 448c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
 <glyph unicode="&#xe607;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
 <glyph unicode="&#xe608;" glyph-name="icon-info-v15" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 832c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 128h-384v128h64v256h256v-256h64v-128z" />
+<glyph unicode="&#xe609;" glyph-name="icon-hourglass" d="M1024 960h-1024c0-282.8 229.2-512 512-512s512 229.2 512 512zM512 576c-102.6 0-199 40-271.6 112.4-41.2 41.2-72 90.2-90.8 143.6h724.6c-18.8-53.4-49.6-102.4-90.8-143.6-72.4-72.4-168.8-112.4-271.4-112.4zM512 448c-282.8 0-512-229.2-512-512h1024c0 282.8-229.2 512-512 512z" />
 <glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
+<glyph unicode="&#xe610;" glyph-name="icon-bell" d="M512-64c106 0 192 86 192 192h-384c0-106 86-192 192-192zM896 512v64c0 212-172 384-384 384s-384-172-384-384v-64c0-70.6-57.4-128-128-128v-128h1024v128c-70.6 0-128 57.4-128 128z" />
 <glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 </font></defs></svg>
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -45,9 +45,10 @@ $ueEditToolBarH: 25px;
 $ueBrowseLeftPaneW: 25%;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
+$ueTimeControlH: (33px, 20px, 20px);
 // Overlay
-$ovrTopBarH: 60px;
-$ovrFooterH: 30px;
+$ovrTopBarH: 45px;
+$ovrFooterH: 24px;
 $overlayMargin: 25px;
 // Items
 $ueBrowseGridItemLg: 200px;
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -40,11 +40,11 @@

 /************************** HTML ENTITIES */
 a {
-	color: #ccc;
+	color: $colorA;
 	cursor: pointer;
 	text-decoration: none;
 	&:hover {
-		color: #fff;
+		color: $colorAHov;
 	}
 }

@@ -125,6 +125,14 @@ mct-container {
 	text-align: center;
 }

+.scrolling {
+	overflow: auto;
+}
+
+.vscroll {
+	overflow-y: auto;
+}
+
 .no-margin {
 	margin: 0;
 }
--- a/platform/commonUI/general/res/sass/_icons.scss
+++ b/platform/commonUI/general/res/sass/_icons.scss
@@ -29,6 +29,9 @@
 }

 .ui-symbol {
+	&.type-icon {
+		color: $colorObjHdrIc;
+	}
 	&.icon {
 		color: $colorKey;
 		&.alert {
@@ -41,6 +44,9 @@
 			font-size: 1.65em;
 		}
 	}
+	&.icon-calendar:after {
+		content: "\e605";
+	}
 }

 .bar .ui-symbol {
@@ -52,7 +58,7 @@
 	display: inline-block;
 }

-.s-menu .invoke-menu,
+.s-menu-btn .invoke-menu,
 .icon.major .invoke-menu {
 	margin-left: $interiorMarginSm;
 }
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -29,7 +29,6 @@
@import "helpers/bubbles";
@import "helpers/splitter";
@import "helpers/wait-spinner";
-@import "messages";
@import "properties";

 /********************************* CONTROLS */
@@ -39,6 +38,7 @@
@import "controls/controls";
@import "controls/lists";
@import "controls/menus";
+@import "controls/messages";
@import "controls/time-controller";
@import "mobile/controls/menus";

@@ -62,7 +62,6 @@
@import "mobile/tree";
@import "user-environ/frame";
@import "user-environ/top-bar";
-@import "user-environ/bottom-bar";
@import "user-environ/tool-bar";

 /********************************* VIEWS */
--- a/platform/commonUI/general/res/sass/_messages.scss
+++ b/platform/commonUI/general/res/sass/_messages.scss
@@ -1,12 +0,0 @@
-/* Styles for messages */
-
-.message {
-	&.block {
-		@include border-radius($basicCr);
-		padding: $interiorMarginLg;
-	}
-	&.error {
-		background-color: rgba($colorAlert,0.3);
-		color: lighten($colorAlert, 20%);
-	}
-}
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -94,7 +94,6 @@
 }

@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
-    //$size: $size*2;
    width: 0;
    height: 0;
    $slopedB: $size/$ratio solid transparent;
@@ -129,6 +128,24 @@
    background-size: $d $d;
 }

+@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
+    @include background-image(linear-gradient(-90deg,
+        rgba($c, $a) 0%, rgba($c, $a) 50%,
+        transparent 50%, transparent 100%
+    ));
+    background-repeat: repeat;
+    background-size: $d $d;
+}
+
+@mixin bgVertFuzzyStripes($c: yellow, $a: 0.1, $d: 40px) {
+    @include background-image(linear-gradient(-90deg,
+        rgba($c, $a) 0%, transparent 50%,
+        transparent 50%, rgba($c, $a) 100%
+    ));
+    background-repeat: repeat;
+    background-size: $d $d;
+}
+
@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
    $deg: 90deg;
    @if ($repeatDir != 'x') {
@@ -347,9 +364,10 @@
    /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
    //position: relative;
    top: 50%;
-    -webkit-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
+	@include webkitProp(transform, translateY(-50%));
+    //-webkit-transform: translateY(-50%);
+    //-ms-transform: translateY(-50%);
+    //transform: translateY(-50%);
 }

@mixin verticalCenterBlock($holderH, $itemH) {
@@ -374,22 +392,8 @@
    overflow-y: $showBar;
 }

-@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
-    display: block;
-    position: absolute;
-    -webkit-animation: rotation .6s infinite linear;
-    -moz-animation: rotation .6s infinite linear;
-    -o-animation: rotation .6s infinite linear;
-    animation: rotation .6s infinite linear;
-    border-color: rgba($c, 0.25);
-    border-top-color: rgba($c, 1.0);
-    border-style: solid;
-    border-width: $b;
-    border-radius: 100%;
-}
-
@mixin test($c: #ffcc00, $a: 0.2) {
-    background-color: rgba($c, $a);
+    background-color: rgba($c, $a) !important;
 }

@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
--- a/platform/commonUI/general/res/sass/_views.scss
+++ b/platform/commonUI/general/res/sass/_views.scss
@@ -10,9 +10,6 @@
 	&.fixed {
 		font-size: 0.8em;
 	}
-	&.scrolling {
-		overflow: auto;
-	}
 	.controls,
 	label,
 	.inline-block {
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -19,34 +19,6 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-/*.control {
-	// UNUSED?
-	&.view-control {
-		.icon {
-			display: inline-block;
-			margin: -1px 5px 1px 2px;
-			vertical-align: middle;
-			&.triangle-down {
-				margin: 2px 2px -2px 0px;
-			}
-		}
-
-		.label {
-			display: inline-block;
-			font-size: 11px;
-			vertical-align: middle;
-		}
-
-		.toggle {
-			@include border-radius(3px);
-			display: inline-block;
-			padding: 1px 6px 4px 4px;
-			&:hover {
-				background: rgba(white, 0.1);
-			}
-		}
-	}
-}*/

 .accordion {
 	$accordionHeadH: 18px;
@@ -205,7 +177,7 @@ label.checkbox.custom {
 	}
 }

-.s-menu label.checkbox.custom {
+.s-menu-btn label.checkbox.custom {
 	margin-left: 5px;
 }

@@ -291,53 +263,241 @@ label.checkbox.custom {
 	}
 }

+/******************************************************** PROGRESS BAR */
+@include keyframes(progress) {
+    100% { background-position: $progressBarStripeW center; }
+}
+
+@mixin bgProgressAnim($c: yellow, $a: 0.1, $d: 20px) {
+    @include background-image(linear-gradient(-90deg,
+        rgba($c, $a) 0%, transparent 50%,
+        transparent 50%, rgba($c, $a) 100%
+    ));
+    background-position: 0 center;
+    background-repeat: repeat-x;
+    background-size: $d 40%;
+}
+
+.l-progress-bar {
+    // Assume will be determinate by default
+	display: inline-block;
+	overflow: hidden;
+	position: relative;
+
+	.progress-amt-holder {
+        @include absPosDefault(1px);
+    }
+    .progress-amt,
+    .progress-amt:before,
+    .progress-amt:after {
+		@include absPosDefault();
+        display: block;
+        content: '';
+	}
+
+    .progress-amt {
+        right: auto; // Allow inline width to control }
+    }
+
+    &.indeterminate {
+        .progress-amt {
+            width: 100% !important;
+        }
+    }
+}
+
+.s-progress-bar {
+    @include border-radius($basicCr);
+    @include boxIncised(0.3, 4px);
+    background: $colorProgressBarOuter;
+    //border:1px solid $colorProgressBarOuter;
+	.progress-amt {
+		@include border-radius($basicCr);
+		@include boxShdw();
+		@include border-radius($basicCr - 1);
+        @include trans-prop-nice(width);
+        &:before {
+            background-color: $colorProgressBarAmt;
+        }
+        &:after {
+            // Sheen
+            @include background-image(linear-gradient(
+                    transparent 5%, rgba(#fff,0.25) 30%, transparent 100%
+            ));
+        }
+	}
+
+    &:not(.indeterminate) {
+        .progress-amt:before {
+            // More subtle anim for determinate progress
+            @include animation(progress .4s linear infinite);
+            @include bgProgressAnim(#fff, 0.1, $progressBarStripeW);
+        }
+    }
+
+    &.indeterminate .progress-amt {
+        &:before {
+            // More visible std diag stripe anim for indeterminate progress
+            @include animation(progress .6s linear infinite);
+            @include bgDiagonalStripes(#fff, 0.2, $progressBarStripeW);
+        }
+        &:after { display: none; }
+    }
+}
+
 /******************************************************** SLIDERS */

 .slider {
 	$knobH: 100%; //14px;
-	$knobW: 12px;
-	$slotH: 50%;
 	.slot {
 		//		@include border-radius($basicCr * .75);
-		@include sliderTrack();
-		height: $slotH;
+		//@include sliderTrack();
 		width: auto;
 		position: absolute;
-		top: ($knobH - $slotH) / 2;
+		top: 0;
 		right: 0;
-		bottom: auto;
+		bottom: 0;
 		left: 0;
 	}
 	.knob {
-		@include btnSubtle();
-		@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
-		cursor: ew-resize;
+		//@include btnSubtle();
+		//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
+		@include trans-prop-nice-fade(.25s);
+		background-color: $sliderColorKnob;
+		&:hover {
+			background-color: $sliderColorKnobHov;
+		}
 		position: absolute;
 		height: $knobH;
-		width: $knobW;
+		width: $sliderKnobW;
 		top: 0;
 		auto: 0;
 		bottom: auto;
 		left: auto;
-		&:before {
-			top: 1px;
-			bottom: 3px;
-			left: ($knobW / 2) - 1;
-		}
-
+	}
+	.knob-l {
+		@include border-left-radius($sliderKnobW);
+		cursor: w-resize;
+	}
+	.knob-r {
+		@include border-right-radius($sliderKnobW);
+		cursor: e-resize;
 	}
 	.range {
-		background: rgba($colorKey, 0.6);
+		@include trans-prop-nice-fade(.25s);
+		background-color: $sliderColorRange;
 		cursor: ew-resize;
 		position: absolute;
-		top: 0;
+		top: 0; //$tbOffset;
 		right: auto;
 		bottom: 0;
 		left: auto;
 		height: auto;
 		width: auto;
 		&:hover {
-			background: rgba($colorKey, 0.7);
+			background-color: $sliderColorRangeHov;
+		}
+	}
+}
+
+/******************************************************** DATETIME PICKER */
+.l-datetime-picker {
+	$r1H: 15px;
+	@include user-select(none);
+	font-size: 0.8rem;
+	padding: $interiorMarginLg !important;
+	width: 230px;
+	.l-month-year-pager {
+		$pagerW: 20px;
+		//@include test();
+		//font-size: 0.8rem;
+		height: $r1H;
+		margin-bottom: $interiorMargin;
+		position: relative;
+		.pager,
+		.val {
+			//@include test(red);
+			@extend .abs;
+		}
+		.pager {
+			width: $pagerW;
+			@extend .ui-symbol;
+			&.prev {
+				right: auto;
+				&:before {
+					content: "\3c";
+				}
+			}
+			&.next {
+				left: auto;
+				text-align: right;
+				&:before {
+					content: "\3e";
+				}
+			}
+		}
+		.val {
+			text-align: center;
+			left: $pagerW + $interiorMargin;
+			right: $pagerW + $interiorMargin;
+		}
+	}
+	.l-calendar,
+	.l-time-selects {
+		border-top: 1px solid $colorInteriorBorder
+	}
+	.l-time-selects {
+		line-height: $formInputH;
+	}
+}
+
+/******************************************************** CALENDAR */
+.l-calendar {
+	$colorMuted: pushBack($colorMenuFg, 30%);
+	ul.l-cal-row {
+		@include display-flex;
+		@include flex-flow(row nowrap);
+		margin-top: 1px;
+		&:first-child {
+			margin-top: 0;
+		}
+		li {
+			@include flex(1 0);
+			//@include test();
+			margin-left: 1px;
+			padding: $interiorMargin;
+			text-align: center;
+			&:first-child {
+				margin-left: 0;
+			}
+		}
+		&.l-header li {
+			color: $colorMuted;
+		}
+		&.l-body li {
+			@include trans-prop-nice(background-color, .25s);
+			cursor: pointer;
+			&.in-month {
+				background-color: $colorCalCellInMonthBg;
+			}
+			.sub {
+				color: $colorMuted;
+				font-size: 0.8em;
+			}
+			&.selected {
+				background: $colorCalCellSelectedBg;
+				color: $colorCalCellSelectedFg;
+				.sub {
+					color: inherit;
+				}
+			}
+			&:hover {
+				background-color: $colorCalCellHovBg;
+				color: $colorCalCellHovFg;
+				.sub {
+					color: inherit;
+				}
+			}
 		}
 	}
 }
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -20,7 +20,7 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /******************************************************** MENU BUTTONS */
-.s-menu {
+.s-menu-btn {
 	// Formerly .btn-menu
 	@extend .s-btn;
 	span.l-click-area {
@@ -62,186 +62,192 @@

 /******************************************************** MENUS THEMSELVES */
 .menu-element {
-	$bg: $colorMenuBg;
-	$fg: $colorMenuFg;
-	$ic: $colorMenuIc;
 	cursor: pointer;
 	position: relative;
-	.menu {
-		@include border-radius($basicCr);
-		@include containerSubtle($bg, $fg);
-		@include boxShdw($shdwMenu);
-		@include txtShdw($shdwMenuText);
-		display: block; // set to block via jQuery
-		padding: $interiorMarginSm 0;
-		position: absolute;
-		z-index: 10;
-		ul {
-			@include menuUlReset();
-			li {
-				@include box-sizing(border-box);
-				border-top: 1px solid lighten($bg, 20%);
-				color: pullForward($bg, 60%);
-				line-height: $menuLineH;
-				padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
-				position: relative;
-				white-space: nowrap;
-				&:first-child {
-					border: none;
-				}
-				&:hover {
-					background: $colorMenuHovBg;
-					color: $colorMenuHovFg;
-					.icon {
-						color: $colorMenuHovIc;
-					}
-				}
-				.type-icon {
-					left: $interiorMargin * 2;
-				}
-			}
-		}
-	}
+}

-	.menu,
-	.context-menu,
-	.super-menu {
-		pointer-events: auto;
-		ul li {
-			//padding-left: 25px;
-			a {
-				color: $fg;
-			}
-			.icon {
-				color: $ic;
-			}
-			.type-icon {
-				left: $interiorMargin;
-			}
-			&:hover .icon {
-				//color: lighten($ic, 5%);
-			}
-		}
-	}
+.s-menu {
+	@include border-radius($basicCr);
+	@include containerSubtle($colorMenuBg, $colorMenuFg);
+	@include boxShdw($shdwMenu);
+	@include txtShdw($shdwMenuText);
+	padding: $interiorMarginSm 0;
+}

-	.checkbox-menu {
-		// Used in search dropdown in tree
-		@extend .context-menu;
-		ul li {
-			padding-left: 50px;
-			.checkbox {
-				$d: 0.7rem;
-				position: absolute;
-				left: $interiorMargin;
-				top: ($menuLineH - $d) / 1.5;
-				em {
-					height: $d;
-					width: $d;
-					&:before {
-						font-size: 7px !important;// $d/2;
-						height: $d;
-						width: $d;
-						line-height: $d;
-					}
-				}
-			}
-			.type-icon {
-				left: 25px;
-			}
-		}
-	}
-
-	.super-menu {
-		$w: 500px;
-		$h: $w - 20;
-		$plw: 50%;
-		$prw: 50%;
-		display: block;
-		width: $w;
-		height: $h;
-		.contents {
-			@include absPosDefault($interiorMargin);
-		}
-		.pane {
+.menu {
+	@extend .s-menu;
+	display: block;
+	position: absolute;
+	z-index: 10;
+	ul {
+		@include menuUlReset();
+		li {
 			@include box-sizing(border-box);
-			&.left {
-				//@include test();
-				border-right: 1px solid pullForward($colorMenuBg, 10%);
-				left: 0;
-				padding-right: $interiorMargin;
-				right: auto;
-				width: $plw;
-				overflow-x: hidden;
-				overflow-y: auto;
-				ul {
-					li {
-						@include border-radius($controlCr);
-						padding-left: 30px;
-						border-top: none;
-					}
+			border-top: 1px solid lighten($colorMenuBg, 20%);
+			color: pullForward($colorMenuBg, 60%);
+			line-height: $menuLineH;
+			padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
+			position: relative;
+			white-space: nowrap;
+			&:first-child {
+				border: none;
+			}
+			&:hover {
+				background: $colorMenuHovBg;
+				color: $colorMenuHovFg;
+				.icon {
+					color: $colorMenuHovIc;
 				}
 			}
-			&.right {
-				//@include test(red);
-				left: auto;
-				right: 0;
-				padding: $interiorMargin * 5;
-				width: $prw;
+			.type-icon {
+				left: $interiorMargin * 2;
 			}
 		}
-		.menu-item-description {
-			.desc-area {
-				&.icon {
-					$h: 150px;
-					color: $colorCreateMenuLgIcon;
-					position: relative;
-					font-size: 8em;
-					left: 0;
-					height: $h;
-					line-height: $h;
-					margin-bottom: $interiorMargin * 5;
-					text-align: center;
-				}
-				&.title {
-					color: $colorCreateMenuText;
-					font-size: 1.2em;
-					margin-bottom: 0.5em;
-				}
-				&.description {
-					//color: lighten($bg, 30%);
-					color: $colorCreateMenuText;
-					font-size: 0.8em;
-					line-height: 1.5em;
-				}
-			}
-		}
-	}
-	.context-menu {
-		font-size: 0.80rem;
 	}
 }

-.context-menu-holder {
-	pointer-events: none;
+.menu,
+.context-menu,
+.super-menu {
+	pointer-events: auto;
+	ul li {
+		//padding-left: 25px;
+		a {
+			color: $colorMenuFg;
+		}
+		.icon {
+			color: $colorMenuIc;
+		}
+		.type-icon {
+			left: $interiorMargin;
+		}
+		&:hover .icon {
+			//color: lighten($colorMenuIc, 5%);
+		}
+	}
+}
+
+.checkbox-menu {
+	// Used in search dropdown in tree
+	@extend .context-menu;
+	ul li {
+		padding-left: 50px;
+		.checkbox {
+			$d: 0.7rem;
+			position: absolute;
+			left: $interiorMargin;
+			top: ($menuLineH - $d) / 1.5;
+			em {
+				height: $d;
+				width: $d;
+				&:before {
+					font-size: 7px !important;// $d/2;
+					height: $d;
+					width: $d;
+					line-height: $d;
+				}
+			}
+		}
+		.type-icon {
+			left: 25px;
+		}
+	}
+}
+
+.super-menu {
+	$w: 500px;
+	$h: $w - 20;
+	$plw: 50%;
+	$prw: 50%;
+	display: block;
+	width: $w;
+	height: $h;
+	.contents {
+		@include absPosDefault($interiorMargin);
+	}
+	.pane {
+		@include box-sizing(border-box);
+		&.left {
+			//@include test();
+			border-right: 1px solid pullForward($colorMenuBg, 10%);
+			left: 0;
+			padding-right: $interiorMargin;
+			right: auto;
+			width: $plw;
+			overflow-x: hidden;
+			overflow-y: auto;
+			ul {
+				li {
+					@include border-radius($controlCr);
+					padding-left: 30px;
+					border-top: none;
+				}
+			}
+		}
+		&.right {
+			//@include test(red);
+			left: auto;
+			right: 0;
+			padding: $interiorMargin * 5;
+			width: $prw;
+		}
+	}
+	.menu-item-description {
+		.desc-area {
+			&.icon {
+				$h: 150px;
+				color: $colorCreateMenuLgIcon;
+				position: relative;
+				font-size: 8em;
+				left: 0;
+				height: $h;
+				line-height: $h;
+				margin-bottom: $interiorMargin * 5;
+				text-align: center;
+			}
+			&.title {
+				color: $colorCreateMenuText;
+				font-size: 1.2em;
+				margin-bottom: 0.5em;
+			}
+			&.description {
+				//color: lighten($colorMenuBg, 30%);
+				color: $colorCreateMenuText;
+				font-size: 0.8em;
+				line-height: 1.5em;
+			}
+		}
+	}
+}
+.context-menu {
+	font-size: 0.80rem;
+}
+
+.context-menu-holder,
+.menu-holder {
 	position: absolute;
-	height: 200px;
-	width: 170px;
 	z-index: 70;
 	.context-menu-wrapper {
 		position: absolute;
 		height: 100%;
 		width: 100%;
-		.context-menu {
-		}
 	}
-	&.go-left .context-menu {
+	&.go-left .context-menu,
+	&.go-left .menu {
 		right: 0;
 	}
-	&.go-up .context-menu {
+	&.go-up .context-menu,
+	&.go-up .menu {
 		bottom: 0;
 	}
 }

+.context-menu-holder {
+	pointer-events: none;
+	height: 200px;
+	width: 170px;
+}
+
 .btn-bar.right .menu,
 .menus-to-left .menu {
 	left: auto;
--- a/platform/commonUI/general/res/sass/controls/_messages.scss
+++ b/platform/commonUI/general/res/sass/controls/_messages.scss
@@ -0,0 +1,306 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+@mixin statusBannerColors($bg, $fg: $colorStatusFg) {
+	$bgPb: 30%;
+	$bgPbD: 10%;
+	background-color: darken($bg, $bgPb);
+	color: $fg;
+	&:hover {
+		background-color: darken($bg, $bgPb - $bgPbD);
+	}
+	.s-action {
+		background-color: darken($bg, $bgPb + $bgPbD);
+		&:hover {
+			background-color: darken($bg, $bgPb);
+		}
+	}
+}
+
+.status.block {
+	color: $colorStatusDefault;
+	cursor: default;
+	display: inline-block;
+	margin-right: $interiorMargin;
+	.status-indicator,
+	.label,
+	.count {
+		//@include test(#00ff00);
+		display: inline-block;
+		vertical-align: top;
+	}
+	.status-indicator {
+		margin-right: $interiorMarginSm;
+	}
+	&.ok .status-indicator,
+    &.info .status-indicator {
+		color: $colorStatusInfo;
+	}
+    &.alert .status-indicator,
+	&.warning .status-indicator,
+	&.caution .status-indicator {
+		color: $colorStatusAlert;
+	}
+	&.error .status-indicator {
+		color: $colorStatusError;
+	}
+	.label {
+		// Max-width silliness is necessary for width transition
+		@include trans-prop-nice(max-width, .25s);
+		overflow: hidden;
+		max-width: 0px;
+	}
+	.count {
+		@include trans-prop-nice(opacity, .25s);
+		font-weight: bold;
+		opacity: 1;
+	}
+	&:hover {
+		.label {
+			max-width: 450px;
+			width: auto;
+		}
+		.count {
+			opacity: 0;
+		}
+	}
+}
+
+/* Styles for messages and message banners */
+.message {
+	&.block {
+		@include border-radius($basicCr);
+		padding: $interiorMarginLg;
+	}
+	&.error {
+		background-color: rgba($colorAlert,0.3);
+		color: lighten($colorAlert, 20%);
+	}
+}
+
+.l-message-banner {
+	$m: $interiorMarginSm;
+	$lh: $ueFooterH - ($m*2) - 1;
+	@include box-sizing(border-box);
+	@include ellipsize();
+	@include display-flex;
+	@include flex-direction(row);
+	@include align-items(center);
+	position: absolute;
+	top: $m; right: auto; bottom: $m; left: 50%;
+	height: auto; width: auto;
+	line-height: $lh;
+	max-width: 300px;
+	padding: 0 $interiorMargin 0 $interiorMargin;
+	@include transform(translateX(-50%));
+
+	&.minimized {
+        @include transition-property(left, opacity);
+        @include transition-duration(0.3s);
+        @include transition-timing-function(ease-in-out);
+		left: 0;
+        opacity: 0;
+	}
+
+    &.new {
+        left: 50%;
+        opacity: 1;
+        &:not(.info) {
+            @include pulse(100ms, 10);
+        }
+    }
+
+	.banner-elem {
+		@include flex(0 1 auto);
+		margin-left: $interiorMargin;
+	}
+	a {
+		display: inline-block;
+	}
+	.l-action {
+		line-height: $lh - 3;
+		padding: 0 $interiorMargin;
+	}
+    .close {
+		//@include test(red, 0.7);
+		cursor: pointer;
+        font-size: 7px;
+		width: 8px;
+    }
+	.l-progress-bar {
+		$h: $lh - 10;
+		height: $h;
+		line-height: $h;
+		width: 100px;
+	}
+    .progress-info { display: none; }
+	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 {
+	@include border-radius($controlCr);
+	@include statusBannerColors($colorStatusDefault, $colorStatusFg);
+	cursor: pointer;
+	a { color: inherit; }
+	.s-action {
+		@include border-radius($basicCr);
+        @include trans-prop-nice(background-color);
+	}
+	.close {
+		opacity: 0.5;
+		&:hover {
+			opacity: 1;
+		}
+	}
+	&.ok,
+    &.info {
+		@include statusBannerColors($colorStatusInfo);
+	}
+	&.caution,
+    &.warning,
+    &.alert {
+		@include statusBannerColors($colorStatusAlert);
+	}
+    &.error {
+        @include statusBannerColors($colorStatusError);
+    }
+}
+
+@mixin messageBlock($iconW: 32px) {
+    .type-icon.message-type {
+        @include txtShdw($shdwStatusIc);
+        &:before { content:"\e608"; }
+        color: $colorStatusDefault;
+        font-size: $iconW;
+        padding: 1px;
+        width: $iconW + 2;
+    }
+
+    .message-severity-info .type-icon.message-type {
+        &:before { content:"\e608"; }
+        color: $colorStatusInfo;
+    }
+    .message-severity-alert .type-icon.message-type {
+        &:before { content:"\e610"; }
+        color: $colorStatusAlert;
+    }
+    .message-severity-error .type-icon.message-type {
+        &:before { content:"\21"; }
+        color: $colorStatusError;
+    }
+}
+/* Paths:
+    t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message >
+        message-type > (icon)
+        message-contents >
+        top-bar >
+            title
+            hint
+        editor >
+            (if displaying list of messages)
+            ul > li > l-message >
+                ... same as above
+        bottom-bar
+*/
+
+.l-message {
+    @include display-flex;
+    @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;
+
+        .top-bar,
+        .message-body {
+            margin-bottom: $interiorMarginLg * 2;
+        }
+    }
+}
+
+
+// Message as singleton
+.t-message-single {
+    @include messageBlock(80px);
+
+    @include desktop {
+        .l-message,
+        .bottom-bar {
+            @include absPosDefault();
+        }
+
+        .bottom-bar {
+            top: auto;
+            height: $ovrFooterH;
+        }
+    }
+}
+
+// Messages in list
+.t-message-list {
+    @include messageBlock(32px);
+
+    .message-contents {
+        .l-message {
+            //border-bottom: 1px solid pullForward($colorOvrBg, 20%);
+            @include border-radius($controlCr);
+            background: rgba($colorOvrFg, 0.1);
+            margin-bottom: $interiorMargin;
+            padding: $interiorMarginLg;
+
+            .message-contents,
+            .bottom-bar {
+                //@include test(green);
+                position: relative;
+            }
+
+            .message-contents {
+                font-size: 0.9em;
+                margin-left: $interiorMarginLg;
+                .message-action { color: pushBack($colorOvrFg, 20%); }
+                .bottom-bar { text-align: left; }
+            }
+
+            .top-bar,
+            .message-body {
+                margin-bottom: $interiorMarginLg;
+            }
+        }
+    }
+
+    @include desktop {
+        .message-contents .l-message { margin-right: $interiorMarginLg; }
+    }
+}
--- a/platform/commonUI/general/res/sass/controls/_time-controller.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss
@@ -1,72 +1,155 @@
-.l-time-controller {
-	$inputTxtW: 90px;
-	$knobW: 9px;
-	$r1H: 20px;
-	$r2H: 30px;
-	$r3H: 10px;
+@mixin toiLineHovEffects() {
+	//@include pulse(.25s);
+	&:before,
+	&:after {
+		background-color: $timeControllerToiLineColorHov;
+	}
+}

-	position: relative;
-	margin: $interiorMarginLg 0;
-	min-width: 400px;
+.l-time-controller-visible {
+
+}
+
+mct-include.l-time-controller {
+	$minW: 500px;
+	$knobHOffset: 0px;
+	$knobM: ($sliderKnobW + $knobHOffset) * -1;
+	$rangeValPad: $interiorMargin;
+	$rangeValOffset: $sliderKnobW;
+	//$knobCr: $sliderKnobW;
+	$timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset;
+	$r1H: nth($ueTimeControlH,1);
+	$r2H: nth($ueTimeControlH,2);
+	$r3H: nth($ueTimeControlH,3);
+
+    @include absPosDefault();
+    //@include test();
+    display: block;
+    top: auto;
+	height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
+    min-width: $minW;
+    font-size: 0.8rem;

 	.l-time-range-inputs-holder,
 	.l-time-range-slider {
-		font-size: 0.8em;
+		//font-size: 0.8em;
 	}

 	.l-time-range-inputs-holder,
 	.l-time-range-slider-holder,
 	.l-time-range-ticks-holder
 	{
-		margin-bottom: $interiorMargin;
-		position: relative;
+		//@include test();
+		@include absPosDefault(0, visible);
+		@include box-sizing(border-box);
+		top: auto;
 	}
 	.l-time-range-slider,
 	.l-time-range-ticks {
 		//@include test(red, 0.1);
 		@include absPosDefault(0, visible);
+		left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
 	}

 	.l-time-range-inputs-holder {
-		height: $r1H;
-	}
-
-	.l-time-range-slider,
-	.l-time-range-ticks {
-		left: $inputTxtW; right: $inputTxtW;
-
+		//@include test(red);
+		height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
+		padding-top: $interiorMargin;
+		border-top: 1px solid $colorInteriorBorder;
+		.type-icon {
+			font-size: 120%;
+			vertical-align: middle;
+		}
+		.l-time-range-input,
+		.l-time-range-inputs-elem {
+			margin-right: $interiorMargin;
+			.lbl {
+				color: $colorPlotLabelFg;
+			}
+			.ui-symbol.icon {
+				font-size: 11px;
+				width: 11px;
+			}
+		}
 	}

 	.l-time-range-slider-holder {
-		height: $r2H;
+		//@include test(green);
+		height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
 		.range-holder {
 			@include box-shadow(none);
 			background: none;
 			border: none;
-			height: 75%;
+			.range {
+				.toi-line {
+					$myC: $timeControllerToiLineColor;
+					$myW: 8px;
+					@include transform(translateX(50%));
+					position: absolute;
+					//@include test();
+					top: 0; right: 0; bottom: 0px; left: auto;
+					width: $myW;
+					height: auto;
+					z-index: 2;
+					&:before,
+					&:after {
+						background-color: $myC;
+						content: "";
+						position: absolute;
+					}
+					&:before {
+						// Vert line
+						top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
+						width: 2px;
+						//top: 0; right: 3px; bottom: 0; left: 3px;
+					}
+					&:after {
+						// Circle element
+						@include border-radius($myW);
+						@include transform(translateY(-50%));
+						top: 50%; right: 0; bottom: auto; left: 0;
+						width: auto;
+						height: $myW;
+					}
+				}
+				&:hover .toi-line {
+					@include toiLineHovEffects;
+				}
+			}
+		}
+		&:not(:active) {
+			//@include test(#ff00cc);
+			.knob,
+			.range {
+				@include transition-property(left, right);
+				@include transition-duration(500ms);
+				@include transition-timing-function(ease-in-out);
+			}
 		}
 	}

 	.l-time-range-ticks-holder {
 		height: $r3H;
 		.l-time-range-ticks {
-			border-top: 1px solid $colorInteriorBorder;
+			border-top: 1px solid $colorTick;
 			.tick {
-				background-color: $colorInteriorBorder;
+				background-color: $colorTick;
 				border:none;
+				height: 5px;
 				width: 1px;
 				margin-left: -1px;
+				position: absolute;
 				&:first-child {
 					margin-left: 0;
 				}
 				.l-time-range-tick-label {
-					color: lighten($colorInteriorBorder, 20%);
-					font-size: 0.7em;
+					@include webkitProp(transform, translateX(-50%));
+					color: $colorPlotLabelFg;
+					display: inline-block;
+					font-size: 0.9em;
 					position: absolute;
-					margin-left: -0.5 * $tickLblW;
-					text-align: center;
-					top: $r3H;
-					width: $tickLblW;
+					top: 8px;
+					white-space: nowrap;
 					z-index: 2;
 				}
 			}
@@ -74,31 +157,47 @@
 	}

 	.knob {
-		width: $knobW;
+		z-index: 2;
 		.range-value {
-			$w: 75px;
-			//@include test();
+			//@include test($sliderColorRange);
+			@include trans-prop-nice-fade(.25s);
+			padding: 0 $rangeValOffset;
 			position: absolute;
-			top: 50%;
-			margin-top: -7px; // Label is 13px high
+			height: $r2H;
+			line-height: $r2H;
 			white-space: nowrap;
-			width: $w;
 		}
 		&:hover .range-value {
-			color: $colorKey;
+			color: $sliderColorKnobHov;
 		}
 		&.knob-l {
-			margin-left: $knobW / -2;
+			//@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS
+			margin-left: $knobM;
 			.range-value {
 				text-align: right;
-				right: $knobW + $interiorMargin;
+				right: $rangeValOffset;
 			}
 		}
 		&.knob-r {
-			margin-right: $knobW / -2;
+			//@include border-bottom-right-radius($knobCr);
+			margin-right: $knobM;
 			.range-value {
-				left: $knobW + $interiorMargin;
+				left: $rangeValOffset;
+			}
+			&:hover + .range-holder .range .toi-line {
+				@include toiLineHovEffects;
 			}
 		}
 	}
+}
+
+//.slot.range-holder {
+//	background-color: $sliderColorRangeHolder;
+//}
+
+.s-time-range-val {
+	//@include test();
+	@include border-radius($controlCr);
+	background-color: $colorInputBg;
+	padding: 1px 1px 0 $interiorMargin;
 }
--- a/platform/commonUI/general/res/sass/forms/_datetime.scss
+++ b/platform/commonUI/general/res/sass/forms/_datetime.scss
@@ -19,39 +19,44 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
+@mixin complexFieldHolder($myW) {
+	width: $myW + $interiorMargin;
+	input[type="text"] {
+		width: $myW;
+	}
+}
+
 .complex.datetime {
 	span {
 		display: inline-block;
 		margin-right: $interiorMargin;
 	}
-	
+
+/*
 	.field-hints,
 	.fields {
 	}
+
 	
 	.field-hints {
-		
+
 	}
-	
+	*/
+
 	.fields {
 		margin-top: $interiorMarginSm 0;
 		padding: $interiorMarginSm 0;
 	}
 	
 	.date {
-		$myW: 80px;
-		width: $myW + $interiorMargin;
-		input {
-			width: $myW;
-		}
-		
+		@include complexFieldHolder(80px);
+	}
+
+	.time.md {
+		@include complexFieldHolder(60px);
 	}
 	
 	.time.sm {
-		$myW: 40px;
-		width: $myW + $interiorMargin;
-		input {
-			width: $myW;
-		}
+		@include complexFieldHolder(40px);
 	}
 }
--- a/platform/commonUI/general/res/sass/forms/_selects.scss
+++ b/platform/commonUI/general/res/sass/forms/_selects.scss
@@ -21,10 +21,13 @@
 *****************************************************************************/
 .select {
 	@include btnSubtle($colorSelectBg);
-	margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
+    @if $shdwBtns != none {
+	    margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
+    }
 	padding: 0 $interiorMargin;
    overflow: hidden;
 	position: relative;
+    line-height: $formInputH;
 	select {
 		@include appearance(none);
 		@include box-sizing(border-box);
@@ -40,11 +43,8 @@
 	}
 	&:after {
 		@include contextArrow();
+		pointer-events: none;
 		color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
-		//content:"v";
-		//display: block;
-		//font-family: 'symbolsfont';
-		//pointer-events: none;
 		position: absolute;
 		right: $interiorMargin; top: 0;
 	}
--- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
+++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
@@ -19,24 +19,45 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-@-webkit-keyframes rotation {
-	from {-webkit-transform: rotate(0deg);}
-	to {-webkit-transform: rotate(359deg);}
+@include keyframes(rotation) {
+    0%   { transform: rotate(0deg); }
+    100% { transform: rotate(359deg); }
 }

-@-moz-keyframes rotation {
-	from {-moz-transform: rotate(0deg);}
-	to {-moz-transform: rotate(359deg);}
+@mixin wait-spinner2($b: 5px, $c: $colorAlt1) {
+    @include keyframes(rotateCentered) {
+         0%   { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
+         100% { transform: translateX(-50%) translateY(-50%) rotate(359deg); }
+     }
+    @include animation-name(rotateCentered);
+    @include animation-duration(0.5s);
+    @include animation-iteration-count(infinite);
+    @include animation-timing-function(linear);
+    border-color: rgba($c, 0.25);
+    border-top-color: rgba($c, 1.0);
+    border-style: solid;
+    border-width: 5px;
+    @include border-radius(100%);
+    @include box-sizing(border-box);
+    display: block;
+    position: absolute;
+    height: 0; width: 0;
+    padding: 7%;
+    left: 50%; top: 50%;
 }

-@-o-keyframes rotation {
-	from {-o-transform: rotate(0deg);}
-	to {-o-transform: rotate(359deg);}
-}
-
-@keyframes rotation {
-	from {transform: rotate(0deg);}
-	to {transform: rotate(359deg);}
+@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
+	display: block;
+	position: absolute;
+	-webkit-animation: rotation .6s infinite linear;
+	-moz-animation: rotation .6s infinite linear;
+	-o-animation: rotation .6s infinite linear;
+	animation: rotation .6s infinite linear;
+	border-color: rgba($c, 0.25);
+	border-top-color: rgba($c, 1.0);
+	border-style: solid;
+	border-width: $b;
+	@include border-radius(100%);
 }

 .t-wait-spinner,
@@ -96,4 +117,28 @@
 	margin-top: 0 !important;
 	padding: 0 !important;
 	top: 0; left: 0;
+}
+
+.loading {
+	// Can be applied to any block element with height and width
+    pointer-events: none;
+    &:before,
+    &:after {
+        content: '';
+    }
+	&:before {
+        @include wait-spinner2(5px, $colorLoadingFg);
+        z-index: 10;
+	}
+    &:after {
+        @include absPosDefault();
+        background: $colorLoadingBg;
+        display: block;
+        z-index: 9;
+    }
+    &.tree-item:before {
+        padding: $menuLineH / 4;
+        border-width: 2px;
+    }
+
 }
--- a/platform/commonUI/general/res/sass/lists/_tabular.scss
+++ b/platform/commonUI/general/res/sass/lists/_tabular.scss
@@ -40,6 +40,11 @@ table {
 	thead, .thead {
 		border-bottom: 1px solid $colorTabHeaderBorder;
 	}
+
+	&:not(.fixed-header) tr th {
+		background-color: $colorTabHeaderBg;
+	}
+
 	tbody, .tbody {
 		display: table-row-group;
 		tr, .tr {
@@ -64,7 +69,6 @@ table {
 			display: table-cell;
 		}
 		th, .th {
-			background-color: $colorTabHeaderBg;
 			border-left: 1px solid $colorTabHeaderBorder;
 			color: $colorTabHeaderFg;
 			padding: $tabularTdPadLR $tabularTdPadLR;
@@ -143,7 +147,7 @@ table {
 				position: absolute;
 				width: 100%;
 				height: $tabularHeaderH;
-				background: rgba(#fff, 0.15);
+				background-color: $colorTabHeaderBg;
 			}
 		}
 		tbody, .tbody {
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -23,7 +23,7 @@
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
-$mobileOverlayMargin: 10px;
+$mobileOverlayMargin: 20px;
 $phoneItemH: floor($ueBrowseGridItemLg/4);
 $tabletItemH: floor($ueBrowseGridItemLg/3);

--- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
@@ -1,16 +1,12 @@
@include phoneandtablet {
    .overlay {
-        $m: 0;
        .clk-icon.close {
            top: $mobileOverlayMargin; right: $mobileOverlayMargin;
        }

        > .holder {
-            @include border-radius($m);
-            top: $m;
-            right: $m;
-            bottom: $m;
-            left: $m;
+            height: 90%; width: 90%;
+
            > .contents {
                top: $mobileOverlayMargin;
                right: $mobileOverlayMargin;
@@ -22,35 +18,64 @@
                        margin-right: 1.2em;
                    }
                }
-
-                .form.editor {
-                    border: none;
-
-                    .contents {
-                        top: 0;
-                        right: 0;
-                        bottom: 0;
-                        left: 0;
-                    }
-                }
            }
        }
    }
 }

@include phone {
-    .overlay > .holder > .contents .form.editor .contents .form-row {
-        > .label,
-        > .controls {
-            //@include test(blue);
-            display: block;
-            float: none;
-            width: 100%;
+    .overlay > .holder {
+        //@include test(orange); // This works!
+        $m: 0;
+        @include border-radius($m);
+        top: $m;
+        right: $m;
+        bottom: $m;
+        left: $m;
+        height: auto; width: auto;
+        min-width: 200px; min-height: 200px;
+        max-height: 100%; max-width: 100%;
+        overflow: auto;
+        @include transform(none);
+
+        .editor .form .form-row {
+            > .label,
+            > .controls {
+                //@include test(blue);
+                display: block;
+                float: none;
+                width: 100%;
+            }
+            > .label {
+                &:after {
+                    float: none;
+                }
+            }
+        }
+        
+        .contents {
+            .abs.top-bar,
+            .abs.editor,
+            .abs.message-body,
+            .abs.bottom-bar {
+                //@include test(orange);
+                top: auto; right: auto; bottom: auto; left: auto;
+                height: auto; width: auto;
+                margin-bottom: $interiorMarginLg * 2;
+                position: relative;
+            }
+        }
+    }
+    .t-dialog-sm .overlay > .holder {
+        //@include test(blue);
+        height: auto; max-height: 100%;
+    }
+}
+
+@include phonePortrait {
+    .overlay > .holder {
+        .contents .bottom-bar {
+            text-align: center;
        }
-	    > .label {
-		    &:after {
-			    float: none;
-		    }
-	    }
    }
 }
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@@ -20,79 +20,124 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 .overlay {
-	.blocker {
-		background: $colorOvrBlocker;
-		z-index: 100;
-	}
+    font-size: 90%;
+    .blocker {
+        background: $colorOvrBlocker;
+        z-index: 100;
+    }
    .clk-icon.close {
        font-size: 0.8rem;
        position: absolute;
-        top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
-	    z-index: 100;
+        top: $interiorMarginLg;
+        right: $interiorMarginLg;
+        bottom: auto;
+        left: auto;
+        z-index: 100;
    }
-	>.holder {
-		$i: 15%;
-		@include containerSubtle($colorOvrBg, $colorOvrFg);
-		@include border-radius($basicCr * 3);
-		color: $colorOvrFg;
-		top: $i; right: $i; bottom: $i; left: $i;
-		z-index: 101;
-        >.contents {
+    > .holder {
+        //$i: 15%;
+        @include containerSubtle($colorOvrBg, $colorOvrFg);
+        @include border-radius($basicCr * 3);
+        color: $colorOvrFg;
+        top: 50%;
+        right: auto;
+        bottom: auto;
+        left: 50%;
+        @include transform(translateX(-50%) translateY(-50%));
+        height: 70%;
+        width: 50%;
+        min-height: 300px;
+        max-height: 800px;
+        min-width: 600px;
+        max-width: 1000px;
+        z-index: 101;
+        > .contents {
            $m: $overlayMargin;
-            top: $m; right: $m; bottom: $m; left: $m;
+            top: $m;
+            right: $m;
+            bottom: $m;
+            left: $m;
+
+            //.top-bar,
+            //.editor,
+            //.bottom-bar {
+            //    @include absPosDefault();
+            //}
        }
-	}
-    .title {
-	    @include ellipsize();
-        font-size: 1.2em;
-	    margin-bottom: $interiorMargin;
    }
-    
-    .top-bar {
+
+    .title {
+        @include ellipsize();
+        font-size: 1.2em;
+        line-height: 120%;
+        margin-bottom: $interiorMargin;
+    }
+
+    .hint {
+        color: pushBack($colorOvrFg, 20%);
+    }
+
+    .abs.top-bar {
        height: $ovrTopBarH;
    }
-    
-    .editor {
-        top: $ovrTopBarH + ($interiorMargin * 2);
-        bottom: $ovrFooterH + $interiorMargin * 2;
-        left: 0; right: 0;
-    }
-    
-    .bottom-bar {
-        top: auto; right: 0; bottom: 0; left: 0;
-	    overflow: visible;
-        //font-size: 1em;
-        height: $ovrFooterH;
-        text-align: right;
-        .s-btn {
-	        $bg: $colorOvrBtnBg;
-	        &:not(.major) {
-	            @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
-	        }
-	        font-size: 95%;
-	        height: $ovrFooterH;
-	        line-height: $ovrFooterH;
-            margin-left: $interiorMargin;
-	        padding: 0 $interiorMargin * 3;
-	        //&.major {
-		     //   @extend .s-btn.major;
-		     //   &:hover {
-			 //       @extend .s-btn.major:hover;
-		     //   }
-	        //}
+
+    .abs.editor,
+    .abs.message-body {
+        top: $ovrTopBarH + $interiorMarginLg;
+        bottom: $ovrFooterH + $interiorMarginLg;
+        left: 0;
+        right: 0;
+        overflow: auto;
+        .field.l-med {
+            input[type='text'] {
+                width: 100%;
+            }
        }
    }
-    .contents.l-dialog {
-	    $myM: $interiorMargin;
-	    top: $myM;
-	    right: $myM;
-	    bottom: $myM;
-	    left: $myM;
-        overflow: auto;
-	    .field.l-med {
-		    input[type='text'] {
-			    width: 100%;
-		    }
-	    }
+
+    .bottom-bar {
+        text-align: right;
+        .s-btn {
+            $bg: $colorOvrBtnBg;
+            &:not(.major) {
+                @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
+            }
+            font-size: 95%;
+            height: $ovrFooterH;
+            line-height: $ovrFooterH;
+            margin-left: $interiorMargin;
+            padding: 0 $interiorMargin * 3;
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+
    }
+
+    .abs.bottom-bar {
+        top: auto;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow: visible;
+        //font-size: 1em;
+        height: $ovrFooterH;
+    }
+
+    .l-progress-bar {
+        $h: $progressBarHOverlay;
+        display: block;
+        height: $h;
+        line-height: $h;
+        margin: .5em 0;
+        width: 100%;
+    }
+}
+
+.t-dialog-sm .overlay > .holder {
+    // Used for blocker and in-progress dialogs, modal alerts, etc.
+    //@include test(red);
+    $h: 225px;
+    min-height: $h;
+    height: $h;
 }
--- a/platform/commonUI/general/res/sass/plots/_plots-main.scss
+++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss
@@ -89,7 +89,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	.gl-plot-label,
 	.l-plot-label {
 		//		@include test(yellow);
-		color: lighten($colorBodyFg, 20%);
+		color: $colorPlotLabelFg;
 		position: absolute;
 		text-align: center;
 //		text-transform: uppercase;
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -214,8 +214,6 @@

 	.search-scroll {
 		order: 3;
-
-		//padding-right: $rightPadding;
 		margin-top: 4px;

 		// Adjustable scrolling size
@@ -227,28 +225,6 @@

 		.load-icon {
 			position: relative;
-			&.loading {
-				pointer-events: none;
-				margin-left: $leftMargin;
-
-				.title-label {
-					// Text styling
-					font-style: italic;
-					font-size: .9em;
-					opacity: 0.5;
-
-					// Text positioning
-					margin-left: $iconWidth + $leftMargin;
-					line-height: 24px;
-				}
-				.wait-spinner {
-					margin-left: $leftMargin;
-				}
-			}
-
-			&:not(.loading) {
-				cursor: pointer;
-			}
 		}

 		.load-more-button {
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -83,7 +83,6 @@ ul.tree {
 			.icon {
 				&.l-icon-link,
 				&.l-icon-alert {
-					//@include txtShdw($shdwItemTreeIcon);
 					position: absolute;
 					z-index: 2;
 				}
@@ -105,26 +104,12 @@ ul.tree {
 			@include absPosDefault();
 			display: block;
 			left: $runningItemW + ($interiorMargin * 3);
-			//right: $treeContextTriggerW + $interiorMargin;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}
 	}

-	&.loading {
-		pointer-events: none;
-		.label {
-			opacity: 0.5;
-			.title-label {
-				font-style: italic;
-			}
-		}
-		.wait-spinner {
-			margin-left: 14px;
-		}
-	}
-
 	&.selected {
 		background: $colorItemTreeSelectedBg;
 		color: $colorItemTreeSelectedFg;
@@ -142,9 +127,6 @@ ul.tree {
 			&:hover {
 				background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%);
 				color: pullForward($colorBodyFg, 20%);
-				//.context-trigger {
-				//	display: block;
-				//}
 				.icon {
 					color: $colorItemTreeIconHover;
 				}
@@ -158,7 +140,6 @@ ul.tree {

 	.context-trigger {
 		$h: 0.9rem;
-		//display: none;
 		top: -1px;
 		position: absolute;
 		right: $interiorMarginSm;
--- a/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss
@@ -1,72 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-.ue-bottom-bar {
-	background: $colorFooterBg;
-	color: lighten($colorBodyBg, 30%);
-	font-size: .7rem;
-	//line-height: $ueFooterH - 4px;
-	//line-height: $ueFooterH;   // New status bar design
-	.status-holder {
-		//@include border-radius($basicCr * 1.75);   // New status bar design
-		@include box-sizing(border-box);
-		//background: $colorFooterBg;
-        //border-bottom: 1px solid lighten($colorBodyBg, 10%);  // New status bar design
-		@include absPosDefault($interiorMargin);
-		@include ellipsize();
-		line-height: $ueFooterH - ($interiorMargin * 2);
-		right: 120px;
-		text-transform: uppercase;
-	}
-	.app-logo {
-		@include box-sizing(border-box);
-		@include absPosDefault($interiorMargin);
-		left: auto;
-		cursor: pointer;
-		//font-size: 0.8em;
-		//line-height: $ueFooterH - 10px;
-		//padding-top: 1px;
-		//text-transform: uppercase;
-		&.logo-openmctweb {
-			background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
-		}
-	}
-}
-
-.status.block {
-	//display: inline-block;
-	display: inline;  // New status bar design. Inline to support ellipsis overflow
-	margin-right: $interiorMarginLg;
-	.status-indicator {
-		//@include border-radius($controlCr * 0.9);
-		//@include box-shadow(inset rgba(black, 0.5) 0 0 3px);
-		//@include text-shadow(rgba(black, 0.3) 0 0 2px);
-		display: inline-block;
-		margin-right: $interiorMarginSm;
-		color: $colorKey;
-		&.ok {
-			color: #009900;
-		}
-		&.caution {
-			color: #ffaa00;
-		}
-	}
-}
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -47,7 +47,7 @@
 	}
 	&.frame-template {
 		.s-btn,
-		.s-menu {
+		.s-menu-btn {
 			height: $ohH;
 			line-height: $ohH;
 			padding: 0 $interiorMargin;
@@ -56,7 +56,7 @@
 			}
 		}

-		.s-menu:after {
+		.s-menu-btn:after {
 			font-size: 8px;
 		}

--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -43,9 +43,9 @@
 	position: absolute;
 }

-.editor {
-	@include border-radius($basicCr * 1.5);
-}
+//.editor {
+//	@include border-radius($basicCr * 1.5);
+//}

 .contents {
    $myM: 0; //$interiorMargin;
@@ -125,19 +125,35 @@
 		}
 	}

+	// from _bottom-bar.scss
 	.ue-bottom-bar {
-        //@include absPosDefault($bodyMargin);
 		@include absPosDefault(0);// New status bar design
 		top: auto;
 		height: $ueFooterH;
+		line-height: $ueFooterH - ($interiorMargin * 2);
+		background: $colorFooterBg;
+		color: lighten($colorBodyBg, 30%);
+		font-size: .7rem;
+
 		.status-holder {
-			//right: $ueAppLogoW + $bodyMargin; New status bar design
+			@include box-sizing(border-box);
+			@include absPosDefault($interiorMargin);
+			@include ellipsize();
+			//line-height: $ueFooterH - ($interiorMargin * 2);
+			right: 120px;
+			text-transform: uppercase;
 			z-index: 1;
 		}
 		.app-logo {
+			@include box-sizing(border-box);
+			@include absPosDefault($interiorMargin);
+			cursor: pointer;
 			left: auto;
 			width: $ueAppLogoW;
 			z-index: 2;
+			&.logo-openmctweb {
+				background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
+			}
 		}
 	}
 }
--- a/platform/commonUI/general/res/templates/bottombar.html
+++ b/platform/commonUI/general/res/templates/bottombar.html
@@ -26,5 +26,6 @@
                     key="indicator.template">
        </mct-include>
    </div>
+    <mct-include key="'message-banner'"></mct-include>
    <mct-include key="'about-logo'"></mct-include>
 </div>
--- a/platform/commonUI/general/res/templates/controls/datetime-picker.html
+++ b/platform/commonUI/general/res/templates/controls/datetime-picker.html
@@ -0,0 +1,66 @@
+<!--
+ 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.
+-->
+
+<div ng-controller="DateTimePickerController" class="l-datetime-picker s-datetime-picker s-menu">
+	<div class="holder">
+		<div class="l-month-year-pager">
+			<a class="pager prev" ng-click="changeMonth(-1)"></a>
+			<span class="val">{{month}} {{year}}</span>
+			<a class="pager next" ng-click="changeMonth(1)"></a>
+		</div>
+		<div class="l-calendar">
+			<ul class="l-cal-row l-header">
+				<li ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">{{day}}</li>
+			</ul>
+			<ul class="l-cal-row l-body" ng-repeat="row in table">
+				<li ng-repeat="cell in row"
+					ng-click="select(cell)"
+					ng-class='{ "in-month": isInCurrentMonth(cell), selected: isSelected(cell) }'>
+					<div class="prime">{{cell.day}}</div>
+					<div class="sub">{{cell.dayOfYear}}</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+	<div class="l-time-selects complex datetime"
+			ng-show="options">
+		<div class="field-hints">
+			<span class="hint time md"
+				  ng-repeat="key in ['hours', 'minutes', 'seconds']"
+				  ng-if="options[key]">
+				{{nameFor(key)}}
+			</span>
+		</div>
+		<div>
+			<span class="field control time md"
+				  ng-repeat="key in ['hours', 'minutes', 'seconds']"
+				  ng-if="options[key]">
+				<div class='form-control select'>
+					<select size="1"
+							ng-model="time[key]"
+							ng-options="i for i in optionsFor(key)">
+					</select>
+				</div>
+			</span>
+		</div>
+	</div>
+</div>
--- a/platform/commonUI/general/res/templates/controls/switcher.html
+++ b/platform/commonUI/general/res/templates/controls/switcher.html
@@ -21,7 +21,7 @@
 -->
 <span ng-controller="ViewSwitcherController">
    <div
-	    class="view-switcher menu-element s-menu"
+	    class="view-switcher menu-element s-menu-btn"
 	    ng-if="view.length > 1"
 	    ng-controller="ClickAwayController as toggle"
 	    >
--- a/platform/commonUI/general/res/templates/controls/time-controller.html
+++ b/platform/commonUI/general/res/templates/controls/time-controller.html
@@ -1,69 +1,108 @@
 <!--
+ 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.

-NOTES
+ 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.

-Ticks:
-The thinking is to divide whatever the current time span is by 5,
-and assign values accordingly to 5 statically-positioned ticks. So the tick x-position is a static percentage
-of the total width available, and the labels change dynamically. This is consistent
-with our current approach to the time axis of plots.
-I'm keeping the number of ticks low so that when the view portal gets narrow,
-the tick labels won't collide with each other. For extra credit, add/remove ticks as the user resizes the view area.
-Note: this eval needs to be based on the whatever is containing the
-time-controller component, not the whole browser window.
-
-Range indicator and slider knobs:
-The left and right properties used in .slider .range-holder and  the .knobs are
-CSS offsets from the left and right of their respective containers. You
-may want or need to calculate those positions as pure offsets from the start datetime
-(or left, as it were) and set them as left properties. No problem if so, but
-we'll need to tweak the CSS tiny bit to get the center of the knobs to line up
-properly on the range left and right bounds.
+ 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.
 -->
+<div ng-controller="TimeRangeController">
+    <div class="l-time-range-inputs-holder">
+        <span class="l-time-range-inputs-elem ui-symbol type-icon">&#x43;</span>
+        <span class="l-time-range-input" ng-controller="ToggleController as t1">
+            <!--<span class="lbl">Start</span>-->
+            <span class="s-btn time-range-start">
+                <input type="text"
+                       ng-model="boundsModel.start"
+                       ng-class="{ error: !boundsModel.startValid }">
+                </input>
+                <a class="ui-symbol icon icon-calendar" ng-click="t1.toggle()"></a>
+                <mct-popup ng-if="t1.isActive()">
+                    <div mct-click-elsewhere="t1.setState(false)">
+                        <mct-control key="'datetime-picker'"
+                                     ng-model="ngModel.outer"
+                                     field="'start'"
+                                     options="{ hours: true }">
+                        </mct-control>
+                    </div>
+                </mct-popup>
+            </span>
+        </span>

-<div ng-init="
-notes = 'Temporarily using an array to populate ticks so I can see what I\'m doing';
-ticks = [
-'00:00',
-'00:30',
-'01:00',
-'01:30',
-'02:00'
-];
-"></div>
+        <span class="l-time-range-inputs-elem lbl">to</span>

-<div class="l-time-controller">
-	<div class="l-time-range-inputs-holder">
-		Start: <input type="date" />
-		End: <input type="date" />
-	</div>
+        <span class="l-time-range-input" ng-controller="ToggleController as t2">
+            <!--<span class="lbl">End</span>-->
+            <span class="s-btn l-time-range-input">
+                <input type="text"
+                       ng-model="boundsModel.end"
+                       ng-class="{ error: !boundsModel.endValid }">
+                </input>
+                <a class="ui-symbol icon icon-calendar" ng-click="t2.toggle()">
+                </a>
+                <mct-popup ng-if="t2.isActive()">
+                    <div mct-click-elsewhere="t2.setState(false)">
+                        <mct-control key="'datetime-picker'"
+                                     ng-model="ngModel.outer"
+                                     field="'end'"
+                                     options="{ hours: true }">
+                        </mct-control>
+                    </div>
+                </mct-popup>
+            </span>&nbsp;
+        </span>
+    </div>

-	<div class="l-time-range-slider-holder">
-		<div class="l-time-range-slider">
-			<div class="slider">
-				<div class="slot range-holder">
-					<div class="range" style="left: 0%; right: 30%;"></div>
-				</div>
-				<div class="knob knob-l" style="left: 0%;">
-					<div class="range-value">05/22 14:46</div>
-				</div>
-				<div class="knob knob-r" style="right: 30%;">
-					<div class="range-value">07/22 01:21</div>
-				</div>
-			</div>
-		</div>
-	</div>
+    <div class="l-time-range-slider-holder">
+        <div class="l-time-range-slider">
+            <div class="slider"
+                 mct-resize="spanWidth = bounds.width">
+                <div class="knob knob-l"
+                     mct-drag-down="startLeftDrag()"
+                     mct-drag="leftDrag(delta[0])"
+                     ng-style="{ left: startInnerPct }">
+                    <div class="range-value">{{startInnerText}}</div>
+                </div>
+                <div class="knob knob-r"
+                     mct-drag-down="startRightDrag()"
+                     mct-drag="rightDrag(delta[0])"
+                     ng-style="{ right: endInnerPct }">
+                    <div class="range-value">{{endInnerText}}</div>
+                </div>
+                <div class="slot range-holder">
+                    <div class="range"
+                         mct-drag-down="startMiddleDrag()"
+                         mct-drag="middleDrag(delta[0])"
+                         ng-style="{ left: startInnerPct, right: endInnerPct}">
+                        <div class="toi-line"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>

-	<div class="l-time-range-ticks-holder">
-		<div class="l-time-range-ticks">
-			<div
-				ng-repeat="tick in ticks"
-				ng-style="{ left: $index * 25 + '%' }"
-				class="tick tick-x"
-				>
-				<span class="l-time-range-tick-label">{{tick}}</span>
-			</div>
-		</div>
-	</div>
-</div>
+    <div class="l-time-range-ticks-holder">
+        <div class="l-time-range-ticks">
+            <div
+                ng-repeat="tick in ticks"
+                ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
+                class="tick tick-x"
+                >
+                <span class="l-time-range-tick-label">{{tick}}</span>
+            </div>
+        </div>
+    </div>
+</div>
--- a/platform/commonUI/general/res/templates/indicator.html
+++ b/platform/commonUI/general/res/templates/indicator.html
@@ -19,20 +19,21 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
+<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
+<!--<div ng-init="reps = [1,2,3]"></div>-->
 <div class='status block'
-     title="{{ngModel.getDescription()}}"
-     ng-click='ngModel.configure()'
-     ng-class='ngModel.getClass()'
-     ng-show="ngModel.getText().length > 0">
-    <span class="ui-symbol status-indicator"
-          ng-class='ngModel.getGlyphClass()'>
-        {{ngModel.getGlyph()}}
-    </span>
-    <span class="label"
-          ng-class='ngModel.getTextClass()'>
-        {{ngModel.getText()}}
-    </span>
-	<a href=''
+	 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()}}
+	</span><span class="label"
+		  ng-class='ngModel.getTextClass()'>
+		{{ngModel.getText()}}
+	</span><span class="count">
+		<!-- Add int count value here if this type of indicator has one or more messages associated with it -->
+	</span><a href=''
 	   class="ui-symbol"
 	   ng-if="ngModel.configure">
 		G
--- a/platform/commonUI/general/res/templates/message-banner.html
+++ b/platform/commonUI/general/res/templates/message-banner.html
@@ -0,0 +1,21 @@
+<div ng-controller="BannerController" ng-show="active.notification"
+     class="l-message-banner s-message-banner {{active.notification.model.severity}}" ng-class="{
+     'minimized': active.notification.model.minimized,
+     'new': !active.notification.model.minimized}"
+     ng-click="maximize(active.notification)">
+    <span class="banner-elem label">
+        {{active.notification.model.title}}
+    </span>
+    <span ng-show="active.notification.model.progress !== undefined || active.notification.model.unknownProgress">
+        <mct-include key="'progress-bar'" class="banner-elem"
+                     ng-model="active.notification.model">
+        </mct-include>
+    </span>
+    <a ng-hide="active.notification.model.primaryOption === undefined"
+       class="banner-elem l-action s-action"
+       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)">
+        &#x78;</a>
+</div>
--- a/platform/commonUI/general/res/templates/progress-bar.html
+++ b/platform/commonUI/general/res/templates/progress-bar.html
@@ -0,0 +1,10 @@
+<span class="l-progress-bar s-progress-bar"
+      ng-class="{ indeterminate:ngModel.unknownProgress }">
+    <span class="progress-amt-holder">
+        <span class="progress-amt" style="width: {{ngModel.progress}}%"></span>
+    </span>
+</span>
+<div class="progress-info hint" ng-hide="ngModel.progressText === undefined">
+    <span class="progress-amt-text" ng-show="ngModel.progress > 0">{{ngModel.progress}}% complete. </span>
+    {{ngModel.progressText}}
+</div>
--- a/platform/commonUI/general/src/controllers/BannerController.js
+++ b/platform/commonUI/general/src/controllers/BannerController.js
@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * A controller for banner notifications. Banner notifications are a
+         * non-blocking way of drawing the user's attention to an event such
+         * as system errors, or the progress or successful completion of an
+         * ongoing task. This controller provides scoped functions for
+         * dismissing and 'maximizing' notifications. See {@link NotificationService}
+         * for more details on Notifications.
+         *
+         * @param $scope
+         * @param notificationService
+         * @param dialogService
+         * @constructor
+         */
+        function BannerController($scope, notificationService, dialogService) {
+            $scope.active = notificationService.active;
+
+            $scope.action = function (action, $event){
+                /*
+                 Prevents default 'maximize' behaviour when clicking on
+                  notification button
+                 */
+                $event.stopPropagation();
+                return action();
+            };
+            $scope.dismiss = function(notification, $event) {
+                $event.stopPropagation();
+                notification.dismissOrMinimize();
+            };
+            $scope.maximize = function(notification) {
+                if (notification.model.severity !== "info"){
+
+                    notification.model.cancel = function(){
+                        dialogService.dismiss();
+                    };
+                    dialogService.showBlockingMessage(notification.model);
+                }
+            };
+        }
+        return BannerController;
+    });
--- a/platform/commonUI/general/src/controllers/DateTimePickerController.js
+++ b/platform/commonUI/general/src/controllers/DateTimePickerController.js
@@ -0,0 +1,202 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    [ 'moment' ],
+    function (moment) {
+        'use strict';
+
+        var TIME_NAMES = {
+                'hours': "Hour",
+                'minutes': "Minute",
+                'seconds': "Second"
+            },
+            MONTHS = moment.months(),
+            TIME_OPTIONS = (function makeRanges() {
+                var arr = [];
+                while (arr.length < 60) {
+                    arr.push(arr.length);
+                }
+                return {
+                    hours: arr.slice(0, 24),
+                    minutes: arr,
+                    seconds: arr
+                };
+            }());
+
+        /**
+         * Controller to support the date-time picker.
+         *
+         * Adds/uses the following properties in scope:
+         * * `year`: Year being displayed in picker
+         * * `month`: Month being displayed
+         * * `table`: Table being displayed; array of arrays of
+         *   * `day`: Day of month
+         *   * `dayOfYear`: Day of year
+         *   * `month`: Month associated with the day
+         *   * `year`: Year associated with the day.
+         * * `date`: Date chosen
+         *   * `year`: Year selected
+         *   * `month`: Month selected (0-indexed)
+         *   * `day`: Day of month selected
+         * * `time`: Chosen time (hours/minutes/seconds)
+         *   * `hours`: Hours chosen
+         *   * `minutes`: Minutes chosen
+         *   * `seconds`: Seconds chosen
+         *
+         * Months are zero-indexed, day-of-months are one-indexed.
+         */
+        function DateTimePickerController($scope, now) {
+            var year,
+                month, // For picker state, not model state
+                interacted = false;
+
+            function generateTable() {
+                var m = moment.utc({ year: year, month: month }).day(0),
+                    table = [],
+                    row,
+                    col;
+
+                for (row = 0; row < 6; row += 1) {
+                    table.push([]);
+                    for (col = 0; col < 7; col += 1) {
+                        table[row].push({
+                            year: m.year(),
+                            month: m.month(),
+                            day: m.date(),
+                            dayOfYear: m.dayOfYear()
+                        });
+                        m.add(1, 'days'); // Next day!
+                    }
+                }
+
+                return table;
+            }
+
+            function updateScopeForMonth() {
+                $scope.month = MONTHS[month];
+                $scope.year = year;
+                $scope.table = generateTable();
+            }
+
+            function updateFromModel(ngModel) {
+                var m;
+
+                m = moment.utc(ngModel);
+
+                $scope.date = {
+                    year: m.year(),
+                    month: m.month(),
+                    day: m.date()
+                };
+                $scope.time = {
+                    hours: m.hour(),
+                    minutes: m.minute(),
+                    seconds: m.second()
+                };
+
+                //window.alert($scope.date.day + " " + ngModel);
+
+                // Zoom to that date in the picker, but
+                // only if the user hasn't interacted with it yet.
+                if (!interacted) {
+                    year = m.year();
+                    month = m.month();
+                    updateScopeForMonth();
+                }
+            }
+
+            function updateFromView() {
+                var m = moment.utc({
+                    year: $scope.date.year,
+                    month: $scope.date.month,
+                    day: $scope.date.day,
+                    hour: $scope.time.hours,
+                    minute: $scope.time.minutes,
+                    second: $scope.time.seconds
+                });
+                $scope.ngModel[$scope.field] = m.valueOf();
+            }
+
+            $scope.isInCurrentMonth = function (cell) {
+                return cell.month === month;
+            };
+
+            $scope.isSelected = function (cell) {
+                var date = $scope.date || {};
+                return cell.day === date.day &&
+                    cell.month === date.month &&
+                    cell.year === date.year;
+            };
+
+            $scope.select = function (cell) {
+                $scope.date = $scope.date || {};
+                $scope.date.month = cell.month;
+                $scope.date.year = cell.year;
+                $scope.date.day = cell.day;
+                updateFromView();
+            };
+
+            $scope.dateEquals = function (d1, d2) {
+                return d1.year === d2.year &&
+                    d1.month === d2.month &&
+                    d1.day === d2.day;
+            };
+
+            $scope.changeMonth = function (delta) {
+                month += delta;
+                if (month > 11) {
+                    month = 0;
+                    year += 1;
+                }
+                if (month < 0) {
+                    month = 11;
+                    year -= 1;
+                }
+                interacted = true;
+                updateScopeForMonth();
+            };
+
+            $scope.nameFor = function (key) {
+                return TIME_NAMES[key];
+            };
+
+            $scope.optionsFor = function (key) {
+                return TIME_OPTIONS[key];
+            };
+
+            updateScopeForMonth();
+
+            // Ensure some useful default
+            $scope.ngModel[$scope.field] =
+                $scope.ngModel[$scope.field] === undefined ?
+                        now() : $scope.ngModel[$scope.field];
+
+            $scope.$watch('ngModel[field]', updateFromModel);
+            $scope.$watchCollection('date', updateFromView);
+            $scope.$watchCollection('time', updateFromView);
+        }
+
+        return DateTimePickerController;
+    }
+);
--- a/platform/commonUI/general/src/controllers/TimeRangeController.js
+++ b/platform/commonUI/general/src/controllers/TimeRangeController.js
@@ -0,0 +1,302 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    ['moment'],
+    function (moment) {
+        "use strict";
+
+        var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss",
+            TICK_SPACING_PX = 150;
+
+        /**
+         * @memberof platform/commonUI/general
+         * @constructor
+         */
+        function TimeConductorController($scope, now) {
+            var tickCount = 2,
+                innerMinimumSpan = 1000, // 1 second
+                outerMinimumSpan = 1000 * 60 * 60, // 1 hour
+                initialDragValue;
+
+            function formatTimestamp(ts) {
+                return moment.utc(ts).format(DATE_FORMAT);
+            }
+
+            function parseTimestamp(text) {
+                var m = moment.utc(text, DATE_FORMAT);
+                if (m.isValid()) {
+                    return m.valueOf();
+                } else {
+                    throw new Error("Could not parse " + text);
+                }
+            }
+
+            // From 0.0-1.0 to "0%"-"1%"
+            function toPercent(p) {
+                return (100 * p) + "%";
+            }
+
+            function updateTicks() {
+                var i, p, ts, start, end, span;
+                end = $scope.ngModel.outer.end;
+                start = $scope.ngModel.outer.start;
+                span = end - start;
+                $scope.ticks = [];
+                for (i = 0; i < tickCount; i += 1) {
+                    p = i / (tickCount - 1);
+                    ts = p * span + start;
+                    $scope.ticks.push(formatTimestamp(ts));
+                }
+            }
+
+            function updateSpanWidth(w) {
+                tickCount = Math.max(Math.floor(w / TICK_SPACING_PX), 2);
+                updateTicks();
+            }
+
+            function updateViewForInnerSpanFromModel(ngModel) {
+                var span = ngModel.outer.end - ngModel.outer.start;
+
+                // Expose readable dates for the knobs
+                $scope.startInnerText = formatTimestamp(ngModel.inner.start);
+                $scope.endInnerText = formatTimestamp(ngModel.inner.end);
+
+                // And positions for the knobs
+                $scope.startInnerPct =
+                    toPercent((ngModel.inner.start - ngModel.outer.start) / span);
+                $scope.endInnerPct =
+                    toPercent((ngModel.outer.end - ngModel.inner.end) / span);
+            }
+
+            function defaultBounds() {
+                var t = now();
+                return {
+                    start: t - 24 * 3600 * 1000, // One day
+                    end: t
+                };
+            }
+
+            function copyBounds(bounds) {
+                return { start: bounds.start, end: bounds.end };
+            }
+
+            function updateBoundsTextForProperty(ngModel, property) {
+                try {
+                    if (!$scope.boundsModel[property] ||
+                            parseTimestamp($scope.boundsModel[property]) !==
+                                ngModel.outer[property]) {
+                        $scope.boundsModel[property] =
+                            formatTimestamp(ngModel.outer[property]);
+                    }
+                } catch (e) {
+                    // User-entered text is invalid, so leave it be
+                    // until they fix it.
+                }
+            }
+
+            function updateBoundsText(ngModel) {
+                updateBoundsTextForProperty(ngModel, 'start');
+                updateBoundsTextForProperty(ngModel, 'end');
+            }
+
+            function updateViewFromModel(ngModel) {
+                var t = now();
+
+                ngModel = ngModel || {};
+                ngModel.outer = ngModel.outer || defaultBounds();
+                ngModel.inner = ngModel.inner || copyBounds(ngModel.outer);
+
+                // First, dates for the date pickers for outer bounds
+                updateBoundsText(ngModel);
+
+                // Then various updates for the inner span
+                updateViewForInnerSpanFromModel(ngModel);
+
+                // Stick it back is scope (in case we just set defaults)
+                $scope.ngModel = ngModel;
+
+                updateTicks();
+            }
+
+            function startLeftDrag() {
+                initialDragValue = $scope.ngModel.inner.start;
+            }
+
+            function startRightDrag() {
+                initialDragValue = $scope.ngModel.inner.end;
+            }
+
+            function startMiddleDrag() {
+                initialDragValue = {
+                    start: $scope.ngModel.inner.start,
+                    end: $scope.ngModel.inner.end
+                };
+            }
+
+            function toMillis(pixels) {
+                var span = $scope.ngModel.outer.end - $scope.ngModel.outer.start;
+                return (pixels / $scope.spanWidth) * span;
+            }
+
+            function clamp(value, low, high) {
+                return Math.max(low, Math.min(high, value));
+            }
+
+            function leftDrag(pixels) {
+                var delta = toMillis(pixels);
+                $scope.ngModel.inner.start = clamp(
+                    initialDragValue + delta,
+                    $scope.ngModel.outer.start,
+                    $scope.ngModel.inner.end - innerMinimumSpan
+                );
+                updateViewFromModel($scope.ngModel);
+            }
+
+            function rightDrag(pixels) {
+                var delta = toMillis(pixels);
+                $scope.ngModel.inner.end = clamp(
+                    initialDragValue + delta,
+                    $scope.ngModel.inner.start + innerMinimumSpan,
+                    $scope.ngModel.outer.end
+                );
+                updateViewFromModel($scope.ngModel);
+            }
+
+            function middleDrag(pixels) {
+                var delta = toMillis(pixels),
+                    edge = delta < 0 ? 'start' : 'end',
+                    opposite = delta < 0 ? 'end' : 'start';
+
+                // Adjust the position of the edge in the direction of drag
+                $scope.ngModel.inner[edge] = clamp(
+                    initialDragValue[edge] + delta,
+                    $scope.ngModel.outer.start,
+                    $scope.ngModel.outer.end
+                );
+                // Adjust opposite knob to maintain span
+                $scope.ngModel.inner[opposite] = $scope.ngModel.inner[edge] +
+                    initialDragValue[opposite] - initialDragValue[edge];
+
+                updateViewFromModel($scope.ngModel);
+            }
+
+            function updateOuterStart(t) {
+                var ngModel = $scope.ngModel;
+
+                ngModel.outer.start = t;
+
+                ngModel.outer.end = Math.max(
+                    ngModel.outer.start + outerMinimumSpan,
+                    ngModel.outer.end
+                );
+
+                ngModel.inner.start =
+                    Math.max(ngModel.outer.start, ngModel.inner.start);
+                ngModel.inner.end = Math.max(
+                    ngModel.inner.start + innerMinimumSpan,
+                    ngModel.inner.end
+                );
+
+                updateViewForInnerSpanFromModel(ngModel);
+                updateTicks();
+            }
+
+            function updateOuterEnd(t) {
+                var ngModel = $scope.ngModel;
+
+                ngModel.outer.end = t;
+
+                ngModel.outer.start = Math.min(
+                    ngModel.outer.end - outerMinimumSpan,
+                    ngModel.outer.start
+                );
+
+                ngModel.inner.end =
+                    Math.min(ngModel.outer.end, ngModel.inner.end);
+                ngModel.inner.start = Math.min(
+                    ngModel.inner.end - innerMinimumSpan,
+                    ngModel.inner.start
+                );
+
+                updateViewForInnerSpanFromModel(ngModel);
+                updateTicks();
+            }
+
+            function updateStartFromText(value) {
+                try {
+                    updateOuterStart(parseTimestamp(value));
+                    updateBoundsTextForProperty($scope.ngModel, 'end');
+                    $scope.boundsModel.startValid = true;
+                } catch (e) {
+                    $scope.boundsModel.startValid = false;
+                    return;
+                }
+            }
+
+            function updateEndFromText(value) {
+                try {
+                    updateOuterEnd(parseTimestamp(value));
+                    updateBoundsTextForProperty($scope.ngModel, 'start');
+                    $scope.boundsModel.endValid = true;
+                } catch (e) {
+                    $scope.boundsModel.endValid = false;
+                    return;
+                }
+            }
+
+            function updateStartFromPicker(value) {
+                updateOuterStart(value);
+                updateBoundsText($scope.ngModel);
+            }
+
+            function updateEndFromPicker(value) {
+                updateOuterEnd(value);
+                updateBoundsText($scope.ngModel);
+            }
+
+            $scope.startLeftDrag = startLeftDrag;
+            $scope.startRightDrag = startRightDrag;
+            $scope.startMiddleDrag = startMiddleDrag;
+            $scope.leftDrag = leftDrag;
+            $scope.rightDrag = rightDrag;
+            $scope.middleDrag = middleDrag;
+
+            $scope.state = false;
+            $scope.ticks = [];
+            $scope.boundsModel = {};
+
+            // Initialize scope to defaults
+            updateViewFromModel($scope.ngModel);
+
+            $scope.$watchCollection("ngModel", updateViewFromModel);
+            $scope.$watch("spanWidth", updateSpanWidth);
+            $scope.$watch("ngModel.outer.start", updateStartFromPicker);
+            $scope.$watch("ngModel.outer.end", updateEndFromPicker);
+            $scope.$watch("boundsModel.start", updateStartFromText);
+            $scope.$watch("boundsModel.end", updateEndFromText);
+        }
+
+        return TimeConductorController;
+    }
+);
--- a/platform/commonUI/general/src/directives/MCTClickElsewhere.js
+++ b/platform/commonUI/general/src/directives/MCTClickElsewhere.js
@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * The `mct-click-elsewhere` directive will evaluate its
+         * associated expression whenever a `mousedown` occurs anywhere
+         * outside of the element that has the `mct-click-elsewhere`
+         * directive attached. This is useful for dismissing popups
+         * and the like.
+         */
+        function MCTClickElsewhere($document) {
+
+            // Link; install event handlers.
+            function link(scope, element, attrs) {
+                // Keep a reference to the body, to attach/detach
+                // mouse event handlers; mousedown and mouseup cannot
+                // only be attached to the element being linked, as the
+                // mouse may leave this element during the drag.
+                var body = $document.find('body');
+
+                function clickBody(event) {
+                    var x = event.clientX,
+                        y = event.clientY,
+                        rect = element[0].getBoundingClientRect(),
+                        xMin = rect.left,
+                        xMax = xMin + rect.width,
+                        yMin = rect.top,
+                        yMax = yMin + rect.height;
+
+                    if (x < xMin || x > xMax || y < yMin || y > yMax) {
+                        scope.$eval(attrs.mctClickElsewhere);
+                    }
+                }
+
+                body.on("mousedown", clickBody);
+                scope.$on("$destroy", function () {
+                    body.off("mousedown", clickBody);
+                });
+            }
+
+            return {
+                // mct-drag only makes sense as an attribute
+                restrict: "A",
+                // Link function, to install event handlers
+                link: link
+            };
+        }
+
+        return MCTClickElsewhere;
+    }
+);
+
--- a/platform/commonUI/general/src/directives/MCTPopup.js
+++ b/platform/commonUI/general/src/directives/MCTPopup.js
@@ -0,0 +1,73 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    function () {
+        'use strict';
+
+        var TEMPLATE = "<div></div>";
+
+        /**
+         * The `mct-popup` directive may be used to display elements
+         * which "pop up" over other parts of the page. Typically, this is
+         * done in conjunction with an `ng-if` to control the visibility
+         * of the popup.
+         *
+         * Example of usage:
+         *
+         *     <mct-popup ng-if="someExpr">
+         *         <span>These are the contents of the popup!</span>
+         *     </mct-popup>
+         *
+         * @constructor
+         * @memberof platform/commonUI/general
+         * @param $compile Angular's $compile service
+         * @param {platform/commonUI/general.PopupService} popupService
+         */
+        function MCTPopup($compile, popupService) {
+            function link(scope, element, attrs, ctrl, transclude) {
+                var div = $compile(TEMPLATE)(scope),
+                    rect = element.parent()[0].getBoundingClientRect(),
+                    position = [ rect.left, rect.top ],
+                    popup = popupService.display(div, position);
+
+                transclude(function (clone) {
+                    div.append(clone);
+                });
+
+                scope.$on('$destroy', function () {
+                    popup.dismiss();
+                });
+            }
+
+            return {
+                restrict: "E",
+                transclude: true,
+                link: link,
+                scope: {}
+            };
+        }
+
+        return MCTPopup;
+    }
+);
--- a/platform/commonUI/general/src/directives/MCTResize.js
+++ b/platform/commonUI/general/src/directives/MCTResize.js
@@ -58,6 +58,7 @@ define(
            // Link; start listening for changes to an element's size
            function link(scope, element, attrs) {
                var lastBounds,
+                    linking = true,
                    active = true;

                // Determine how long to wait before the next update
@@ -74,7 +75,9 @@ define(
                            lastBounds.width !== bounds.width ||
                            lastBounds.height !== bounds.height) {
                        scope.$eval(attrs.mctResize, { bounds: bounds });
-                        scope.$apply(); // Trigger a digest
+                        if (!linking) { // Avoid apply-in-a-digest
+                            scope.$apply();
+                        }
                        lastBounds = bounds;
                    }
                }
@@ -101,6 +104,9 @@ define(

                // Handle the initial callback
                onInterval();
+
+                // Trigger scope.$apply on subsequent changes
+                linking = false;
            }

            return {
--- a/platform/commonUI/general/src/services/Popup.js
+++ b/platform/commonUI/general/src/services/Popup.js
@@ -0,0 +1,89 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    function () {
+        "use strict";
+
+        /**
+         * A popup is an element that has been displayed at a particular
+         * location within the page.
+         * @constructor
+         * @memberof platform/commonUI/general
+         * @param element the jqLite-wrapped element
+         * @param {object} styles an object containing key-value pairs
+         *        of styles used to position the element.
+         */
+        function Popup(element, styles) {
+            this.styles = styles;
+            this.element = element;
+
+            element.css(styles);
+        }
+
+        /**
+         * Stop showing this popup.
+         */
+        Popup.prototype.dismiss = function () {
+            this.element.remove();
+        };
+
+        /**
+         * Check if this popup is positioned such that it appears to the
+         * left of its original location.
+         * @returns {boolean} true if the popup goes left
+         */
+        Popup.prototype.goesLeft = function () {
+            return !this.styles.left;
+        };
+
+        /**
+         * Check if this popup is positioned such that it appears to the
+         * right of its original location.
+         * @returns {boolean} true if the popup goes right
+         */
+        Popup.prototype.goesRight = function () {
+            return !this.styles.right;
+        };
+
+        /**
+         * Check if this popup is positioned such that it appears above
+         * its original location.
+         * @returns {boolean} true if the popup goes up
+         */
+        Popup.prototype.goesUp = function () {
+            return !this.styles.top;
+        };
+
+        /**
+         * Check if this popup is positioned such that it appears below
+         * its original location.
+         * @returns {boolean} true if the popup goes down
+         */
+        Popup.prototype.goesDown = function () {
+            return !this.styles.bottom;
+        };
+
+        return Popup;
+    }
+);
--- a/platform/commonUI/general/src/services/PopupService.js
+++ b/platform/commonUI/general/src/services/PopupService.js
@@ -0,0 +1,127 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    ['./Popup'],
+    function (Popup) {
+        "use strict";
+
+        /**
+         * Displays popup elements at specific positions within the document.
+         * @memberof platform/commonUI/general
+         * @constructor
+         */
+        function PopupService($document, $window) {
+            this.$document = $document;
+            this.$window = $window;
+        }
+
+        /**
+         * Options controlling how the popup is displaed.
+         *
+         * @typedef PopupOptions
+         * @memberof platform/commonUI/general
+         * @property {number} [offsetX] the horizontal distance, in pixels,
+         *           to offset the element in whichever direction it is
+         *           displayed. Defaults to 0.
+         * @property {number} [offsetY] the vertical distance, in pixels,
+         *           to offset the element in whichever direction it is
+         *           displayed. Defaults to 0.
+         * @property {number} [marginX] the horizontal position, in pixels,
+         *           after which to prefer to display the element to the left.
+         *           If negative, this is relative to the right edge of the
+         *           page. Defaults to half the window's width.
+         * @property {number} [marginY] the vertical position, in pixels,
+         *           after which to prefer to display the element upward.
+         *           If negative, this is relative to the right edge of the
+         *           page. Defaults to half the window's height.
+         * @property {string} [leftClass] class to apply when shifting to the left
+         * @property {string} [rightClass] class to apply when shifting to the right
+         * @property {string} [upClass] class to apply when shifting upward
+         * @property {string} [downClass] class to apply when shifting downward
+         */
+
+        /**
+         * Display a popup at a particular location. The location chosen will
+         * be the corner of the element; the element will be positioned either
+         * to the left or the right of this point depending on available
+         * horizontal space, and will similarly be shifted upward or downward
+         * depending on available vertical space.
+         *
+         * @param element the jqLite-wrapped DOM element to pop up
+         * @param {number[]} position x,y position of the element, in
+         *        pixel coordinates. Negative values are interpreted as
+         *        relative to the right or bottom of the window.
+         * @param {PopupOptions} [options] additional options to control
+         *        positioning of the popup
+         * @returns {platform/commonUI/general.Popup} the popup
+         */
+        PopupService.prototype.display = function (element, position, options) {
+            var $document = this.$document,
+                $window = this.$window,
+                body = $document.find('body'),
+                winDim = [ $window.innerWidth, $window.innerHeight ],
+                styles = { position: 'absolute' },
+                margin,
+                offset,
+                bubble;
+
+            function adjustNegatives(value, index) {
+                return value < 0 ? (value + winDim[index]) : value;
+            }
+
+            // Defaults
+            options = options || {};
+            offset = [
+                options.offsetX !== undefined ? options.offsetX : 0,
+                options.offsetY !== undefined ? options.offsetY : 0
+            ];
+            margin = [ options.marginX, options.marginY ].map(function (m, i) {
+                return m === undefined ? (winDim[i] / 2) : m;
+            }).map(adjustNegatives);
+
+            position = position.map(adjustNegatives);
+
+            if (position[0] > margin[0]) {
+                styles.right = (winDim[0] - position[0] + offset[0]) + 'px';
+            } else {
+                styles.left =  (position[0] + offset[0]) + 'px';
+            }
+
+            if (position[1] > margin[1]) {
+                styles.bottom = (winDim[1] - position[1] + offset[1]) + 'px';
+            } else {
+                styles.top = (position[1] + offset[1]) + 'px';
+            }
+
+            // Add the menu to the body
+            body.append(element);
+
+            // Return a function to dismiss the bubble
+            return new Popup(element, styles);
+        };
+
+        return PopupService;
+    }
+);
+
--- a/platform/commonUI/general/test/controllers/DateTimePickerControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/DateTimePickerControllerSpec.js
@@ -0,0 +1,63 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../../src/controllers/DateTimePickerController"],
+    function (DateTimePickerController) {
+        "use strict";
+
+        describe("The DateTimePickerController", function () {
+            var mockScope,
+                mockNow,
+                controller;
+
+            function fireWatch(expr, value) {
+                mockScope.$watch.calls.forEach(function (call) {
+                    if (call.args[0] === expr) {
+                        call.args[1](value);
+                    }
+                });
+            }
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj(
+                    "$scope",
+                    [ "$apply", "$watch", "$watchCollection" ]
+                );
+                mockScope.ngModel = {};
+                mockScope.field = "testField";
+                mockNow = jasmine.createSpy('now');
+                controller = new DateTimePickerController(mockScope, mockNow);
+            });
+
+            it("watches the model that was passed in", function () {
+                expect(mockScope.$watch).toHaveBeenCalledWith(
+                    "ngModel[field]",
+                    jasmine.any(Function)
+                );
+            });
+
+
+        });
+    }
+);
--- a/platform/commonUI/general/test/controllers/TimeRangeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TimeRangeControllerSpec.js
@@ -0,0 +1,237 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../../src/controllers/TimeRangeController", "moment"],
+    function (TimeRangeController, moment) {
+        "use strict";
+
+        var SEC = 1000,
+            MIN = 60 * SEC,
+            HOUR = 60 * MIN,
+            DAY = 24 * HOUR;
+
+        describe("The TimeRangeController", function () {
+            var mockScope,
+                mockNow,
+                controller;
+
+            function fireWatch(expr, value) {
+                mockScope.$watch.calls.forEach(function (call) {
+                    if (call.args[0] === expr) {
+                        call.args[1](value);
+                    }
+                });
+            }
+
+            function fireWatchCollection(expr, value) {
+                mockScope.$watchCollection.calls.forEach(function (call) {
+                    if (call.args[0] === expr) {
+                        call.args[1](value);
+                    }
+                });
+            }
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj(
+                    "$scope",
+                    [ "$apply", "$watch", "$watchCollection" ]
+                );
+                mockNow = jasmine.createSpy('now');
+                controller = new TimeRangeController(mockScope, mockNow);
+            });
+
+            it("watches the model that was passed in", function () {
+                expect(mockScope.$watchCollection)
+                    .toHaveBeenCalledWith("ngModel", jasmine.any(Function));
+            });
+
+            describe("when dragged", function () {
+                beforeEach(function () {
+                    mockScope.ngModel = {
+                        outer: {
+                            start: DAY * 1000,
+                            end: DAY * 1001
+                        },
+                        inner: {
+                            start: DAY * 1000 + HOUR * 3,
+                            end: DAY * 1001 - HOUR * 3
+                        }
+                    };
+                    mockScope.spanWidth = 1000;
+                    fireWatch("spanWidth", mockScope.spanWidth);
+                    fireWatchCollection("ngModel", mockScope.ngModel);
+                });
+
+                it("updates the start time for left drags", function () {
+                    mockScope.startLeftDrag();
+                    mockScope.leftDrag(250);
+                    expect(mockScope.ngModel.inner.start)
+                        .toEqual(DAY * 1000 + HOUR * 9);
+                });
+
+                it("updates the end time for right drags", function () {
+                    mockScope.startRightDrag();
+                    mockScope.rightDrag(-250);
+                    expect(mockScope.ngModel.inner.end)
+                        .toEqual(DAY * 1000 + HOUR * 15);
+                });
+
+                it("updates both start and end for middle drags", function () {
+                    mockScope.startMiddleDrag();
+                    mockScope.middleDrag(-125);
+                    expect(mockScope.ngModel.inner).toEqual({
+                        start: DAY * 1000,
+                        end: DAY * 1000 + HOUR * 18
+                    });
+                    mockScope.middleDrag(250);
+                    expect(mockScope.ngModel.inner).toEqual({
+                        start: DAY * 1000 + HOUR * 6,
+                        end: DAY * 1001
+                    });
+                });
+
+                it("enforces a minimum inner span", function () {
+                    mockScope.startRightDrag();
+                    mockScope.rightDrag(-9999999);
+                    expect(mockScope.ngModel.inner.end)
+                        .toBeGreaterThan(mockScope.ngModel.inner.start);
+                });
+            });
+
+            describe("when outer bounds are changed", function () {
+                beforeEach(function () {
+                    mockScope.ngModel = {
+                        outer: {
+                            start: DAY * 1000,
+                            end: DAY * 1001
+                        },
+                        inner: {
+                            start: DAY * 1000 + HOUR * 3,
+                            end: DAY * 1001 - HOUR * 3
+                        }
+                    };
+                    mockScope.spanWidth = 1000;
+                    fireWatch("spanWidth", mockScope.spanWidth);
+                    fireWatchCollection("ngModel", mockScope.ngModel);
+                });
+
+                it("enforces a minimum outer span", function () {
+                    mockScope.ngModel.outer.end =
+                        mockScope.ngModel.outer.start - DAY * 100;
+                    fireWatch(
+                        "ngModel.outer.end",
+                        mockScope.ngModel.outer.end
+                    );
+                    expect(mockScope.ngModel.outer.end)
+                        .toBeGreaterThan(mockScope.ngModel.outer.start);
+
+                    mockScope.ngModel.outer.start =
+                        mockScope.ngModel.outer.end + DAY * 100;
+                    fireWatch(
+                        "ngModel.outer.start",
+                        mockScope.ngModel.outer.start
+                    );
+                    expect(mockScope.ngModel.outer.end)
+                        .toBeGreaterThan(mockScope.ngModel.outer.start);
+                });
+
+                it("enforces a minimum inner span when outer span changes", function () {
+                    mockScope.ngModel.outer.end =
+                        mockScope.ngModel.outer.start - DAY * 100;
+                    fireWatch(
+                        "ngModel.outer.end",
+                        mockScope.ngModel.outer.end
+                    );
+                    expect(mockScope.ngModel.inner.end)
+                        .toBeGreaterThan(mockScope.ngModel.inner.start);
+                });
+
+                describe("by typing", function () {
+                    it("updates models", function () {
+                        var newStart = "1977-05-25 17:30:00",
+                            newEnd = "2015-12-18 03:30:00";
+
+                        mockScope.boundsModel.start = newStart;
+                        fireWatch("boundsModel.start", newStart);
+                        expect(mockScope.ngModel.outer.start)
+                            .toEqual(moment.utc(newStart).valueOf());
+                        expect(mockScope.boundsModel.startValid)
+                            .toBeTruthy();
+
+                        mockScope.boundsModel.end = newEnd;
+                        fireWatch("boundsModel.end", newEnd);
+                        expect(mockScope.ngModel.outer.end)
+                            .toEqual(moment.utc(newEnd).valueOf());
+                        expect(mockScope.boundsModel.endValid)
+                            .toBeTruthy();
+                    });
+
+                    it("displays error state", function () {
+                        var newStart = "Not a date",
+                            newEnd = "Definitely not a date",
+                            oldStart = mockScope.ngModel.outer.start,
+                            oldEnd = mockScope.ngModel.outer.end;
+
+                        mockScope.boundsModel.start = newStart;
+                        fireWatch("boundsModel.start", newStart);
+                        expect(mockScope.ngModel.outer.start)
+                            .toEqual(oldStart);
+                        expect(mockScope.boundsModel.startValid)
+                            .toBeFalsy();
+
+                        mockScope.boundsModel.end = newEnd;
+                        fireWatch("boundsModel.end", newEnd);
+                        expect(mockScope.ngModel.outer.end)
+                            .toEqual(oldEnd);
+                        expect(mockScope.boundsModel.endValid)
+                            .toBeFalsy();
+                    });
+
+                    it("does not modify user input", function () {
+                        // Don't want the controller "fixing" bad or
+                        // irregularly-formatted input out from under
+                        // the user's fingertips.
+                        var newStart = "Not a date",
+                            newEnd = "2015-3-3 01:02:04",
+                            oldStart = mockScope.ngModel.outer.start,
+                            oldEnd = mockScope.ngModel.outer.end;
+
+                        mockScope.boundsModel.start = newStart;
+                        fireWatch("boundsModel.start", newStart);
+                        expect(mockScope.boundsModel.start)
+                            .toEqual(newStart);
+
+                        mockScope.boundsModel.end = newEnd;
+                        fireWatch("boundsModel.end", newEnd);
+                        expect(mockScope.boundsModel.end)
+                            .toEqual(newEnd);
+                    });
+                });
+            });
+
+
+
+        });
+    }
+);
--- a/platform/commonUI/general/test/directives/MCTClickElsewhereSpec.js
+++ b/platform/commonUI/general/test/directives/MCTClickElsewhereSpec.js
@@ -0,0 +1,84 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*global define,describe,it,expect,beforeEach,jasmine*/
+
+define(
+    ["../../src/directives/MCTClickElsewhere"],
+    function (MCTClickElsewhere) {
+        "use strict";
+
+        var JQLITE_METHODS = [ "on", "off", "find", "parent" ];
+
+        describe("The mct-click-elsewhere directive", function () {
+            var mockDocument,
+                mockScope,
+                mockElement,
+                testAttrs,
+                mockBody,
+                mockParentEl,
+                testRect,
+                mctClickElsewhere;
+
+            function testEvent(x, y) {
+                return {
+                    pageX: x,
+                    pageY: y,
+                    preventDefault: jasmine.createSpy("preventDefault")
+                };
+            }
+
+            beforeEach(function () {
+                mockDocument =
+                    jasmine.createSpyObj("$document", JQLITE_METHODS);
+                mockScope =
+                    jasmine.createSpyObj("$scope", [ "$eval", "$apply", "$on" ]);
+                mockElement =
+                    jasmine.createSpyObj("element", JQLITE_METHODS);
+                mockBody =
+                    jasmine.createSpyObj("body", JQLITE_METHODS);
+                mockParentEl =
+                    jasmine.createSpyObj("parent", ["getBoundingClientRect"]);
+
+                testAttrs = {
+                    mctClickElsewhere: "some Angular expression"
+                };
+                testRect = {
+                    left: 20,
+                    top: 42,
+                    width: 60,
+                    height: 75
+                };
+
+                mockDocument.find.andReturn(mockBody);
+
+                mctClickElsewhere = new MCTClickElsewhere(mockDocument);
+                mctClickElsewhere.link(mockScope, mockElement, testAttrs);
+            });
+
+            it("is valid as an attribute", function () {
+                expect(mctClickElsewhere.restrict).toEqual("A");
+            });
+
+
+        });
+    }
+);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Charles Hacskaylo	6868bfd4e1	[Merge] Resolve conflicts in open155 open #155 Conflicts: platform/commonUI/general/res/sass/user-environ/_layout.scss platform/commonUI/themes/espresso/res/css/theme-espresso.css platform/commonUI/themes/snow/res/css/theme-snow.css platform/commonUI/themes/snow/res/sass/_constants.scss	2015-10-26 13:20:26 -07:00
Henry	95ea33b441	Removed notification from bundles	2015-10-23 17:02:25 -07:00
Henry	896dd8d2c7	Fixed jslint errors	2015-10-23 16:30:51 -07:00
Henry	789b640b9b	Refactored dismiss and minimize out of NotificationService and on to returned Notification type	2015-10-23 16:28:42 -07:00
Henry	e05858e26b	Added newline to end of source files	2015-10-23 12:11:37 -07:00
Henry	89046ecad5	fixed jslint error	2015-10-23 12:03:56 -07:00
Henry	fa7431d68b	Added test case to DialogServiceSpec	2015-10-23 12:01:48 -07:00
Henry	78b528b4a5	Added additional test cases, and some tidying	2015-10-23 11:48:37 -07:00
Henry	e3ef68bc6f	Fixed jslint errors	2015-10-22 16:41:09 -07:00
Henry	83276d70d3	Removed MessageSeverity enum and MessageController	2015-10-22 16:29:10 -07:00
Henry	109ae3323d	Added jsdoc and moved MessageController to dialogs from notifications	2015-10-22 15:10:53 -07:00
Henry	0053989de8	renamed dialog and notification 'actions' to 'options'	2015-10-22 14:14:21 -07:00
Henry	0628398b01	Moved notifications examples from 'testing' to examples	2015-10-22 13:30:34 -07:00
Henry	dc5feb8b1a	Added some documentation to notification and dialog launchers	2015-10-22 10:54:48 -07:00
Henry	f08725b6a2	Fixed jshint errors	2015-10-14 16:22:11 -07:00
Henry	301b73c6c6	Banner notifications are not maximized if 'info' message	2015-10-14 16:22:10 -07:00
Henry	912e70d219	Fixed failing tests, and added stopPropagation to prevent maximizing of notifications on action click or dismiss	2015-10-14 16:22:10 -07:00
Henry	1d41939418	Fixed failing tests	2015-10-14 16:22:10 -07:00
Henry	ee382be38d	Added transitions and severity classes	2015-10-14 16:22:10 -07:00
Charles Hacskaylo	34ea3ad9bb	[Frontend] Banner message animations; class renaming open #163 open #170 Added transition animations to message banners; Renamed $colorStatus* class names to map more closely to severity constants;	2015-10-14 16:22:10 -07:00
Henry	2ba6f18c59	Making changes to implement display queue	2015-10-14 16:22:10 -07:00
Henry	b2a09599a0	Modified messages dialog launcher	2015-10-14 16:22:10 -07:00
Henry	11264759ec	Added highest severity calculation in NotifiationService	2015-10-14 16:22:10 -07:00
Andrew Henry	c0ff6de27b	Added notification indicator	2015-10-14 16:22:10 -07:00
Henry	60dda8a7a4	Updated	2015-10-14 16:21:54 -07:00
Henry	82ae9e72c1	Integrated notifications list	2015-10-09 14:17:55 -07:00
Henry	85300d3743	Refactored DialogService a little	2015-10-09 11:57:47 -07:00
Henry	fe3e3325e1	Merge branch 'open170' into open155	2015-10-09 11:00:09 -07:00
Henry	2b97d61d6c	Further integration work	2015-10-09 10:59:36 -07:00
Charles Hacskaylo	954fdd5906	[Frontend] Sanding/positioning and Cancel button added to Messasges dialog open #159 open #170 Added Cancel button to Messages dialog in DialogService.js; Important tweaks to layout of messages to allow bottom-bar to align to bottom in singleton dialog view; Revised status colors in theme's constants files;	2015-10-08 19:10:26 -07:00
Henry	8267058487	Begun integration of Notifications framework with Charles' code	2015-10-08 15:08:26 -07:00
Henry	4a913376ac	Merge branch 'open170' into open155	2015-10-08 13:57:25 -07:00
Henry	5ff3c71523	Fixed the Banner Controller which was not returning reference to controller	2015-10-08 13:56:59 -07:00
Henry	ba614fe2d6	Trying to sort out error	2015-10-08 13:46:42 -07:00
Henry	5e713f279b	Moved some more vars	2015-10-08 13:18:47 -07:00
Henry	df590107cb	Moved some more vars	2015-10-08 13:17:12 -07:00
Henry	fc8630dbc6	Moved some vars	2015-10-08 13:15:31 -07:00
Henry	12a94f828a	Added some more semicolons	2015-10-08 13:14:30 -07:00
Charles Hacskaylo	0e840ae003	[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;	2015-10-08 13:09:41 -07:00
Henry	e1e5919f68	Added some semicolons	2015-10-08 13:08:43 -07:00
Henry	b2cd66bd5d	Merged in charles' changes	2015-10-08 11:26:31 -07:00
Henry	af1fa6e77a	added semicolons to test spec	2015-10-08 11:13:32 -07:00
Henry	5ff90f7254	Added more tests, some refactoring	2015-10-08 11:03:48 -07:00
Charles Hacskaylo	0ca9e5c952	[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;	2015-10-08 09:37:43 -07:00
Charles Hacskaylo	dbcad51325	[Frontend] Tiny mod to dialog-launch.html open #159 open #170	2015-10-07 21:32:34 -07:00
Charles Hacskaylo	8ee93d9603	[Frontend] Tweaks to dialog-launch; added ui-symbols open #159 open #170	2015-10-07 18:26:11 -07:00
Charles Hacskaylo	ac59df9595	[Frontend] Added type-icon to message dialogs open #159 open #170 Percent complete added to progress-bar.html; Refined overlay height;	2015-10-07 17:56:25 -07:00
Charles Hacskaylo	182eff977c	[Frontend] Dialog and overlay layout/positioning mods open #159 open #170 Restructured overlay size and positioning approach for better flexibility; Getting new dialogs and the overlay to play nicely in mobile context;	2015-10-07 16:36:55 -07:00
Henry	3af23b7bc5	Added test cases for notification service	2015-10-07 14:30:19 -07:00
Charles Hacskaylo	7f529eec68	[Frontend] Mods to OverlayService open #159 open #170 OverlayService can now be passed typeClass, which is added to the CSS class of the overlay's mct-include tag - intent is to allow the overlay to size itself based on the type of content to be displayed;	2015-10-07 12:11:30 -07:00
Charles Hacskaylo	ad4292f1e9	[Frontend] Mods to DialogService model and dialogs open #159 open #170 Properly re-cast model.hint and added model.actionText; Moved progressText into progress-bar.html; Tweaks to dialog styles; Tweaked styles for progress bar; Normalized various dialog templates markup;	2015-10-07 11:45:08 -07:00
Charles Hacskaylo	6840e596a5	[Frontend] Adding progress-bar.html template open #159 open #170	2015-10-07 10:25:47 -07:00
Charles Hacskaylo	30fd8c451e	[Frontend] Progress bar as include; progress dialog open #163 open #170 Progress bar now mct-include; Progress dialog sanded; Dialog launcher modded;	2015-10-06 16:10:27 -07:00
Henry	bf0014f1b9	Temporary commit	2015-10-06 14:45:10 -07:00
Charles Hacskaylo	2aeebff652	Merging in Andrew's work so far on progress and blocking dialogs open #163 open #170 Squashed commit of the following: commit `ec7edb58ca` Author: Henry <akhenry@aitutaki.ndc.nasa.gov> Date: Mon Oct 5 10:39:06 2015 -0700 Rename dialogSeverity to messageServity for reuse with notifications commit `d20abe01dd` Author: Henry <akhenry@aitutaki.ndc.nasa.gov> Date: Fri Oct 2 16:40:29 2015 -0700 Fixed docs commit `227da18498` Author: Henry <akhenry@aitutaki.ndc.nasa.gov> Date: Fri Oct 2 16:27:41 2015 -0700 Added semicolon commit `22d424f96e` Author: Henry <akhenry@aitutaki.ndc.nasa.gov> Date: Fri Oct 2 16:26:29 2015 -0700 Fixed code errors commit `2c77c3647c` Author: Henry <akhenry@aitutaki.ndc.nasa.gov> Date: Fri Oct 2 16:24:01 2015 -0700 Initial commit of blocking dialog service with test code to demonstrate usage	2015-10-06 14:41:58 -07:00
Charles Hacskaylo	471a25a625	[Frontend] Progress bar/ message banner markup and styling open #170 Major work on progress bar;	2015-10-06 14:34:53 -07:00
Charles Hacskaylo	d606ee421f	[Frontend] New template for message-banner open #159 open #170 Added markup and beginning of styling; Temporarily added mct-include elem to bottombar.html;	2015-10-02 18:37:01 -07:00
Charles Hacskaylo	926aed72c3	[Frontend] Style and display changes to status block open #159 open #170 Refined structure in status block markup and css; Added status-related color constants to theme scss files;	2015-10-02 17:42:31 -07:00
Charles Hacskaylo	7014808c13	[Frontend] Style and display changes to status block open #159 open #170 Moved classes from _bottom-bar.scss into _layout.scss and new file _messages.scss; Removed _bottom-bar.scss; Revised display behavior of .status.block to show label on hover;	2015-10-02 15:41:02 -07:00