mirror of
https://github.com/nasa/openmct.git
synced 2024-12-23 15:02:23 +00:00
Merge branch 'master' into f#2594
This commit is contained in:
Nikhil
GitHub
commit
b0edb19239
@ -1,90 +1,68 @@
|
||||
<template>
|
||||
<multipane class="c-imagery-layout"
|
||||
type="vertical"
|
||||
>
|
||||
<pane :style="{'min-height': `300px`}">
|
||||
<div class="main-image-wrapper c-imagery has-local-controls">
|
||||
<div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
|
||||
<span class="holder flex-elem grows c-imagery__lc__sliders">
|
||||
<input v-model="filters.brightness"
|
||||
class="icon-brightness"
|
||||
type="range"
|
||||
min="0"
|
||||
max="500"
|
||||
>
|
||||
<input v-model="filters.contrast"
|
||||
class="icon-contrast"
|
||||
type="range"
|
||||
min="0"
|
||||
max="500"
|
||||
>
|
||||
</span>
|
||||
<span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
|
||||
<a class="s-icon-button icon-reset t-btn-reset"
|
||||
@click="filters={brightness: 100, contrast: 100}"
|
||||
></a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="main-image s-image-main"
|
||||
:class="{'paused unnsynced': paused(),'stale':false }"
|
||||
:style="{'background-image': `url(${getImageUrl()})`,
|
||||
'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`}"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="l-image-controller flex-elem l-flex-row">
|
||||
<div class="l-datetime-w flex-elem grows">
|
||||
<a class="c-button show-thumbs sm hidden icon-thumbs-strip"></a>
|
||||
<span class="l-time">{{ getTime() }}</span>
|
||||
</div>
|
||||
<div class="h-local-controls flex-elem">
|
||||
<a class="c-button icon-pause pause-play"
|
||||
:class="{'is-paused': paused()}"
|
||||
@click="paused(!paused())"
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pane>
|
||||
|
||||
<pane class="c-inspector__elements"
|
||||
handle="before"
|
||||
:style="{'min-height': `100px`}"
|
||||
>
|
||||
<div class="c-elements-pool">
|
||||
<div ref="thumbsWrapper"
|
||||
class="thumbs-layout"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<div v-for="(imageData, index) in imageHistory"
|
||||
:key="index"
|
||||
class="l-image-thumb-item"
|
||||
:class="{selected: imageData.selected}"
|
||||
@click="setSelectedImage(imageData)"
|
||||
<div class="c-imagery">
|
||||
<div class="c-imagery__main-image-wrapper has-local-controls">
|
||||
<div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
|
||||
<span class="holder flex-elem grows c-imagery__lc__sliders">
|
||||
<input v-model="filters.brightness"
|
||||
class="icon-brightness"
|
||||
type="range"
|
||||
min="0"
|
||||
max="500"
|
||||
>
|
||||
<img class="l-thumb"
|
||||
:src="getImageUrl(imageData)"
|
||||
>
|
||||
<div class="l-time">{{ getTime(imageData) }}</div>
|
||||
</div>
|
||||
<input v-model="filters.contrast"
|
||||
class="icon-contrast"
|
||||
type="range"
|
||||
min="0"
|
||||
max="500"
|
||||
>
|
||||
</span>
|
||||
<span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
|
||||
<a class="s-icon-button icon-reset t-btn-reset"
|
||||
@click="filters={brightness: 100, contrast: 100}"
|
||||
></a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="main-image s-image-main c-imagery__main-image"
|
||||
:class="{'paused unnsynced': paused(),'stale':false }"
|
||||
:style="{'background-image': `url(${getImageUrl()})`,
|
||||
'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`}"
|
||||
>
|
||||
</div>
|
||||
<div class="c-imagery__control-bar">
|
||||
<div class="c-imagery__timestamp">{{ getTime() }}</div>
|
||||
<div class="h-local-controls flex-elem">
|
||||
<a class="c-button icon-pause pause-play"
|
||||
:class="{'is-paused': paused()}"
|
||||
@click="paused(!paused())"
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</pane>
|
||||
</multipane>
|
||||
</div>
|
||||
<div ref="thumbsWrapper"
|
||||
class="c-imagery__thumbs-wrapper"
|
||||
:class="{'is-paused': paused()}"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<div v-for="(imageData, index) in imageHistory"
|
||||
:key="index"
|
||||
class="c-imagery__thumb c-thumb"
|
||||
:class="{selected: imageData.selected}"
|
||||
@click="setSelectedImage(imageData)"
|
||||
>
|
||||
<img class="c-thumb__image"
|
||||
:src="getImageUrl(imageData)"
|
||||
>
|
||||
<div class="c-thumb__timestamp">{{ getTime(imageData) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import multipane from '@/ui/layout/multipane.vue';
|
||||
import pane from '@/ui/layout/pane.vue';
|
||||
import _ from 'lodash';
|
||||
|
||||
export default {
|
||||
inject: ['openmct', 'domainObject'],
|
||||
components: {
|
||||
multipane,
|
||||
pane
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
autoScroll: true,
|
||||
@ -109,7 +87,7 @@ export default {
|
||||
this.subscribe(this.domainObject);
|
||||
},
|
||||
updated() {
|
||||
this.scrollToBottom();
|
||||
this.scrollToRight();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.stopListening();
|
||||
@ -152,6 +130,10 @@ export default {
|
||||
if (arguments.length > 0 && state !== this.isPaused) {
|
||||
this.unselectAllImages();
|
||||
this.isPaused = state;
|
||||
if (state === true) {
|
||||
// If we are pausing, select the latest image in imageHistory
|
||||
this.setSelectedImage(this.imageHistory[this.imageHistory.length - 1]);
|
||||
}
|
||||
|
||||
if (this.nextDatum) {
|
||||
this.updateValues(this.nextDatum);
|
||||
@ -180,24 +162,31 @@ export default {
|
||||
this.updateValues(values[values.length - 1]);
|
||||
});
|
||||
},
|
||||
scrollToBottom() {
|
||||
scrollToRight() {
|
||||
if (this.isPaused || !this.$refs.thumbsWrapper || !this.autoScroll) {
|
||||
return;
|
||||
}
|
||||
|
||||
const scrollHeight = this.$refs.thumbsWrapper.scrollHeight || 0;
|
||||
if (!scrollHeight) {
|
||||
const scrollWidth = this.$refs.thumbsWrapper.scrollWidth || 0;
|
||||
if (!scrollWidth) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(() => this.$refs.thumbsWrapper.scrollTop = scrollHeight, 0);
|
||||
setTimeout(() => this.$refs.thumbsWrapper.scrollLeft = scrollWidth, 0);
|
||||
},
|
||||
setSelectedImage(image) {
|
||||
this.imageUrl = this.getImageUrl(image);
|
||||
this.time = this.getTime(image);
|
||||
this.paused(true);
|
||||
this.unselectAllImages();
|
||||
image.selected = true;
|
||||
// If we are paused and the current image IS selected, unpause
|
||||
// Otherwise, set current image and pause
|
||||
if (this.isPaused && image.selected) {
|
||||
this.paused(false);
|
||||
this.unselectAllImages();
|
||||
} else {
|
||||
this.imageUrl = this.getImageUrl(image);
|
||||
this.time = this.getTime(image);
|
||||
this.paused(true);
|
||||
this.unselectAllImages();
|
||||
image.selected = true;
|
||||
}
|
||||
},
|
||||
stopListening() {
|
||||
if (this.unsubscribe) {
|
||||
|
||||
@ -1,16 +1,20 @@
|
||||
.c-imagery-layout {
|
||||
.c-imagery {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
|
||||
.main-image-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding-bottom: 5px;
|
||||
> * + * {
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
|
||||
.main-image {
|
||||
&__main-image-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
@ -21,12 +25,137 @@
|
||||
}
|
||||
}
|
||||
|
||||
.l-image-controller {
|
||||
&__control-bar {
|
||||
padding: 5px 0 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.thumbs-layout {
|
||||
margin-top: 5px;
|
||||
overflow: auto;
|
||||
&__timestamp {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__thumbs-wrapper {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 135px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
&.is-paused {
|
||||
background: rgba($colorPausedBg, 0.4);
|
||||
}
|
||||
|
||||
.c-thumb:last-child {
|
||||
// Hilite the lastest thumb
|
||||
background: $colorBodyFg;
|
||||
color: $colorBodyBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************** THUMBS */
|
||||
.c-thumb {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px;
|
||||
width: $imageThumbsD;
|
||||
|
||||
&:hover {
|
||||
background: $colorThumbHoverBg;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $colorPausedBg !important;
|
||||
color: $colorPausedFg !important;
|
||||
}
|
||||
|
||||
&__image {
|
||||
background-color: rgba($colorBodyFg, 0.2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__timestamp {
|
||||
flex: 0 0 auto;
|
||||
padding: 2px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.l-layout,
|
||||
.c-fl {
|
||||
.c-imagery__thumbs-wrapper {
|
||||
// When Imagery is in a layout, hide the thumbs area
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.s-image-main {
|
||||
background-color: $colorPlotBg;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/*************************************** IMAGERY LOCAL CONTROLS*/
|
||||
.c-imagery {
|
||||
.h-local-controls--overlay-content {
|
||||
position: absolute;
|
||||
right: $interiorMargin; top: $interiorMargin;
|
||||
z-index: 2;
|
||||
background: $colorLocalControlOvrBg;
|
||||
border-radius: $basicCr;
|
||||
max-width: 200px;
|
||||
min-width: 100px;
|
||||
width: 35%;
|
||||
align-items: center;
|
||||
padding: $interiorMargin $interiorMarginLg;
|
||||
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
&:not(:first-child) {
|
||||
margin-top: $interiorMarginLg;
|
||||
}
|
||||
|
||||
&:before {
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__lc {
|
||||
&__reset-btn {
|
||||
$bc: $scrollbarTrackColorBg;
|
||||
&:before,
|
||||
&:after {
|
||||
border-right: 1px solid $bc;
|
||||
content:'';
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top: 1px solid $bc;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom: 1px solid $bc;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************** BUTTONS */
|
||||
.c-button.pause-play {
|
||||
// Pause icon set by default in markup
|
||||
&.is-paused {
|
||||
background: $colorPausedBg !important;
|
||||
color: $colorPausedFg;
|
||||
|
||||
&:before {
|
||||
content: $glyph-icon-play;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -377,7 +377,7 @@ define([
|
||||
* @public
|
||||
*/
|
||||
updateFiltersAndRefresh: function (updatedFilters) {
|
||||
if (this.filters) {
|
||||
if (this.filters && !_.isEqual(this.filters, updatedFilters)) {
|
||||
this.filters = updatedFilters;
|
||||
this.reset();
|
||||
if (this.unsubscribe) {
|
||||
|
||||
@ -47,6 +47,7 @@ define([
|
||||
this.subscriptions = {};
|
||||
this.tableComposition = undefined;
|
||||
this.telemetryObjects = [];
|
||||
this.datumCache = [];
|
||||
this.outstandingRequests = 0;
|
||||
this.configuration = new TelemetryTableConfiguration(domainObject, openmct);
|
||||
this.paused = false;
|
||||
@ -155,6 +156,7 @@ define([
|
||||
processHistoricalData(telemetryData, columnMap, keyString, limitEvaluator) {
|
||||
let telemetryRows = telemetryData.map(datum => new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
|
||||
this.boundedRows.add(telemetryRows);
|
||||
this.emit('historical-rows-processed');
|
||||
}
|
||||
|
||||
/**
|
||||
@ -227,12 +229,28 @@ define([
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.paused) {
|
||||
if (this.paused) {
|
||||
let realtimeDatum = {
|
||||
datum,
|
||||
columnMap,
|
||||
keyString,
|
||||
limitEvaluator
|
||||
};
|
||||
|
||||
this.datumCache.push(realtimeDatum);
|
||||
} else {
|
||||
this.processRealtimeDatum(datum, columnMap, keyString, limitEvaluator);
|
||||
}
|
||||
}, subscribeOptions);
|
||||
}
|
||||
|
||||
processDatumCache() {
|
||||
this.datumCache.forEach(cachedDatum => {
|
||||
this.processRealtimeDatum(cachedDatum.datum, cachedDatum.columnMap, cachedDatum.keyString, cachedDatum.limitEvaluator);
|
||||
});
|
||||
this.datumCache = [];
|
||||
}
|
||||
|
||||
processRealtimeDatum(datum, columnMap, keyString, limitEvaluator) {
|
||||
this.boundedRows.add(new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
|
||||
}
|
||||
@ -272,8 +290,8 @@ define([
|
||||
|
||||
unpause() {
|
||||
this.paused = false;
|
||||
this.processDatumCache();
|
||||
this.boundedRows.subscribeToBounds();
|
||||
this.refreshData();
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
@ -68,7 +68,7 @@ define([
|
||||
table,
|
||||
objectPath
|
||||
},
|
||||
template: '<table-component :isEditing="isEditing" :enableMarking="true"></table-component>'
|
||||
template: '<table-component :isEditing="isEditing" :marking="{enable: true}"/>'
|
||||
});
|
||||
},
|
||||
onEditModeChange(editMode) {
|
||||
@ -86,7 +86,7 @@ define([
|
||||
priority() {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
return TelemetryTableViewProvider;
|
||||
});
|
||||
|
||||
@ -21,7 +21,10 @@
|
||||
*****************************************************************************/
|
||||
<template>
|
||||
<div class="c-table-wrapper">
|
||||
<div class="c-table-control-bar c-control-bar">
|
||||
<!-- main contolbar start-->
|
||||
<div v-if="!marking.useAlternateControlBar"
|
||||
class="c-table-control-bar c-control-bar"
|
||||
>
|
||||
<button
|
||||
v-if="allowExport"
|
||||
class="c-button icon-download labeled"
|
||||
@ -48,11 +51,11 @@
|
||||
<span class="c-button__label">Unmark All Rows</span>
|
||||
</button>
|
||||
<div
|
||||
v-if="enableMarking"
|
||||
v-if="marking.enable"
|
||||
class="c-separator"
|
||||
></div>
|
||||
<button
|
||||
v-if="enableMarking"
|
||||
v-if="marking.enable"
|
||||
class="c-button icon-pause pause-play labeled"
|
||||
:class=" paused ? 'icon-play is-paused' : 'icon-pause'"
|
||||
:title="paused ? 'Continue Data Flow' : 'Pause Data Flow'"
|
||||
@ -62,8 +65,37 @@
|
||||
{{ paused ? 'Play' : 'Pause' }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<slot name="buttons"></slot>
|
||||
</div>
|
||||
<!-- main controlbar end -->
|
||||
|
||||
<!-- alternate controlbar start -->
|
||||
<div v-if="marking.useAlternateControlBar && markedRows.length"
|
||||
class="c-table-control-bar c-control-bar"
|
||||
>
|
||||
<div class="c-control-bar__label">
|
||||
{{ markedRows.length > 1 ? `${markedRows.length} ${marking.rowNamePlural} selected`: `${markedRows.length} ${marking.rowName} selected` }}
|
||||
</div>
|
||||
|
||||
<toggle-switch
|
||||
id="show-filtered-rows-toggle"
|
||||
label="Show selected items only"
|
||||
:checked="isShowingMarkedRowsOnly"
|
||||
@change="toggleMarkedRows"
|
||||
/>
|
||||
|
||||
<button
|
||||
class="c-button icon-x labeled"
|
||||
title="Deselect All"
|
||||
@click="unmarkAllRows()"
|
||||
>
|
||||
<span class="c-button__label">Deselect All</span>
|
||||
</button>
|
||||
|
||||
<slot name="buttons"></slot>
|
||||
</div>
|
||||
<!-- alternate controlbar end -->
|
||||
|
||||
<div
|
||||
class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
|
||||
@ -205,6 +237,7 @@ import TableColumnHeader from './table-column-header.vue';
|
||||
import TelemetryFilterIndicator from './TelemetryFilterIndicator.vue';
|
||||
import CSVExporter from '../../../exporters/CSVExporter.js';
|
||||
import _ from 'lodash';
|
||||
import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
|
||||
|
||||
const VISIBLE_ROW_COUNT = 100;
|
||||
const ROW_HEIGHT = 17;
|
||||
@ -216,7 +249,8 @@ export default {
|
||||
TelemetryTableRow,
|
||||
TableColumnHeader,
|
||||
search,
|
||||
TelemetryFilterIndicator
|
||||
TelemetryFilterIndicator,
|
||||
ToggleSwitch
|
||||
},
|
||||
inject: ['table', 'openmct', 'objectPath'],
|
||||
props: {
|
||||
@ -236,9 +270,16 @@ export default {
|
||||
'type': Boolean,
|
||||
'default': true
|
||||
},
|
||||
enableMarking: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
marking: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
enable: false,
|
||||
useAlternateControlBar: false,
|
||||
rowName: '',
|
||||
rowNamePlural: ""
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -270,7 +311,8 @@ export default {
|
||||
scrollW: 0,
|
||||
markCounter: 0,
|
||||
paused: false,
|
||||
markedRows: []
|
||||
markedRows: [],
|
||||
isShowingMarkedRowsOnly: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -317,6 +359,7 @@ export default {
|
||||
this.table.on('object-removed', this.removeObject);
|
||||
this.table.on('outstanding-requests', this.outstandingRequests);
|
||||
this.table.on('refresh', this.clearRowsAndRerender);
|
||||
this.table.on('historical-rows-processed', this.checkForMarkedRows);
|
||||
|
||||
this.table.filteredRows.on('add', this.rowsAdded);
|
||||
this.table.filteredRows.on('remove', this.rowsRemoved);
|
||||
@ -631,18 +674,19 @@ export default {
|
||||
},
|
||||
unpause(unpausedByButton) {
|
||||
if (unpausedByButton) {
|
||||
this.paused = false;
|
||||
this.undoMarkedRows();
|
||||
this.table.unpause();
|
||||
this.markedRows = [];
|
||||
this.paused = false;
|
||||
this.pausedByButton = false;
|
||||
} else {
|
||||
if (!this.pausedByButton) {
|
||||
this.paused = false;
|
||||
this.undoMarkedRows();
|
||||
this.table.unpause();
|
||||
this.markedRows = [];
|
||||
this.paused = false;
|
||||
}
|
||||
}
|
||||
|
||||
this.isShowingMarkedRowsOnly = false;
|
||||
},
|
||||
togglePauseByButton() {
|
||||
if (this.paused) {
|
||||
@ -655,24 +699,23 @@ export default {
|
||||
this.markedRows.forEach(r => r.marked = false);
|
||||
this.markedRows = [];
|
||||
},
|
||||
unmarkRow(rowIndex, ctrlKeyModifier) {
|
||||
if (ctrlKeyModifier) {
|
||||
unmarkRow(rowIndex) {
|
||||
if (this.markedRows.length > 1) {
|
||||
let row = this.visibleRows[rowIndex],
|
||||
positionInMarkedArray = this.markedRows.indexOf(row);
|
||||
|
||||
row.marked = false;
|
||||
this.markedRows.splice(positionInMarkedArray, 1);
|
||||
} else if (this.markedRows.length === 1) {
|
||||
this.unmarkAllRows();
|
||||
}
|
||||
|
||||
if (this.markedRows.length === 0) {
|
||||
this.unpause();
|
||||
}
|
||||
} else if (this.markedRows.length) {
|
||||
this.undoMarkedRows();
|
||||
this.markRow(rowIndex);
|
||||
if (this.markedRows.length === 0) {
|
||||
this.unpause();
|
||||
}
|
||||
},
|
||||
markRow(rowIndex, keyModifier) {
|
||||
if (!this.enableMarking) {
|
||||
if (!this.marking.enable) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -691,12 +734,13 @@ export default {
|
||||
this.markedRows[insertMethod](markedRow);
|
||||
},
|
||||
unmarkAllRows(skipUnpause) {
|
||||
this.markedRows.forEach(row => row.marked = false);
|
||||
this.markedRows = [];
|
||||
this.undoMarkedRows();
|
||||
this.isShowingMarkedRowsOnly = false;
|
||||
this.unpause();
|
||||
this.restorePreviousRows();
|
||||
},
|
||||
markMultipleConcurrentRows(rowIndex) {
|
||||
if (!this.enableMarking) {
|
||||
if (!this.marking.enable) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -733,6 +777,34 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
checkForMarkedRows() {
|
||||
this.markedRows = this.table.filteredRows.getRows().filter(row => row.marked);
|
||||
},
|
||||
showRows(rows) {
|
||||
this.table.filteredRows.rows = rows;
|
||||
this.table.filteredRows.emit('filter');
|
||||
},
|
||||
toggleMarkedRows(flag) {
|
||||
if (flag) {
|
||||
this.isShowingMarkedRowsOnly = true;
|
||||
this.userScroll = this.scrollable.scrollTop;
|
||||
this.allRows = this.table.filteredRows.getRows();
|
||||
|
||||
this.showRows(this.markedRows);
|
||||
this.setHeight();
|
||||
} else {
|
||||
this.isShowingMarkedRowsOnly = false;
|
||||
this.restorePreviousRows();
|
||||
}
|
||||
},
|
||||
restorePreviousRows() {
|
||||
if (this.allRows && this.allRows.length) {
|
||||
this.showRows(this.allRows);
|
||||
this.allRows = [];
|
||||
this.setHeight();
|
||||
this.scrollable.scrollTop = this.userScroll;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -120,7 +120,7 @@ $colorFilter: $colorFilterFg; // Standalone against $colorBodyBg
|
||||
|
||||
// States
|
||||
$colorPausedBg: #ff9900;
|
||||
$colorPausedFg: #fff;
|
||||
$colorPausedFg: #333;
|
||||
$colorOk: #33cc33;
|
||||
|
||||
// Base variations
|
||||
|
||||
@ -124,7 +124,7 @@ $colorFilter: $colorFilterFg; // Standalone against $colorBodyBg
|
||||
|
||||
// States
|
||||
$colorPausedBg: #ff9900;
|
||||
$colorPausedFg: #fff;
|
||||
$colorPausedFg: #333;
|
||||
$colorOk: #33cc33;
|
||||
|
||||
// Base variations
|
||||
|
||||
@ -147,6 +147,7 @@ $glyph-icon-filter: '\e926';
|
||||
$glyph-icon-filter-outline: '\e927';
|
||||
$glyph-icon-suitcase: '\e928';
|
||||
$glyph-icon-cursor-lock: '\e929';
|
||||
$glyph-icon-flag: '\e92a';
|
||||
$glyph-icon-arrows-right-left: '\ea00';
|
||||
$glyph-icon-arrows-up-down: '\ea01';
|
||||
$glyph-icon-bullet: '\ea02';
|
||||
@ -236,6 +237,7 @@ $glyph-icon-gauge: '\eb23';
|
||||
$glyph-icon-spectra: '\eb24';
|
||||
$glyph-icon-spectra-telemetry: '\eb25';
|
||||
$glyph-icon-command: '\eb26';
|
||||
$glyph-icon-conditional: '\eb27';
|
||||
|
||||
/************************** GLYPHS AS DATA URI */
|
||||
// Only objects have been converted, for use in Create menu and folder views
|
||||
@ -285,3 +287,4 @@ $bg-icon-gauge: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w
|
||||
$bg-icon-spectra: 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='M384 352H128l51.2-89.6L0 288v127c0 53.3 43.7 97 97 97h318c53.4 0 97-43.7 97-97v-31l-162.9-93.1zM415 0H97C43.7 0 0 43.6 0 97v159l200-30.1 56-97.9 54.9 96H512V97a97.2 97.2 0 00-97-97zM512 320v-32l-192-32 192 64z'/%3e%3c/svg%3e");
|
||||
$bg-icon-spectra-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='M256 128l54.9 96H510C494.3 97.7 386.5 0 256 0 114.6 0 0 114.6 0 256l200-30.1zM384 352H128l51.2-89.6L2 287.7C17.6 414.1 125.4 512 256 512c100.8 0 188-58.3 229.8-143l-136.7-78.1zM320 256l192 64v-32l-192-32z'/%3e%3c/svg%3e");
|
||||
$bg-icon-command: 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='M185.1 229.7a96.5 96.5 0 0015.8 11.7A68.5 68.5 0 01192 208c0-19.8 8.9-38.8 25.1-53.7 18.5-17 43.7-26.3 70.9-26.3 20.1 0 39.1 5.1 55.1 14.6a81.3 81.3 0 00-16.2-20.3C308.4 105.3 283.2 96 256 96s-52.4 9.3-70.9 26.3C168.9 137.2 160 156.2 160 176s8.9 38.8 25.1 53.7z'/%3e%3cpath d='M442.7 134.8C422.4 57.5 346.5 0 256 0S89.6 57.5 69.3 134.8C26.3 174.8 0 228.7 0 288c0 123.7 114.6 224 256 224s256-100.3 256-224c0-59.3-26.3-113.2-69.3-153.2zM256 64c70.6 0 128 50.2 128 112s-57.4 112-128 112-128-50.2-128-112S185.4 64 256 64zm0 352c-87.7 0-159.2-63.9-160-142.7 34.4 47.4 93.2 78.7 160 78.7s125.6-31.3 160-78.7c-.8 78.8-72.3 142.7-160 142.7z'/%3e%3c/svg%3e");
|
||||
$bg-icon-conditional: 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.62 0 0 114.62 0 256s114.62 256 256 256 256-114.62 256-256S397.38 0 256 0zm0 384L64 256l192-128 192 128z' fill='%23000000'/%3e%3c/svg%3e");
|
||||
|
||||
@ -81,6 +81,7 @@
|
||||
.icon-filter-outline { @include glyphBefore($glyph-icon-filter-outline); }
|
||||
.icon-suitcase { @include glyphBefore($glyph-icon-suitcase); }
|
||||
.icon-cursor-lock { @include glyphBefore($glyph-icon-cursor-lock); }
|
||||
.icon-flag { @include glyphBefore($glyph-icon-flag); }
|
||||
.icon-arrows-right-left { @include glyphBefore($glyph-icon-arrows-right-left); }
|
||||
.icon-arrows-up-down { @include glyphBefore($glyph-icon-arrows-up-down); }
|
||||
.icon-bullet { @include glyphBefore($glyph-icon-bullet); }
|
||||
@ -170,6 +171,7 @@
|
||||
.icon-spectra { @include glyphBefore($glyph-icon-spectra); }
|
||||
.icon-spectra-telemetry { @include glyphBefore($glyph-icon-spectra-telemetry); }
|
||||
.icon-command { @include glyphBefore($glyph-icon-command); }
|
||||
.icon-conditional { @include glyphBefore($glyph-icon-conditional); }
|
||||
|
||||
/************************** 12 PX CLASSES */
|
||||
// TODO: sync with 16px redo as of 10/25/18
|
||||
@ -227,3 +229,4 @@
|
||||
.bg-icon-spectra { @include glyphBg($bg-icon-spectra); }
|
||||
.bg-icon-spectra-telemetry { @include glyphBg($bg-icon-spectra-telemetry); }
|
||||
.bg-icon-command { @include glyphBg($bg-icon-command); }
|
||||
.bg-icon-conditional { @include glyphBg($bg-icon-conditional); }
|
||||
|
||||
@ -28,6 +28,16 @@
|
||||
height: $controlBarH;
|
||||
}
|
||||
|
||||
.c-control-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&__label {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.l-view-section {
|
||||
@include abs();
|
||||
overflow: auto;
|
||||
@ -52,236 +62,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************************* IMAGERY */
|
||||
.l-image-main-wrapper,
|
||||
.l-image-thumbs-wrapper,
|
||||
.image-main {
|
||||
@include abs(0);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*************************************** MAIN LAYOUT */
|
||||
.l-image-main-wrapper {
|
||||
// Imagery thumbs
|
||||
bottom: $interiorMargin*2 + $imageThumbsWrapperH;
|
||||
|
||||
min-width: 150px;
|
||||
.l-image-main {
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
.l-image-main-controlbar {
|
||||
&.l-flex-row { align-items: center; }
|
||||
}
|
||||
}
|
||||
|
||||
.l-image-thumbs-wrapper {
|
||||
top: auto;
|
||||
min-height: $imageThumbsWrapperH;
|
||||
max-height: 60%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.l-date,
|
||||
.l-time,
|
||||
.l-timezone {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*************************************** MAIN IMAGE */
|
||||
|
||||
.image-main,
|
||||
.l-image-thumb-item .l-thumb {
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.l-image-main-controlbar {
|
||||
line-height: inherit;
|
||||
.l-datetime-w, .l-controls-w {
|
||||
direction: rtl;
|
||||
overflow: hidden;
|
||||
}
|
||||
.l-datetime-w {
|
||||
@include ellipsize();
|
||||
margin-right: $interiorMarginSm;
|
||||
text-align: left;
|
||||
}
|
||||
.l-controls-w {
|
||||
z-index: 2;
|
||||
}
|
||||
.l-date,
|
||||
.l-time {
|
||||
color: pullForward($colorBodyFg, 20%); // TODO: do this as a theme constant
|
||||
}
|
||||
.l-mag {
|
||||
direction: ltr;
|
||||
display: inline-block;
|
||||
&:before {
|
||||
content: "\000049";
|
||||
}
|
||||
}
|
||||
.s-mag {
|
||||
color: pushBack($colorBodyFg, 20%); // TODO: do this as a theme constant
|
||||
}
|
||||
.l-btn.show-thumbs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.s-image-main {
|
||||
background-color: $colorPlotBg;
|
||||
border: 1px solid transparent;
|
||||
&.paused {
|
||||
//@include sUnsynced();
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************** THUMBS */
|
||||
.l-image-thumbs-wrapper {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding-bottom: $interiorMargin;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.l-image-thumb-item {
|
||||
transition: background-color 0.25s;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
direction: ltr;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 1px;
|
||||
margin-left: $interiorMarginSm;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: $imageThumbsD + $imageThumbPad*2;
|
||||
white-space: normal;
|
||||
.l-thumb,
|
||||
.l-date,
|
||||
.l-time {
|
||||
display: inline-block;
|
||||
}
|
||||
.l-date,
|
||||
.l-time {
|
||||
padding: 2px 3px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorThumbHoverBg;
|
||||
.l-date,
|
||||
.l-time {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
background: $colorKeySelectedBg;
|
||||
.l-date,
|
||||
.l-time {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.l-thumb {
|
||||
background-color: rgba(#fff, 0.1);
|
||||
height: $imageThumbsD;
|
||||
width: $imageThumbsD;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************** LOCAL CONTROLS */
|
||||
.c-imagery {
|
||||
display: contents;
|
||||
.h-local-controls--overlay-content {
|
||||
position: absolute;
|
||||
right: $interiorMargin; top: $interiorMargin;
|
||||
z-index: 2;
|
||||
background: $colorLocalControlOvrBg;
|
||||
border-radius: $basicCr;
|
||||
max-width: 200px;
|
||||
min-width: 100px;
|
||||
width: 35%;
|
||||
align-items: center;
|
||||
padding: $interiorMargin $interiorMarginLg;
|
||||
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
&:not(:first-child) {
|
||||
margin-top: $interiorMarginLg;
|
||||
}
|
||||
|
||||
&:before {
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__lc {
|
||||
&__reset-btn {
|
||||
$bc: $scrollbarTrackColorBg;
|
||||
&:before,
|
||||
&:after {
|
||||
border-right: 1px solid $bc;
|
||||
content:'';
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top: 1px solid $bc;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom: 1px solid $bc;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************************************** WHEN IN FRAME */
|
||||
.c-frame .t-imagery {
|
||||
.l-image-main-wrapper {
|
||||
bottom: 0 !important;
|
||||
height: 100% !important;
|
||||
.l-image-main-controlbar .c-button {
|
||||
//font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
.l-image-thumbs-wrapper,
|
||||
mct-splitter {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************** MOBILE */
|
||||
body.mobile.phone {
|
||||
.t-imagery {
|
||||
.l-image-main-wrapper,
|
||||
.l-image-thumbs-wrapper {
|
||||
min-height: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-button.pause-play {
|
||||
// Pause icon set by default in markup
|
||||
|
||||
&.is-paused {
|
||||
background: $colorPausedBg !important;
|
||||
color: $colorPausedFg;
|
||||
|
||||
&:before {
|
||||
content: $glyph-icon-play;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*********************************************************************** CLOCKS AND TIMERS */
|
||||
.c-clock,
|
||||
.c-timer {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"metadata": {
|
||||
"name": "Open MCT Symbols 16px",
|
||||
"lastOpened": 0,
|
||||
"created": 1574106570211
|
||||
"created": 1581619121103
|
||||
},
|
||||
"iconSets": [
|
||||
{
|
||||
@ -343,13 +343,21 @@
|
||||
"code": 59689,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 176,
|
||||
"id": 150,
|
||||
"name": "icon-flag",
|
||||
"prevSize": 24,
|
||||
"code": 59690,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 27,
|
||||
"id": 105,
|
||||
"name": "icon-arrows-right-left",
|
||||
"prevSize": 24,
|
||||
"code": 59904,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 26,
|
||||
@ -357,7 +365,7 @@
|
||||
"name": "icon-arrows-up-down",
|
||||
"prevSize": 24,
|
||||
"code": 59905,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 68,
|
||||
@ -365,7 +373,7 @@
|
||||
"name": "icon-bullet",
|
||||
"prevSize": 24,
|
||||
"code": 59906,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 150,
|
||||
@ -373,7 +381,7 @@
|
||||
"prevSize": 24,
|
||||
"code": 59907,
|
||||
"name": "icon-calendar",
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 45,
|
||||
@ -381,7 +389,7 @@
|
||||
"name": "icon-chain-links",
|
||||
"prevSize": 24,
|
||||
"code": 59908,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 73,
|
||||
@ -389,7 +397,7 @@
|
||||
"name": "icon-download",
|
||||
"prevSize": 24,
|
||||
"code": 59909,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 39,
|
||||
@ -397,7 +405,7 @@
|
||||
"name": "icon-duplicate",
|
||||
"prevSize": 24,
|
||||
"code": 59910,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 50,
|
||||
@ -405,7 +413,7 @@
|
||||
"name": "icon-folder-new",
|
||||
"prevSize": 24,
|
||||
"code": 59911,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 138,
|
||||
@ -413,7 +421,7 @@
|
||||
"name": "icon-fullscreen-collapse",
|
||||
"prevSize": 24,
|
||||
"code": 59912,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 139,
|
||||
@ -421,7 +429,7 @@
|
||||
"name": "icon-fullscreen-expand",
|
||||
"prevSize": 24,
|
||||
"code": 59913,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 122,
|
||||
@ -429,7 +437,7 @@
|
||||
"name": "icon-layers",
|
||||
"prevSize": 24,
|
||||
"code": 59914,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 151,
|
||||
@ -437,7 +445,7 @@
|
||||
"name": "icon-line-horz",
|
||||
"prevSize": 24,
|
||||
"code": 59915,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 100,
|
||||
@ -445,7 +453,7 @@
|
||||
"name": "icon-magnify",
|
||||
"prevSize": 24,
|
||||
"code": 59916,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 99,
|
||||
@ -453,7 +461,7 @@
|
||||
"name": "icon-magnify-in",
|
||||
"prevSize": 24,
|
||||
"code": 59917,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 101,
|
||||
@ -461,7 +469,7 @@
|
||||
"name": "icon-magnify-out-v2",
|
||||
"prevSize": 24,
|
||||
"code": 59918,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 103,
|
||||
@ -469,7 +477,7 @@
|
||||
"name": "icon-menu",
|
||||
"prevSize": 24,
|
||||
"code": 59919,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 124,
|
||||
@ -477,7 +485,7 @@
|
||||
"name": "icon-move",
|
||||
"prevSize": 24,
|
||||
"code": 59920,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 7,
|
||||
@ -485,7 +493,7 @@
|
||||
"name": "icon-new-window",
|
||||
"prevSize": 24,
|
||||
"code": 59921,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 63,
|
||||
@ -493,7 +501,7 @@
|
||||
"name": "icon-paint-bucket-v2",
|
||||
"prevSize": 24,
|
||||
"code": 59922,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 15,
|
||||
@ -501,7 +509,7 @@
|
||||
"name": "icon-pencil",
|
||||
"prevSize": 24,
|
||||
"code": 59923,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 54,
|
||||
@ -509,7 +517,7 @@
|
||||
"name": "icon-pencil-edit-in-place",
|
||||
"prevSize": 24,
|
||||
"code": 59924,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 40,
|
||||
@ -517,7 +525,7 @@
|
||||
"name": "icon-play",
|
||||
"prevSize": 24,
|
||||
"code": 59925,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 125,
|
||||
@ -525,7 +533,7 @@
|
||||
"name": "icon-pause",
|
||||
"prevSize": 24,
|
||||
"code": 59926,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 119,
|
||||
@ -533,7 +541,7 @@
|
||||
"name": "icon-plot-resource",
|
||||
"prevSize": 24,
|
||||
"code": 59927,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 48,
|
||||
@ -541,7 +549,7 @@
|
||||
"name": "icon-pointer-left",
|
||||
"prevSize": 24,
|
||||
"code": 59928,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 47,
|
||||
@ -549,7 +557,7 @@
|
||||
"name": "icon-pointer-right",
|
||||
"prevSize": 24,
|
||||
"code": 59929,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 85,
|
||||
@ -557,7 +565,7 @@
|
||||
"name": "icon-refresh",
|
||||
"prevSize": 24,
|
||||
"code": 59930,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 55,
|
||||
@ -565,7 +573,7 @@
|
||||
"name": "icon-save",
|
||||
"prevSize": 24,
|
||||
"code": 59931,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 56,
|
||||
@ -573,7 +581,7 @@
|
||||
"name": "icon-save-as",
|
||||
"prevSize": 24,
|
||||
"code": 59932,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 58,
|
||||
@ -581,7 +589,7 @@
|
||||
"name": "icon-sine",
|
||||
"prevSize": 24,
|
||||
"code": 59933,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 113,
|
||||
@ -589,7 +597,7 @@
|
||||
"name": "icon-font",
|
||||
"prevSize": 24,
|
||||
"code": 59934,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 41,
|
||||
@ -597,7 +605,7 @@
|
||||
"name": "icon-thumbs-strip",
|
||||
"prevSize": 24,
|
||||
"code": 59935,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 146,
|
||||
@ -605,7 +613,7 @@
|
||||
"name": "icon-two-parts-both",
|
||||
"prevSize": 24,
|
||||
"code": 59936,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 145,
|
||||
@ -613,7 +621,7 @@
|
||||
"name": "icon-two-parts-one-only",
|
||||
"prevSize": 24,
|
||||
"code": 59937,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 82,
|
||||
@ -621,7 +629,7 @@
|
||||
"name": "icon-resync",
|
||||
"prevSize": 24,
|
||||
"code": 59938,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 86,
|
||||
@ -629,7 +637,7 @@
|
||||
"name": "icon-reset",
|
||||
"prevSize": 24,
|
||||
"code": 59939,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 61,
|
||||
@ -637,7 +645,7 @@
|
||||
"name": "icon-x-in-circle",
|
||||
"prevSize": 24,
|
||||
"code": 59940,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 84,
|
||||
@ -645,7 +653,7 @@
|
||||
"name": "icon-brightness",
|
||||
"prevSize": 24,
|
||||
"code": 59941,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 83,
|
||||
@ -653,7 +661,7 @@
|
||||
"name": "icon-contrast",
|
||||
"prevSize": 24,
|
||||
"code": 59942,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 87,
|
||||
@ -661,7 +669,7 @@
|
||||
"name": "icon-expand",
|
||||
"prevSize": 24,
|
||||
"code": 59943,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 89,
|
||||
@ -669,7 +677,7 @@
|
||||
"name": "icon-list-view",
|
||||
"prevSize": 24,
|
||||
"code": 59944,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 133,
|
||||
@ -677,7 +685,7 @@
|
||||
"name": "icon-grid-snap-to",
|
||||
"prevSize": 24,
|
||||
"code": 59945,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 132,
|
||||
@ -685,7 +693,7 @@
|
||||
"name": "icon-grid-snap-no",
|
||||
"prevSize": 24,
|
||||
"code": 59946,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 94,
|
||||
@ -693,7 +701,7 @@
|
||||
"name": "icon-frame-show",
|
||||
"prevSize": 24,
|
||||
"code": 59947,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 95,
|
||||
@ -701,7 +709,7 @@
|
||||
"name": "icon-frame-hide",
|
||||
"prevSize": 24,
|
||||
"code": 59948,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 97,
|
||||
@ -709,7 +717,7 @@
|
||||
"name": "icon-import",
|
||||
"prevSize": 24,
|
||||
"code": 59949,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 96,
|
||||
@ -717,7 +725,7 @@
|
||||
"name": "icon-export",
|
||||
"prevSize": 24,
|
||||
"code": 59950,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 114,
|
||||
@ -725,7 +733,7 @@
|
||||
"name": "icon-font-size",
|
||||
"prevSize": 24,
|
||||
"code": 59951,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 163,
|
||||
@ -733,7 +741,7 @@
|
||||
"name": "icon-clear-data",
|
||||
"prevSize": 24,
|
||||
"code": 59952,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 173,
|
||||
@ -741,7 +749,7 @@
|
||||
"name": "icon-history",
|
||||
"prevSize": 24,
|
||||
"code": 59953,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 144,
|
||||
@ -749,7 +757,7 @@
|
||||
"name": "icon-activity",
|
||||
"prevSize": 24,
|
||||
"code": 60160,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 104,
|
||||
@ -757,7 +765,7 @@
|
||||
"name": "icon-activity-mode",
|
||||
"prevSize": 24,
|
||||
"code": 60161,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 137,
|
||||
@ -765,7 +773,7 @@
|
||||
"name": "icon-autoflow-tabular",
|
||||
"prevSize": 24,
|
||||
"code": 60162,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 115,
|
||||
@ -773,7 +781,7 @@
|
||||
"name": "icon-clock",
|
||||
"prevSize": 24,
|
||||
"code": 60163,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 2,
|
||||
@ -781,7 +789,7 @@
|
||||
"name": "icon-database",
|
||||
"prevSize": 24,
|
||||
"code": 60164,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 3,
|
||||
@ -789,7 +797,7 @@
|
||||
"name": "icon-database-query",
|
||||
"prevSize": 24,
|
||||
"code": 60165,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 67,
|
||||
@ -797,7 +805,7 @@
|
||||
"name": "icon-dataset",
|
||||
"prevSize": 24,
|
||||
"code": 60166,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 59,
|
||||
@ -805,7 +813,7 @@
|
||||
"name": "icon-datatable",
|
||||
"prevSize": 24,
|
||||
"code": 60167,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 136,
|
||||
@ -813,7 +821,7 @@
|
||||
"name": "icon-dictionary",
|
||||
"prevSize": 24,
|
||||
"code": 60168,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 51,
|
||||
@ -821,7 +829,7 @@
|
||||
"name": "icon-folder",
|
||||
"prevSize": 24,
|
||||
"code": 60169,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 147,
|
||||
@ -829,7 +837,7 @@
|
||||
"name": "icon-image",
|
||||
"prevSize": 24,
|
||||
"code": 60170,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 4,
|
||||
@ -837,7 +845,7 @@
|
||||
"name": "icon-layout",
|
||||
"prevSize": 24,
|
||||
"code": 60171,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 24,
|
||||
@ -845,7 +853,7 @@
|
||||
"name": "icon-object",
|
||||
"prevSize": 24,
|
||||
"code": 60172,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 52,
|
||||
@ -853,7 +861,7 @@
|
||||
"name": "icon-object-unknown",
|
||||
"prevSize": 24,
|
||||
"code": 60173,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 105,
|
||||
@ -861,7 +869,7 @@
|
||||
"name": "icon-packet",
|
||||
"prevSize": 24,
|
||||
"code": 60174,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 126,
|
||||
@ -869,7 +877,7 @@
|
||||
"name": "icon-page",
|
||||
"prevSize": 24,
|
||||
"code": 60175,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 130,
|
||||
@ -877,7 +885,7 @@
|
||||
"name": "icon-plot-overlay",
|
||||
"prevSize": 24,
|
||||
"code": 60176,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 80,
|
||||
@ -885,7 +893,7 @@
|
||||
"name": "icon-plot-stacked",
|
||||
"prevSize": 24,
|
||||
"code": 60177,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 134,
|
||||
@ -893,7 +901,7 @@
|
||||
"name": "icon-session",
|
||||
"prevSize": 24,
|
||||
"code": 60178,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 109,
|
||||
@ -901,7 +909,7 @@
|
||||
"name": "icon-tabular",
|
||||
"prevSize": 24,
|
||||
"code": 60179,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 107,
|
||||
@ -909,7 +917,7 @@
|
||||
"name": "icon-tabular-lad",
|
||||
"prevSize": 24,
|
||||
"code": 60180,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 106,
|
||||
@ -917,7 +925,7 @@
|
||||
"name": "icon-tabular-lad-set",
|
||||
"prevSize": 24,
|
||||
"code": 60181,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 70,
|
||||
@ -925,7 +933,7 @@
|
||||
"name": "icon-tabular-realtime",
|
||||
"prevSize": 24,
|
||||
"code": 60182,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 60,
|
||||
@ -933,7 +941,7 @@
|
||||
"name": "icon-tabular-scrolling",
|
||||
"prevSize": 24,
|
||||
"code": 60183,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 131,
|
||||
@ -941,7 +949,7 @@
|
||||
"name": "icon-telemetry",
|
||||
"prevSize": 24,
|
||||
"code": 60184,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 108,
|
||||
@ -949,7 +957,7 @@
|
||||
"name": "icon-timeline",
|
||||
"prevSize": 24,
|
||||
"code": 60185,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 81,
|
||||
@ -957,7 +965,7 @@
|
||||
"name": "icon-timer",
|
||||
"prevSize": 24,
|
||||
"code": 60186,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 69,
|
||||
@ -965,7 +973,7 @@
|
||||
"name": "icon-topic",
|
||||
"prevSize": 24,
|
||||
"code": 60187,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 79,
|
||||
@ -973,7 +981,7 @@
|
||||
"name": "icon-box-with-dashed-lines-v2",
|
||||
"prevSize": 24,
|
||||
"code": 60188,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 90,
|
||||
@ -981,7 +989,7 @@
|
||||
"name": "icon-summary-widget",
|
||||
"prevSize": 24,
|
||||
"code": 60189,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 92,
|
||||
@ -989,7 +997,7 @@
|
||||
"name": "icon-notebook",
|
||||
"prevSize": 24,
|
||||
"code": 60190,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 168,
|
||||
@ -997,7 +1005,7 @@
|
||||
"name": "icon-tabs-view",
|
||||
"prevSize": 24,
|
||||
"code": 60191,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 117,
|
||||
@ -1005,7 +1013,7 @@
|
||||
"name": "icon-flexible-layout",
|
||||
"prevSize": 24,
|
||||
"code": 60192,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 166,
|
||||
@ -1013,7 +1021,7 @@
|
||||
"name": "icon-generator-sine",
|
||||
"prevSize": 24,
|
||||
"code": 60193,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 167,
|
||||
@ -1021,7 +1029,7 @@
|
||||
"name": "icon-generator-event",
|
||||
"prevSize": 24,
|
||||
"code": 60194,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 165,
|
||||
@ -1029,7 +1037,7 @@
|
||||
"name": "icon-gauge-v2",
|
||||
"prevSize": 24,
|
||||
"code": 60195,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 170,
|
||||
@ -1037,7 +1045,7 @@
|
||||
"name": "icon-spectra",
|
||||
"prevSize": 24,
|
||||
"code": 60196,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 171,
|
||||
@ -1045,7 +1053,7 @@
|
||||
"name": "icon-telemetry-spectra",
|
||||
"prevSize": 24,
|
||||
"code": 60197,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 172,
|
||||
@ -1053,7 +1061,15 @@
|
||||
"name": "icon-pushbutton",
|
||||
"prevSize": 24,
|
||||
"code": 60198,
|
||||
"tempChar": ""
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 174,
|
||||
"id": 151,
|
||||
"name": "icon-conditional",
|
||||
"prevSize": 24,
|
||||
"code": 60199,
|
||||
"tempChar": ""
|
||||
}
|
||||
],
|
||||
"id": 0,
|
||||
@ -1613,6 +1629,21 @@
|
||||
"icon-cursor-locked"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 150,
|
||||
"paths": [
|
||||
"M192 640h832l-192-320 192-320h-896c-70.606 0.215-127.785 57.394-128 127.979l-0 0.021v896h192z"
|
||||
],
|
||||
"attrs": [
|
||||
{}
|
||||
],
|
||||
"grid": 16,
|
||||
"tags": [
|
||||
"icon-flag"
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false
|
||||
},
|
||||
{
|
||||
"id": 105,
|
||||
"paths": [
|
||||
@ -2771,6 +2802,21 @@
|
||||
"tags": [
|
||||
"icon-pushbutton"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 151,
|
||||
"paths": [
|
||||
"M512 0c-282.76 0-512 229.24-512 512s229.24 512 512 512 512-229.24 512-512-229.24-512-512-512zM512 768l-384-256 384-256 384 256z"
|
||||
],
|
||||
"attrs": [
|
||||
{}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 16,
|
||||
"tags": [
|
||||
"icon-conditional"
|
||||
]
|
||||
}
|
||||
],
|
||||
"invisible": false,
|
||||
|
||||
@ -49,6 +49,7 @@
|
||||
<glyph unicode="" glyph-name="icon-filter-outline" d="M896 832h-768c-70.601-0.227-127.773-57.399-128-127.978v-768.022c0.227-70.601 57.399-127.773 127.978-128h768.022c70.601 0.227 127.773 57.399 128 127.978v768.022c-0.227 70.601-57.399 127.773-127.978 128h-0.022zM896-63.8h-256v383.8l192 192h-640l192-192v-384h-256v767.8h768z" />
|
||||
<glyph unicode="" glyph-name="icon-suitcase" d="M768 704c-0.080 70.66-57.34 127.92-127.993 128h-256.007c-70.66-0.080-127.92-57.34-128-127.993v-128.007h-64v-768h640v768h-64zM384 703.88l0.12 0.12 255.88-0.12v-127.88h-256zM0 512v-640c0.102-35.305 28.695-63.898 63.99-64h64.010v768h-64c-35.305-0.102-63.898-28.695-64-63.99v-0.010zM960 576h-64v-768h64c35.305 0.102 63.898 28.695 64 63.99v640.010c-0.102 35.305-28.695 63.898-63.99 64h-0.010z" />
|
||||
<glyph unicode="" glyph-name="icon-cursor-locked" horiz-adv-x="768" d="M704 512h-64v64c0 141.385-114.615 256-256 256s-256-114.615-256-256v0-64h-64c-35.301-0.113-63.887-28.699-64-63.989v-576.011c0.113-35.301 28.699-63.887 63.989-64h640.011c35.301 0.113 63.887 28.699 64 63.989v576.011c-0.113 35.301-28.699 63.887-63.989 64h-0.011zM256 576c0 70.692 57.308 128 128 128s128-57.308 128-128v0-64h-256zM533.4-64l-128 128-43-85-170.4 383.6 383.6-170.2-85-43 128-128z" />
|
||||
<glyph unicode="" glyph-name="icon-flag" d="M192 192h832l-192 320 192 320h-896c-70.606-0.215-127.785-57.394-128-127.979v-896.021h192z" />
|
||||
<glyph unicode="" glyph-name="icon-arrows-right-left" d="M1024 320l-448-512v1024zM448 832l-448-512 448-512z" />
|
||||
<glyph unicode="" glyph-name="icon-arrows-up-down" d="M512 832l512-448h-1024zM0 256l512-448 512 448z" />
|
||||
<glyph unicode="" glyph-name="icon-bullet" d="M832 80c0-44-36-80-80-80h-480c-44 0-80 36-80 80v480c0 44 36 80 80 80h480c44 0 80-36 80-80v-480z" />
|
||||
@ -138,4 +139,5 @@
|
||||
<glyph unicode="" glyph-name="icon-spectra" d="M768 128h-512l102.4 179.2-358.4-51.2v-254c0-106.6 87.4-194 194-194h636c106.8 0 194 87.4 194 194v62l-325.8 186.2zM830 832h-636c-106.6 0-194-87.2-194-194v-318l400 60.2 112 195.8 109.8-192h402.2v254c-0.227 107.052-86.948 193.773-193.978 194h-0.022zM1024 192v64l-384 64 384-128z" />
|
||||
<glyph unicode="" glyph-name="icon-telemetry-spectra" d="M512 576l109.8-192h398.2c-31.4 252.6-247 448-508 448-282.8 0-512-229.2-512-512l400 60.2zM768 128h-512l102.4 179.2-354.4-50.6c31.2-252.8 246.8-448.6 508-448.6 201.6 0 376 116.6 459.6 286l-273.4 156.2zM640 320l384-128v64l-384 64z" />
|
||||
<glyph unicode="" glyph-name="icon-pushbutton" d="M370.2 372.6c9.326-8.53 19.666-16.261 30.729-22.914l0.871-0.486c-11.077 19.209-17.664 42.221-17.8 66.76v0.040c0 39.6 17.8 77.6 50.2 107.4 37 34 87.4 52.6 141.8 52.6 40.2 0 78.2-10.2 110.2-29.2-8.918 15.653-19.693 29.040-32.268 40.482l-0.132 0.118c-37 34-87.4 52.6-141.8 52.6s-104.8-18.6-141.8-52.6c-32.4-29.8-50.2-67.8-50.2-107.4s17.8-77.6 50.2-107.4zM885.4 562.4c-40.6 154.6-192.4 269.6-373.4 269.6s-332.8-115-373.4-269.6c-86-80-138.6-187.8-138.6-306.4 0-247.4 229.2-448 512-448s512 200.6 512 448c0 118.6-52.6 226.4-138.6 306.4zM512 704c141.2 0 256-100.4 256-224s-114.8-224-256-224-256 100.4-256 224 114.8 224 256 224zM512 0c-175.4 0-318.4 127.8-320 285.4 68.8-94.8 186.4-157.4 320-157.4s251.2 62.6 320 157.4c-1.6-157.6-144.6-285.4-320-285.4z" />
|
||||
<glyph unicode="" glyph-name="icon-conditional" d="M512 832c-282.76 0-512-229.24-512-512s229.24-512 512-512 512 229.24 512 512-229.24 512-512 512zM512 64l-384 256 384 256 384-256z" />
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 51 KiB |
Binary file not shown.
Binary file not shown.
@ -1,16 +1,25 @@
|
||||
<template>
|
||||
<label class="c-toggle-switch">
|
||||
<input
|
||||
:id="id"
|
||||
type="checkbox"
|
||||
:checked="checked"
|
||||
@change="onUserSelect($event)"
|
||||
<div class="c-toggle-switch">
|
||||
<label class="c-toggle-switch__control">
|
||||
<input
|
||||
:id="id"
|
||||
type="checkbox"
|
||||
:checked="checked"
|
||||
@change="onUserSelect($event)"
|
||||
>
|
||||
<span class="c-toggle-switch__slider"></span>
|
||||
</label>
|
||||
<div
|
||||
v-if="label && label.length"
|
||||
class="c-toggle-switch__label"
|
||||
>
|
||||
<span class="c-toggle-switch__slider"></span>
|
||||
</label>
|
||||
{{ label }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
inject: ['openmct'],
|
||||
props: {
|
||||
@ -18,6 +27,11 @@ export default {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
checked: Boolean
|
||||
},
|
||||
methods: {
|
||||
@ -26,4 +40,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -2,15 +2,40 @@
|
||||
$d: 12px;
|
||||
$m: 2px;
|
||||
$br: $d/1.5;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
display: inline;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
|
||||
&__control,
|
||||
&__label {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__control {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
&:checked {
|
||||
+ .c-toggle-switch__slider {
|
||||
background: $colorKey; // TODO: make discrete theme constants for these colors
|
||||
&:before {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__slider {
|
||||
// Sits within __switch
|
||||
background: $colorBtnBg; // TODO: make discrete theme constants for these colors
|
||||
border-radius: $br;
|
||||
//box-shadow: inset rgba($colorBtnFg, 0.4) 0 0 0 1px;
|
||||
display: inline-block;
|
||||
height: $d + ($m*2);
|
||||
position: relative;
|
||||
@ -31,18 +56,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
&:checked {
|
||||
+ .c-toggle-switch__slider {
|
||||
background: $colorKey; // TODO: make discrete theme constants for these colors
|
||||
&:before {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__label {
|
||||
margin-left: $interiorMarginSm;
|
||||
margin-right: $interiorMargin;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,6 +62,8 @@
|
||||
}
|
||||
|
||||
&[class*="--horizontal"] {
|
||||
padding-left: $interiorMargin;
|
||||
padding-right: $interiorMargin;
|
||||
&.l-pane--collapsed {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
@ -69,9 +71,11 @@
|
||||
}
|
||||
|
||||
&[class*="--vertical"] {
|
||||
padding-top: $interiorMargin;
|
||||
padding-bottom: $interiorMargin;
|
||||
&.l-pane--collapsed {
|
||||
padding-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -277,6 +281,9 @@
|
||||
/************************** Vertical Splitter Before */
|
||||
// Pane collapses downward. Used by Elements pool in Inspector
|
||||
&[class*="-before"] {
|
||||
$m: $interiorMarginLg;
|
||||
margin-top: $m;
|
||||
padding-top: $m;
|
||||
> .l-pane__handle {
|
||||
top: 0;
|
||||
transform: translateY(floor($splitterHandleD / -1));
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<li class="c-tree__item-h">
|
||||
<div
|
||||
class="c-tree__item"
|
||||
:class="{ 'is-alias': isAlias, 'is-navigated-object': isNavigated }"
|
||||
:class="{ 'is-alias': isAlias, 'is-navigated-object': navigated }"
|
||||
>
|
||||
<view-control
|
||||
v-model="expanded"
|
||||
@ -40,6 +40,8 @@
|
||||
import viewControl from '../components/viewControl.vue';
|
||||
import ObjectLabel from '../components/ObjectLabel.vue';
|
||||
|
||||
const LOCAL_STORAGE_KEY__TREE_EXPANDED = 'mct-tree-expanded';
|
||||
|
||||
export default {
|
||||
name: 'TreeItem',
|
||||
inject: ['openmct'],
|
||||
@ -54,12 +56,12 @@ export default {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
this.navigateToPath = this.buildPathString(this.node.navigateToParent)
|
||||
this.navigateToPath = this.buildPathString(this.node.navigateToParent);
|
||||
return {
|
||||
hasChildren: false,
|
||||
isLoading: false,
|
||||
loaded: false,
|
||||
isNavigated: this.navigateToPath === this.openmct.router.currentLocation.path,
|
||||
navigated: this.navigateToPath === this.openmct.router.currentLocation.path,
|
||||
children: [],
|
||||
expanded: false
|
||||
}
|
||||
@ -75,7 +77,7 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
expanded(isExpanded) {
|
||||
expanded() {
|
||||
if (!this.hasChildren) {
|
||||
return;
|
||||
}
|
||||
@ -86,6 +88,7 @@ export default {
|
||||
this.composition.load().then(this.finishLoading);
|
||||
this.isLoading = true;
|
||||
}
|
||||
this.setLocalStorageExpanded(this.navigateToPath);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -107,6 +110,17 @@ export default {
|
||||
}
|
||||
|
||||
this.openmct.router.on('change:path', this.highlightIfNavigated);
|
||||
|
||||
this.getLocalStorageExpanded();
|
||||
},
|
||||
beforeDestroy() {
|
||||
/****
|
||||
* calling this.setLocalStorageExpanded explicitly here because for whatever reason,
|
||||
* the watcher on this.expanded is not triggering this.setLocalStorageExpanded(),
|
||||
* even though Vue documentation states, "At this stage the instance is still fully functional."
|
||||
*****/
|
||||
this.expanded = false;
|
||||
this.setLocalStorageExpanded();
|
||||
},
|
||||
destroyed() {
|
||||
this.openmct.router.off('change:path', this.highlightIfNavigated);
|
||||
@ -139,10 +153,40 @@ export default {
|
||||
},
|
||||
highlightIfNavigated(newPath, oldPath) {
|
||||
if (newPath === this.navigateToPath) {
|
||||
this.isNavigated = true;
|
||||
this.navigated = true;
|
||||
} else if (oldPath === this.navigateToPath) {
|
||||
this.isNavigated = false;
|
||||
this.navigated = false;
|
||||
}
|
||||
},
|
||||
getLocalStorageExpanded() {
|
||||
let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
|
||||
|
||||
if (expandedPaths) {
|
||||
expandedPaths = JSON.parse(expandedPaths);
|
||||
this.expanded = expandedPaths.includes(this.navigateToPath);
|
||||
}
|
||||
},
|
||||
// expanded nodes/paths are stored in local storage as an array
|
||||
setLocalStorageExpanded() {
|
||||
let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
|
||||
expandedPaths = expandedPaths ? JSON.parse(expandedPaths) : [];
|
||||
|
||||
if (this.expanded) {
|
||||
if (!expandedPaths.includes(this.navigateToPath)) {
|
||||
expandedPaths.push(this.navigateToPath);
|
||||
}
|
||||
} else {
|
||||
// remove this node path and all children paths from stored expanded paths
|
||||
expandedPaths = expandedPaths.filter(path => !path.startsWith(this.navigateToPath));
|
||||
}
|
||||
|
||||
localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(expandedPaths));
|
||||
},
|
||||
removeLocalStorageExpanded() {
|
||||
let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
|
||||
expandedPaths = expandedPaths ? JSON.parse(expandedPaths) : [];
|
||||
expandedPaths = expandedPaths.filter(path => !path.startsWith(this.navigateToPath));
|
||||
localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(expandedPaths));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user