diff --git a/platform/commonUI/dialog/bundle.json b/platform/commonUI/dialog/bundle.json
index 9a2d541419..80cd456c20 100644
--- 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": [
diff --git a/platform/commonUI/dialog/res/templates/dialog.html b/platform/commonUI/dialog/res/templates/dialog.html
index e3379b034e..2fe2411875 100644
--- a/platform/commonUI/dialog/res/templates/dialog.html
+++ b/platform/commonUI/dialog/res/templates/dialog.html
@@ -21,17 +21,13 @@
-->
{{ngModel.title}}
-
- All fields marked * are required.
-
+
All fields marked * are required.
-
-
-
-
-
-
+
+
+
\ No newline at end of file
diff --git a/platform/commonUI/dialog/src/DialogService.js b/platform/commonUI/dialog/src/DialogService.js
index 25e8943c06..27ffa9ae8b 100644
--- 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;
}
diff --git a/platform/commonUI/dialog/src/OverlayService.js b/platform/commonUI/dialog/src/OverlayService.js
index 5faba5dcf6..5e9703cb42 100644
--- 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 = '
';
+ var TEMPLATE = '
';
/**
@@ -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);
diff --git a/platform/commonUI/dialog/test/DialogServiceSpec.js b/platform/commonUI/dialog/test/DialogServiceSpec.js
index 689979f129..2dc109ac44 100644
--- 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"
);
});
});
}
-);
\ No newline at end of file
+);
diff --git a/platform/commonUI/formats/bundle.json b/platform/commonUI/formats/bundle.json
new file mode 100644
index 0000000000..99925657b2
--- /dev/null
+++ b/platform/commonUI/formats/bundle.json
@@ -0,0 +1,26 @@
+{
+ "name": "Time services bundle",
+ "description": "Defines interfaces and provides default implementations for handling different time systems.",
+ "extensions": {
+ "components": [
+ {
+ "provides": "formatService",
+ "type": "provider",
+ "implementation": "FormatProvider.js",
+ "depends": [ "formats[]" ]
+ }
+ ],
+ "formats": [
+ {
+ "key": "utc",
+ "implementation": "UTCTimeFormat.js"
+ }
+ ],
+ "constants": [
+ {
+ "key": "DEFAULT_TIME_FORMAT",
+ "value": "utc"
+ }
+ ]
+ }
+}
diff --git a/platform/commonUI/formats/src/FormatProvider.js b/platform/commonUI/formats/src/FormatProvider.js
new file mode 100644
index 0000000000..e6d38fbcee
--- /dev/null
+++ b/platform/commonUI/formats/src/FormatProvider.js
@@ -0,0 +1,114 @@
+/*****************************************************************************
+ * 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";
+
+ /**
+ * An object used to convert between numeric values and text values,
+ * typically used to display these values to the user and to convert
+ * user input to a numeric format, particularly for time formats.
+ * @interface {Format}
+ */
+
+ /**
+ * Parse text (typically user input) to a numeric value.
+ * Behavior is undefined when the text cannot be parsed;
+ * `validate` should be called first if the text may be invalid.
+ * @method parse
+ * @memberof Format#
+ * @param {string} text the text to parse
+ * @returns {number} the parsed numeric value
+ */
+
+ /**
+ * Determine whether or not some text (typically user input) can
+ * be parsed to a numeric value by this format.
+ * @method validate
+ * @memberof Format#
+ * @param {string} text the text to parse
+ * @returns {boolean} true if the text can be parsed
+ */
+
+ /**
+ * Convert a numeric value to a text value for display using
+ * this format.
+ * @method format
+ * @memberof Format#
+ * @param {number} value the numeric value to format
+ * @returns {string} the text representation of the value
+ */
+
+ /**
+ * Provides access to `Format` objects which can be used to
+ * convert values between human-readable text and numeric
+ * representations.
+ * @interface FormatService
+ */
+
+ /**
+ * Look up a format by its symbolic identifier.
+ * @method getFormat
+ * @memberof FormatService#
+ * @param {string} key the identifier for this format
+ * @returns {Format} the format
+ * @throws {Error} errors when the requested format is unrecognized
+ */
+
+ /**
+ * Provides formats from the `formats` extension category.
+ * @constructor
+ * @implements {FormatService}
+ * @memberof platform/commonUI/formats
+ * @param {Array.
} format constructors,
+ * from the `formats` extension category.
+ */
+ function FormatProvider(formats) {
+ var formatMap = {};
+
+ function addToMap(Format) {
+ var key = Format.key;
+ if (key && !formatMap[key]) {
+ formatMap[key] = new Format();
+ }
+ }
+
+ formats.forEach(addToMap);
+ this.formatMap = formatMap;
+ }
+
+ FormatProvider.prototype.getFormat = function (key) {
+ var format = this.formatMap[key];
+ if (!format) {
+ throw new Error("FormatProvider: No format found for " + key);
+ }
+ return format;
+ };
+
+ return FormatProvider;
+
+});
diff --git a/platform/commonUI/formats/src/UTCTimeFormat.js b/platform/commonUI/formats/src/UTCTimeFormat.js
new file mode 100644
index 0000000000..b035fed99f
--- /dev/null
+++ b/platform/commonUI/formats/src/UTCTimeFormat.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*/
+
+define([
+ 'moment'
+], function (
+ moment
+) {
+ "use strict";
+
+ var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss",
+ DATE_FORMATS = [
+ DATE_FORMAT,
+ "YYYY-MM-DD HH:mm",
+ "YYYY-MM-DD"
+ ];
+
+
+ /**
+ * Formatter for UTC timestamps. Interprets numeric values as
+ * milliseconds since the start of 1970.
+ *
+ * @implements {Format}
+ * @constructor
+ * @memberof platform/commonUI/formats
+ */
+ function UTCTimeFormat() {
+ }
+
+ UTCTimeFormat.prototype.format = function (value) {
+ return moment.utc(value).format(DATE_FORMAT);
+ };
+
+ UTCTimeFormat.prototype.parse = function (text) {
+ return moment.utc(text, DATE_FORMATS).valueOf();
+ };
+
+ UTCTimeFormat.prototype.validate = function (text) {
+ return moment.utc(text, DATE_FORMATS).isValid();
+ };
+
+ return UTCTimeFormat;
+});
diff --git a/platform/commonUI/formats/test/FormatProviderSpec.js b/platform/commonUI/formats/test/FormatProviderSpec.js
new file mode 100644
index 0000000000..4f68c106f7
--- /dev/null
+++ b/platform/commonUI/formats/test/FormatProviderSpec.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,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+ ['../src/FormatProvider'],
+ function (FormatProvider) {
+ 'use strict';
+
+ var KEYS = [ 'a', 'b', 'c' ];
+
+ describe("The FormatProvider", function () {
+ var mockFormats,
+ mockLog,
+ mockFormatInstances,
+ provider;
+
+ beforeEach(function () {
+ mockFormatInstances = KEYS.map(function (k) {
+ return jasmine.createSpyObj(
+ 'format-' + k,
+ [ 'parse', 'validate', 'format' ]
+ );
+ });
+ // Return constructors
+ mockFormats = KEYS.map(function (k, i) {
+ function MockFormat() { return mockFormatInstances[i]; }
+ MockFormat.key = k;
+ return MockFormat;
+ });
+ provider = new FormatProvider(mockFormats);
+ });
+
+ it("looks up formats by key", function () {
+ KEYS.forEach(function (k, i) {
+ expect(provider.getFormat(k))
+ .toEqual(mockFormatInstances[i]);
+ });
+ });
+
+ it("throws an error about unknown formats", function () {
+ expect(function () {
+ provider.getFormat('some-unknown-format');
+ }).toThrow();
+ });
+
+ });
+ }
+);
diff --git a/platform/commonUI/formats/test/UTCTimeFormatSpec.js b/platform/commonUI/formats/test/UTCTimeFormatSpec.js
new file mode 100644
index 0000000000..d55a8a9507
--- /dev/null
+++ b/platform/commonUI/formats/test/UTCTimeFormatSpec.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,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+ ['../src/UTCTimeFormat', 'moment'],
+ function (UTCTimeFormat, moment) {
+ 'use strict';
+
+ describe("The UTCTimeFormat", function () {
+ var format;
+
+ beforeEach(function () {
+ format = new UTCTimeFormat();
+ });
+
+ it("formats UTC timestamps", function () {
+ var timestamp = 12345670000,
+ formatted = format.format(timestamp);
+ expect(formatted).toEqual(jasmine.any(String));
+ expect(moment.utc(formatted).valueOf()).toEqual(timestamp);
+ });
+
+ it("validates time inputs", function () {
+ expect(format.validate("1977-05-25 11:21:22")).toBe(true);
+ expect(format.validate("garbage text")).toBe(false);
+ });
+
+ it("parses valid input", function () {
+ var text = "1977-05-25 11:21:22",
+ parsed = format.parse(text);
+ expect(parsed).toEqual(jasmine.any(Number));
+ expect(parsed).toEqual(moment.utc(text).valueOf());
+ });
+ });
+ }
+);
diff --git a/platform/commonUI/formats/test/suite.json b/platform/commonUI/formats/test/suite.json
new file mode 100644
index 0000000000..06c88fac8b
--- /dev/null
+++ b/platform/commonUI/formats/test/suite.json
@@ -0,0 +1,4 @@
+[
+ "FormatProvider",
+ "UTCTimeFormat"
+]
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index a927ee8a51..edaa8ec103 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -44,6 +44,14 @@
"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"
@@ -53,13 +61,18 @@
{
"key": "TimeRangeController",
"implementation": "controllers/TimeRangeController.js",
- "depends": [ "$scope", "now" ]
+ "depends": [ "$scope", "formatService", "DEFAULT_TIME_FORMAT", "now" ]
},
{
"key": "DateTimePickerController",
"implementation": "controllers/DateTimePickerController.js",
"depends": [ "$scope", "now" ]
},
+ {
+ "key": "DateTimeFieldController",
+ "implementation": "controllers/DateTimeFieldController.js",
+ "depends": [ "$scope", "formatService", "DEFAULT_TIME_FORMAT" ]
+ },
{
"key": "TreeNodeController",
"implementation": "controllers/TreeNodeController.js",
@@ -112,6 +125,11 @@
"key": "ObjectInspectorController",
"implementation": "controllers/ObjectInspectorController.js",
"depends": [ "$scope", "objectService" ]
+ },
+ {
+ "key": "BannerController",
+ "implementation": "controllers/BannerController.js",
+ "depends": ["$scope", "notificationService", "dialogService"]
}
],
"directives": [
@@ -251,6 +269,10 @@
{
"key": "datetime-picker",
"templateUrl": "templates/controls/datetime-picker.html"
+ },
+ {
+ "key": "datetime-field",
+ "templateUrl": "templates/controls/datetime-field.html"
}
],
"licenses": [
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 7354ec54c9..a3305cf0a4 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -51,8 +51,8 @@ $ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px;
$ueTimeControlH: (33px, 20px, 20px);
// Overlay
-$ovrTopBarH: 60px;
-$ovrFooterH: 30px;
+$ovrTopBarH: 45px;
+$ovrFooterH: 24px;
$overlayMargin: 25px;
// Items
$ueBrowseGridItemLg: 200px;
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 42c263946d..0dab445e84 100644
--- 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 "inspector";
/********************************* 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 */
diff --git a/platform/commonUI/general/res/sass/_messages.scss b/platform/commonUI/general/res/sass/_messages.scss
deleted file mode 100644
index db4de4c946..0000000000
--- a/platform/commonUI/general/res/sass/_messages.scss
+++ /dev/null
@@ -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%);
- }
-}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 8b761f3351..f5a21cf9dd 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -99,7 +99,6 @@
}
@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
- //$size: $size*2;
width: 0;
height: 0;
$slopedB: $size/$ratio solid transparent;
@@ -134,6 +133,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') {
@@ -409,4 +426,4 @@
@mixin s-stale($a: 0.5) {
color: rgba($colorTelemFresh, $a) !important;
font-style: italic;
-}
\ No newline at end of file
+}
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 429dc361fe..c742f0e898 100644
--- 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;
@@ -291,6 +263,88 @@ 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 {
diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss
new file mode 100644
index 0000000000..740df6ba8d
--- /dev/null
+++ 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; }
+ }
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index bd9443cc50..067bbef6ca 100644
--- 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);
diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
index caa6df0967..9fd6721130 100644
--- 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;
- }
- }
}
}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss
index 2dce492563..602af62887 100644
--- 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;
}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss b/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss
deleted file mode 100644
index dd705b0000..0000000000
--- a/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss
+++ /dev/null
@@ -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;
- }
- }
-}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 4b44854876..1e063affa7 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -125,21 +125,37 @@
}
}
- .ue-bottom-bar {
- //@include absPosDefault($bodyMargin);
- @include absPosDefault(0); // New status bar design
- top: auto;
- height: $ueFooterH;
- .status-holder {
- //right: $ueAppLogoW + $bodyMargin; New status bar design
- z-index: 1;
- }
- .app-logo {
- left: auto;
- width: $ueAppLogoW;
- z-index: 2;
- }
- }
+ // from _bottom-bar.scss
+ .ue-bottom-bar {
+ @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 {
+ @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;
+ }
+ }
+ }
}
.cols {
@@ -518,4 +534,4 @@
.pane:not(.resizing) {
@include trans-prop-nice-resize-w(250ms);
}
-}
\ No newline at end of file
+}
diff --git a/platform/commonUI/general/res/templates/bottombar.html b/platform/commonUI/general/res/templates/bottombar.html
index 4da2686fa1..f0d3799542 100644
--- a/platform/commonUI/general/res/templates/bottombar.html
+++ b/platform/commonUI/general/res/templates/bottombar.html
@@ -26,5 +26,6 @@
key="indicator.template">
+