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 @@ + + + + + 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 @@ + + + + + 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 @@ -
-
-
- -
-
-
-
-
-
-
-
- OK - Cancel -
-
-
-
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 @@ + + + + + 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. --> 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; -});