mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 09:26:45 +00:00
Overlay Service - rewritten/redesigned in Vue (#2190)
* modify overlay service to accept bottomBarButtons option, working annotate on snapshot view * working blocking message * move blocking message to overlay service * return dismiss function on show * added jsdocs for overlayService * added progress bar, with setter and getter functions * make reviewer requested changes * re-overhaul of overlayAPI * Integrate work in dialog-service-vue-style - Markup in DialogComponent and OverlayComponent now up to date; - Colors, constants; - Notebook entry now passes correct buttons config; - New bg data URIs added; - u-icon-bg-* classes added to global.scss; * Added deprecation comments to .vue files * Removed styles from deprecated file * Temp restore of CSS so that dialog doesn't break. * remove old OverlayService * Fixed to overlay CSS - Fixed large, small, fit sizes; - Added margin to overlay buttons; - Code cleanup; * Remove unused constants * Tweak styles for __close-button * Code cleanup * small cleanup * wip progressDialog * Progress bar fixed and Vue-ized - Markup, styles; - Constants moved from theme files into _constants.scss; * added jsdocs to new Overlay API * remove unused example function * use progressBar.vue in NotificationBanner.vue, wire up the maximize method with progressDialog and Dialog from OverlayAPI * Styling in progress for status message banners * openmct members are camelCase * Remove unimplemented/unused apis
This commit is contained in:
Deep Tailor
Pete Richards
parent
6f1b5b4ae3
commit
67883519ee
17
src/MCT.js
17
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());
|
||||
|
||||
@ -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,
|
||||
|
||||
33
src/api/overlays/Dialog.js
Normal file
33
src/api/overlays/Dialog.js
Normal file
@ -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: '<dialog-component></dialog-component>'
|
||||
}).$mount();
|
||||
|
||||
super({
|
||||
element: component.$el,
|
||||
size: 'fit',
|
||||
notDismissable: true,
|
||||
...options
|
||||
});
|
||||
|
||||
this.once('destroy', () => {
|
||||
component.$destroy();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default Dialog;
|
||||
51
src/api/overlays/Overlay.js
Normal file
51
src/api/overlays/Overlay.js
Normal file
@ -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: '<overlay-component></overlay-component>'
|
||||
});
|
||||
|
||||
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;
|
||||
115
src/api/overlays/OverlayAPI.js
Normal file
115
src/api/overlays/OverlayAPI.js
Normal file
@ -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;
|
||||
43
src/api/overlays/ProgressDialog.js
Normal file
43
src/api/overlays/ProgressDialog.js
Normal file
@ -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: '<progress-component :model="model"></progress-component>'
|
||||
}).$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;
|
||||
71
src/api/overlays/components/DialogComponent.vue
Normal file
71
src/api/overlays/components/DialogComponent.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="c-message">
|
||||
<!--Uses flex-row -->
|
||||
<div class="c-message__icon"
|
||||
:class="['u-icon-bg-color-' + iconClass]"></div>
|
||||
<div class="c-message__text">
|
||||
<!-- Uses flex-column -->
|
||||
<div class="c-message__title"
|
||||
v-if="title">
|
||||
{{title}}
|
||||
</div>
|
||||
|
||||
<div class="c-message__hint"
|
||||
v-if="hint">
|
||||
{{hint}}
|
||||
<span v-if="timestamp">[{{timestamp}}]</span>
|
||||
</div>
|
||||
|
||||
<div class="c-message__action-text"
|
||||
v-if="message">
|
||||
{{message}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
.c-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $interiorMarginLg;
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMarginLg;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
// Holds a background SVG graphic
|
||||
$s: 50px;
|
||||
flex: 0 0 auto;
|
||||
min-width: $s;
|
||||
min-height: $s;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
|
||||
> * + * {
|
||||
@include test();
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
// __text elements
|
||||
&__title,
|
||||
&__action-text {
|
||||
font-size: 1.2em; // TEMP
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject:['iconClass', 'title', 'hint', 'timestamp', 'message']
|
||||
}
|
||||
</script>
|
||||
148
src/api/overlays/components/OverlayComponent.vue
Normal file
148
src/api/overlays/components/OverlayComponent.vue
Normal file
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="c-overlay">
|
||||
<div class="c-overlay__blocker"
|
||||
@click="destroy">
|
||||
</div>
|
||||
<div class="c-overlay__outer">
|
||||
<button class="c-click-icon c-overlay__close-button icon-x-in-circle"
|
||||
v-if="!notDismissable"
|
||||
@click="destroy">
|
||||
</button>
|
||||
<div class="c-overlay__contents" ref="element"></div>
|
||||
<div class="c-overlay__button-bar" v-if="buttons">
|
||||
<button class="c-button"
|
||||
v-for="(button, index) in buttons"
|
||||
:key="index"
|
||||
:class="{'c-button--major': button.emphasis}"
|
||||
@click="buttonClickHandler(button.callback)">
|
||||
{{button.label}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
@mixin overlaySizing($marginTB: 5%, $marginLR: $marginTB, $width: auto, $height: auto) {
|
||||
position: absolute;
|
||||
top: $marginTB; right: $marginLR; bottom: $marginTB; left: $marginLR;
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
.l-overlay-wrapper {
|
||||
// Created by overlayService.js, contains this template.
|
||||
// Acts as an anchor for one or more overlays.
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.c-overlay {
|
||||
@include abs();
|
||||
z-index: 100;
|
||||
|
||||
&__blocker {
|
||||
display: none; // Mobile-first
|
||||
}
|
||||
|
||||
&__outer {
|
||||
@include abs();
|
||||
background: $overlayColorBg;
|
||||
color: $overlayColorFg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $overlayInnerMargin;
|
||||
}
|
||||
|
||||
&__close-button {
|
||||
$p: $interiorMarginSm;
|
||||
border-radius: 100% !important;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: $p; right: $p;
|
||||
}
|
||||
|
||||
&__contents {
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&__button-bar {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: $interiorMargin;
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.c-button,
|
||||
.c-click-icon {
|
||||
filter: $overlayBrightnessAdjust;
|
||||
}
|
||||
}
|
||||
|
||||
body.desktop {
|
||||
.c-overlay {
|
||||
&__blocker {
|
||||
@include abs();
|
||||
background: rgba(black, 0.7);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__outer {
|
||||
border-radius: $overlayCr;
|
||||
box-shadow: rgba(black, 0.5) 0 2px 25px;
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
|
||||
.l-overlay-large {
|
||||
// Default
|
||||
.c-overlay__outer {
|
||||
@include overlaySizing($overlayOuterMarginLg);
|
||||
}
|
||||
}
|
||||
|
||||
.l-overlay-small {
|
||||
.c-overlay__outer {
|
||||
@include overlaySizing($overlayOuterMarginDialog);
|
||||
}
|
||||
}
|
||||
|
||||
.l-overlay-fit {
|
||||
.c-overlay__outer {
|
||||
@include overlaySizing(auto);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
min-width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: ['dismiss', 'element', 'buttons', 'notDismissable'],
|
||||
mounted() {
|
||||
this.$refs.element.appendChild(this.element);
|
||||
},
|
||||
methods: {
|
||||
destroy: function () {
|
||||
if (!this.notDismissable) {
|
||||
this.dismiss();
|
||||
}
|
||||
},
|
||||
buttonClickHandler: function (method) {
|
||||
method();
|
||||
this.destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -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;
|
||||
});
|
||||
@ -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;
|
||||
});
|
||||
@ -1,18 +0,0 @@
|
||||
<div class="abs overlay l-dialog">
|
||||
<div class="abs blocker"></div>
|
||||
<div class="abs outer-holder">
|
||||
<a class="close icon-x-in-circle"></a>
|
||||
<div class="abs inner-holder contents">
|
||||
<div class="abs top-bar">
|
||||
<div class="dialog-title"></div>
|
||||
<div class="hint"></div>
|
||||
</div>
|
||||
<div class='abs editor'>
|
||||
</div>
|
||||
<div class="abs bottom-bar">
|
||||
<a class='s-button major'>OK</a>
|
||||
<a class='s-button'>Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="c-ne__embed">
|
||||
<div class="c-ne__embed__snap-thumb"
|
||||
v-if="embed.snapshot"
|
||||
v-on:click="openSnapshot">
|
||||
v-on:click="openSnapshot(domainObject, entry, embed)">
|
||||
<img v-bind:src="embed.snapshot.src">
|
||||
</div>
|
||||
<div class="c-ne__embed__info">
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<div class="flex-elem holder flex-can-shrink s-snapshot-datetime">
|
||||
SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
|
||||
</div>
|
||||
<a class="s-button icon-pencil" title="Annotate">
|
||||
<a class="s-button icon-pencil" title="Annotate" @click="annotateSnapshot">
|
||||
<span class="title-label">Annotate</span>
|
||||
</a>
|
||||
</div>
|
||||
@ -23,7 +23,7 @@
|
||||
<div class="abs object-holder t-image-holder s-image-holder">
|
||||
<div
|
||||
class="image-main s-image-main"
|
||||
v-bind:style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }">
|
||||
:style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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: '<div id="snap-annotation"></div>'
|
||||
}),
|
||||
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
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}]
|
||||
]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 */
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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");
|
||||
@ -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;
|
||||
|
||||
@ -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); }
|
||||
|
||||
@ -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.
|
||||
|
||||
69
src/ui/components/layout/ProgressBar.vue
Normal file
69
src/ui/components/layout/ProgressBar.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="c-progress-bar">
|
||||
<div class="c-progress-bar__holder">
|
||||
<div class="c-progress-bar__bar"
|
||||
:class="{'--indeterminate': model.progressPerc === 'unknown' }"
|
||||
:style="`width: ${model.progressPerc}%;`">
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-progress-bar__text"
|
||||
v-if="model.progressText !== undefined">
|
||||
<span v-if="model.progressPerc > 0">{{model.progressPerc}}% complete. </span>
|
||||
{{model.progressText}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
/******************************************************** PROGRESS BAR */
|
||||
@keyframes progress {
|
||||
100% { background-position: $progressAnimW center; }
|
||||
}
|
||||
|
||||
@mixin progressAnim($c1, $c2, $size) {
|
||||
$edge: 20%;
|
||||
background-image: linear-gradient(-90deg,
|
||||
$c1 0%, $c2 $edge,
|
||||
$c2 $edge, $c1 100%
|
||||
);
|
||||
background-position: 0 center;
|
||||
background-repeat: repeat-x;
|
||||
background-size: $size 100%;
|
||||
}
|
||||
|
||||
.c-progress-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
> * + * {
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
|
||||
&__holder {
|
||||
background: $colorProgressBarHolder;
|
||||
box-shadow: inset rgba(black, 0.4) 0 0.25px 3px;
|
||||
flex: 1 1 auto;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
&__bar {
|
||||
@include progressAnim($colorProgressBar, lighten($colorProgressBar, 10%), $progressAnimW);
|
||||
animation: progress 1000ms linear infinite;
|
||||
min-height: $progressBarMinH;
|
||||
height: 100%;
|
||||
|
||||
&.--indeterminate {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:['model']
|
||||
}
|
||||
</script>
|
||||
@ -17,49 +17,124 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<template>
|
||||
<div class="l-message-banner s-message-banner"
|
||||
<div class="c-message-banner s-message-banner"
|
||||
:class="[
|
||||
activeModel.severity,
|
||||
{
|
||||
'minimized': activeModel.minimized,
|
||||
'new': !activeModel.minimized
|
||||
}]"
|
||||
v-if="activeModel.message">
|
||||
<span @click="maximize()" class="banner-elem label">{{activeModel.message}}</span>
|
||||
<span @click="maximize()" v-if="activeModel.progressPerc !== undefined">
|
||||
<div class="banner-elem"><!-- was mct-include -->
|
||||
<span class="l-progress-bar s-progress-bar"
|
||||
:class="{'indeterminate': activeModel.progressPerc === 'unknown' }">
|
||||
<span class="progress-amt-holder">
|
||||
<span class="progress-amt" :style="progressWidth"></span>
|
||||
</span>
|
||||
</span>
|
||||
<div class="progress-info hint" v-if="activeModel.progressText !== undefined">
|
||||
<span class="progress-amt-text" v-if="activeModel.progressPerc > 0">{{activeModel.progressPerc}}% complete. </span>
|
||||
{{activeModel.progressText}}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<a class="close icon-x" @click="dismiss()"></a>
|
||||
@click="maximize()"
|
||||
v-if="activeModel.message">
|
||||
<span class="c-message-banner__message">{{activeModel.message}}</span>
|
||||
<progress-bar
|
||||
class="c-message-banner__progress-bar"
|
||||
v-if="activeModel.progressPerc !== undefined" :model="activeModel">
|
||||
</progress-bar>
|
||||
<button class="c-message-banner__close-btn c-click-icon icon-x"
|
||||
@click="dismiss()"></button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
.c-message-banner {
|
||||
$closeBtnSize: 7px;
|
||||
$m: 1px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 50%;
|
||||
max-width: 50%;
|
||||
padding: $interiorMargin $interiorMarginLg;
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
bottom: $m;
|
||||
z-index: 2;
|
||||
|
||||
// TODOs:
|
||||
// - Styling for message types, add color values to theme scss files
|
||||
// - Factor out s-message-banner
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
|
||||
&__message {
|
||||
@include ellipsize();
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__progress-bar {
|
||||
flex: 0 0 auto;
|
||||
width: 70px;
|
||||
|
||||
// Only show the progress bar
|
||||
.c-progress-bar {
|
||||
&__text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__close-btn {
|
||||
font-size: $closeBtnSize;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
.l-message-banner {
|
||||
display: inline;
|
||||
display: flex;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
.banner-elem {
|
||||
display: inline;
|
||||
}
|
||||
}*/
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import ProgressBar from '../ProgressBar.vue';
|
||||
let activeNotification = undefined;
|
||||
let dialogService = undefined;
|
||||
let maximizedDialog = undefined;
|
||||
let minimizeButton = {
|
||||
label: 'Dismiss',
|
||||
callback: dismissMaximizedDialog
|
||||
}
|
||||
|
||||
function dismissMaximizedDialog() {
|
||||
if (maximizedDialog) {
|
||||
maximizedDialog.dismiss();
|
||||
maximizedDialog = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function updateMaxProgressBar(progressPerc, progressText) {
|
||||
if (maximizedDialog) {
|
||||
maximizedDialog.updateProgress(progressPerc, progressText);
|
||||
|
||||
if (progressPerc >= 100) {
|
||||
dismissMaximizedDialog();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
inject: ['openmct'],
|
||||
components: {
|
||||
ProgressBar: ProgressBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeModel: {
|
||||
@ -115,9 +190,29 @@
|
||||
activeNotification.off('progress', this.updateProgress);
|
||||
activeNotification.off('minimized', this.minimized);
|
||||
activeNotification.off('destroy', this.destroyActiveNotification);
|
||||
|
||||
activeNotification.off('progress', updateMaxProgressBar);
|
||||
activeNotification.off('minimized', dismissMaximizedDialog);
|
||||
activeNotification.off('destroy', dismissMaximizedDialog);
|
||||
},
|
||||
maximize() {
|
||||
//Not implemented yet.
|
||||
if (this.activeModel.progressPerc !== undefined) {
|
||||
maximizedDialog = this.openmct.overlays.progressDialog({
|
||||
buttons: [minimizeButton],
|
||||
...this.activeModel
|
||||
});
|
||||
|
||||
activeNotification.on('progress', updateMaxProgressBar);
|
||||
activeNotification.on('minimized', dismissMaximizedDialog);
|
||||
activeNotification.on('destroy', dismissMaximizedDialog);
|
||||
|
||||
} else {
|
||||
maximizedDialog = this.openmct.overlays.dialog({
|
||||
iconClass: this.activeModel.severity,
|
||||
buttons: [minimizeButton],
|
||||
...this.activeModel
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<div class="c-overlay">
|
||||
<div class="c-overlay__blocker"
|
||||
v-on:click="destroy">
|
||||
</div>
|
||||
<div class="c-overlay__outer">
|
||||
<button class="c-click-icon c-overlay__close-button icon-x-in-circle"
|
||||
v-on:click="destroy">
|
||||
</button>
|
||||
<div class="c-overlay__contents" ref="element"></div>
|
||||
<div class="c-overlay__button-bar">
|
||||
<button class="c-button c-button--major"
|
||||
v-on:click="destroy">Done</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
.l-overlay-wrapper {
|
||||
// Created by overlayService.js, contains this template.
|
||||
// Acts as an anchor for one or more overlays.
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.c-overlay {
|
||||
@include abs();
|
||||
z-index: 100;
|
||||
|
||||
&__blocker {
|
||||
display: none; // Mobile-first
|
||||
}
|
||||
|
||||
&__outer {
|
||||
@include abs();
|
||||
background: $overlayColorBg;
|
||||
color: $overlayColorFg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $overlayInnerMargin;
|
||||
}
|
||||
|
||||
&__close-button {
|
||||
$p: $interiorMarginSm;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: $p; right: $p;
|
||||
}
|
||||
|
||||
&__contents {
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&__button-bar {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
|
||||
body.desktop & {
|
||||
&__blocker {
|
||||
@include abs();
|
||||
background: rgba(black, 0.7);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__outer {
|
||||
$m: $overlayOuterMargin;
|
||||
top: $m; right: $m; bottom: $m; left: $m;
|
||||
border-radius: $overlayCr;
|
||||
box-shadow: rgba(black, 0.5) 0 2px 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: ['destroy', 'element'],
|
||||
mounted() {
|
||||
this.$refs.element.appendChild(this.element);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -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-component></overlay-component>'
|
||||
});
|
||||
|
||||
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;
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user