diff --git a/src/MCT.js b/src/MCT.js
index 7bd19223d6..55635cfcb5 100644
--- a/src/MCT.js
+++ b/src/MCT.js
@@ -26,6 +26,7 @@ define([
'uuid',
'./defaultRegistry',
'./api/api',
+ './api/overlays/OverlayAPI',
'./selection/Selection',
'./api/objects/object-utils',
'./plugins/plugins',
@@ -40,7 +41,6 @@ define([
'./styles-new/core.scss',
'./styles-new/notebook.scss',
'./ui/components/layout/Layout.vue',
- './ui/overlayService/overlayService',
'vue'
], function (
EventEmitter,
@@ -48,6 +48,7 @@ define([
uuid,
defaultRegistry,
api,
+ OverlayAPI,
Selection,
objectUtils,
plugins,
@@ -62,7 +63,6 @@ define([
coreStyles,
NotebookStyles,
Layout,
- OverlayService,
Vue
) {
/**
@@ -185,15 +185,6 @@ define([
*/
this.types = new api.TypeRegistry();
- /**
- * Utilities for attaching common behaviors to views.
- *
- * @type {module:openmct.GestureAPI}
- * @memberof module:openmct.MCT#
- * @name gestures
- */
- this.gestures = new api.GestureAPI();
-
/**
* An interface for interacting with domain objects and the domain
* object hierarchy.
@@ -225,11 +216,9 @@ define([
this.notifications = new api.NotificationAPI();
- this.Dialog = api.Dialog;
-
this.editor = new api.EditorAPI.default(this);
- this.OverlayService = new OverlayService();
+ this.overlays = new OverlayAPI.default();
this.legacyRegistry = defaultRegistry;
this.install(this.plugins.Plot());
diff --git a/src/api/api.js b/src/api/api.js
index a256ffb5f4..c609c83ea8 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -25,8 +25,6 @@ define([
'./objects/ObjectAPI',
'./composition/CompositionAPI',
'./types/TypeRegistry',
- './ui/Dialog',
- './ui/GestureAPI',
'./telemetry/TelemetryAPI',
'./indicators/IndicatorAPI',
'./notifications/NotificationAPI',
@@ -37,8 +35,6 @@ define([
ObjectAPI,
CompositionAPI,
TypeRegistry,
- Dialog,
- GestureAPI,
TelemetryAPI,
IndicatorAPI,
NotificationAPI,
@@ -48,9 +44,7 @@ define([
TimeAPI: TimeAPI,
ObjectAPI: ObjectAPI,
CompositionAPI: CompositionAPI,
- Dialog: Dialog,
TypeRegistry: TypeRegistry,
- GestureAPI: GestureAPI,
TelemetryAPI: TelemetryAPI,
IndicatorAPI: IndicatorAPI,
NotificationAPI: NotificationAPI.default,
diff --git a/src/api/overlays/Dialog.js b/src/api/overlays/Dialog.js
new file mode 100644
index 0000000000..4ba9a9bb98
--- /dev/null
+++ b/src/api/overlays/Dialog.js
@@ -0,0 +1,33 @@
+import DialogComponent from './components/DialogComponent.vue';
+import Overlay from './Overlay';
+import Vue from 'vue';
+
+class Dialog extends Overlay {
+ constructor({iconClass, message, title, ...options}) {
+
+ let component = new Vue({
+ provide: {
+ iconClass,
+ message,
+ title
+ },
+ components: {
+ DialogComponent: DialogComponent
+ },
+ template: ' '
+ }).$mount();
+
+ super({
+ element: component.$el,
+ size: 'fit',
+ notDismissable: true,
+ ...options
+ });
+
+ this.once('destroy', () => {
+ component.$destroy();
+ });
+ }
+}
+
+export default Dialog;
diff --git a/src/api/overlays/Overlay.js b/src/api/overlays/Overlay.js
new file mode 100644
index 0000000000..12f628986e
--- /dev/null
+++ b/src/api/overlays/Overlay.js
@@ -0,0 +1,51 @@
+import OverlayComponent from './components/OverlayComponent.vue';
+import EventEmitter from 'EventEmitter';
+import Vue from 'vue';
+
+const cssClasses = {
+ large: 'l-overlay-large',
+ small: 'l-overlay-small',
+ fit: 'l-overlay-fit'
+};
+
+class Overlay extends EventEmitter {
+ constructor(options) {
+ super();
+
+ this.container = document.createElement('div');
+ this.container.classList.add('l-overlay-wrapper', cssClasses[options.size]);
+
+ this.component = new Vue({
+ provide: {
+ dismiss: this.dismiss.bind(this),
+ element: options.element,
+ buttons: options.buttons,
+ notDismissable: options.notDismissable ? true : false
+ },
+ components: {
+ OverlayComponent: OverlayComponent
+ },
+ template: ' '
+ });
+
+ if (options.onDestroy) {
+ this.once('destroy', options.onDestroy);
+ }
+ }
+
+ dismiss() {
+ this.emit('destroy');
+ this.component.$destroy();
+ document.body.removeChild(this.container);
+ }
+
+ /**
+ * @private
+ **/
+ show() {
+ document.body.appendChild(this.container);
+ this.container.appendChild(this.component.$mount().$el);
+ }
+}
+
+export default Overlay;
diff --git a/src/api/overlays/OverlayAPI.js b/src/api/overlays/OverlayAPI.js
new file mode 100644
index 0000000000..ce0c1677d3
--- /dev/null
+++ b/src/api/overlays/OverlayAPI.js
@@ -0,0 +1,115 @@
+import Overlay from './Overlay';
+import Dialog from './Dialog';
+import ProgressDialog from './ProgressDialog';
+
+/**
+ * The OverlayAPI is responsible for pre-pending templates to
+ * the body of the document, which is useful for displaying templates
+ * which need to block the full screen.
+ *
+ * @memberof api/overlays
+ * @constructor
+*/
+
+class OverlayAPI {
+ constructor() {
+ this.activeOverlays = [];
+ }
+
+ /**
+ * private
+ */
+ showOverlay(overlay) {
+ if (this.activeOverlays.length) {
+ this.activeOverlays[this.activeOverlays.length - 1].container.classList.add('invisible');
+ }
+
+ this.activeOverlays.push(overlay);
+
+ overlay.once('destroy', () => {
+ this.activeOverlays.splice(this.activeOverlays.indexOf(overlay), 1);
+
+ if (this.activeOverlays.length) {
+ this.activeOverlays[this.activeOverlays.length - 1].container.classList.remove('invisible');
+ }
+ });
+
+ overlay.show();
+ }
+
+ /**
+] * A description of option properties that can be passed into the overlay
+ * @typedef options
+ * @property {object} element DOMElement that is to be inserted/shown on the overlay
+ * @property {string} size prefered size of the overlay (large, small, fit)
+ * @property {array} buttons optional button objects with label and callback properties
+ * @property {function} onDestroy callback to be called when overlay is destroyed
+ * @property {boolean} notDismissable to prevent user from dismissing the overlay, calling code
+ * will need to explicitly dismiss the overlay.
+ */
+ overlay(options) {
+ let overlay = new Overlay(options);
+
+ this.showOverlay(overlay);
+
+ return overlay;
+ }
+
+ /**
+ * Displays a blocking (modal) dialog. This dialog can be used for
+ * displaying messages that require the user's
+ * immediate attention.
+ * @param {model} options defines options for the dialog
+ * @returns {object} with an object with a dismiss function that can be called from the calling code
+ * to dismiss/destroy the dialog
+ *
+ * A description of the model options that may be passed to the
+ * dialog method. Note that the DialogModel described
+ * here is shared with the Notifications framework.
+ * @see NotificationService
+ *
+ * @typedef options
+ * @property {string} title the title to use for the dialog
+ * @property {string} iconClass class to apply to icon that is shown on dialog
+ * @property {string} message text that indicates a current message,
+ * @property {buttons[]} buttons a list of buttons with title and callback properties that will
+ * be added to the dialog.
+ */
+ dialog(options) {
+ let dialog = new Dialog(options);
+
+ this.showOverlay(dialog);
+
+ return dialog;
+ }
+
+
+ /**
+ * Displays a blocking (modal) progress dialog. This dialog can be used for
+ * displaying messages that require the user's attention, and show progress
+ * @param {model} options defines options for the dialog
+ * @returns {object} with an object with a dismiss function that can be called from the calling code
+ * to dismiss/destroy the dialog and an updateProgress function that takes progressPercentage(Number 0-100)
+ * and progressText (string)
+ *
+ * A description of the model options that may be passed to the
+ * dialog method. Note that the DialogModel described
+ * here is shared with the Notifications framework.
+ * @see NotificationService
+ *
+ * @typedef options
+ * @property {number} progressPerc the initial progress value (0-100) or {string} 'unknown' for anonymous progress
+ * @property {string} progressText the initial text to be shown under the progress bar
+ * @property {buttons[]} buttons a list of buttons with title and callback properties that will
+ * be added to the dialog.
+ */
+ progressDialog(options) {
+ let progressDialog = new ProgressDialog(options);
+
+ this.showOverlay(progressDialog);
+
+ return progressDialog;
+ }
+}
+
+export default OverlayAPI;
diff --git a/src/api/overlays/ProgressDialog.js b/src/api/overlays/ProgressDialog.js
new file mode 100644
index 0000000000..330796cd92
--- /dev/null
+++ b/src/api/overlays/ProgressDialog.js
@@ -0,0 +1,43 @@
+import ProgressComponent from '../../ui/components/layout/ProgressBar.vue';
+import Overlay from './Overlay';
+import Vue from 'vue';
+
+var component;
+
+class ProgressDialog extends Overlay {
+ constructor({progressPerc, progressText, ...options}) {
+
+ component = new Vue({
+ components: {
+ ProgressComponent: ProgressComponent
+ },
+ data() {
+ return {
+ model: {
+ progressPerc: progressPerc || 0,
+ progressText: progressText
+ }
+ }
+ },
+ template: ' '
+ }).$mount();
+
+ super({
+ element: component.$el,
+ size: 'fit',
+ notDismissable: true,
+ ...options
+ });
+
+ this.once('destroy', () => {
+ component.$destroy();
+ });
+ }
+
+ updateProgress(progressPerc, progressText) {
+ component.model.progressPerc = progressPerc;
+ component.model.progressText = progressText;
+ }
+}
+
+export default ProgressDialog;
diff --git a/src/api/overlays/components/DialogComponent.vue b/src/api/overlays/components/DialogComponent.vue
new file mode 100644
index 0000000000..0e42a40bf7
--- /dev/null
+++ b/src/api/overlays/components/DialogComponent.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+ {{title}}
+
+
+
+ {{hint}}
+ [{{timestamp}}]
+
+
+
+ {{message}}
+
+
+
+
+
+
+
+
diff --git a/src/api/overlays/components/OverlayComponent.vue b/src/api/overlays/components/OverlayComponent.vue
new file mode 100644
index 0000000000..04d6f2f140
--- /dev/null
+++ b/src/api/overlays/components/OverlayComponent.vue
@@ -0,0 +1,148 @@
+
+
+
+
+
+
+
+
+
+
+ {{button.label}}
+
+
+
+
+
+
+
+
+
diff --git a/src/api/ui/Dialog.js b/src/api/ui/Dialog.js
deleted file mode 100644
index 068c8206da..0000000000
--- a/src/api/ui/Dialog.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-define(['./dialog.html', 'zepto'], function (dialogTemplate, $) {
-
- /**
- * A dialog may be displayed to show blocking content to users.
- * @param {module:openmct.View} view the view to show in the dialog
- * @param {string} [title] the title for this dialog
- * @constructor
- * @memberof module:openmct
- */
- function Dialog(view, title) {
- this.view = view;
- this.title = title;
- this.showing = false;
- this.enabledState = true;
- }
-
- /**
- * Display this dialog.
- * @returns {Promise} a promise that will be resolved if the user
- * chooses "OK", an rejected if the user chooses "cancel"
- * @method show
- * @memberof module:openmct.Dialog#
- */
- Dialog.prototype.show = function () {
- if (this.showing) {
- throw new Error("Dialog already showing.");
- }
-
- var $body = $('body');
- var $dialog = $(dialogTemplate);
- var $contents = $dialog.find('.contents .editor');
- var $close = $dialog.find('.close');
-
- var $ok = $dialog.find('.ok');
- var $cancel = $dialog.find('.cancel');
-
- if (this.title) {
- $dialog.find('.title').text(this.title);
- }
-
- $body.append($dialog);
- this.view.show($contents[0]);
- this.$dialog = $dialog;
- this.$ok = $ok;
- this.showing = true;
-
- [$ok, $cancel, $close].forEach(function ($button) {
- $button.on('click', this.hide.bind(this));
- }.bind(this));
-
- return new Promise(function (resolve, reject) {
- $ok.on('click', resolve);
- $cancel.on('click', reject);
- $close.on('click', reject);
- });
- };
-
- Dialog.prototype.hide = function () {
- if (!this.showing) {
- return;
- }
- this.$dialog.remove();
- this.view.destroy();
- this.showing = false;
- };
-
- /**
- * Get or set the "enabled" state of the OK button for this dialog.
- * @param {boolean} [state] true to enable, false to disable
- * @returns {boolean} true if enabled, false if disabled
- * @method enabled
- * @memberof module:openmct.Dialog#
- */
- Dialog.prototype.enabled = function (state) {
- if (state !== undefined) {
- this.enabledState = state;
- if (this.showing) {
- this.$ok.toggleClass('disabled', !state);
- }
- }
- return this.enabledState;
- };
-
- return Dialog;
-});
diff --git a/src/api/ui/GestureAPI.js b/src/api/ui/GestureAPI.js
deleted file mode 100644
index 008df46335..0000000000
--- a/src/api/ui/GestureAPI.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-define([], function () {
- /**
- * Allows support for common user actions to be attached to views.
- * @interface GestureAPI
- * @memberof module:openmct
- */
- function GestureAPI(selectGesture, contextMenuGesture) {
- this.selectGesture = selectGesture;
- this.contextMenuGesture = contextMenuGesture;
- }
-
- /**
- * Designate an HTML element as selectable, and associated with a
- * particular object.
- *
- * @param {HTMLElement} htmlElement the element to make selectable
- * @param {*} item the object which should become selected when this
- * element is clicked.
- * @returns {Function} a function to remove selectability from this
- * HTML element.
- * @method selectable
- * @memberof module:openmct.GestureAPI#
- */
- GestureAPI.prototype.selectable = function (htmlElement, item) {
- return this.selectGesture.apply(htmlElement, item);
- };
-
-
- /**
- * Designate an HTML element as having a context menu associated with
- * the provided item.
- *
- * @private
- * @param {HTMLElement} htmlElement the element to make selectable
- * @param {*} item the object for which a context menu should appear
- * @returns {Function} a function to remove this geture from this
- * HTML element.
- * @method selectable
- * @memberof module:openmct.GestureAPI#
- */
- GestureAPI.prototype.contextMenu = function (htmlElement, item) {
- return this.contextMenuGesture.apply(htmlElement, item);
- };
-
- return GestureAPI;
-});
diff --git a/src/api/ui/dialog.html b/src/api/ui/dialog.html
deleted file mode 100644
index c6ebc6d943..0000000000
--- a/src/api/ui/dialog.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
diff --git a/src/plugins/notebook/res/templates/embed.html b/src/plugins/notebook/res/templates/embed.html
index 343c068450..f5524e667b 100644
--- a/src/plugins/notebook/res/templates/embed.html
+++ b/src/plugins/notebook/res/templates/embed.html
@@ -1,7 +1,7 @@
+ v-on:click="openSnapshot(domainObject, entry, embed)">
diff --git a/src/plugins/notebook/res/templates/snapshotTemplate.html b/src/plugins/notebook/res/templates/snapshotTemplate.html
index 9c9daee0ee..8ca8116ca6 100644
--- a/src/plugins/notebook/res/templates/snapshotTemplate.html
+++ b/src/plugins/notebook/res/templates/snapshotTemplate.html
@@ -15,7 +15,7 @@
SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
-
+
Annotate
@@ -23,7 +23,7 @@
+ :style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }">
\ No newline at end of file
diff --git a/src/plugins/notebook/src/controllers/EmbedController.js b/src/plugins/notebook/src/controllers/EmbedController.js
index 2417942c97..35d2e5e473 100644
--- a/src/plugins/notebook/src/controllers/EmbedController.js
+++ b/src/plugins/notebook/src/controllers/EmbedController.js
@@ -23,16 +23,16 @@
define([
'moment',
'zepto',
- '../utils/SnapshotOverlay',
'../../res/templates/snapshotTemplate.html',
- 'vue'
+ 'vue',
+ 'painterro'
],
function (
Moment,
$,
- SnapshotOverlay,
SnapshotTemplate,
- Vue
+ Vue,
+ Painterro
) {
function EmbedController (openmct, domainObject) {
this.openmct = openmct;
@@ -52,11 +52,101 @@ function (
EmbedController.prototype.navigate = function (embedType) {
this.objectService.getObjects([embedType]).then(function (objects) {
- this.navigationService.setNavigation(objects[embedType]);
+ this.navigationService.setNavigation(objects[embedType]);
}.bind(this));
};
- EmbedController.prototype.openSnapshot = function () {
+ EmbedController.prototype.openSnapshot = function (domainObject, entry, embed) {
+
+ function annotateSnapshot(openmct) {
+ return function () {
+
+ var save = false,
+ painterroInstance = {},
+ annotateOverlay = new Vue({
+ template: '
'
+ }),
+ self = this;
+
+ openmct.overlays.overlay({
+ element: annotateOverlay.$mount().$el,
+ size: 'large',
+ buttons: [
+ {
+ label: 'Cancel',
+ callback: function () {
+ save = false;
+ painterroInstance.save();
+ }
+ },
+ {
+ label: 'Save',
+ callback: function () {
+ save = true;
+ painterroInstance.save();
+ }
+ }
+ ],
+ onDestroy: function () {
+ annotateOverlay.$destroy(true);
+ }
+ });
+
+ painterroInstance = Painterro({
+ id: 'snap-annotation',
+ activeColor: '#ff0000',
+ activeColorAlpha: 1.0,
+ activeFillColor: '#fff',
+ activeFillColorAlpha: 0.0,
+ backgroundFillColor: '#000',
+ backgroundFillColorAlpha: 0.0,
+ defaultFontSize: 16,
+ defaultLineWidth: 2,
+ defaultTool: 'ellipse',
+ hiddenTools: ['save', 'open', 'close', 'eraser', 'pixelize', 'rotate', 'settings', 'resize'],
+ translation: {
+ name: 'en',
+ strings: {
+ lineColor: 'Line',
+ fillColor: 'Fill',
+ lineWidth: 'Size',
+ textColor: 'Color',
+ fontSize: 'Size',
+ fontStyle: 'Style'
+ }
+ },
+ saveHandler: function (image, done) {
+ if (save) {
+ var entryPos = self.findInArray(domainObject.entries, entry.id),
+ embedPos = self.findInArray(entry.embeds, embed.id);
+
+ if (entryPos !== -1 && embedPos !== -1) {
+ var url = image.asBlob(),
+ reader = new window.FileReader();
+
+ reader.readAsDataURL(url);
+ reader.onloadend = function () {
+ var snapshot = reader.result,
+ snapshotObject = {
+ src: snapshot,
+ type: url.type,
+ size: url.size,
+ modified: Date.now()
+ },
+ dirString = 'entries[' + entryPos + '].embeds[' + embedPos + '].snapshot';
+
+ openmct.objects.mutate(domainObject, dirString, snapshotObject);
+ };
+ }
+ } else {
+ console.log('You cancelled the annotation!!!');
+ }
+ done(true);
+ }
+ }).show(embed.snapshot.src);
+ };
+ }
+
var self = this,
snapshot = new Vue({
template: SnapshotTemplate,
@@ -66,7 +156,9 @@ function (
};
},
methods: {
- formatTime: self.formatTime
+ formatTime: self.formatTime,
+ annotateSnapshot: annotateSnapshot(self.openmct),
+ findInArray: self.findInArray
}
});
@@ -74,7 +166,20 @@ function (
snapshot.$destroy(true);
}
- this.openmct.OverlayService.show(snapshot.$mount().$el, {onDestroy: onDestroyCallback, cssClass: 'l-large-view'});
+ var snapshotOverlay = this.openmct.overlays.overlay({
+ element: snapshot.$mount().$el,
+ onDestroy: onDestroyCallback,
+ size: 'large',
+ buttons: [
+ {
+ label: 'Done',
+ emphasis: true,
+ callback: function () {
+ snapshotOverlay.dismiss();
+ }
+ }
+ ]
+ });
};
EmbedController.prototype.formatTime = function (unixTime, timeFormat) {
@@ -125,23 +230,24 @@ function (
var entryPosition = self.findInArray(self.domainObject.entries, entry.id),
embedPosition = self.findInArray(entry.embeds, embed.id);
- var warningDialog = self.dialogService.showBlockingMessage({
- severity: "error",
- title: "This action will permanently delete this embed. Do you wish to continue?",
- options: [{
- label: "OK",
+ var dialog = self.openmct.overlays.dialog({
+ iconClass: "alert",
+ message: 'This Action will permanently delete this embed. Do you wish to continue?',
+ buttons: [{
+ label: "No",
+ callback: function () {
+ dialog.dismiss();
+ }
+ },
+ {
+ label: "Yes",
+ emphasis: true,
callback: function () {
entry.embeds.splice(embedPosition, 1);
var dirString = 'entries[' + entryPosition + '].embeds';
self.openmct.objects.mutate(self.domainObject, dirString, entry.embeds);
-
- warningDialog.dismiss();
- }
- },{
- label: "Cancel",
- callback: function () {
- warningDialog.dismiss();
+ dialog.dismiss();
}
}]
});
@@ -207,7 +313,8 @@ function (
openSnapshot: self.openSnapshot,
formatTime: self.formatTime,
toggleActionMenu: self.toggleActionMenu,
- actionToMenuDecorator: self.actionToMenuDecorator
+ actionToMenuDecorator: self.actionToMenuDecorator,
+ findInArray: self.findInArray
};
};
diff --git a/src/plugins/notebook/src/controllers/EntryController.js b/src/plugins/notebook/src/controllers/EntryController.js
index 7c1475fd11..2f0cbf9c6b 100644
--- a/src/plugins/notebook/src/controllers/EntryController.js
+++ b/src/plugins/notebook/src/controllers/EntryController.js
@@ -81,23 +81,26 @@ function (
if (entryPos !== -1) {
- var errorDialog = this.dialogService.showBlockingMessage({
- severity: "error",
- title: "This action will permanently delete this Notebook entry. Do you wish to continue?",
- options: [{
- label: "OK",
- callback: function () {
- domainObject.entries.splice(entryPos, 1);
- openmct.objects.mutate(domainObject, 'entries', domainObject.entries);
-
- errorDialog.dismiss();
+ var dialog = this.openmct.overlays.dialog({
+ iconClass: 'alert',
+ message: 'This action will permanently delete this entry. Do you wish to continue?',
+ buttons: [
+ {
+ label: "Ok",
+ emphasis: true,
+ callback: function () {
+ domainObject.entries.splice(entryPos, 1);
+ openmct.objects.mutate(domainObject, 'entries', domainObject.entries);
+ dialog.dismiss();
+ }
+ },
+ {
+ label: "Cancel",
+ callback: function () {
+ dialog.dismiss();
+ }
}
- },{
- label: "Cancel",
- callback: function () {
- errorDialog.dismiss();
- }
- }]
+ ]
});
}
};
diff --git a/src/plugins/notebook/src/controllers/NotebookController.js b/src/plugins/notebook/src/controllers/NotebookController.js
index 5805f541c3..80ef869ea2 100644
--- a/src/plugins/notebook/src/controllers/NotebookController.js
+++ b/src/plugins/notebook/src/controllers/NotebookController.js
@@ -60,7 +60,7 @@ function (
this.container = container;
var notebookEmbed = {
- inject:['openmct'],
+ inject:['openmct', 'domainObject'],
props:['embed', 'entry'],
template: EmbedTemplate,
data: embedController.exposedData,
@@ -81,7 +81,7 @@ function (
var notebookVue = Vue.extend({
template: NotebookTemplate,
- provide: {openmct: self.openmct},
+ provide: {openmct: self.openmct, domainObject: self.domainObject},
components: {
'notebook-entry': entryComponent,
'search': search.default
diff --git a/src/styles-new/_constants-espresso.scss b/src/styles-new/_constants-espresso.scss
index aef088a602..406e1261da 100644
--- a/src/styles-new/_constants-espresso.scss
+++ b/src/styles-new/_constants-espresso.scss
@@ -47,23 +47,27 @@ $colorStatusBarFgHov: #aaa;
$colorKey: #0099cc;
$colorKeyFg: #fff;
$colorKeyHov: #00c0f6;
-$colorKeyFilter: brightness(1) sepia(1) hue-rotate(145deg) saturate(6);
-$colorKeyFilterHov: brightness(1) sepia(1) hue-rotate(145deg) saturate(7);
+$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
+$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
+$colorKeySelectedBg: $colorKey;
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #ccc;
$colorAHov: #fff;
// Layout
$shellMainPad: 4px 0;
-$shellPanePad: $interiorMargin, 7px; // TODO: Sync this with Snow theme
+$shellPanePad: $interiorMargin, 7px;
// Status colors, mainly used for messaging and item ancillary symbols
$colorStatusFg: #999;
$colorStatusDefault: #ccc;
$colorStatusInfo: #60ba7b;
+$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
$colorStatusAlert: #ffb66c;
+$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%) contrast(101%);
$colorStatusError: #da0004;
-$colorStatusBtnBg: #666;
+$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
+$colorStatusBtnBg: #666; // Where is this used?
// States
$colorPausedBg: #ff9900;
@@ -96,11 +100,9 @@ $editBorderSelected: 1px solid $editColor;
$editBorderDrilledIn: 1px dashed #ff4d9a;
$colorGridLines: rgba($editColor, 0.2);
-// UI elements
+// Icons
$colorIconAlias: #4af6f3;
$colorIconAliasForKeyFilter: #aaa;
-$colorProgressBarOuter: rgba(#000, 0.1);
-$colorProgressBarAmt: #0a0;
// Buttons and Controls
$colorBtnBg: lighten($colorBodyBg, 10%); // !
@@ -119,7 +121,7 @@ $colorClickIconBgHov: rgba($colorKey, 0.6);
$colorClickIconFgHov: $colorKeyHov;
// Menus
-$colorMenuBg: lighten($colorBodyBg, 20%);
+$colorMenuBg: lighten($colorBodyBg, 15%);
$colorMenuFg: lighten($colorBodyFg, 30%);
$colorMenuIc: lighten($colorKey, 15%);
$colorMenuHovBg: $colorMenuIc;
@@ -166,9 +168,8 @@ $colorInspectorSectionHeaderFg: lighten($colorInspectorBg, 40%);
// Overlay
$overlayColorBg: $colorMenuBg;
$overlayColorFg: $colorMenuFg;
-$overlayButtonColorBg: lighten($overlayColorBg, 20%);
-$overlayButtonColorFg: #fff;
$overlayCr: $interiorMarginLg;
+$overlayBrightnessAdjust: brightness(1.3);
// Indicator colors
$colorIndicatorAvailable: $colorKey;
@@ -300,7 +301,7 @@ $createBtnTextTransform: uppercase;
@mixin themedButton($c: $colorBtnBg) {
background: linear-gradient(lighten($c, 5%), $c);
- box-shadow: rgba(black, 0.5) 0 0 2px;
+ box-shadow: rgba(black, 0.5) 0 0.5px 2px;
}
/**************************************************** NOT USED, LEAVE FOR NOW */
diff --git a/src/styles-new/_constants-snow.scss b/src/styles-new/_constants-snow.scss
index ddfe8b2442..eff80e931a 100644
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@@ -47,23 +47,27 @@ $colorStatusBarFgHov: #aaa;
$colorKey: #0099cc;
$colorKeyFg: #fff;
$colorKeyHov: #00c0f6;
-$colorKeyFilter: brightness(0.9) sepia(1) hue-rotate(145deg) saturate(6);
-$colorKeyFilterHov: brightness(1) sepia(1) hue-rotate(145deg) saturate(7);
+$colorKeyFilter: invert(37%) sepia(100%) saturate(686%) hue-rotate(157deg) brightness(102%) contrast(102%);
+$colorKeyFilterHov: invert(69%) sepia(87%) saturate(3243%) hue-rotate(151deg) brightness(97%) contrast(102%);
+$colorKeySelectedBg: $colorKey;
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #999;
$colorAHov: $colorKey;
// Layout
$shellMainPad: 4px 0;
-$shellPanePad: 0 7px;
+$shellPanePad: $interiorMargin, 7px;
// Status colors, mainly used for messaging and item ancillary symbols
$colorStatusFg: #999;
$colorStatusDefault: #ccc;
$colorStatusInfo: #60ba7b;
+$colorStatusInfoFilter: invert(64%) sepia(42%) saturate(416%) hue-rotate(85deg) brightness(93%) contrast(93%);
$colorStatusAlert: #ffb66c;
+$colorStatusAlertFilter: invert(89%) sepia(26%) saturate(5035%) hue-rotate(316deg) brightness(114%) contrast(107%);
$colorStatusError: #da0004;
-$colorStatusBtnBg: #666;
+$colorStatusErrorFilter: invert(8%) sepia(96%) saturate(4511%) hue-rotate(352deg) brightness(136%) contrast(114%);
+$colorStatusBtnBg: #666; // Where is this used?
// States
$colorPausedBg: #ff9900;
@@ -96,11 +100,9 @@ $editBorderSelected: 1px solid $editColor;
$editBorderDrilledIn: 1px dashed #ff4d9a;
$colorGridLines: rgba($editColor, 0.2);
-// UI elements
+// Icons
$colorIconAlias: #4af6f3;
$colorIconAliasForKeyFilter: #aaa;
-$colorProgressBarOuter: rgba(#000, 0.1);
-$colorProgressBarAmt: #0a0;
// Buttons and Controls
$colorBtnBg: #aaaaaa;
@@ -166,9 +168,8 @@ $colorInspectorSectionHeaderFg: darken($colorInspectorBg, 40%);
// Overlay
$overlayColorBg: $colorMenuBg;
$overlayColorFg: $colorMenuFg;
-$overlayButtonColorBg: $colorBtnBg;
-$overlayButtonColorFg: $colorBtnFg;
$overlayCr: $interiorMarginLg;
+$overlayBrightnessAdjust: brightness(1);
// Indicator colors
$colorIndicatorAvailable: $colorKey;
diff --git a/src/styles-new/_constants.scss b/src/styles-new/_constants.scss
index b5f6b9f26e..758948241f 100644
--- a/src/styles-new/_constants.scss
+++ b/src/styles-new/_constants.scss
@@ -40,9 +40,9 @@ $inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
$menuLineH: 1.5rem;
$treeItemIndent: 16px;
$treeTypeIconW: 18px;
-$overlayOuterMargin: 5%;
+$overlayOuterMarginLg: 5%;
+$overlayOuterMarginDialog: 20%;
$overlayInnerMargin: 25px;
-
/*************** Items */
$itemPadLR: 5px;
$gridItemDesk: 175px;
@@ -59,6 +59,13 @@ $mobileTreeItemH: 35px; // Used
/************************** VISUAL */
$controlDisabledOpacity: 0.3;
+/************************** UI ELEMENTS */
+/*************** Progress Bar */
+$colorProgressBarHolder: rgba(black, 0.1);
+$colorProgressBar: #0085ad;
+$progressAnimW: 500px;
+$progressBarMinH: 6px;
+
/************************** GLYPH CHAR UNICODES */
$glyph-icon-alert-rect: '\e900';
$glyph-icon-alert-triangle: '\e901';
@@ -177,34 +184,38 @@ $glyph-icon-notebook: '\e1131';
/************************** GLYPHS AS DATA URI */
// Only objects have been converted, for use in Create menu and folder views
-$bg-icon-activity: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M288 32H160l160 160H174.872C152.74 153.742 111.377 128 64 128H0v256h64c47.377 0 88.74-25.742 110.872-64H320L160 480h128l224-224L288 32z'/%3e%3c/svg%3e");
-$bg-icon-activity-mode: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M256 0C148.6 0 56.6 66.2 18.6 160H64c28.4 0 54 12.4 71.5 32H256l-96-96h128l160 160-160 160H160l96-96H135.5C118 339.6 92.4 352 64 352H18.6c38 93.8 129.9 160 237.4 160 141.4 0 256-114.6 256-256S397.4 0 256 0z'/%3e%3c/svg%3e");
-$bg-icon-autoflow-tabular: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M96 0C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h32V0H96zM192 0h128v512H192zM416 0h-32v352h128V96c0-52.8-43.2-96-96-96z'/%3e%3c/svg%3e");
-$bg-icon-clock: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm135 345c-6.4 11.1-18.3 18-31.2 18-6.3 0-12.5-1.7-18-4.8l-110.9-64-.1-.1c-.4-.2-.8-.5-1.2-.7l-.4-.3-.9-.6-.6-.5-.6-.5-.9-.7-.3-.3c-.4-.3-.7-.6-1.1-.9-2.5-2.3-4.7-5-6.5-7.9-.1-.2-.3-.5-.4-.7s-.3-.5-.4-.7c-1.6-3-2.9-6.2-3.6-9.6v-.1c-.1-.5-.2-.9-.3-1.4 0-.1 0-.3-.1-.4-.1-.3-.1-.7-.1-1.1s-.1-.5-.1-.8 0-.5-.1-.8-.1-.8-.1-1.1v-.5-1.4V81c0-19.9 16.1-36 36-36s36 16.1 36 36v161.2l92.9 53.6c17.1 10 22.9 32 13 49.2z'/%3e%3c/svg%3e");
-$bg-icon-database: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M256 256C114.615 256 0 213.019 0 160v256c0 53.019 114.615 96 256 96s256-42.981 256-96V160c0 53.019-114.615 96-256 96z'/%3e%3cellipse fill='%23666666' cx='256' cy='96' rx='256' ry='96'/%3e%3c/svg%3e");
-$bg-icon-database-query: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M341.76 409.643C316.369 423.871 287.118 432 256 432c-97.047 0-176-78.953-176-176S158.953 80 256 80s176 78.953 176 176c0 31.118-8.129 60.369-22.357 85.76l95.846 95.846C509.747 430.661 512 423.429 512 416V96c0-53.019-114.615-96-256-96S0 42.981 0 96v320c0 53.019 114.615 96 256 96 63.055 0 120.774-8.554 165.388-22.73l-79.628-79.627z'/%3e%3cpath fill='%23666666' d='M176 256c0 44.112 35.888 80 80 80s80-35.888 80-80-35.888-80-80-80-80 35.888-80 80z'/%3e%3c/svg%3e");
-$bg-icon-dataset: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 96H288l-54.6-54.6-18.7-18.7C202.2 10.2 177.6 0 160 0H32C14.4 0 0 14.4 0 32v192c0-35.2 28.8-64 64-64h384c35.2 0 64 28.8 64 64v-64c0-35.2-28.8-64-64-64zM448 224H64c-35.2 0-64 28.8-64 64v160c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64zM160 448H96V288h64v160zm128 0h-64V288h64v160zm128 0h-64V288h64v160z'/%3e%3c/svg%3e");
-$bg-icon-datatable: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M256 256C114.6 256 0 213 0 160v256c0 53 114.6 96 256 96s256-43 256-96V160c0 53-114.6 96-256 96zm192 31.5v128c-18.3 7.8-39.9 14.4-64 19.7v-128c24.1-5.3 45.7-11.9 64-19.7zm-320 19.7v128c-24.1-5.2-45.7-11.9-64-19.7v-128c18.3 7.8 39.9 14.4 64 19.7zM192 445V317c20.5 2 41.9 3 64 3s43.5-1.1 64-3v128c-20.5 2-41.9 3-64 3s-43.5-1.1-64-3z'/%3e%3cellipse fill='%23666666' cx='256' cy='96' rx='256' ry='96'/%3e%3c/svg%3e");
-$bg-icon-dictionary: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M416 320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96v160l-64-32-64 32V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96v-96c0 52.8-43.2 96-96 96H96v-96h320z'/%3e%3c/svg%3e");
-$bg-icon-folder: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 96H288l-54.6-54.6-18.7-18.7C202.2 10.2 177.6 0 160 0H32C14.4 0 0 14.4 0 32v192c0-35.2 28.8-64 64-64h384c35.2 0 64 28.8 64 64v-64c0-35.2-28.8-64-64-64zM448 224H64c-35.2 0-64 28.8-64 64v160c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64z'/%3e%3c/svg%3e");
-$bg-icon-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm0 448H64V64h384v384z'/%3e%3cpath fill='%23666666' d='M160 128l-64 64v224h320V256l-64-64-64 64z'/%3e%3c/svg%3e");
-$bg-icon-layout: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M224 0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h128V0zM416 0H288v288.832h224V96c0-52.8-43.2-96-96-96zM288 512h128c52.8 0 96-43.2 96-96v-64.832H288V512z'/%3e%3c/svg%3e");
-$bg-icon-object: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='none' d='M256 96L76.8 208 256 320l179.2-112z'/%3e%3cpath fill='%23666666' d='M256 512l256-160V160L255.99 0 0 160v192l256 160zm0-416l179.2 112L256 320 76.8 208 256 96z'/%3e%3c/svg%3e");
-$bg-icon-object-unknown: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M255-1L-1 159v192l256 160 256-160V159L255-1zm37.7 430.6c-10.6 10.4-23 15.4-38 15.4-15.6 0-28.1-4.9-38.1-14.8-10-10-14.8-22.4-14.8-38.1 0-15.2 5.1-27.6 15.5-38.1s22.6-15.6 37.4-15.6c14.8 0 27.1 5.2 37.8 16 10.7 10.8 15.9 23.2 15.9 38-.1 14.5-5.4 27-15.7 37.2zm26.4-156.3c-11.8 5.9-18.7 11-21.7 16.2-1.8 3.1-3 7.4-3.7 13.4v20.5H213v-22.1c0-20.1 2.2-34.9 6.5-44 4-8.6 11.3-15.1 22.4-20l17.4-7.7c16-7.1 24.1-17.6 24.1-31.4 0-8-3-15.2-8.6-20.9-5.6-5.6-12.8-8.6-20.8-8.6-12 0-27.2 5-31.4 28.7l-1.1 6.1H148l.7-8.1c2-22.3 8.5-41.2 19.4-56.1 9.8-13.5 22.8-24.3 38.5-32.3 15.7-8 32.3-12 49.1-12 30.3 0 55.1 9.7 75.7 29.8 20.6 20 30.6 44 30.6 73.6 0 35.4-14.4 60.7-42.9 74.9z'/%3e%3c/svg%3e");
-$bg-icon-packet: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='none' d='M256 96L76.8 208 256 320l179.2-112z'/%3e%3cpath fill='%23666666' d='M256 0L0 160v256c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V160L256 0zm0 96l179.2 112L256 320 76.8 208 256 96z'/%3e%3c/svg%3e");
-$bg-icon-page: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M352 256c-52.8 0-96-43.2-96-96V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V256H352z'/%3e%3cpath fill='%23666666' d='M384 192h128L320 0v128c0 35.2 28.8 64 64 64z'/%3e%3c/svg%3e");
-$bg-icon-plot-overlay: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M415 0H97C43.65 0 0 43.65 0 97v203.41c7.09 9.32 12.83 14.17 16 15.42 7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73C403.71 188.64 440.64 124 496 124a69.55 69.55 0 0 1 16 1.87V97c0-53.35-43.65-97-97-97z'/%3e%3cpath fill='%23666666' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73C108.29 323.36 71.36 388 16 388a69.56 69.56 0 0 1-16-1.87V415c0 53.35 43.65 97 97 97h318c53.35 0 97-43.65 97-97V211.59c-7.09-9.32-12.83-14.17-16-15.42z'/%3e%3c/svg%3e");
-$bg-icon-plot-stacked: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M44.8 156c12.49 0 24.48-13.26 42.76-35.09 22.71-27.14 51-60.91 98-60.91 22.32 0 43.31 7.73 62.4 23 14.34 11.45 25.58 25.21 36.46 38.53C303.63 145 314 156 326.4 156H512V97c0-53.35-43.65-97-97-97H97C43.65 0 0 43.65 0 97v59h44.8z'/%3e%3cpath fill='%23666666' d='M264.75 205.2c-14.12-11.32-25.26-25-36-38.14C211 145.32 199.37 132 185.6 132c-12.53 0-24.54 13.27-42.83 35.12-22.7 27.12-51 60.88-98 60.88H0v56h185.6c22 0 42.77 7.67 61.65 22.8 14.12 11.32 25.26 25 36 38.14C301 366.68 312.63 380 326.4 380c12.53 0 24.54-13.27 42.83-35.12 22.7-27.12 51-60.88 98-60.88H512v-56H326.4c-22.03 0-42.77-7.67-61.65-22.8z'/%3e%3cpath fill='%23666666' d='M467.2 356c-12.49 0-24.48 13.26-42.76 35.09-22.71 27.14-51 60.91-98 60.91-22.32 0-43.31-7.73-62.4-23-14.34-11.45-25.58-25.21-36.46-38.53C208.37 367 198 356 185.6 356H0v59c0 53.35 43.65 97 97 97h318c53.35 0 97-43.65 97-97v-59h-44.8z'/%3e%3c/svg%3e");
-$bg-icon-session: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M317.8 262.2c3.3 2.1 6.6 4.3 9.6 6.8l60.2 48.2c14.8 11.9 41.9 11.9 56.7 0l67.6-54c.1-2.4.1-4.7.1-7.1 0-26.1-3.9-51.2-11.1-74.9L423.5 243c-29.1 23.3-70.1 29.6-105.7 19.2zM124.3 317.1l60.2-48.2c29-23.2 70-29.6 105.6-19.2-3.3-2.1-6.6-4.3-9.6-6.8l-60.2-48.2c-14.8-11.9-41.9-11.9-56.7 0L103.5 243c-20 16-45.7 24-71.5 24-10.8 0-21.5-1.4-31.9-4.2v.8c2.5 1.7 5 3.4 7.3 5.3l60.2 48.2c14.9 11.9 41.9 11.9 56.7 0z'/%3e%3cpath fill='%23666666' d='M60.3 189.1l60.2-48.2c40.1-32.1 102.8-32.1 142.9 0l60.2 48.2c14.8 11.9 41.9 11.9 56.7 0l90.5-72.4C425.2 46.5 346 0 256 0 136.7 0 36.4 81.6 8 192.1c15.4 8.8 38.9 7.8 52.3-3zM344.5 371l-60.2-48.2c-14.8-11.9-41.9-11.9-56.7 0L167.5 371c-20 16-45.7 24-71.5 24-23.9 0-47.7-6.9-67.1-20.7C71.7 456.1 157.3 512 256 512s184.3-55.9 227.1-137.7c-40.2 28.7-99.9 27.6-138.6-3.3z'/%3e%3c/svg%3e");
-$bg-icon-tabular: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zM320 224H192v-96h128v96zm-128 32h128v96H192v-96zm-32 96H32v-96h128v96zm0-224v96H32v-96h128zM64 480c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h128v96H64zm128 0v-96h128v96H192zm288-32c0 8.5-3.3 16.5-9.4 22.6S456.5 480 448 480h-96v-96h128v64zm0-96H352v-96h128v96zm0-128H352v-96h128v96z'/%3e%3c/svg%3e");
-$bg-icon-tabular-lad: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM32 128h128v96H32v-96zm0 128h128v96H32v-96zm32 224c-17.6-.1-31.9-14.4-32-32v-64h128v96H64zm128 0v-96h128v96H192zm288-32c-.1 17.6-14.4 31.9-32 32h-96v-96h128v64zm0-192v96H192v-96h32v-32h-32v-96h288v96h-32v32h32z'/%3e%3cpath fill='%23666666' d='M391.2 273.7L336 246.1V160c0-8.8-7.2-16-16-16s-16 7.2-16 16v105.9l72.8 36.4c7.9 4 17.5.8 21.5-7.2 4-7.8.8-17.5-7.1-21.4z'/%3e%3c/svg%3e");
-$bg-icon-tabular-lad-set: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M64 384V96c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64H128c-35.3-.1-63.9-28.7-64-64z'/%3e%3cpath fill='%23666666' d='M448 0H160c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM128 96h96v64h-96V96zm0 96h96v96h-96v-96zm32 192c-17.6-.1-31.9-14.4-32-32v-32h96v64h-64zm96 0v-64h96v64h-96zm224-32c-.1 17.6-14.4 31.9-32 32h-64v-64h96v32zm0-64H256V96h224v192z'/%3e%3cpath fill='%23666666' d='M416 240c8.8 0 16-7.2 16-16 0-6.9-4.4-13-10.9-15.2L384 196.5V144c0-8.8-7.2-16-16-16s-16 7.2-16 16v75.5l58.9 19.6c1.7.6 3.4.9 5.1.9z'/%3e%3c/svg%3e");
-$bg-icon-tabular-realtime: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M0 64v384c0 35.2 28.8 64 64 64h288c35.2 0 64-28.8 64-64V340c-19.8 7.8-41.4 12-64 12-35.4 0-68.4-10.5-96-28.6V352h-96v-96h35.3c-5.2-10.1-9.4-20.8-12.6-32H160v-96h22.7C203.6 54.2 271.6 0 352 0H64C28.8 0 0 28.8 0 64zm288 320h96v64c0 8.5-3.3 16.5-9.4 22.6S360.5 480 352 480h-64v-96zm-160 96H64c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h96v96zm0-128H32v-96h96v96zm32 32h96v96h-96v-96zm-32-160H32v-96h96v96z'/%3e%3cpath fill='%23666666' d='M192 160c0 88.4 71.6 160 160 160s160-71.6 160-160S440.4 0 352 0 192 71.6 192 160zm49.7 39.8L227 187.5c-1.4-6.4-2.3-12.9-2.7-19.6 15.1-.1 30.1-5 41.9-14.8l39.6-33c7.5-6.2 21.1-6.2 28.6 0l39.6 33c2.8 2.3 5.7 4.3 8.8 6.1-23-11.7-52.7-9.2-72.8 7.5l-39.6 33c-7.6 6.3-21.2 6.3-28.7.1zM352 288c-36.7 0-69.7-15.4-93-40.1 14.2-.6 28.1-5.5 39.2-14.7l39.6-33c7.5-6.2 21.1-6.2 28.6 0l39.6 33c11 9.2 25 14.1 39.2 14.7-23.5 24.7-56.5 40.1-93.2 40.1zm125.9-151.3c1.4 7.5 2.1 15.3 2.1 23.3 0 9.4-1 18.6-3 27.5l-14.7 12.3c-7.5 6.2-21.1 6.2-28.6 0l-39.6-33c-2.8-2.3-5.7-4.3-8.8-6.1 23 11.7 52.7 9.2 72.8-7.5l19.8-16.5zM352 32c46.4 0 87.1 24.7 109.5 61.7l-31.2 26c-7.5 6.2-21.1 6.2-28.6 0l-39.6-33c-23.6-19.7-60.6-19.7-84.3 0l-39.6 33c-2.5 2.1-5.7 3.5-9.1 4.2C244.7 70.8 293.8 32 352 32z'/%3e%3c/svg%3e");
-$bg-icon-tabular-scrolling: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M32 0C14.4 0 0 14.4 0 32v96h224V0H32zM512 128V32c0-17.6-14.4-32-32-32H288v128h224zM0 192v96c0 17.6 14.4 32 32 32h192V192H0zM480 320c17.6 0 32-14.4 32-32v-96H288v128h192zM256 512L128 384h256z'/%3e%3c/svg%3e");
-$bg-icon-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M16 315.83c7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73 18.7-47.75 49.57-103.57 94.47-116.23A255.87 255.87 0 0 0 256 0C114.62 0 0 114.62 0 256a257.18 257.18 0 0 0 5 50.52c4.77 5.39 8.61 8.37 11 9.31z'/%3e%3cpath fill='%23666666' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73-18.7 47.75-49.57 103.57-94.47 116.23A255.87 255.87 0 0 0 256 512c141.38 0 256-114.62 256-256a257.18 257.18 0 0 0-5-50.52c-4.77-5.39-8.61-8.37-11-9.31z'/%3e%3c/svg%3e");
-$bg-icon-timeline: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M128 128h192v64H128zM192 224h192v64H192zM160 320h192v64H160z'/%3e%3cpath fill='%23666666' d='M416 0h-64v96h63.8c.1 0 .1.1.2.2v319.7c0 .1-.1.1-.2.2H352v96h64c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM96 415.8V96.2c0-.1.1-.1.2-.2H160V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h64v-96H96.2c-.1 0-.2-.1-.2-.2z'/%3e%3c/svg%3e");
-$bg-icon-timer: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M288 73.3V32.01a32 32 0 0 0-32-32h-64a32 32 0 0 0-32 32V73.3C67.48 100.84 0 186.54 0 288.01c0 123.71 100.29 224 224 224s224-100.29 224-224c0-101.48-67.5-187.2-160-214.71zm-54 224.71l-131.88 105.5A167.4 167.4 0 0 1 56 288.01c0-92.64 75.36-168 168-168 3.36 0 6.69.11 10 .31v177.69z'/%3e%3c/svg%3e");
-$bg-icon-topic: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M227.18 238.32l43.15-43.15a25.18 25.18 0 0 1 35.36 0l43.15 43.15a94.42 94.42 0 0 0 35.18 22.25V174.5l-28.82-28.82a95.11 95.11 0 0 0-134.35 0l-43.15 43.15a25.18 25.18 0 0 1-35.36 0L128 174.5v86.07a95.11 95.11 0 0 0 99.18-22.25z'/%3e%3cpath fill='%23666666' d='M252.82 273.68l-43.15 43.15a25.18 25.18 0 0 1-35.36 0l-43.15-43.15c-1-1-2.1-2-3.18-3v98.68a95.11 95.11 0 0 0 131.18-3l43.15-43.15a25.18 25.18 0 0 1 35.36 0l43.15 43.15c1 1 2.1 2 3.18 3v-98.68a95.11 95.11 0 0 0-131.18 3z'/%3e%3cpath fill='%23666666' d='M416 0h-64v96h63.83l.17.17v319.66l-.17.17H352v96h64c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM160 416H96.17l-.17-.17V96.17l.17-.17H160V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h64v-96z'/%3e%3c/svg%3e");
-$bg-icon-box-with-dashed-lines: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M0 192h64v128H0zM64 64.11l.11-.11H160V0H64A64.19 64.19 0 0 0 0 64v96h64V64.11zM64 447.89V352H0v96a64.19 64.19 0 0 0 64 64h96v-64H64.11zM192 0h128v64H192zM448 447.89l-.11.11H352v64h96a64.19 64.19 0 0 0 64-64v-96h-64v95.89zM448 0h-96v64h95.89l.11.11V160h64V64a64.19 64.19 0 0 0-64-64zM448 192h64v128h-64zM192 448h128v64H192zM128 128h256v256H128z'/%3e%3c/svg%3e");
-$bg-icon-summary-widget: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm-24.1 305.2l-41.3 71.6-94.8-65.8 9.6 115h-82.7l9.6-115-94.8 65.8-41.3-71.6L192.5 256 88.1 206.8l41.3-71.6 94.8 65.8-9.6-115h82.7l-9.6 115 94.8-65.8 41.3 71.6L319.5 256l104.4 49.2z'/%3e%3c/svg%3e");
-$bg-icon-notebook: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' d='M448 55.4c0-39.9-27.7-63.7-61.5-52.7L0 128h448V55.4zM448 160H0v288c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64zm-32 256H224V256h192v160z'/%3e%3c/svg%3e");
+$bg-icon-alert-rect: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM288 448h-64v-64h64v64zm10.9-192L280 352h-48l-18.9-96V64H299v192z' fill='%23000000'/%3e%3c/svg%3e");
+$bg-icon-alert-triangle: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M499.1 424.4L287.8 54.6c-17.5-30.6-46-30.6-63.5 0L12.9 424.4C-4.6 455 9.9 480 45.1 480h421.7c35.3 0 49.8-25 32.3-55.6zM288 448h-64v-64h64v64zm10.9-192L280 352h-48l-18.9-96V128H299v128z' fill='%23000000'/%3e%3c/svg%3e");
+$bg-icon-bell: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg fill='%23000000'%3e%3cpath d='M256 512c53 0 96-43 96-96H160c0 53 43 96 96 96zM448 224v-32C448 86 362 0 256 0S64 86 64 192v32c0 35.3-28.7 64-64 64v64h512v-64c-35.3 0-64-28.7-64-64z'/%3e%3c/g%3e%3c/svg%3e");
+$bg-icon-info: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm0 64c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm96 352H160v-64h32V224h128v128h32v64z' fill='%23000000'/%3e%3c/svg%3e");
+$bg-icon-activity: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M288 32H160l160 160H174.872C152.74 153.742 111.377 128 64 128H0v256h64c47.377 0 88.74-25.742 110.872-64H320L160 480h128l224-224L288 32z'/%3e%3c/svg%3e");
+$bg-icon-activity-mode: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 0C148.6 0 56.6 66.2 18.6 160H64c28.4 0 54 12.4 71.5 32H256l-96-96h128l160 160-160 160H160l96-96H135.5C118 339.6 92.4 352 64 352H18.6c38 93.8 129.9 160 237.4 160 141.4 0 256-114.6 256-256S397.4 0 256 0z'/%3e%3c/svg%3e");
+$bg-icon-autoflow-tabular: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M96 0C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h32V0H96zM192 0h128v512H192zM416 0h-32v352h128V96c0-52.8-43.2-96-96-96z'/%3e%3c/svg%3e");
+$bg-icon-clock: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm135 345c-6.4 11.1-18.3 18-31.2 18-6.3 0-12.5-1.7-18-4.8l-110.9-64-.1-.1c-.4-.2-.8-.5-1.2-.7l-.4-.3-.9-.6-.6-.5-.6-.5-.9-.7-.3-.3c-.4-.3-.7-.6-1.1-.9-2.5-2.3-4.7-5-6.5-7.9-.1-.2-.3-.5-.4-.7s-.3-.5-.4-.7c-1.6-3-2.9-6.2-3.6-9.6v-.1c-.1-.5-.2-.9-.3-1.4 0-.1 0-.3-.1-.4-.1-.3-.1-.7-.1-1.1s-.1-.5-.1-.8 0-.5-.1-.8-.1-.8-.1-1.1v-.5-1.4V81c0-19.9 16.1-36 36-36s36 16.1 36 36v161.2l92.9 53.6c17.1 10 22.9 32 13 49.2z'/%3e%3c/svg%3e");
+$bg-icon-database: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 256C114.615 256 0 213.019 0 160v256c0 53.019 114.615 96 256 96s256-42.981 256-96V160c0 53.019-114.615 96-256 96z'/%3e%3cellipse fill='%23000000' cx='256' cy='96' rx='256' ry='96'/%3e%3c/svg%3e");
+$bg-icon-database-query: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M341.76 409.643C316.369 423.871 287.118 432 256 432c-97.047 0-176-78.953-176-176S158.953 80 256 80s176 78.953 176 176c0 31.118-8.129 60.369-22.357 85.76l95.846 95.846C509.747 430.661 512 423.429 512 416V96c0-53.019-114.615-96-256-96S0 42.981 0 96v320c0 53.019 114.615 96 256 96 63.055 0 120.774-8.554 165.388-22.73l-79.628-79.627z'/%3e%3cpath fill='%23000000' d='M176 256c0 44.112 35.888 80 80 80s80-35.888 80-80-35.888-80-80-80-80 35.888-80 80z'/%3e%3c/svg%3e");
+$bg-icon-dataset: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 96H288l-54.6-54.6-18.7-18.7C202.2 10.2 177.6 0 160 0H32C14.4 0 0 14.4 0 32v192c0-35.2 28.8-64 64-64h384c35.2 0 64 28.8 64 64v-64c0-35.2-28.8-64-64-64zM448 224H64c-35.2 0-64 28.8-64 64v160c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64zM160 448H96V288h64v160zm128 0h-64V288h64v160zm128 0h-64V288h64v160z'/%3e%3c/svg%3e");
+$bg-icon-datatable: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 256C114.6 256 0 213 0 160v256c0 53 114.6 96 256 96s256-43 256-96V160c0 53-114.6 96-256 96zm192 31.5v128c-18.3 7.8-39.9 14.4-64 19.7v-128c24.1-5.3 45.7-11.9 64-19.7zm-320 19.7v128c-24.1-5.2-45.7-11.9-64-19.7v-128c18.3 7.8 39.9 14.4 64 19.7zM192 445V317c20.5 2 41.9 3 64 3s43.5-1.1 64-3v128c-20.5 2-41.9 3-64 3s-43.5-1.1-64-3z'/%3e%3cellipse fill='%23000000' cx='256' cy='96' rx='256' ry='96'/%3e%3c/svg%3e");
+$bg-icon-dictionary: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M416 320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96v160l-64-32-64 32V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96v-96c0 52.8-43.2 96-96 96H96v-96h320z'/%3e%3c/svg%3e");
+$bg-icon-folder: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 96H288l-54.6-54.6-18.7-18.7C202.2 10.2 177.6 0 160 0H32C14.4 0 0 14.4 0 32v192c0-35.2 28.8-64 64-64h384c35.2 0 64 28.8 64 64v-64c0-35.2-28.8-64-64-64zM448 224H64c-35.2 0-64 28.8-64 64v160c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64z'/%3e%3c/svg%3e");
+$bg-icon-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm0 448H64V64h384v384z'/%3e%3cpath fill='%23000000' d='M160 128l-64 64v224h320V256l-64-64-64 64z'/%3e%3c/svg%3e");
+$bg-icon-layout: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M224 0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h128V0zM416 0H288v288.832h224V96c0-52.8-43.2-96-96-96zM288 512h128c52.8 0 96-43.2 96-96v-64.832H288V512z'/%3e%3c/svg%3e");
+$bg-icon-object: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='none' d='M256 96L76.8 208 256 320l179.2-112z'/%3e%3cpath fill='%23000000' d='M256 512l256-160V160L255.99 0 0 160v192l256 160zm0-416l179.2 112L256 320 76.8 208 256 96z'/%3e%3c/svg%3e");
+$bg-icon-object-unknown: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M255-1L-1 159v192l256 160 256-160V159L255-1zm37.7 430.6c-10.6 10.4-23 15.4-38 15.4-15.6 0-28.1-4.9-38.1-14.8-10-10-14.8-22.4-14.8-38.1 0-15.2 5.1-27.6 15.5-38.1s22.6-15.6 37.4-15.6c14.8 0 27.1 5.2 37.8 16 10.7 10.8 15.9 23.2 15.9 38-.1 14.5-5.4 27-15.7 37.2zm26.4-156.3c-11.8 5.9-18.7 11-21.7 16.2-1.8 3.1-3 7.4-3.7 13.4v20.5H213v-22.1c0-20.1 2.2-34.9 6.5-44 4-8.6 11.3-15.1 22.4-20l17.4-7.7c16-7.1 24.1-17.6 24.1-31.4 0-8-3-15.2-8.6-20.9-5.6-5.6-12.8-8.6-20.8-8.6-12 0-27.2 5-31.4 28.7l-1.1 6.1H148l.7-8.1c2-22.3 8.5-41.2 19.4-56.1 9.8-13.5 22.8-24.3 38.5-32.3 15.7-8 32.3-12 49.1-12 30.3 0 55.1 9.7 75.7 29.8 20.6 20 30.6 44 30.6 73.6 0 35.4-14.4 60.7-42.9 74.9z'/%3e%3c/svg%3e");
+$bg-icon-packet: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='none' d='M256 96L76.8 208 256 320l179.2-112z'/%3e%3cpath fill='%23000000' d='M256 0L0 160v256c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V160L256 0zm0 96l179.2 112L256 320 76.8 208 256 96z'/%3e%3c/svg%3e");
+$bg-icon-page: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M352 256c-52.8 0-96-43.2-96-96V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V256H352z'/%3e%3cpath fill='%23000000' d='M384 192h128L320 0v128c0 35.2 28.8 64 64 64z'/%3e%3c/svg%3e");
+$bg-icon-plot-overlay: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M415 0H97C43.65 0 0 43.65 0 97v203.41c7.09 9.32 12.83 14.17 16 15.42 7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73C403.71 188.64 440.64 124 496 124a69.55 69.55 0 0 1 16 1.87V97c0-53.35-43.65-97-97-97z'/%3e%3cpath fill='%23000000' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73C108.29 323.36 71.36 388 16 388a69.56 69.56 0 0 1-16-1.87V415c0 53.35 43.65 97 97 97h318c53.35 0 97-43.65 97-97V211.59c-7.09-9.32-12.83-14.17-16-15.42z'/%3e%3c/svg%3e");
+$bg-icon-plot-stacked: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M44.8 156c12.49 0 24.48-13.26 42.76-35.09 22.71-27.14 51-60.91 98-60.91 22.32 0 43.31 7.73 62.4 23 14.34 11.45 25.58 25.21 36.46 38.53C303.63 145 314 156 326.4 156H512V97c0-53.35-43.65-97-97-97H97C43.65 0 0 43.65 0 97v59h44.8z'/%3e%3cpath fill='%23000000' d='M264.75 205.2c-14.12-11.32-25.26-25-36-38.14C211 145.32 199.37 132 185.6 132c-12.53 0-24.54 13.27-42.83 35.12-22.7 27.12-51 60.88-98 60.88H0v56h185.6c22 0 42.77 7.67 61.65 22.8 14.12 11.32 25.26 25 36 38.14C301 366.68 312.63 380 326.4 380c12.53 0 24.54-13.27 42.83-35.12 22.7-27.12 51-60.88 98-60.88H512v-56H326.4c-22.03 0-42.77-7.67-61.65-22.8z'/%3e%3cpath fill='%23000000' d='M467.2 356c-12.49 0-24.48 13.26-42.76 35.09-22.71 27.14-51 60.91-98 60.91-22.32 0-43.31-7.73-62.4-23-14.34-11.45-25.58-25.21-36.46-38.53C208.37 367 198 356 185.6 356H0v59c0 53.35 43.65 97 97 97h318c53.35 0 97-43.65 97-97v-59h-44.8z'/%3e%3c/svg%3e");
+$bg-icon-session: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M317.8 262.2c3.3 2.1 6.6 4.3 9.6 6.8l60.2 48.2c14.8 11.9 41.9 11.9 56.7 0l67.6-54c.1-2.4.1-4.7.1-7.1 0-26.1-3.9-51.2-11.1-74.9L423.5 243c-29.1 23.3-70.1 29.6-105.7 19.2zM124.3 317.1l60.2-48.2c29-23.2 70-29.6 105.6-19.2-3.3-2.1-6.6-4.3-9.6-6.8l-60.2-48.2c-14.8-11.9-41.9-11.9-56.7 0L103.5 243c-20 16-45.7 24-71.5 24-10.8 0-21.5-1.4-31.9-4.2v.8c2.5 1.7 5 3.4 7.3 5.3l60.2 48.2c14.9 11.9 41.9 11.9 56.7 0z'/%3e%3cpath fill='%23000000' d='M60.3 189.1l60.2-48.2c40.1-32.1 102.8-32.1 142.9 0l60.2 48.2c14.8 11.9 41.9 11.9 56.7 0l90.5-72.4C425.2 46.5 346 0 256 0 136.7 0 36.4 81.6 8 192.1c15.4 8.8 38.9 7.8 52.3-3zM344.5 371l-60.2-48.2c-14.8-11.9-41.9-11.9-56.7 0L167.5 371c-20 16-45.7 24-71.5 24-23.9 0-47.7-6.9-67.1-20.7C71.7 456.1 157.3 512 256 512s184.3-55.9 227.1-137.7c-40.2 28.7-99.9 27.6-138.6-3.3z'/%3e%3c/svg%3e");
+$bg-icon-tabular: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zM320 224H192v-96h128v96zm-128 32h128v96H192v-96zm-32 96H32v-96h128v96zm0-224v96H32v-96h128zM64 480c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h128v96H64zm128 0v-96h128v96H192zm288-32c0 8.5-3.3 16.5-9.4 22.6S456.5 480 448 480h-96v-96h128v64zm0-96H352v-96h128v96zm0-128H352v-96h128v96z'/%3e%3c/svg%3e");
+$bg-icon-tabular-lad: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM32 128h128v96H32v-96zm0 128h128v96H32v-96zm32 224c-17.6-.1-31.9-14.4-32-32v-64h128v96H64zm128 0v-96h128v96H192zm288-32c-.1 17.6-14.4 31.9-32 32h-96v-96h128v64zm0-192v96H192v-96h32v-32h-32v-96h288v96h-32v32h32z'/%3e%3cpath fill='%23000000' d='M391.2 273.7L336 246.1V160c0-8.8-7.2-16-16-16s-16 7.2-16 16v105.9l72.8 36.4c7.9 4 17.5.8 21.5-7.2 4-7.8.8-17.5-7.1-21.4z'/%3e%3c/svg%3e");
+$bg-icon-tabular-lad-set: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M64 384V96c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64H128c-35.3-.1-63.9-28.7-64-64z'/%3e%3cpath fill='%23000000' d='M448 0H160c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM128 96h96v64h-96V96zm0 96h96v96h-96v-96zm32 192c-17.6-.1-31.9-14.4-32-32v-32h96v64h-64zm96 0v-64h96v64h-96zm224-32c-.1 17.6-14.4 31.9-32 32h-64v-64h96v32zm0-64H256V96h224v192z'/%3e%3cpath fill='%23000000' d='M416 240c8.8 0 16-7.2 16-16 0-6.9-4.4-13-10.9-15.2L384 196.5V144c0-8.8-7.2-16-16-16s-16 7.2-16 16v75.5l58.9 19.6c1.7.6 3.4.9 5.1.9z'/%3e%3c/svg%3e");
+$bg-icon-tabular-realtime: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M0 64v384c0 35.2 28.8 64 64 64h288c35.2 0 64-28.8 64-64V340c-19.8 7.8-41.4 12-64 12-35.4 0-68.4-10.5-96-28.6V352h-96v-96h35.3c-5.2-10.1-9.4-20.8-12.6-32H160v-96h22.7C203.6 54.2 271.6 0 352 0H64C28.8 0 0 28.8 0 64zm288 320h96v64c0 8.5-3.3 16.5-9.4 22.6S360.5 480 352 480h-64v-96zm-160 96H64c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h96v96zm0-128H32v-96h96v96zm32 32h96v96h-96v-96zm-32-160H32v-96h96v96z'/%3e%3cpath fill='%23000000' d='M192 160c0 88.4 71.6 160 160 160s160-71.6 160-160S440.4 0 352 0 192 71.6 192 160zm49.7 39.8L227 187.5c-1.4-6.4-2.3-12.9-2.7-19.6 15.1-.1 30.1-5 41.9-14.8l39.6-33c7.5-6.2 21.1-6.2 28.6 0l39.6 33c2.8 2.3 5.7 4.3 8.8 6.1-23-11.7-52.7-9.2-72.8 7.5l-39.6 33c-7.6 6.3-21.2 6.3-28.7.1zM352 288c-36.7 0-69.7-15.4-93-40.1 14.2-.6 28.1-5.5 39.2-14.7l39.6-33c7.5-6.2 21.1-6.2 28.6 0l39.6 33c11 9.2 25 14.1 39.2 14.7-23.5 24.7-56.5 40.1-93.2 40.1zm125.9-151.3c1.4 7.5 2.1 15.3 2.1 23.3 0 9.4-1 18.6-3 27.5l-14.7 12.3c-7.5 6.2-21.1 6.2-28.6 0l-39.6-33c-2.8-2.3-5.7-4.3-8.8-6.1 23 11.7 52.7 9.2 72.8-7.5l19.8-16.5zM352 32c46.4 0 87.1 24.7 109.5 61.7l-31.2 26c-7.5 6.2-21.1 6.2-28.6 0l-39.6-33c-23.6-19.7-60.6-19.7-84.3 0l-39.6 33c-2.5 2.1-5.7 3.5-9.1 4.2C244.7 70.8 293.8 32 352 32z'/%3e%3c/svg%3e");
+$bg-icon-tabular-scrolling: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M32 0C14.4 0 0 14.4 0 32v96h224V0H32zM512 128V32c0-17.6-14.4-32-32-32H288v128h224zM0 192v96c0 17.6 14.4 32 32 32h192V192H0zM480 320c17.6 0 32-14.4 32-32v-96H288v128h192zM256 512L128 384h256z'/%3e%3c/svg%3e");
+$bg-icon-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M16 315.83c7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73 18.7-47.75 49.57-103.57 94.47-116.23A255.87 255.87 0 0 0 256 0C114.62 0 0 114.62 0 256a257.18 257.18 0 0 0 5 50.52c4.77 5.39 8.61 8.37 11 9.31z'/%3e%3cpath fill='%23000000' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73-18.7 47.75-49.57 103.57-94.47 116.23A255.87 255.87 0 0 0 256 512c141.38 0 256-114.62 256-256a257.18 257.18 0 0 0-5-50.52c-4.77-5.39-8.61-8.37-11-9.31z'/%3e%3c/svg%3e");
+$bg-icon-timeline: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M128 128h192v64H128zM192 224h192v64H192zM160 320h192v64H160z'/%3e%3cpath fill='%23000000' d='M416 0h-64v96h63.8c.1 0 .1.1.2.2v319.7c0 .1-.1.1-.2.2H352v96h64c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM96 415.8V96.2c0-.1.1-.1.2-.2H160V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h64v-96H96.2c-.1 0-.2-.1-.2-.2z'/%3e%3c/svg%3e");
+$bg-icon-timer: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M288 73.3V32.01a32 32 0 0 0-32-32h-64a32 32 0 0 0-32 32V73.3C67.48 100.84 0 186.54 0 288.01c0 123.71 100.29 224 224 224s224-100.29 224-224c0-101.48-67.5-187.2-160-214.71zm-54 224.71l-131.88 105.5A167.4 167.4 0 0 1 56 288.01c0-92.64 75.36-168 168-168 3.36 0 6.69.11 10 .31v177.69z'/%3e%3c/svg%3e");
+$bg-icon-topic: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M227.18 238.32l43.15-43.15a25.18 25.18 0 0 1 35.36 0l43.15 43.15a94.42 94.42 0 0 0 35.18 22.25V174.5l-28.82-28.82a95.11 95.11 0 0 0-134.35 0l-43.15 43.15a25.18 25.18 0 0 1-35.36 0L128 174.5v86.07a95.11 95.11 0 0 0 99.18-22.25z'/%3e%3cpath fill='%23000000' d='M252.82 273.68l-43.15 43.15a25.18 25.18 0 0 1-35.36 0l-43.15-43.15c-1-1-2.1-2-3.18-3v98.68a95.11 95.11 0 0 0 131.18-3l43.15-43.15a25.18 25.18 0 0 1 35.36 0l43.15 43.15c1 1 2.1 2 3.18 3v-98.68a95.11 95.11 0 0 0-131.18 3z'/%3e%3cpath fill='%23000000' d='M416 0h-64v96h63.83l.17.17v319.66l-.17.17H352v96h64c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM160 416H96.17l-.17-.17V96.17l.17-.17H160V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h64v-96z'/%3e%3c/svg%3e");
+$bg-icon-box-with-dashed-lines: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M0 192h64v128H0zM64 64.11l.11-.11H160V0H64A64.19 64.19 0 0 0 0 64v96h64V64.11zM64 447.89V352H0v96a64.19 64.19 0 0 0 64 64h96v-64H64.11zM192 0h128v64H192zM448 447.89l-.11.11H352v64h96a64.19 64.19 0 0 0 64-64v-96h-64v95.89zM448 0h-96v64h95.89l.11.11V160h64V64a64.19 64.19 0 0 0-64-64zM448 192h64v128h-64zM192 448h128v64H192zM128 128h256v256H128z'/%3e%3c/svg%3e");
+$bg-icon-summary-widget: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm-24.1 305.2l-41.3 71.6-94.8-65.8 9.6 115h-82.7l9.6-115-94.8 65.8-41.3-71.6L192.5 256 88.1 206.8l41.3-71.6 94.8 65.8-9.6-115h82.7l-9.6 115 94.8-65.8 41.3 71.6L319.5 256l104.4 49.2z'/%3e%3c/svg%3e");
+$bg-icon-notebook: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 55.4c0-39.9-27.7-63.7-61.5-52.7L0 128h448V55.4zM448 160H0v288c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64zm-32 256H224V256h192v160z'/%3e%3c/svg%3e");
\ No newline at end of file
diff --git a/src/styles-new/_global.scss b/src/styles-new/_global.scss
index 79e060df88..e939fb74a8 100644
--- a/src/styles-new/_global.scss
+++ b/src/styles-new/_global.scss
@@ -185,6 +185,26 @@ body.desktop .has-local-controls {
}
}
+/******************************************************** ICON BACKGROUNDS */
+// Used with elements that utilize an SVG background element where specific coloring is needed
+.u-icon-bg-color {
+ // Messages and notifications
+ &-info {
+ @include glyphBg($bg-icon-info);
+ filter: $colorStatusInfoFilter;
+ }
+
+ &-alert {
+ @include glyphBg($bg-icon-alert-rect);
+ filter: $colorStatusAlertFilter;
+ }
+
+ &-error {
+ @include glyphBg($bg-icon-alert-triangle);
+ filter: $colorStatusErrorFilter;
+ }
+}
+
//[class*="local-controls"] {
// // An explicit outer holder for controls. Typically placed in upper right.
// //font-size: 0.7rem;
diff --git a/src/styles-new/_glyphs.scss b/src/styles-new/_glyphs.scss
index 142e3be55f..33abd51bdf 100644
--- a/src/styles-new/_glyphs.scss
+++ b/src/styles-new/_glyphs.scss
@@ -20,34 +20,6 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
-@mixin glyphBefore($unicode, $family: 'symbolsfont') {
- &:before {
- content: $unicode;
- font-family: $family;
- }
-}
-
-@mixin glyphAfter($unicode, $family: 'symbolsfont') {
- &:after {
- content: $unicode;
- font-family: $family;
- }
-}
-
-@mixin glyphBg($glyphUrl) {
- background-image: $glyphUrl;
- background-position: center;
- background-size: contain;
- background-repeat: no-repeat;
-}
-
-[class*="icon-"] {
- &:before, &:after
- {
- -webkit-font-smoothing: antialiased;
- }
-}
-
/************************** 16 PX CLASSES */
.icon-alert-rect { @include glyphBefore($glyph-icon-alert-rect); }
.icon-alert-triangle { @include glyphBefore($glyph-icon-alert-triangle); }
@@ -171,6 +143,10 @@
.icon-grippy-12px { @include glyphBefore($glyph-icon-grippy,'symbolsfont-12px'); }
/************************** GLYPH BG CLASSES */
+.bg-icon-alert-rect { @include glyphBg($bg-icon-alert-rect); }
+.bg-icon-alert-triangle { @include glyphBg($bg-icon-alert-triangle); }
+.bg-icon-bell { @include glyphBg($bg-icon-bell); }
+.bg-icon-info { @include glyphBg($bg-icon-info); }
.bg-icon-activity { @include glyphBg($bg-icon-activity); }
.bg-icon-activity-mode { @include glyphBg($bg-icon-activity-mode); }
.bg-icon-autoflow-tabular { @include glyphBg($bg-icon-autoflow-tabular); }
diff --git a/src/styles-new/_mixins.scss b/src/styles-new/_mixins.scss
index 0902db2ca4..ff7097e31b 100644
--- a/src/styles-new/_mixins.scss
+++ b/src/styles-new/_mixins.scss
@@ -20,6 +20,35 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
+/************************** GLYPHS */
+@mixin glyphBefore($unicode, $family: 'symbolsfont') {
+ &:before {
+ content: $unicode;
+ font-family: $family;
+ }
+}
+
+@mixin glyphAfter($unicode, $family: 'symbolsfont') {
+ &:after {
+ content: $unicode;
+ font-family: $family;
+ }
+}
+
+@mixin glyphBg($glyphUrl) {
+ background-image: $glyphUrl;
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+}
+
+[class*="icon-"] {
+ &:before, &:after
+ {
+ -webkit-font-smoothing: antialiased;
+ }
+}
+
/************************** VISUALS */
@mixin ancillaryIcon($d, $c) {
// Used for small icons used in combination with larger icons,
@@ -290,7 +319,7 @@
*:before {
// *:before handles any nested containers that may contain glyph elements
// Needed for c-togglebutton.
- font-size: 1.2em;
+ font-size: 1.25em;
}
}
@@ -318,15 +347,6 @@
}
}
-
-
-
-
-
-
-
-
-
@mixin wrappedInput() {
// An input that is wrapped. Optionally includes a __label or icon element.
// Based on .c-search.
diff --git a/src/ui/components/layout/ProgressBar.vue b/src/ui/components/layout/ProgressBar.vue
new file mode 100644
index 0000000000..339cb17f5a
--- /dev/null
+++ b/src/ui/components/layout/ProgressBar.vue
@@ -0,0 +1,69 @@
+
+
+
+
+ {{model.progressPerc}}% complete.
+ {{model.progressText}}
+
+
+
+
+
+
+
diff --git a/src/ui/components/layout/status-bar/NotificationBanner.vue b/src/ui/components/layout/status-bar/NotificationBanner.vue
index 7d2c653880..daf7b5a3bf 100644
--- a/src/ui/components/layout/status-bar/NotificationBanner.vue
+++ b/src/ui/components/layout/status-bar/NotificationBanner.vue
@@ -17,49 +17,124 @@
at runtime from the About dialog for additional information.
-->
-
-
{{activeModel.message}}
-
-
-
-
-
-
-
-
- {{activeModel.progressPerc}}% complete.
- {{activeModel.progressText}}
-
-
-
-
+ @click="maximize()"
+ v-if="activeModel.message">
+
{{activeModel.message}}
+
+
+
diff --git a/src/ui/overlayService/overlayService.js b/src/ui/overlayService/overlayService.js
deleted file mode 100644
index dfea579145..0000000000
--- a/src/ui/overlayService/overlayService.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-define([
- './overlay.vue',
- 'vue'
-], function (
- OverlayComponent,
- Vue
-) {
-
- function OverlayService() {
- this.activeOverlays = [];
- this.overlayId = 0;
- }
-
- OverlayService.prototype.show = function (element, options) {
- if(this.activeOverlays.length) {
- this.activeOverlays[this.activeOverlays.length - 1].overlay.classList.add('invisible');
- }
-
- let overlayTypeCssClass = options.cssClass, // Values could be l-large-view, l-dialog, l-message
- overlay = document.createElement('div'),
- component = new Vue({
- provide: {
- destroy: this.destroy.bind(this),
- element: element
- },
- components: {
- OverlayComponent: OverlayComponent.default
- },
- template: ' '
- });
-
- overlay.classList.add('l-overlay-wrapper', overlayTypeCssClass);
- document.body.appendChild(overlay);
-
- overlay.appendChild(component.$mount().$el);
-
- this.activeOverlays.push({
- overlay: overlay,
- component: component,
- onDestroy: options.onDestroy,
- id: this.overlayId
- });
-
- this.overlayId++;
- };
-
- OverlayService.prototype.destroy = function () {
- var lastActiveOverlayObject = this.activeOverlays.pop(),
- lastActiveOverlay = lastActiveOverlayObject.overlay,
- lastActiveComponent = lastActiveOverlayObject.component;
-
- if (lastActiveOverlayObject.onDestroy && typeof lastActiveOverlayObject.onDestroy === 'function') {
- lastActiveOverlayObject.onDestroy();
- }
-
- lastActiveComponent.$destroy(true);
- document.body.removeChild(lastActiveOverlay);
-
- if (this.activeOverlays.length) {
- this.activeOverlays[this.activeOverlays.length - 1].overlay.classList.remove('invisible');
- }
- };
-
- return OverlayService;
-});