ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-17 06:38:17 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Update eslint (#4554)

Browse Source 
Bumps [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) from 7.20.0 to 8.0.3.
- [Release notes](https://github.com/vuejs/eslint-plugin-vue/releases)
- [Commits](https://github.com/vuejs/eslint-plugin-vue/compare/v7.20.0...v8.0.3)

---
updated-dependencies:
- dependency-name: eslint-plugin-vue
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
* bump eslint to 8.11.0
* bump eslint-plugin-vue to 8.5.0
* disable eslint rule for multi-word component names. TODO enable it and follow conventions

Co-authored-by: Nikhil Mandlik <nikhil.k.mandlik@nasa.gov>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
Co-authored-by: unlikelyzero <jchill2@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
This commit is contained in:
Joe Pea
2022-03-21 11:40:35 -07:00
committed by GitHub
parent 4205abdc80
commit d80b692354
99 changed files with 1905 additions and 1448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
.eslintrc.js
View File

@ -16,7 +16,8 @@ module.exports = {
], ],
"parser": "vue-eslint-parser", "parser": "vue-eslint-parser",
"parserOptions": { "parserOptions": {
"parser": "babel-eslint", "parser": "@babel/eslint-parser",
"requireConfigFile": false,
"allowImportExportEverywhere": true, "allowImportExportEverywhere": true,
"ecmaVersion": 2015, "ecmaVersion": 2015,
"ecmaFeatures": { "ecmaFeatures": {
@ -35,7 +36,6 @@ module.exports = {
"no-inner-declarations": "off", "no-inner-declarations": "off",
"no-use-before-define": ["error", "nofunc"], "no-use-before-define": ["error", "nofunc"],
"no-caller": "error", "no-caller": "error",
"no-sequences": "error",
"no-irregular-whitespace": "error", "no-irregular-whitespace": "error",
"no-new": "error", "no-new": "error",
"no-shadow": "error", "no-shadow": "error",
@ -239,13 +239,12 @@ module.exports = {
], ],
"vue/max-attributes-per-line": ["error", { "vue/max-attributes-per-line": ["error", {
"singleline": 1, "singleline": 1,
"multiline": { "multiline": 1,
"max": 1,
"allowFirstLine": true
}
}], }],
"vue/first-attribute-linebreak": "error",
"vue/multiline-html-element-content-newline": "off", "vue/multiline-html-element-content-newline": "off",
"vue/singleline-html-element-content-newline": "off", "vue/singleline-html-element-content-newline": "off",
"vue/multi-word-component-names": "off", // TODO enable, align with conventions
"vue/no-mutating-props": "off" "vue/no-mutating-props": "off"
}, },

6
package.json
View File

@ -3,12 +3,12 @@
"version": "2.0.1-SNAPSHOT", "version": "2.0.1-SNAPSHOT",
"description": "The Open MCT core platform", "description": "The Open MCT core platform",
"devDependencies": { "devDependencies": {
"@babel/eslint-parser": "7.16.3",
"@braintree/sanitize-url": "6.0.0", "@braintree/sanitize-url": "6.0.0",
"@percy/cli": "1.0.0-beta.75", "@percy/cli": "1.0.0-beta.75",
"@percy/playwright": "1.0.1", "@percy/playwright": "1.0.1",
"@playwright/test": "1.19.2", "@playwright/test": "1.19.2",
"allure-playwright": "2.0.0-beta.15", "allure-playwright": "2.0.0-beta.15",
"babel-eslint": "10.1.0",
"comma-separated-values": "3.6.4", "comma-separated-values": "3.6.4",
"copy-webpack-plugin": "10.2.0", "copy-webpack-plugin": "10.2.0",
"core-js": "3.20.3", "core-js": "3.20.3",
@ -17,9 +17,9 @@
"d3-axis": "1.0.x", "d3-axis": "1.0.x",
"d3-scale": "1.0.x", "d3-scale": "1.0.x",
"d3-selection": "1.3.x", "d3-selection": "1.3.x",
"eslint": "7.0.0", "eslint": "8.11.0",
"eslint-plugin-playwright": "0.8.0", "eslint-plugin-playwright": "0.8.0",
"eslint-plugin-vue": "7.5.0", "eslint-plugin-vue": "8.5.0",
"eslint-plugin-you-dont-need-lodash-underscore": "6.12.0", "eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
"eventemitter3": "1.2.0", "eventemitter3": "1.2.0",
"exports-loader": "0.7.0", "exports-loader": "0.7.0",

53
src/api/forms/components/FormProperties.vue
View File

@ -26,45 +26,52 @@
<div class="c-overlay__dialog-title">{{ model.title }}</div> <div class="c-overlay__dialog-title">{{ model.title }}</div>
<div class="c-overlay__dialog-hint hint">All fields marked <span class="req icon-asterisk"></span> are required.</div> <div class="c-overlay__dialog-hint hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
</div> </div>
<form name="mctForm" <form
class="c-form__contents" name="mctForm"
autocomplete="off" class="c-form__contents"
@submit.prevent autocomplete="off"
@submit.prevent
> >
<div v-for="section in formSections" <div
:key="section.id" v-for="section in formSections"
class="c-form__section" :key="section.id"
:class="section.cssClass" class="c-form__section"
:class="section.cssClass"
> >
<h2 v-if="section.name" <h2
v-if="section.name"
class="c-form__section-header" class="c-form__section-header"
> >
{{ section.name }} {{ section.name }}
</h2> </h2>
<div v-for="(row, index) in section.rows" <div
:key="row.id" v-for="(row, index) in section.rows"
class="u-contents" :key="row.id"
class="u-contents"
> >
<FormRow :css-class="section.cssClass" <FormRow
:first="index < 1" :css-class="section.cssClass"
:row="row" :first="index < 1"
@onChange="onChange" :row="row"
@onChange="onChange"
/> />
</div> </div>
</div> </div>
</form> </form>
<div class="mct-form__controls c-overlay__button-bar c-form__bottom-bar"> <div class="mct-form__controls c-overlay__button-bar c-form__bottom-bar">
<button tabindex="0" <button
:disabled="isInvalid" tabindex="0"
class="c-button c-button--major" :disabled="isInvalid"
@click="onSave" class="c-button c-button--major"
@click="onSave"
> >
{{ submitLabel }} {{ submitLabel }}
</button> </button>
<button tabindex="0" <button
class="c-button" tabindex="0"
@click="onDismiss" class="c-button"
@click="onDismiss"
> >
{{ cancelLabel }} {{ cancelLabel }}
</button> </button>

22
src/api/forms/components/FormRow.vue
View File

@ -21,21 +21,25 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div class="form-row c-form__row" <div
:class="[{ 'first': first }]" class="form-row c-form__row"
@onChange="onChange" :class="[{ 'first': first }]"
@onChange="onChange"
> >
<div class="c-form-row__label" <div
:title="row.description" class="c-form-row__label"
:title="row.description"
> >
{{ row.name }} {{ row.name }}
</div> </div>
<div class="c-form-row__state-indicator" <div
:class="rowClass" class="c-form-row__state-indicator"
:class="rowClass"
> >
</div> </div>
<div v-if="row.control" <div
class="c-form-row__controls" v-if="row.control"
class="c-form-row__controls"
> >
<div ref="rowElement"></div> <div ref="rowElement"></div>
</div> </div>

24
src/api/forms/components/controls/AutoCompleteField.vue
View File

@ -22,20 +22,24 @@
<template> <template>
<div class="form-control autocomplete"> <div class="form-control autocomplete">
<input v-model="field" <input
class="autocompleteInput" v-model="field"
type="text" class="autocompleteInput"
@click="inputClicked()" type="text"
@keydown="keyDown($event)" @click="inputClicked()"
@keydown="keyDown($event)"
> >
<span class="icon-arrow-down" <span
@click="arrowClicked()" class="icon-arrow-down"
@click="arrowClicked()"
></span> ></span>
<div class="autocompleteOptions" <div
@blur="hideOptions = true" class="autocompleteOptions"
@blur="hideOptions = true"
> >
<ul v-if="!hideOptions"> <ul v-if="!hideOptions">
<li v-for="opt in filteredOptions" <li
v-for="opt in filteredOptions"
:key="opt.optionId" :key="opt.optionId"
:class="{'optionPreSelected': optionIndex === opt.optionId}" :class="{'optionPreSelected': optionIndex === opt.optionId}"
@click="fillInputWithString(opt.name)" @click="fillInputWithString(opt.name)"

9
src/api/forms/components/controls/ClockDisplayFormatField.vue
View File

@ -22,10 +22,11 @@
<template> <template>
<div class="c-form-control--clock-display-format-fields"> <div class="c-form-control--clock-display-format-fields">
<SelectField v-for="item in items" <SelectField
:key="item.key" v-for="item in items"
:model="item" :key="item.key"
@onChange="onChange" :model="item"
@onChange="onChange"
/> />
</div> </div>
</template> </template>

13
src/api/forms/components/controls/Composite.vue
View File

@ -22,12 +22,13 @@
<template> <template>
<span> <span>
<CompositeItem v-for="(item, index) in model.items" <CompositeItem
:key="item.name" v-for="(item, index) in model.items"
:first="index < 1" :key="item.name"
:value="JSON.stringify(model.value[index])" :first="index < 1"
:item="item" :value="JSON.stringify(model.value[index])"
@onChange="onChange" :item="item"
@onChange="onChange"
/> />
</span> </span>
</template> </template>

9
src/api/forms/components/controls/CompositeItem.vue
View File

@ -22,10 +22,11 @@
<template> <template>
<div :class="compositeCssClass"> <div :class="compositeCssClass">
<FormRow :css-class="item.cssClass" <FormRow
:first="first" :css-class="item.cssClass"
:row="row" :first="first"
@onChange="onChange" :row="row"
@onChange="onChange"
/> />
<span class="composite-control-label"> <span class="composite-control-label">
{{ item.name }} {{ item.name }}

71
src/api/forms/components/controls/Datetime.vue
View File

@ -27,50 +27,55 @@
<div class="hint time sm">Min</div> <div class="hint time sm">Min</div>
<div class="hint time sm">Sec</div> <div class="hint time sm">Sec</div>
<div class="hint timezone">Timezone</div> <div class="hint timezone">Timezone</div>
<form ref="dateTimeForm" <form
prevent ref="dateTimeForm"
class="u-contents" prevent
class="u-contents"
> >
<div class="field control date"> <div class="field control date">
<input v-model="date" <input
:pattern="/\d{4}-\d{2}-\d{2}/" v-model="date"
:placeholder="format" :pattern="/\d{4}-\d{2}-\d{2}/"
type="date" :placeholder="format"
name="date" type="date"
@change="onChange" name="date"
@change="onChange"
> >
</div> </div>
<div class="field control hour sm"> <div class="field control hour sm">
<input v-model="hour" <input
:pattern="/\d+/" v-model="hour"
type="number" :pattern="/\d+/"
name="hour" type="number"
maxlength="10" name="hour"
min="0" maxlength="10"
max="23" min="0"
@change="onChange" max="23"
@change="onChange"
> >
</div> </div>
<div class="field control min sm"> <div class="field control min sm">
<input v-model="min" <input
:pattern="/\d+/" v-model="min"
type="number" :pattern="/\d+/"
name="min" type="number"
maxlength="2" name="min"
min="0" maxlength="2"
max="59" min="0"
@change="onChange" max="59"
@change="onChange"
> >
</div> </div>
<div class="field control sec sm"> <div class="field control sec sm">
<input v-model="sec" <input
:pattern="/\d+/" v-model="sec"
type="number" :pattern="/\d+/"
name="sec" type="number"
maxlength="2" name="sec"
min="0" maxlength="2"
max="59" min="0"
@change="onChange" max="59"
@change="onChange"
> >
</div> </div>
<div class="field control timezone"> <div class="field control timezone">

23
src/api/forms/components/controls/FileInput.vue
View File

@ -22,18 +22,21 @@
<template> <template>
<span class="form-control shell"> <span class="form-control shell">
<span class="field control" <span
:class="model.cssClass" class="field control"
:class="model.cssClass"
> >
<input id="fileElem" <input
ref="fileInput" id="fileElem"
type="file" ref="fileInput"
accept=".json" type="file"
style="display:none" accept=".json"
style="display:none"
> >
<button id="fileSelect" <button
class="c-button" id="fileSelect"
@click="selectFile" class="c-button"
@click="selectFile"
> >
{{ name }} {{ name }}
</button> </button>

18
src/api/forms/components/controls/NumberField.vue
View File

@ -22,15 +22,17 @@
<template> <template>
<span class="form-control shell"> <span class="form-control shell">
<span class="field control" <span
:class="model.cssClass" class="field control"
:class="model.cssClass"
> >
<input v-model="field" <input
type="number" v-model="field"
:min="model.min" type="number"
:max="model.max" :min="model.min"
:step="model.step" :max="model.max"
@input="updateText()" :step="model.step"
@input="updateText()"
> >
</span> </span>
</span> </span>

16
src/api/forms/components/controls/SelectField.vue
View File

@ -22,14 +22,16 @@
<template> <template>
<div class="form-control select-field"> <div class="form-control select-field">
<select v-model="selected" <select
required="model.required" v-model="selected"
name="mctControl" required="model.required"
@change="onChange($event)" name="mctControl"
@change="onChange($event)"
> >
<option v-for="option in model.options" <option
:key="option.name" v-for="option in model.options"
:value="option.value" :key="option.name"
:value="option.value"
> >
{{ option.name }} {{ option.name }}
</option> </option>

14
src/api/forms/components/controls/TextAreaField.vue
View File

@ -22,13 +22,15 @@
<template> <template>
<span class="form-control shell"> <span class="form-control shell">
<span class="field control" <span
:class="model.cssClass" class="field control"
:class="model.cssClass"
> >
<textarea v-model="field" <textarea
type="text" v-model="field"
:size="model.size" type="text"
@input="updateText()" :size="model.size"
@input="updateText()"
> >
</textarea> </textarea>
</span> </span>

14
src/api/forms/components/controls/TextField.vue
View File

@ -22,13 +22,15 @@
<template> <template>
<span class="form-control shell"> <span class="form-control shell">
<span class="field control" <span
:class="model.cssClass" class="field control"
:class="model.cssClass"
> >
<input v-model="field" <input
type="text" v-model="field"
:size="model.size" type="text"
@input="updateText()" :size="model.size"
@input="updateText()"
> >
</span> </span>
</span> </span>

5
src/api/menu/components/Menu.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="c-menu" <div
:class="options.menuClass" class="c-menu"
:class="options.menuClass"
> >
<ul v-if="options.actions.length && options.actions[0].length"> <ul v-if="options.actions.length && options.actions[0].length">
<template <template

11
src/api/menu/components/SuperMenu.vue
View File

@ -1,8 +1,10 @@
<template> <template>
<div class="c-menu" <div
:class="[options.menuClass, 'c-super-menu']" class="c-menu"
:class="[options.menuClass, 'c-super-menu']"
> >
<ul v-if="options.actions.length && options.actions[0].length" <ul
v-if="options.actions.length && options.actions[0].length"
class="c-super-menu__menu" class="c-super-menu__menu"
> >
<template <template
@ -34,7 +36,8 @@
</template> </template>
</ul> </ul>
<ul v-else <ul
v-else
class="c-super-menu__menu" class="c-super-menu__menu"
> >
<li <li

42
src/plugins/charts/BarGraphPlot.vue
View File

@ -1,28 +1,34 @@
<template> <template>
<div ref="plotWrapper" <div
class="has-local-controls" ref="plotWrapper"
:class="{ 's-unsynced' : isZoomed }" class="has-local-controls"
:class="{ 's-unsynced' : isZoomed }"
> >
<div v-if="isZoomed" <div
class="l-state-indicators" v-if="isZoomed"
class="l-state-indicators"
> >
<span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle" <span
title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data." class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."
></span> ></span>
</div> </div>
<div ref="plot" <div
class="c-bar-chart" ref="plot"
@plotly_relayout="zoom" class="c-bar-chart"
@plotly_relayout="zoom"
></div> ></div>
<div v-if="false" <div
ref="localControl" v-if="false"
class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover" ref="localControl"
class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover"
> >
<button v-if="data.length" <button
class="c-button icon-reset" v-if="data.length"
:disabled="!isZoomed" class="c-button icon-reset"
title="Reset pan/zoom" :disabled="!isZoomed"
@click="reset()" title="Reset pan/zoom"
@click="reset()"
> >
</button> </button>
</div> </div>

13
src/plugins/charts/BarGraphView.vue
View File

@ -21,12 +21,13 @@
--> -->
<template> <template>
<BarGraph ref="barGraph" <BarGraph
class="c-plot c-bar-chart-view" ref="barGraph"
:data="trace" class="c-plot c-bar-chart-view"
:plot-axis-title="plotAxisTitle" :data="trace"
@subscribe="subscribeToAll" :plot-axis-title="plotAxisTitle"
@unsubscribe="removeAllSubscriptions" @subscribe="subscribeToAll"
@unsubscribe="removeAllSubscriptions"
/> />
</template> </template>

8
src/plugins/charts/inspector/BarGraphOptions.vue
View File

@ -22,11 +22,13 @@
<template> <template>
<ul class="c-tree c-bar-graph-options"> <ul class="c-tree c-bar-graph-options">
<h2 title="Display properties for this object">Bar Graph Series</h2> <h2 title="Display properties for this object">Bar Graph Series</h2>
<li v-for="series in domainObject.composition" <li
v-for="series in domainObject.composition"
:key="series.key" :key="series.key"
> >
<series-options :item="series" <series-options
:color-palette="colorPalette" :item="series"
:color-palette="colorPalette"
/> />
</li> </li>
</ul> </ul>

27
src/plugins/charts/inspector/SeriesOptions.vue
View File

@ -21,12 +21,14 @@
--> -->
<template> <template>
<ul> <ul>
<li class="c-tree__item menus-to-left" <li
class="c-tree__item menus-to-left"
:class="aliasCss" :class="aliasCss"
> >
<span class="c-disclosure-triangle is-enabled flex-elem" <span
:class="expandedCssClass" class="c-disclosure-triangle is-enabled flex-elem"
@click="expanded = !expanded" :class="expandedCssClass"
@click="expanded = !expanded"
> >
</span> </span>
@ -36,14 +38,15 @@
<div class="c-object-label__name">{{ name }}</div> <div class="c-object-label__name">{{ name }}</div>
</div> </div>
</li> </li>
<ColorSwatch v-if="expanded" <ColorSwatch
:current-color="currentColor" v-if="expanded"
title="Manually set the color for this bar graph series." :current-color="currentColor"
edit-title="Manually set the color for this bar graph series" title="Manually set the color for this bar graph series."
view-title="The color for this bar graph series." edit-title="Manually set the color for this bar graph series"
short-label="Color" view-title="The color for this bar graph series."
class="grid-properties" short-label="Color"
@colorSet="setColor" class="grid-properties"
@colorSet="setColor"
/> />
</ul> </ul>
</template> </template>

170
src/plugins/condition/components/Condition.vue
View File

@ -21,31 +21,35 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div class="c-condition-h" <div
:class="{ 'is-drag-target': draggingOver }" class="c-condition-h"
@dragover.prevent :class="{ 'is-drag-target': draggingOver }"
@drop.prevent="dropCondition($event, conditionIndex)" @dragover.prevent
@dragenter="dragEnter($event, conditionIndex)" @drop.prevent="dropCondition($event, conditionIndex)"
@dragleave="dragLeave($event, conditionIndex)" @dragenter="dragEnter($event, conditionIndex)"
@dragleave="dragLeave($event, conditionIndex)"
> >
<div class="c-condition-h__drop-target"></div> <div class="c-condition-h__drop-target"></div>
<div v-if="isEditing" <div
:class="{'is-current': condition.id === currentConditionId}" v-if="isEditing"
class="c-condition c-condition--edit" :class="{'is-current': condition.id === currentConditionId}"
class="c-condition c-condition--edit"
> >
<!-- Edit view --> <!-- Edit view -->
<div class="c-condition__header"> <div class="c-condition__header">
<span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag" <span
title="Drag to reorder conditions" class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
:class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]" title="Drag to reorder conditions"
:draggable="!condition.isDefault" :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
@dragstart="dragStart" :draggable="!condition.isDefault"
@dragend="dragEnd" @dragstart="dragStart"
@dragend="dragEnd"
></span> ></span>
<span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled" <span
:class="{ 'c-disclosure-triangle--expanded': expanded }" class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
@click="expanded = !expanded" :class="{ 'c-disclosure-triangle--expanded': expanded }"
@click="expanded = !expanded"
></span> ></span>
<span class="c-condition__name">{{ condition.configuration.name }}</span> <span class="c-condition__name">{{ condition.configuration.name }}</span>
@ -54,107 +58,123 @@
Define criteria Define criteria
</template> </template>
<span v-else> <span v-else>
<condition-description :show-label="false" <condition-description
:condition="condition" :show-label="false"
:condition="condition"
/> />
</span> </span>
</span> </span>
<div class="c-condition__buttons"> <div class="c-condition__buttons">
<button v-if="!condition.isDefault" <button
class="c-click-icon c-condition__duplicate-button icon-duplicate" v-if="!condition.isDefault"
title="Duplicate this condition" class="c-click-icon c-condition__duplicate-button icon-duplicate"
@click="cloneCondition" title="Duplicate this condition"
@click="cloneCondition"
></button> ></button>
<button v-if="!condition.isDefault" <button
class="c-click-icon c-condition__delete-button icon-trash" v-if="!condition.isDefault"
title="Delete this condition" class="c-click-icon c-condition__delete-button icon-trash"
@click="removeCondition" title="Delete this condition"
@click="removeCondition"
></button> ></button>
</div> </div>
</div> </div>
<div v-if="expanded" <div
class="c-condition__definition c-cdef" v-if="expanded"
class="c-condition__definition c-cdef"
> >
<span class="c-cdef__separator c-row-separator"></span> <span class="c-cdef__separator c-row-separator"></span>
<span class="c-cdef__label">Condition Name</span> <span class="c-cdef__label">Condition Name</span>
<span class="c-cdef__controls"> <span class="c-cdef__controls">
<input v-model="condition.configuration.name" <input
class="t-condition-input__name" v-model="condition.configuration.name"
type="text" class="t-condition-input__name"
@change="persist" type="text"
@change="persist"
> >
</span> </span>
<span class="c-cdef__label">Output</span> <span class="c-cdef__label">Output</span>
<span class="c-cdef__controls"> <span class="c-cdef__controls">
<span class="c-cdef__control"> <span class="c-cdef__control">
<select v-model="selectedOutputSelection" <select
@change="setOutputValue" v-model="selectedOutputSelection"
@change="setOutputValue"
> >
<option v-for="option in outputOptions" <option
:key="option" v-for="option in outputOptions"
:value="option" :key="option"
:value="option"
> >
{{ initCap(option) }} {{ initCap(option) }}
</option> </option>
</select> </select>
</span> </span>
<span class="c-cdef__control"> <span class="c-cdef__control">
<input v-if="selectedOutputSelection === outputOptions[2]" <input
v-model="condition.configuration.output" v-if="selectedOutputSelection === outputOptions[2]"
class="t-condition-name-input" v-model="condition.configuration.output"
type="text" class="t-condition-name-input"
@change="persist" type="text"
@change="persist"
> >
</span> </span>
</span> </span>
<div v-if="!condition.isDefault" <div
class="c-cdef__match-and-criteria" v-if="!condition.isDefault"
class="c-cdef__match-and-criteria"
> >
<span class="c-cdef__separator c-row-separator"></span> <span class="c-cdef__separator c-row-separator"></span>
<span class="c-cdef__label">Match</span> <span class="c-cdef__label">Match</span>
<span class="c-cdef__controls"> <span class="c-cdef__controls">
<select v-model="condition.configuration.trigger" <select
@change="persist" v-model="condition.configuration.trigger"
@change="persist"
> >
<option v-for="option in triggers" <option
:key="option.value" v-for="option in triggers"
:value="option.value" :key="option.value"
:value="option.value"
> {{ option.label }}</option> > {{ option.label }}</option>
</select> </select>
</span> </span>
<template v-if="telemetry.length || condition.configuration.criteria.length"> <template v-if="telemetry.length || condition.configuration.criteria.length">
<div v-for="(criterion, index) in condition.configuration.criteria" <div
:key="criterion.id" v-for="(criterion, index) in condition.configuration.criteria"
class="c-cdef__criteria" :key="criterion.id"
class="c-cdef__criteria"
> >
<Criterion :telemetry="telemetry" <Criterion
:criterion="criterion" :telemetry="telemetry"
:index="index" :criterion="criterion"
:trigger="condition.configuration.trigger" :index="index"
:is-default="condition.configuration.criteria.length === 1" :trigger="condition.configuration.trigger"
@persist="persist" :is-default="condition.configuration.criteria.length === 1"
@persist="persist"
/> />
<div class="c-cdef__criteria__buttons"> <div class="c-cdef__criteria__buttons">
<button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate" <button
title="Duplicate this criteria" class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
@click="cloneCriterion(index)" title="Duplicate this criteria"
@click="cloneCriterion(index)"
></button> ></button>
<button v-if="!(condition.configuration.criteria.length === 1)" <button
class="c-click-icon c-cdef__criteria-duplicate-button icon-trash" v-if="!(condition.configuration.criteria.length === 1)"
title="Delete this criteria" class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
@click="removeCriterion(index)" title="Delete this criteria"
@click="removeCriterion(index)"
></button> ></button>
</div> </div>
</div> </div>
</template> </template>
<div class="c-cdef__separator c-row-separator"></div> <div class="c-cdef__separator c-row-separator"></div>
<div class="c-cdef__controls" <div
:disabled="!telemetry.length" class="c-cdef__controls"
:disabled="!telemetry.length"
> >
<button <button
class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus" class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
@ -166,9 +186,10 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else <div
class="c-condition c-condition--browse" v-else
:class="{'is-current': condition.id === currentConditionId}" class="c-condition c-condition--browse"
:class="{'is-current': condition.id === currentConditionId}"
> >
<!-- Browse view --> <!-- Browse view -->
<div class="c-condition__header"> <div class="c-condition__header">
@ -180,8 +201,9 @@
</span> </span>
</div> </div>
<div class="c-condition__summary"> <div class="c-condition__summary">
<condition-description :show-label="false" <condition-description
:condition="condition" :show-label="false"
:condition="condition"
/> />
</div> </div>
</div> </div>

53
src/plugins/condition/components/ConditionCollection.vue
View File

@ -21,8 +21,9 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<section id="conditionCollection" <section
:class="{ 'is-expanded': expanded }" id="conditionCollection"
:class="{ 'is-expanded': expanded }"
> >
<div class="c-cs__header c-section__header"> <div class="c-cs__header c-section__header">
<span <span
@ -32,12 +33,14 @@
></span> ></span>
<div class="c-cs__header-label c-section__label">Conditions</div> <div class="c-cs__header-label c-section__label">Conditions</div>
</div> </div>
<div v-if="expanded" <div
class="c-cs__content" v-if="expanded"
class="c-cs__content"
> >
<div v-show="isEditing" <div
class="hint" v-show="isEditing"
:class="{ 's-status-icon-warning-lo': !telemetryObjs.length }" class="hint"
:class="{ 's-status-icon-warning-lo': !telemetryObjs.length }"
> >
<template v-if="!telemetryObjs.length">Drag telemetry into this Condition Set to configure Conditions and add criteria.</template> <template v-if="!telemetryObjs.length">Drag telemetry into this Condition Set to configure Conditions and add criteria.</template>
<template v-else>The first condition to match is the one that is applied. Drag conditions to reorder.</template> <template v-else>The first condition to match is the one that is applied. Drag conditions to reorder.</template>
@ -52,24 +55,26 @@
<span class="c-cs-button__label">Add Condition</span> <span class="c-cs-button__label">Add Condition</span>
</button> </button>
<div class="c-cs__conditions-h" <div
:class="{ 'is-active-dragging': isDragging }" class="c-cs__conditions-h"
:class="{ 'is-active-dragging': isDragging }"
> >
<Condition v-for="(condition, index) in conditionCollection" <Condition
:key="condition.id" v-for="(condition, index) in conditionCollection"
:condition="condition" :key="condition.id"
:current-condition-id="currentConditionId" :condition="condition"
:condition-index="index" :current-condition-id="currentConditionId"
:telemetry="telemetryObjs" :condition-index="index"
:is-editing="isEditing" :telemetry="telemetryObjs"
:move-index="moveIndex" :is-editing="isEditing"
:is-dragging="isDragging" :move-index="moveIndex"
@updateCondition="updateCondition" :is-dragging="isDragging"
@removeCondition="removeCondition" @updateCondition="updateCondition"
@cloneCondition="cloneCondition" @removeCondition="removeCondition"
@setMoveIndex="setMoveIndex" @cloneCondition="cloneCondition"
@dragComplete="dragComplete" @setMoveIndex="setMoveIndex"
@dropCondition="dropCondition" @dragComplete="dragComplete"
@dropCondition="dropCondition"
/> />
</div> </div>
</div> </div>

15
src/plugins/condition/components/ConditionDescription.vue
View File

@ -22,18 +22,21 @@
<template> <template>
<div class="c-style__condition-desc"> <div class="c-style__condition-desc">
<span v-if="showLabel && condition" <span
class="c-style__condition-desc__name c-condition__name" v-if="showLabel && condition"
class="c-style__condition-desc__name c-condition__name"
> >
{{ condition.configuration.name }} {{ condition.configuration.name }}
</span> </span>
<span v-if="!condition.isDefault" <span
class="c-style__condition-desc__text" v-if="!condition.isDefault"
class="c-style__condition-desc__text"
> >
{{ description }} {{ description }}
</span> </span>
<span v-else <span
class="c-style__condition-desc__text" v-else
class="c-style__condition-desc__text"
> >
Match if no other condition is matched Match if no other condition is matched
</span> </span>

12
src/plugins/condition/components/ConditionError.vue
View File

@ -21,12 +21,14 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div v-if="conditionErrors.length" <div
class="c-condition__errors" v-if="conditionErrors.length"
class="c-condition__errors"
> >
<div v-for="(error, index) in conditionErrors" <div
:key="index" v-for="(error, index) in conditionErrors"
class="u-alert u-alert--block u-alert--with-icon" :key="index"
class="u-alert u-alert--block u-alert--with-icon"
>{{ error.message.errorText }} {{ error.additionalInfo }} >{{ error.message.errorText }} {{ error.additionalInfo }}
</div> </div>
</div> </div>

24
src/plugins/condition/components/ConditionSet.vue
View File

@ -36,18 +36,20 @@
</div> </div>
</section> </section>
<div class="c-cs__test-data-and-conditions-w"> <div class="c-cs__test-data-and-conditions-w">
<TestData class="c-cs__test-data" <TestData
:is-editing="isEditing" class="c-cs__test-data"
:test-data="testData" :is-editing="isEditing"
:telemetry="telemetryObjs" :test-data="testData"
@updateTestData="updateTestData" :telemetry="telemetryObjs"
@updateTestData="updateTestData"
/> />
<ConditionCollection class="c-cs__conditions" <ConditionCollection
:is-editing="isEditing" class="c-cs__conditions"
:test-data="testData" :is-editing="isEditing"
@conditionSetResultUpdated="updateCurrentOutput" :test-data="testData"
@updateDefaultOutput="updateDefaultOutput" @conditionSetResultUpdated="updateCurrentOutput"
@telemetryUpdated="updateTelemetry" @updateDefaultOutput="updateDefaultOutput"
@telemetryUpdated="updateTelemetry"
/> />
</div> </div>
</div> </div>

83
src/plugins/condition/components/Criterion.vue
View File

@ -26,76 +26,89 @@
<span class="c-cdef__label">{{ setRowLabel }}</span> <span class="c-cdef__label">{{ setRowLabel }}</span>
<span class="c-cdef__controls"> <span class="c-cdef__controls">
<span class="c-cdef__control"> <span class="c-cdef__control">
<select ref="telemetrySelect" <select
v-model="criterion.telemetry" ref="telemetrySelect"
@change="updateMetadataOptions" v-model="criterion.telemetry"
@change="updateMetadataOptions"
> >
<option value="">- Select Telemetry -</option> <option value="">- Select Telemetry -</option>
<option value="all">all telemetry</option> <option value="all">all telemetry</option>
<option value="any">any telemetry</option> <option value="any">any telemetry</option>
<option v-for="telemetryOption in telemetry" <option
:key="telemetryOption.identifier.key" v-for="telemetryOption in telemetry"
:value="telemetryOption.identifier" :key="telemetryOption.identifier.key"
:value="telemetryOption.identifier"
> >
{{ telemetryOption.name }} {{ telemetryOption.name }}
</option> </option>
</select> </select>
</span> </span>
<span v-if="criterion.telemetry" <span
class="c-cdef__control" v-if="criterion.telemetry"
class="c-cdef__control"
> >
<select ref="metadataSelect" <select
v-model="criterion.metadata" ref="metadataSelect"
@change="updateOperations" v-model="criterion.metadata"
@change="updateOperations"
> >
<option value="">- Select Field -</option> <option value="">- Select Field -</option>
<option v-for="option in telemetryMetadataOptions" <option
:key="option.key" v-for="option in telemetryMetadataOptions"
:value="option.key" :key="option.key"
:value="option.key"
> >
{{ option.name }} {{ option.name }}
</option> </option>
<option value="dataReceived">any data received</option> <option value="dataReceived">any data received</option>
</select> </select>
</span> </span>
<span v-if="criterion.telemetry && criterion.metadata" <span
class="c-cdef__control" v-if="criterion.telemetry && criterion.metadata"
class="c-cdef__control"
> >
<select v-model="criterion.operation" <select
@change="updateInputVisibilityAndValues" v-model="criterion.operation"
@change="updateInputVisibilityAndValues"
> >
<option value="">- Select Comparison -</option> <option value="">- Select Comparison -</option>
<option v-for="option in filteredOps" <option
:key="option.name" v-for="option in filteredOps"
:value="option.name" :key="option.name"
:value="option.name"
> >
{{ option.text }} {{ option.text }}
</option> </option>
</select> </select>
<template v-if="!enumerations.length"> <template v-if="!enumerations.length">
<span v-for="(item, inputIndex) in inputCount" <span
:key="inputIndex" v-for="(item, inputIndex) in inputCount"
class="c-cdef__control__inputs" :key="inputIndex"
class="c-cdef__control__inputs"
> >
<input v-model="criterion.input[inputIndex]" <input
class="c-cdef__control__input" v-model="criterion.input[inputIndex]"
:type="setInputType" class="c-cdef__control__input"
@change="persist" :type="setInputType"
@change="persist"
> >
<span v-if="inputIndex < inputCount-1">and</span> <span v-if="inputIndex < inputCount-1">and</span>
</span> </span>
<span v-if="criterion.metadata === 'dataReceived'">seconds</span> <span v-if="criterion.metadata === 'dataReceived'">seconds</span>
</template> </template>
<span v-else> <span v-else>
<span v-if="inputCount && criterion.operation" <span
class="c-cdef__control" v-if="inputCount && criterion.operation"
class="c-cdef__control"
> >
<select v-model="criterion.input[0]" <select
@change="persist" v-model="criterion.input[0]"
@change="persist"
> >
<option v-for="option in enumerations" <option
:key="option.string" v-for="option in enumerations"
:value="option.value.toString()" :key="option.string"
:value="option.value.toString()"
> >
{{ option.string }} {{ option.string }}
</option> </option>

83
src/plugins/condition/components/TestData.vue
View File

@ -21,9 +21,10 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<section v-show="isEditing" <section
id="test-data" v-show="isEditing"
:class="{ 'is-expanded': expanded }" id="test-data"
:class="{ 'is-expanded': expanded }"
> >
<div class="c-cs__header c-section__header"> <div class="c-cs__header c-section__header">
<span <span
@ -33,11 +34,13 @@
></span> ></span>
<div class="c-cs__header-label c-section__label">Test Data</div> <div class="c-cs__header-label c-section__label">Test Data</div>
</div> </div>
<div v-if="expanded" <div
class="c-cs__content" v-if="expanded"
class="c-cs__content"
> >
<div class="c-cs__test-data__controls c-cdef__controls" <div
:disabled="!telemetry.length" class="c-cs__test-data__controls c-cdef__controls"
:disabled="!telemetry.length"
> >
<label class="c-toggle-switch"> <label class="c-toggle-switch">
<input <input
@ -50,59 +53,69 @@
</label> </label>
</div> </div>
<div class="c-cs-tests"> <div class="c-cs-tests">
<span v-for="(testInput, tIndex) in testInputs" <span
:key="tIndex" v-for="(testInput, tIndex) in testInputs"
class="c-test-datum c-cs-test" :key="tIndex"
class="c-test-datum c-cs-test"
> >
<span class="c-cs-test__label">Set</span> <span class="c-cs-test__label">Set</span>
<span class="c-cs-test__controls"> <span class="c-cs-test__controls">
<span class="c-cdef__control"> <span class="c-cdef__control">
<select v-model="testInput.telemetry" <select
@change="updateMetadata(testInput)" v-model="testInput.telemetry"
@change="updateMetadata(testInput)"
> >
<option value="">- Select Telemetry -</option> <option value="">- Select Telemetry -</option>
<option v-for="(telemetryOption, index) in telemetry" <option
:key="index" v-for="(telemetryOption, index) in telemetry"
:value="telemetryOption.identifier" :key="index"
:value="telemetryOption.identifier"
> >
{{ telemetryOption.name }} {{ telemetryOption.name }}
</option> </option>
</select> </select>
</span> </span>
<span v-if="testInput.telemetry" <span
class="c-cdef__control" v-if="testInput.telemetry"
class="c-cdef__control"
> >
<select v-model="testInput.metadata" <select
@change="updateTestData" v-model="testInput.metadata"
@change="updateTestData"
> >
<option value="">- Select Field -</option> <option value="">- Select Field -</option>
<option v-for="(option, index) in telemetryMetadataOptions[getId(testInput.telemetry)]" <option
:key="index" v-for="(option, index) in telemetryMetadataOptions[getId(testInput.telemetry)]"
:value="option.key" :key="index"
:value="option.key"
> >
{{ option.name }} {{ option.name }}
</option> </option>
</select> </select>
</span> </span>
<span v-if="testInput.metadata" <span
class="c-cdef__control__inputs" v-if="testInput.metadata"
class="c-cdef__control__inputs"
> >
<input v-model="testInput.value" <input
placeholder="Enter test input" v-model="testInput.value"
type="text" placeholder="Enter test input"
class="c-cdef__control__input" type="text"
@change="updateTestData" class="c-cdef__control__input"
@change="updateTestData"
> >
</span> </span>
</span> </span>
<div class="c-cs-test__buttons"> <div class="c-cs-test__buttons">
<button class="c-click-icon c-test-data__duplicate-button icon-duplicate" <button
title="Duplicate this test datum" class="c-click-icon c-test-data__duplicate-button icon-duplicate"
@click="addTestInput(testInput)" title="Duplicate this test datum"
@click="addTestInput(testInput)"
></button> ></button>
<button class="c-click-icon c-test-data__delete-button icon-trash" <button
title="Delete this test datum" class="c-click-icon c-test-data__delete-button icon-trash"
@click="removeTestInput(tIndex)" title="Delete this test datum"
@click="removeTestInput(tIndex)"
></button> ></button>
</div> </div>
</span> </span>

72
src/plugins/condition/components/inspector/StyleEditor.vue
View File

@ -23,52 +23,60 @@
<template> <template>
<div class="c-style has-local-controls c-toolbar"> <div class="c-style has-local-controls c-toolbar">
<div class="c-style__controls"> <div class="c-style__controls">
<div :class="[ <div
{ 'is-style-invisible': styleItem.style && styleItem.style.isStyleInvisible }, :class="[
{ 'c-style-thumb--mixed': mixedStyles.indexOf('backgroundColor') > -1 } { 'is-style-invisible': styleItem.style && styleItem.style.isStyleInvisible },
]" { 'c-style-thumb--mixed': mixedStyles.indexOf('backgroundColor') > -1 }
:style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : itemStyle ]" ]"
class="c-style-thumb" :style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : itemStyle ]"
class="c-style-thumb"
> >
<span class="c-style-thumb__text" <span
:class="{ 'hide-nice': !hasProperty(styleItem.style.color) }" class="c-style-thumb__text"
:class="{ 'hide-nice': !hasProperty(styleItem.style.color) }"
> >
ABC ABC
</span> </span>
</div> </div>
<toolbar-color-picker v-if="hasProperty(styleItem.style.border)" <toolbar-color-picker
class="c-style__toolbar-button--border-color u-menu-to--center" v-if="hasProperty(styleItem.style.border)"
:options="borderColorOption" class="c-style__toolbar-button--border-color u-menu-to--center"
@change="updateStyleValue" :options="borderColorOption"
@change="updateStyleValue"
/> />
<toolbar-color-picker v-if="hasProperty(styleItem.style.backgroundColor)" <toolbar-color-picker
class="c-style__toolbar-button--background-color u-menu-to--center" v-if="hasProperty(styleItem.style.backgroundColor)"
:options="backgroundColorOption" class="c-style__toolbar-button--background-color u-menu-to--center"
@change="updateStyleValue" :options="backgroundColorOption"
@change="updateStyleValue"
/> />
<toolbar-color-picker v-if="hasProperty(styleItem.style.color)" <toolbar-color-picker
class="c-style__toolbar-button--color u-menu-to--center" v-if="hasProperty(styleItem.style.color)"
:options="colorOption" class="c-style__toolbar-button--color u-menu-to--center"
@change="updateStyleValue" :options="colorOption"
@change="updateStyleValue"
/> />
<toolbar-button v-if="hasProperty(styleItem.style.imageUrl)" <toolbar-button
class="c-style__toolbar-button--image-url" v-if="hasProperty(styleItem.style.imageUrl)"
:options="imageUrlOption" class="c-style__toolbar-button--image-url"
@change="updateStyleValue" :options="imageUrlOption"
@change="updateStyleValue"
/> />
<toolbar-toggle-button v-if="hasProperty(styleItem.style.isStyleInvisible)" <toolbar-toggle-button
class="c-style__toolbar-button--toggle-visible" v-if="hasProperty(styleItem.style.isStyleInvisible)"
:options="isStyleInvisibleOption" class="c-style__toolbar-button--toggle-visible"
@change="updateStyleValue" :options="isStyleInvisibleOption"
@change="updateStyleValue"
/> />
</div> </div>
<!-- Save Styles --> <!-- Save Styles -->
<toolbar-button v-if="canSaveStyle" <toolbar-button
class="c-style__toolbar-button--save c-local-controls--show-on-hover c-icon-button c-icon-button--major" v-if="canSaveStyle"
:options="saveOptions" class="c-style__toolbar-button--save c-local-controls--show-on-hover c-icon-button c-icon-button--major"
@click="saveItemStyle()" :options="saveOptions"
@click="saveItemStyle()"
/> />
</div> </div>
</template> </template>

88
src/plugins/condition/components/inspector/StylesView.vue
View File

@ -22,8 +22,9 @@
<template> <template>
<div class="c-inspector__styles c-inspect-styles"> <div class="c-inspector__styles c-inspect-styles">
<div v-if="isStaticAndConditionalStyles" <div
class="c-inspect-styles__mixed-static-and-conditional u-alert u-alert--block u-alert--with-icon" v-if="isStaticAndConditionalStyles"
class="c-inspect-styles__mixed-static-and-conditional u-alert u-alert--block u-alert--with-icon"
> >
Your selection includes one or more items that use Conditional Styling. Applying a static style below will replace any Conditional Styling with the new choice. Your selection includes one or more items that use Conditional Styling. Applying a static style below will replace any Conditional Styling with the new choice.
</div> </div>
@ -37,16 +38,18 @@
@set-font-property="setFontProperty" @set-font-property="setFontProperty"
/> />
<div class="c-inspect-styles__content"> <div class="c-inspect-styles__content">
<div v-if="staticStyle" <div
class="c-inspect-styles__style" v-if="staticStyle"
class="c-inspect-styles__style"
> >
<StyleEditor class="c-inspect-styles__editor" <StyleEditor
:style-item="staticStyle" class="c-inspect-styles__editor"
:is-editing="allowEditing" :style-item="staticStyle"
:mixed-styles="mixedStyles" :is-editing="allowEditing"
:non-specific-font-properties="nonSpecificFontProperties" :mixed-styles="mixedStyles"
@persist="updateStaticStyle" :non-specific-font-properties="nonSpecificFontProperties"
@save-style="saveStyle" @persist="updateStaticStyle"
@save-style="saveStyle"
/> />
</div> </div>
<button <button
@ -64,9 +67,10 @@
Conditional Object Styles Conditional Object Styles
</div> </div>
<div class="c-inspect-styles__content c-inspect-styles__condition-set c-inspect-styles__elem"> <div class="c-inspect-styles__content c-inspect-styles__condition-set c-inspect-styles__elem">
<a v-if="conditionSetDomainObject" <a
class="c-object-label" v-if="conditionSetDomainObject"
@click="navigateOrPreview" class="c-object-label"
@click="navigateOrPreview"
> >
<span class="c-object-label__type-icon icon-conditional"></span> <span class="c-object-label__type-icon icon-conditional"></span>
<span class="c-object-label__name">{{ conditionSetDomainObject.name }}</span> <span class="c-object-label__name">{{ conditionSetDomainObject.name }}</span>
@ -80,15 +84,17 @@
<span class="c-button__label">Change...</span> <span class="c-button__label">Change...</span>
</button> </button>
<button class="c-click-icon icon-x" <button
title="Remove conditional styles" class="c-click-icon icon-x"
@click="removeConditionSet" title="Remove conditional styles"
@click="removeConditionSet"
></button> ></button>
</template> </template>
</div> </div>
<div v-if="isConditionWidget && allowEditing" <div
class="c-inspect-styles__elem c-inspect-styles__output-label-toggle" v-if="isConditionWidget && allowEditing"
class="c-inspect-styles__elem c-inspect-styles__output-label-toggle"
> >
<label class="c-toggle-switch"> <label class="c-toggle-switch">
<input <input
@ -100,8 +106,9 @@
<span class="c-toggle-switch__label">Use Condition Set output as label</span> <span class="c-toggle-switch__label">Use Condition Set output as label</span>
</label> </label>
</div> </div>
<div v-if="isConditionWidget && !allowEditing" <div
class="c-inspect-styles__elem" v-if="isConditionWidget && !allowEditing"
class="c-inspect-styles__elem"
> >
<span class="c-toggle-switch__label">Condition Set output as label: <span class="c-toggle-switch__label">Condition Set output as label:
<span v-if="useConditionSetOutputAsLabel"> Yes</span><span v-else> No</span> <span v-if="useConditionSetOutputAsLabel"> Yes</span><span v-else> No</span>
@ -114,27 +121,32 @@
@set-font-property="setFontProperty" @set-font-property="setFontProperty"
/> />
<div v-if="conditionsLoaded" <div
class="c-inspect-styles__conditions" v-if="conditionsLoaded"
class="c-inspect-styles__conditions"
> >
<div v-for="(conditionStyle, index) in conditionalStyles" <div
:key="index" v-for="(conditionStyle, index) in conditionalStyles"
class="c-inspect-styles__condition" :key="index"
:class="{'is-current': conditionStyle.conditionId === selectedConditionId}" class="c-inspect-styles__condition"
@click="applySelectedConditionStyle(conditionStyle.conditionId)" :class="{'is-current': conditionStyle.conditionId === selectedConditionId}"
@click="applySelectedConditionStyle(conditionStyle.conditionId)"
> >
<condition-error :show-label="true" <condition-error
:condition="getCondition(conditionStyle.conditionId)" :show-label="true"
:condition="getCondition(conditionStyle.conditionId)"
/> />
<condition-description :show-label="true" <condition-description
:condition="getCondition(conditionStyle.conditionId)" :show-label="true"
:condition="getCondition(conditionStyle.conditionId)"
/> />
<StyleEditor class="c-inspect-styles__editor" <StyleEditor
:style-item="conditionStyle" class="c-inspect-styles__editor"
:non-specific-font-properties="nonSpecificFontProperties" :style-item="conditionStyle"
:is-editing="allowEditing" :non-specific-font-properties="nonSpecificFontProperties"
@persist="updateConditionalStyle" :is-editing="allowEditing"
@save-style="saveStyle" @persist="updateConditionalStyle"
@save-style="saveStyle"
/> />
</div> </div>
</div> </div>

7
src/plugins/conditionWidget/components/ConditionWidget.vue
View File

@ -21,9 +21,10 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<component :is="urlDefined ? 'a' : 'span'" <component
class="c-condition-widget u-style-receiver js-style-receiver" :is="urlDefined ? 'a' : 'span'"
:href="url" class="c-condition-widget u-style-receiver js-style-receiver"
:href="url"
> >
<div class="c-condition-widget__label"> <div class="c-condition-widget__label">
{{ internalDomainObject.conditionalLabel || internalDomainObject.label }} {{ internalDomainObject.conditionalLabel || internalDomainObject.label }}

5
src/plugins/displayLayout/components/TelemetryView.vue
View File

@ -37,8 +37,9 @@
:data-font="item.font" :data-font="item.font"
@contextmenu.prevent="showContextMenu" @contextmenu.prevent="showContextMenu"
> >
<div class="is-status__indicator" <div
:title="`This item is ${status}`" class="is-status__indicator"
:title="`This item is ${status}`"
></div> ></div>
<div <div
v-if="showLabel" v-if="showLabel"

5
src/plugins/folderView/components/GridItem.vue
View File

@ -26,8 +26,9 @@
</div> </div>
</div> </div>
<div class="c-grid-item__controls"> <div class="c-grid-item__controls">
<div class="is-status__indicator" <div
:title="`This item is ${status}`" class="is-status__indicator"
:title="`This item is ${status}`"
></div> ></div>
<div <div
class="icon-people" class="icon-people"

5
src/plugins/folderView/components/ListItem.vue
View File

@ -17,8 +17,9 @@
class="c-object-label__type-icon c-list-item__name__type-icon" class="c-object-label__type-icon c-list-item__name__type-icon"
:class="item.type.cssClass" :class="item.type.cssClass"
> >
<span class="is-status__indicator" <span
:title="`This item is ${status}`" class="is-status__indicator"
:title="`This item is ${status}`"
></span> ></span>
</div> </div>
<div class="c-object-label__name c-list-item__name__name">{{ item.model.name }}</div> <div class="c-object-label__name c-list-item__name__name">{{ item.model.name }}</div>

13
src/plugins/hyperlink/HyperlinkLayout.vue
View File

@ -22,12 +22,13 @@
<template> <template>
<a class="c-hyperlink" <a
:class="{ class="c-hyperlink"
'c-hyperlink--button' : isButton :class="{
}" 'c-hyperlink--button' : isButton
:target="domainObject.linkTarget" }"
:href="url" :target="domainObject.linkTarget"
:href="url"
> >
<span class="c-hyperlink__label">{{ domainObject.displayText }}</span> <span class="c-hyperlink__label">{{ domainObject.displayText }}</span>
</a> </a>

256
src/plugins/imagery/components/Compass/CompassRose.vue
View File

@ -21,124 +21,144 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div ref="compassRoseWrapper" <div
class="w-direction-rose" ref="compassRoseWrapper"
:class="compassRoseSizingClasses" class="w-direction-rose"
@click="toggleLockCompass" :class="compassRoseSizingClasses"
@click="toggleLockCompass"
> >
<svg ref="compassRoseSvg" <svg
class="c-compass-rose-svg" ref="compassRoseSvg"
viewBox="0 0 100 100" class="c-compass-rose-svg"
viewBox="0 0 100 100"
> >
<mask id="mask0" <mask
mask-type="alpha" id="mask0"
maskUnits="userSpaceOnUse" mask-type="alpha"
x="0" maskUnits="userSpaceOnUse"
y="0" x="0"
width="100" y="0"
height="100" width="100"
height="100"
> >
<circle cx="50" <circle
cy="50" cx="50"
r="50" cy="50"
fill="black" r="50"
fill="black"
/> />
</mask> </mask>
<g class="c-cr__compass-wrapper"> <g class="c-cr__compass-wrapper">
<g class="c-cr__compass-main" <g
mask="url(#mask0)" class="c-cr__compass-main"
mask="url(#mask0)"
> >
<!-- Background and clipped elements --> <!-- Background and clipped elements -->
<rect class="c-cr__bg" <rect
width="100" class="c-cr__bg"
height="100" width="100"
fill="black" height="100"
fill="black"
/> />
<rect class="c-cr__edge" <rect
width="100" class="c-cr__edge"
height="100" width="100"
fill="url(#paint0_radial)" height="100"
fill="url(#paint0_radial)"
/> />
<rect v-if="hasSunHeading" <rect
class="c-cr__sun" v-if="hasSunHeading"
width="100" class="c-cr__sun"
height="100" width="100"
fill="url(#paint1_radial)" height="100"
:style="sunHeadingStyle" fill="url(#paint1_radial)"
:style="sunHeadingStyle"
/> />
<!-- Camera FOV --> <!-- Camera FOV -->
<mask id="mask2" <mask
class="c-cr__cam-fov-l-mask" id="mask2"
mask-type="alpha" class="c-cr__cam-fov-l-mask"
maskUnits="userSpaceOnUse" mask-type="alpha"
x="0" maskUnits="userSpaceOnUse"
y="0" x="0"
width="50" y="0"
height="100" width="50"
height="100"
> >
<rect width="51" <rect
height="100" width="51"
height="100"
/> />
</mask> </mask>
<mask id="mask1" <mask
class="c-cr__cam-fov-r-mask" id="mask1"
mask-type="alpha" class="c-cr__cam-fov-r-mask"
maskUnits="userSpaceOnUse" mask-type="alpha"
x="50" maskUnits="userSpaceOnUse"
y="0" x="50"
width="50" y="0"
height="100" width="50"
height="100"
> >
<rect x="49" <rect
width="51" x="49"
height="100" width="51"
height="100"
/> />
</mask> </mask>
<g class="c-cr__cam-fov" <g
:style="cameraPanStyle" class="c-cr__cam-fov"
:style="cameraPanStyle"
> >
<g mask="url(#mask2)"> <g mask="url(#mask2)">
<rect class="c-cr__cam-fov-r" <rect
x="49" class="c-cr__cam-fov-r"
width="51" x="49"
height="100" width="51"
:style="cameraFOVStyleRightHalf" height="100"
:style="cameraFOVStyleRightHalf"
/> />
</g> </g>
<g mask="url(#mask1)"> <g mask="url(#mask1)">
<rect class="c-cr__cam-fov-l" <rect
width="51" class="c-cr__cam-fov-l"
height="100" width="51"
:style="cameraFOVStyleLeftHalf" height="100"
:style="cameraFOVStyleLeftHalf"
/> />
</g> </g>
</g> </g>
</g> </g>
<!-- Spacecraft body --> <!-- Spacecraft body -->
<path v-if="hasHeading" <path
class="c-cr__spacecraft-body" v-if="hasHeading"
fill-rule="evenodd" class="c-cr__spacecraft-body"
clip-rule="evenodd" fill-rule="evenodd"
d="M37 49C35.3431 49 34 50.3431 34 52V82C34 83.6569 35.3431 85 37 85H63C64.6569 85 66 83.6569 66 82V52C66 50.3431 64.6569 49 63 49H37ZM50 52L58 60H55V67H45V60H42L50 52Z" clip-rule="evenodd"
:style="headingStyle" d="M37 49C35.3431 49 34 50.3431 34 52V82C34 83.6569 35.3431 85 37 85H63C64.6569 85 66 83.6569 66 82V52C66 50.3431 64.6569 49 63 49H37ZM50 52L58 60H55V67H45V60H42L50 52Z"
:style="headingStyle"
/> />
<!-- NSEW and ticks --> <!-- NSEW and ticks -->
<g class="c-cr__nsew" <g
:style="compassRoseStyle" class="c-cr__nsew"
:style="compassRoseStyle"
> >
<g class="c-cr__ticks-major"> <g class="c-cr__ticks-major">
<path d="M50 3L43 10H57L50 3Z" /> <path d="M50 3L43 10H57L50 3Z" />
<path d="M4 51V49H10V51H4Z" <path
class="--hide-min" d="M4 51V49H10V51H4Z"
class="--hide-min"
/> />
<path d="M49 96V90H51V96H49Z" <path
class="--hide-min" d="M49 96V90H51V96H49Z"
class="--hide-min"
/> />
<path d="M90 49V51H96V49H90Z" <path
class="--hide-min" d="M90 49V51H96V49H90Z"
class="--hide-min"
/> />
</g> </g>
<g class="c-cr__ticks-minor --hide-small"> <g class="c-cr__ticks-minor --hide-small">
@ -148,53 +168,63 @@
<path d="M51 10L49 10V4L51 4V10Z" /> <path d="M51 10L49 10V4L51 4V10Z" />
</g> </g>
<g class="c-cr__nsew-text"> <g class="c-cr__nsew-text">
<path :style="cardinalTextRotateW" <path
class="c-cr__nsew-w --hide-small" :style="cardinalTextRotateW"
d="M56.7418 45.004H54.1378L52.7238 52.312H52.6958L51.2258 45.004H48.7758L47.3058 52.312H47.2778L45.8638 45.004H43.2598L45.9618 55H48.6078L49.9798 48.112H50.0078L51.3798 55H53.9838L56.7418 45.004Z" class="c-cr__nsew-w --hide-small"
d="M56.7418 45.004H54.1378L52.7238 52.312H52.6958L51.2258 45.004H48.7758L47.3058 52.312H47.2778L45.8638 45.004H43.2598L45.9618 55H48.6078L49.9798 48.112H50.0078L51.3798 55H53.9838L56.7418 45.004Z"
/> />
<path :style="cardinalTextRotateE" <path
class="c-cr__nsew-e --hide-small" :style="cardinalTextRotateE"
d="M46.104 55H54.21V52.76H48.708V50.856H53.608V48.84H48.708V47.09H54.07V45.004H46.104V55Z" class="c-cr__nsew-e --hide-small"
d="M46.104 55H54.21V52.76H48.708V50.856H53.608V48.84H48.708V47.09H54.07V45.004H46.104V55Z"
/> />
<path :style="cardinalTextRotateS" <path
class="c-cr__nsew-s --hide-small" :style="cardinalTextRotateS"
d="M45.6531 51.64C45.6671 54.202 47.6971 55.21 49.9931 55.21C52.1911 55.21 54.3471 54.398 54.3471 51.864C54.3471 50.058 52.8911 49.386 51.4491 48.98C49.9931 48.574 48.5511 48.434 48.5511 47.664C48.5511 47.006 49.2511 46.81 49.8111 46.81C50.6091 46.81 51.4631 47.104 51.4211 48.014H54.0251C54.0111 45.76 52.0091 44.794 50.0211 44.794C48.1451 44.794 45.9471 45.648 45.9471 47.832C45.9471 49.666 47.4451 50.31 48.8731 50.716C50.3151 51.122 51.7431 51.29 51.7431 52.172C51.7431 52.914 50.9311 53.194 50.1471 53.194C49.0411 53.194 48.3131 52.816 48.2571 51.64H45.6531Z" class="c-cr__nsew-s --hide-small"
d="M45.6531 51.64C45.6671 54.202 47.6971 55.21 49.9931 55.21C52.1911 55.21 54.3471 54.398 54.3471 51.864C54.3471 50.058 52.8911 49.386 51.4491 48.98C49.9931 48.574 48.5511 48.434 48.5511 47.664C48.5511 47.006 49.2511 46.81 49.8111 46.81C50.6091 46.81 51.4631 47.104 51.4211 48.014H54.0251C54.0111 45.76 52.0091 44.794 50.0211 44.794C48.1451 44.794 45.9471 45.648 45.9471 47.832C45.9471 49.666 47.4451 50.31 48.8731 50.716C50.3151 51.122 51.7431 51.29 51.7431 52.172C51.7431 52.914 50.9311 53.194 50.1471 53.194C49.0411 53.194 48.3131 52.816 48.2571 51.64H45.6531Z"
/> />
<path :style="cardinalTextRotateN" <path
class="c-cr__nsew-n" :style="cardinalTextRotateN"
d="M42.5935 60H46.7935V49.32H46.8415L52.7935 60H57.3775V42.864H53.1775V53.424H53.1295L47.1775 42.864H42.5935V60Z" class="c-cr__nsew-n"
d="M42.5935 60H46.7935V49.32H46.8415L52.7935 60H57.3775V42.864H53.1775V53.424H53.1295L47.1775 42.864H42.5935V60Z"
/> />
</g> </g>
</g> </g>
</g> </g>
<defs> <defs>
<radialGradient id="paint0_radial" <radialGradient
cx="0" id="paint0_radial"
cy="0" cx="0"
r="1" cy="0"
gradientUnits="userSpaceOnUse" r="1"
gradientTransform="translate(50 50) rotate(90) scale(50)" gradientUnits="userSpaceOnUse"
gradientTransform="translate(50 50) rotate(90) scale(50)"
> >
<stop offset="0.751387" <stop
stop-opacity="0" offset="0.751387"
stop-opacity="0"
/> />
<stop offset="1" <stop
stop-color="white" offset="1"
stop-color="white"
/> />
</radialGradient> </radialGradient>
<radialGradient id="paint1_radial" <radialGradient
cx="0" id="paint1_radial"
cy="0" cx="0"
r="1" cy="0"
gradientUnits="userSpaceOnUse" r="1"
gradientTransform="translate(50 -7) rotate(-90) scale(18.5)" gradientUnits="userSpaceOnUse"
gradientTransform="translate(50 -7) rotate(-90) scale(18.5)"
> >
<stop offset="0.716377" <stop
stop-color="#FFCC00" offset="0.716377"
stop-color="#FFCC00"
/> />
<stop offset="1" <stop
stop-color="#FF9900" offset="1"
stop-opacity="0" stop-color="#FF9900"
stop-opacity="0"
/> />
</radialGradient> </radialGradient>
</defs> </defs>

10
src/plugins/imagery/components/ImageryTimeView.vue
View File

@ -21,11 +21,13 @@
--> -->
<template> <template>
<div ref="imagery" <div
class="c-imagery-tsv c-timeline-holder" ref="imagery"
class="c-imagery-tsv c-timeline-holder"
> >
<div ref="imageryHolder" <div
class="c-imagery-tsv__contents u-contents" ref="imageryHolder"
class="c-imagery-tsv__contents u-contents"
> >
</div> </div>
</div> </div>

119
src/plugins/imagery/components/ImageryView.vue
View File

@ -30,50 +30,57 @@
> >
<div class="c-imagery__main-image-wrapper has-local-controls"> <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 c-image-controls__controls"> <div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover c-image-controls__controls">
<span class="c-image-controls__sliders" <span
draggable="true" class="c-image-controls__sliders"
@dragstart="startDrag" draggable="true"
@dragstart="startDrag"
> >
<div class="c-image-controls__slider-wrapper icon-brightness"> <div class="c-image-controls__slider-wrapper icon-brightness">
<input v-model="filters.brightness" <input
type="range" v-model="filters.brightness"
min="0" type="range"
max="500" min="0"
max="500"
> >
</div> </div>
<div class="c-image-controls__slider-wrapper icon-contrast"> <div class="c-image-controls__slider-wrapper icon-contrast">
<input v-model="filters.contrast" <input
type="range" v-model="filters.contrast"
min="0" type="range"
max="500" min="0"
max="500"
> >
</div> </div>
</span> </span>
<span class="t-reset-btn-holder c-imagery__lc__reset-btn c-image-controls__btn-reset"> <span class="t-reset-btn-holder c-imagery__lc__reset-btn c-image-controls__btn-reset">
<a class="s-icon-button icon-reset t-btn-reset" <a
@click="filters={brightness: 100, contrast: 100}" class="s-icon-button icon-reset t-btn-reset"
@click="filters={brightness: 100, contrast: 100}"
></a> ></a>
</span> </span>
</div> </div>
<div ref="imageBG" <div
class="c-imagery__main-image__bg" ref="imageBG"
:class="{'paused unnsynced': isPaused && !isFixed,'stale':false }" class="c-imagery__main-image__bg"
@click="expand" :class="{'paused unnsynced': isPaused && !isFixed,'stale':false }"
@click="expand"
> >
<div class="image-wrapper" <div
:style="{ class="image-wrapper"
'width': `${sizedImageDimensions.width}px`, :style="{
'height': `${sizedImageDimensions.height}px` 'width': `${sizedImageDimensions.width}px`,
}" 'height': `${sizedImageDimensions.height}px`
}"
> >
<img ref="focusedImage" <img
class="c-imagery__main-image__image js-imageryView-image" ref="focusedImage"
:src="imageUrl" class="c-imagery__main-image__image js-imageryView-image"
:style="{ :src="imageUrl"
'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)` :style="{
}" 'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`
:data-openmct-image-timestamp="time" }"
:data-openmct-object-keystring="keyString" :data-openmct-image-timestamp="time"
:data-openmct-object-keystring="keyString"
> >
<Compass <Compass
v-if="shouldDisplayCompass" v-if="shouldDisplayCompass"
@ -85,16 +92,18 @@
</div> </div>
</div> </div>
<button class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--prev" <button
title="Previous image" class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--prev"
:disabled="isPrevDisabled" title="Previous image"
@click="prevImage()" :disabled="isPrevDisabled"
@click="prevImage()"
></button> ></button>
<button class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--next" <button
title="Next image" class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--next"
:disabled="isNextDisabled" title="Next image"
@click="nextImage()" :disabled="isNextDisabled"
@click="nextImage()"
></button> ></button>
<div class="c-imagery__control-bar"> <div class="c-imagery__control-bar">
@ -130,29 +139,33 @@
</div> </div>
</div> </div>
</div> </div>
<div class="c-imagery__thumbs-wrapper" <div
:class="[ class="c-imagery__thumbs-wrapper"
{ 'is-paused': isPaused && !isFixed }, :class="[
{ 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused } { 'is-paused': isPaused && !isFixed },
]" { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused }
]"
> >
<div <div
ref="thumbsWrapper" ref="thumbsWrapper"
class="c-imagery__thumbs-scroll-area" class="c-imagery__thumbs-scroll-area"
@scroll="handleScroll" @scroll="handleScroll"
> >
<div v-for="(image, index) in imageHistory" <div
:key="image.url + image.time" v-for="(image, index) in imageHistory"
class="c-imagery__thumb c-thumb" :key="image.url + image.time"
:class="{ selected: focusedImageIndex === index && isPaused }" class="c-imagery__thumb c-thumb"
@click="setFocusedImage(index, thumbnailClick)" :class="{ selected: focusedImageIndex === index && isPaused }"
@click="setFocusedImage(index, thumbnailClick)"
> >
<a href="" <a
:download="image.imageDownloadName" href=""
@click.prevent :download="image.imageDownloadName"
@click.prevent
> >
<img class="c-thumb__image" <img
:src="image.url" class="c-thumb__image"
:src="image.url"
> >
</a> </a>
<div class="c-thumb__timestamp">{{ image.formattedTime }}</div> <div class="c-thumb__timestamp">{{ image.formattedTime }}</div>

148
src/plugins/notebook/components/Notebook.vue
View File

@ -23,46 +23,51 @@
<template> <template>
<div class="c-notebook"> <div class="c-notebook">
<div class="c-notebook__head"> <div class="c-notebook__head">
<Search class="c-notebook__search" <Search
:value="search" class="c-notebook__search"
@input="search = $event" :value="search"
@clear="resetSearch()" @input="search = $event"
@clear="resetSearch()"
/> />
</div> </div>
<SearchResults v-if="search.length" <SearchResults
ref="searchResults" v-if="search.length"
:domain-object="domainObject" ref="searchResults"
:results="searchResults" :domain-object="domainObject"
@changeSectionPage="changeSelectedSection" :results="searchResults"
@updateEntries="updateEntries" @changeSectionPage="changeSelectedSection"
@updateEntries="updateEntries"
/> />
<div v-if="!search.length" <div
class="c-notebook__body" v-if="!search.length"
class="c-notebook__body"
> >
<Sidebar ref="sidebar" <Sidebar
class="c-notebook__nav c-sidebar c-drawer c-drawer--align-left" ref="sidebar"
:class="[{'is-expanded': showNav}, {'c-drawer--push': !sidebarCoversEntries}, {'c-drawer--overlays': sidebarCoversEntries}]" class="c-notebook__nav c-sidebar c-drawer c-drawer--align-left"
:default-page-id="defaultPageId" :class="[{'is-expanded': showNav}, {'c-drawer--push': !sidebarCoversEntries}, {'c-drawer--overlays': sidebarCoversEntries}]"
:selected-page-id="getSelectedPageId()" :default-page-id="defaultPageId"
:default-section-id="defaultSectionId" :selected-page-id="getSelectedPageId()"
:selected-section-id="getSelectedSectionId()" :default-section-id="defaultSectionId"
:domain-object="domainObject" :selected-section-id="getSelectedSectionId()"
:page-title="domainObject.configuration.pageTitle" :domain-object="domainObject"
:section-title="domainObject.configuration.sectionTitle" :page-title="domainObject.configuration.pageTitle"
:sections="sections" :section-title="domainObject.configuration.sectionTitle"
:sidebar-covers-entries="sidebarCoversEntries" :sections="sections"
@defaultPageDeleted="cleanupDefaultNotebook" :sidebar-covers-entries="sidebarCoversEntries"
@defaultSectionDeleted="cleanupDefaultNotebook" @defaultPageDeleted="cleanupDefaultNotebook"
@pagesChanged="pagesChanged" @defaultSectionDeleted="cleanupDefaultNotebook"
@selectPage="selectPage" @pagesChanged="pagesChanged"
@sectionsChanged="sectionsChanged" @selectPage="selectPage"
@selectSection="selectSection" @sectionsChanged="sectionsChanged"
@toggleNav="toggleNav" @selectSection="selectSection"
@toggleNav="toggleNav"
/> />
<div class="c-notebook__page-view"> <div class="c-notebook__page-view">
<div class="c-notebook__page-view__header"> <div class="c-notebook__page-view__header">
<button class="c-notebook__toggle-nav-button c-icon-button c-icon-button--major icon-menu-hamburger" <button
@click="toggleNav" class="c-notebook__toggle-nav-button c-icon-button c-icon-button--major icon-menu-hamburger"
@click="toggleNav"
></button> ></button>
<div class="c-notebook__page-view__path c-path"> <div class="c-notebook__page-view__path c-path">
<span class="c-notebook__path__section c-path__item"> <span class="c-notebook__path__section c-path__item">
@ -73,59 +78,70 @@
</span> </span>
</div> </div>
<div class="c-notebook__page-view__controls"> <div class="c-notebook__page-view__controls">
<select v-model="showTime" <select
class="c-notebook__controls__time" v-model="showTime"
class="c-notebook__controls__time"
> >
<option value="0" <option
:selected="showTime === 0" value="0"
:selected="showTime === 0"
> >
Show all Show all
</option> </option>
<option value="1" <option
:selected="showTime === 1" value="1"
:selected="showTime === 1"
>Last hour</option> >Last hour</option>
<option value="8" <option
:selected="showTime === 8" value="8"
:selected="showTime === 8"
>Last 8 hours</option> >Last 8 hours</option>
<option value="24" <option
:selected="showTime === 24" value="24"
:selected="showTime === 24"
>Last 24 hours</option> >Last 24 hours</option>
</select> </select>
<select v-model="defaultSort" <select
class="c-notebook__controls__time" v-model="defaultSort"
class="c-notebook__controls__time"
> >
<option value="newest" <option
:selected="defaultSort === 'newest'" value="newest"
:selected="defaultSort === 'newest'"
>Newest first</option> >Newest first</option>
<option value="oldest" <option
:selected="defaultSort === 'oldest'" value="oldest"
:selected="defaultSort === 'oldest'"
>Oldest first</option> >Oldest first</option>
</select> </select>
</div> </div>
</div> </div>
<div class="c-notebook__drag-area icon-plus" <div
@click="newEntry()" class="c-notebook__drag-area icon-plus"
@dragover="dragOver" @click="newEntry()"
@drop.capture="dropCapture" @dragover="dragOver"
@drop="dropOnEntry($event)" @drop.capture="dropCapture"
@drop="dropOnEntry($event)"
> >
<span class="c-notebook__drag-area__label"> <span class="c-notebook__drag-area__label">
To start a new entry, click here or drag and drop any object To start a new entry, click here or drag and drop any object
</span> </span>
</div> </div>
<div v-if="selectedSection && selectedPage" <div
ref="notebookEntries" v-if="selectedSection && selectedPage"
class="c-notebook__entries" ref="notebookEntries"
class="c-notebook__entries"
> >
<NotebookEntry v-for="entry in filteredAndSortedEntries" <NotebookEntry
:key="entry.id" v-for="entry in filteredAndSortedEntries"
:entry="entry" :key="entry.id"
:domain-object="domainObject" :entry="entry"
:selected-page="selectedPage" :domain-object="domainObject"
:selected-section="selectedSection" :selected-page="selectedPage"
:read-only="false" :selected-section="selectedSection"
@deleteEntry="deleteEntry" :read-only="false"
@updateEntry="updateEntry" @deleteEntry="deleteEntry"
@updateEntry="updateEntry"
/> />
</div> </div>
</div> </div>

19
src/plugins/notebook/components/NotebookEmbed.vue
View File

@ -1,21 +1,24 @@
<template> <template>
<div class="c-snapshot c-ne__embed"> <div class="c-snapshot c-ne__embed">
<div v-if="embed.snapshot" <div
class="c-ne__embed__snap-thumb" v-if="embed.snapshot"
@click="openSnapshot()" class="c-ne__embed__snap-thumb"
@click="openSnapshot()"
> >
<img :src="thumbnailImage"> <img :src="thumbnailImage">
</div> </div>
<div class="c-ne__embed__info"> <div class="c-ne__embed__info">
<div class="c-ne__embed__name"> <div class="c-ne__embed__name">
<a class="c-ne__embed__link" <a
:class="embed.cssClass" class="c-ne__embed__link"
@click="changeLocation" :class="embed.cssClass"
@click="changeLocation"
>{{ embed.name }}</a> >{{ embed.name }}</a>
<PopupMenu :popup-menu-items="popupMenuItems" /> <PopupMenu :popup-menu-items="popupMenuItems" />
</div> </div>
<div v-if="embed.snapshot" <div
class="c-ne__embed__time" v-if="embed.snapshot"
class="c-ne__embed__time"
> >
{{ createdOn }} {{ createdOn }}
</div> </div>

39
src/plugins/notebook/components/NotebookEntry.vue
View File

@ -21,10 +21,11 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div class="c-notebook__entry c-ne has-local-controls" <div
@dragover="changeCursor" class="c-notebook__entry c-ne has-local-controls"
@drop.capture="cancelEditMode" @dragover="changeCursor"
@drop.prevent="dropOnEntry" @drop.capture="cancelEditMode"
@drop.prevent="dropOnEntry"
> >
<div class="c-ne__time-and-content"> <div class="c-ne__time-and-content">
<div class="c-ne__time"> <div class="c-ne__time">
@ -62,27 +63,31 @@
</div> </div>
</template> </template>
<div class="c-snapshots c-ne__embeds"> <div class="c-snapshots c-ne__embeds">
<NotebookEmbed v-for="embed in entry.embeds" <NotebookEmbed
:key="embed.id" v-for="embed in entry.embeds"
:embed="embed" :key="embed.id"
@removeEmbed="removeEmbed" :embed="embed"
@updateEmbed="updateEmbed" @removeEmbed="removeEmbed"
@updateEmbed="updateEmbed"
/> />
</div> </div>
</div> </div>
</div> </div>
<div v-if="!readOnly" <div
class="c-ne__local-controls--hidden" v-if="!readOnly"
class="c-ne__local-controls--hidden"
> >
<button class="c-icon-button c-icon-button--major icon-trash" <button
title="Delete this entry" class="c-icon-button c-icon-button--major icon-trash"
tabindex="-1" title="Delete this entry"
@click="deleteEntry" tabindex="-1"
@click="deleteEntry"
> >
</button> </button>
</div> </div>
<div v-if="readOnly" <div
class="c-ne__section-and-page" v-if="readOnly"
class="c-ne__section-and-page"
> >
<a <a
class="c-click-link" class="c-click-link"

42
src/plugins/notebook/components/NotebookSnapshotContainer.vue
View File

@ -8,39 +8,45 @@
<div class="c-object-label__name"> <div class="c-object-label__name">
Notebook Snapshots Notebook Snapshots
</div> </div>
<div v-if="snapshots.length" <div
class="l-browse-bar__object-details" v-if="snapshots.length"
class="l-browse-bar__object-details"
>{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }} >{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }}
</div> </div>
</div> </div>
<PopupMenu v-if="snapshots.length > 0" <PopupMenu
:popup-menu-items="popupMenuItems" v-if="snapshots.length > 0"
:popup-menu-items="popupMenuItems"
/> />
</div> </div>
</div> </div>
<div class="l-browse-bar__end"> <div class="l-browse-bar__end">
<button class="c-click-icon c-click-icon--major icon-x" <button
@click="close" class="c-click-icon c-click-icon--major icon-x"
@click="close"
></button> ></button>
</div> </div>
</div><!-- closes l-browse-bar --> </div><!-- closes l-browse-bar -->
<div class="c-snapshots"> <div class="c-snapshots">
<span v-for="snapshot in snapshots" <span
:key="snapshot.embedObject.id" v-for="snapshot in snapshots"
draggable="true" :key="snapshot.embedObject.id"
@dragstart="startEmbedDrag(snapshot, $event)" draggable="true"
@dragstart="startEmbedDrag(snapshot, $event)"
> >
<NotebookEmbed ref="notebookEmbed" <NotebookEmbed
:key="snapshot.embedObject.id" ref="notebookEmbed"
:embed="snapshot.embedObject" :key="snapshot.embedObject.id"
:is-snapshot-container="true" :embed="snapshot.embedObject"
:remove-action-string="'Delete Snapshot'" :is-snapshot-container="true"
@removeEmbed="removeSnapshot" :remove-action-string="'Delete Snapshot'"
@removeEmbed="removeSnapshot"
/> />
</span> </span>
<div v-if="!snapshots.length > 0" <div
class="hint" v-if="!snapshots.length > 0"
class="hint"
> >
There are no Notebook Snapshots currently. There are no Notebook Snapshots currently.
</div> </div>

15
src/plugins/notebook/components/NotebookSnapshotIndicator.vue
View File

@ -1,11 +1,12 @@
<template> <template>
<div class="c-indicator c-indicator--clickable icon-camera" <div
:class="[ class="c-indicator c-indicator--clickable icon-camera"
{ 's-status-off': snapshotCount === 0 }, :class="[
{ 's-status-on': snapshotCount > 0 }, { 's-status-off': snapshotCount === 0 },
{ 's-status-caution': snapshotCount === snapshotMaxCount }, { 's-status-on': snapshotCount > 0 },
{ 'has-new-snapshot': flashIndicator } { 's-status-caution': snapshotCount === snapshotMaxCount },
]" { 'has-new-snapshot': flashIndicator }
]"
> >
<span class="label c-indicator__label"> <span class="label c-indicator__label">
{{ indicatorTitle }} {{ indicatorTitle }}

20
src/plugins/notebook/components/PageCollection.vue
View File

@ -1,17 +1,19 @@
<template> <template>
<ul class="c-list"> <ul class="c-list">
<li v-for="page in pages" <li
v-for="page in pages"
:key="page.id" :key="page.id"
class="c-list__item-h" class="c-list__item-h"
> >
<Page ref="pageComponent" <Page
:default-page-id="defaultPageId" ref="pageComponent"
:selected-page-id="selectedPageId" :default-page-id="defaultPageId"
:page="page" :selected-page-id="selectedPageId"
:page-title="pageTitle" :page="page"
@deletePage="deletePage" :page-title="pageTitle"
@renamePage="updatePage" @deletePage="deletePage"
@selectPage="selectPage" @renamePage="updatePage"
@selectPage="selectPage"
/> />
</li> </li>
</ul> </ul>

18
src/plugins/notebook/components/PageComponent.vue
View File

@ -1,13 +1,15 @@
<template> <template>
<div class="c-list__item js-list__item" <div
:class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultPageId === page.id) }]" class="c-list__item js-list__item"
:data-id="page.id" :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultPageId === page.id) }]"
@click="selectPage" :data-id="page.id"
@click="selectPage"
> >
<span class="c-list__item__name js-list__item__name" <span
:data-id="page.id" class="c-list__item__name js-list__item__name"
@keydown.enter="updateName" :data-id="page.id"
@blur="updateName" @keydown.enter="updateName"
@blur="updateName"
>{{ page.name.length ? page.name : `Unnamed ${pageTitle}` }}</span> >{{ page.name.length ? page.name : `Unnamed ${pageTitle}` }}</span>
<PopupMenu :popup-menu-items="popupMenuItems" /> <PopupMenu :popup-menu-items="popupMenuItems" />
</div> </div>

21
src/plugins/notebook/components/SearchResults.vue
View File

@ -24,16 +24,17 @@
<div class="c-notebook__search-results"> <div class="c-notebook__search-results">
<div class="c-notebook__search-results__header">Search Results ({{ results.length }})</div> <div class="c-notebook__search-results__header">Search Results ({{ results.length }})</div>
<div class="c-notebook__entries"> <div class="c-notebook__entries">
<NotebookEntry v-for="(result, index) in results" <NotebookEntry
:key="index" v-for="(result, index) in results"
:domain-object="domainObject" :key="index"
:result="result" :domain-object="domainObject"
:entry="result.entry" :result="result"
:read-only="true" :entry="result.entry"
:selected-page="result.page" :read-only="true"
:selected-section="result.section" :selected-page="result.page"
@changeSectionPage="changeSectionPage" :selected-section="result.section"
@updateEntries="updateEntries" @changeSectionPage="changeSectionPage"
@updateEntries="updateEntries"
/> />
</div> </div>
</div> </div>

20
src/plugins/notebook/components/SectionCollection.vue
View File

@ -1,17 +1,19 @@
<template> <template>
<ul class="c-list"> <ul class="c-list">
<li v-for="section in sections" <li
v-for="section in sections"
:key="section.id" :key="section.id"
class="c-list__item-h" class="c-list__item-h"
> >
<NotebookSection ref="sectionComponent" <NotebookSection
:default-section-id="defaultSectionId" ref="sectionComponent"
:selected-section-id="selectedSectionId" :default-section-id="defaultSectionId"
:section="section" :selected-section-id="selectedSectionId"
:section-title="sectionTitle" :section="section"
@deleteSection="deleteSection" :section-title="sectionTitle"
@renameSection="updateSection" @deleteSection="deleteSection"
@selectSection="selectSection" @renameSection="updateSection"
@selectSection="selectSection"
/> />
</li> </li>
</ul> </ul>

18
src/plugins/notebook/components/SectionComponent.vue
View File

@ -1,13 +1,15 @@
<template> <template>
<div class="c-list__item js-list__item" <div
:class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultSectionId === section.id) }]" class="c-list__item js-list__item"
:data-id="section.id" :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultSectionId === section.id) }]"
@click="selectSection" :data-id="section.id"
@click="selectSection"
> >
<span class="c-list__item__name js-list__item__name" <span
:data-id="section.id" class="c-list__item__name js-list__item__name"
@keydown.enter="updateName" :data-id="section.id"
@blur="updateName" @keydown.enter="updateName"
@blur="updateName"
>{{ section.name.length ? section.name : `Unnamed ${sectionTitle}` }}</span> >{{ section.name.length ? section.name : `Unnamed ${sectionTitle}` }}</span>
<PopupMenu :popup-menu-items="popupMenuItems" /> <PopupMenu :popup-menu-items="popupMenuItems" />
</div> </div>

61
src/plugins/notebook/components/Sidebar.vue
View File

@ -7,21 +7,23 @@
</div> </div>
</div> </div>
<div class="c-sidebar__contents-and-controls"> <div class="c-sidebar__contents-and-controls">
<button class="c-list-button" <button
@click="addSection" class="c-list-button"
@click="addSection"
> >
<span class="c-button c-list-button__button icon-plus"></span> <span class="c-button c-list-button__button icon-plus"></span>
<span class="c-list-button__label">Add {{ sectionTitle }}</span> <span class="c-list-button__label">Add {{ sectionTitle }}</span>
</button> </button>
<SectionCollection class="c-sidebar__contents" <SectionCollection
:default-section-id="defaultSectionId" class="c-sidebar__contents"
:selected-section-id="selectedSectionId" :default-section-id="defaultSectionId"
:domain-object="domainObject" :selected-section-id="selectedSectionId"
:sections="sections" :domain-object="domainObject"
:section-title="sectionTitle" :sections="sections"
@defaultSectionDeleted="defaultSectionDeleted" :section-title="sectionTitle"
@updateSection="sectionsChanged" @defaultSectionDeleted="defaultSectionDeleted"
@selectSection="selectSection" @updateSection="sectionsChanged"
@selectSection="selectSection"
/> />
</div> </div>
</div> </div>
@ -30,31 +32,34 @@
<div class="c-sidebar__header"> <div class="c-sidebar__header">
<span class="c-sidebar__header-label">{{ pageTitle }}</span> <span class="c-sidebar__header-label">{{ pageTitle }}</span>
</div> </div>
<button class="c-click-icon c-click-icon--major icon-x-in-circle" <button
@click="toggleNav" class="c-click-icon c-click-icon--major icon-x-in-circle"
@click="toggleNav"
></button> ></button>
</div> </div>
<div class="c-sidebar__contents-and-controls"> <div class="c-sidebar__contents-and-controls">
<button class="c-list-button" <button
@click="addPage" class="c-list-button"
@click="addPage"
> >
<span class="c-button c-list-button__button icon-plus"></span> <span class="c-button c-list-button__button icon-plus"></span>
<span class="c-list-button__label">Add {{ pageTitle }}</span> <span class="c-list-button__label">Add {{ pageTitle }}</span>
</button> </button>
<PageCollection ref="pageCollection" <PageCollection
class="c-sidebar__contents" ref="pageCollection"
:default-page-id="defaultPageId" class="c-sidebar__contents"
:selected-page-id="selectedPageId" :default-page-id="defaultPageId"
:domain-object="domainObject" :selected-page-id="selectedPageId"
:pages="pages" :domain-object="domainObject"
:sections="sections" :pages="pages"
:sidebar-covers-entries="sidebarCoversEntries" :sections="sections"
:page-title="pageTitle" :sidebar-covers-entries="sidebarCoversEntries"
@defaultPageDeleted="defaultPageDeleted" :page-title="pageTitle"
@toggleNav="toggleNav" @defaultPageDeleted="defaultPageDeleted"
@updatePage="pagesChanged" @toggleNav="toggleNav"
@selectPage="selectPage" @updatePage="pagesChanged"
@selectPage="selectPage"
/> />
</div> </div>
</div> </div>

10
src/plugins/plan/Plan.vue
View File

@ -21,8 +21,9 @@
--> -->
<template> <template>
<div ref="plan" <div
class="c-plan c-timeline-holder" ref="plan"
class="c-plan c-timeline-holder"
> >
<template v-if="viewBounds && !options.compact"> <template v-if="viewBounds && !options.compact">
<swim-lane> <swim-lane>
@ -36,8 +37,9 @@
/> />
</swim-lane> </swim-lane>
</template> </template>
<div ref="planHolder" <div
class="c-plan__contents u-contents" ref="planHolder"
class="c-plan__contents u-contents"
> >
</div> </div>
</div> </div>

9
src/plugins/plan/inspector/PlanActivitiesView.vue
View File

@ -21,10 +21,11 @@
--> -->
<template> <template>
<div class="c-inspector__properties c-inspect-properties"> <div class="c-inspector__properties c-inspect-properties">
<plan-activity-view v-for="activity in activities" <plan-activity-view
:key="activity.id" v-for="activity in activities"
:activity="activity" :key="activity.id"
:heading="heading" :activity="activity"
:heading="heading"
/> />
</div> </div>
</template> </template>

13
src/plugins/plan/inspector/PlanActivityView.vue
View File

@ -21,18 +21,21 @@
--> -->
<template> <template>
<div v-if="timeProperties.length" <div
class="u-contents" v-if="timeProperties.length"
class="u-contents"
> >
<div class="c-inspect-properties__header"> <div class="c-inspect-properties__header">
{{ heading }} {{ heading }}
</div> </div>
<ul v-for="timeProperty in timeProperties" <ul
v-for="timeProperty in timeProperties"
:key="timeProperty.id" :key="timeProperty.id"
class="c-inspect-properties__section" class="c-inspect-properties__section"
> >
<activity-property :label="timeProperty.label" <activity-property
:value="timeProperty.value" :label="timeProperty.label"
:value="timeProperty.value"
/> />
</ul> </ul>
</div> </div>

175
src/plugins/plot/MctPlot.vue
View File

@ -20,132 +20,155 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<template> <template>
<div v-if="loaded" <div
class="gl-plot" v-if="loaded"
:class="[plotLegendExpandedStateClass, plotLegendPositionClass]" class="gl-plot"
:class="[plotLegendExpandedStateClass, plotLegendPositionClass]"
> >
<plot-legend :cursor-locked="!!lockHighlightPoint" <plot-legend
:series="seriesModels" :cursor-locked="!!lockHighlightPoint"
:highlights="highlights" :series="seriesModels"
:legend="legend" :highlights="highlights"
@legendHoverChanged="legendHoverChanged" :legend="legend"
@legendHoverChanged="legendHoverChanged"
/> />
<div class="plot-wrapper-axis-and-display-area flex-elem grows"> <div class="plot-wrapper-axis-and-display-area flex-elem grows">
<y-axis v-if="seriesModels.length > 0" <y-axis
:tick-width="tickWidth" v-if="seriesModels.length > 0"
:single-series="seriesModels.length === 1" :tick-width="tickWidth"
:series-model="seriesModels[0]" :single-series="seriesModels.length === 1"
:style="{ :series-model="seriesModels[0]"
left: (plotWidth - tickWidth) + 'px' :style="{
}" left: (plotWidth - tickWidth) + 'px'
@yKeyChanged="setYAxisKey" }"
@tickWidthChanged="onTickWidthChange" @yKeyChanged="setYAxisKey"
@tickWidthChanged="onTickWidthChange"
/> />
<div class="gl-plot-wrapper-display-area-and-x-axis" <div
:style="{ class="gl-plot-wrapper-display-area-and-x-axis"
left: (plotWidth + 20) + 'px' :style="{
}" left: (plotWidth + 20) + 'px'
}"
> >
<div class="gl-plot-display-area has-local-controls has-cursor-guides"> <div class="gl-plot-display-area has-local-controls has-cursor-guides">
<div class="l-state-indicators"> <div class="l-state-indicators">
<span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle" <span
title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data." class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."
></span> ></span>
</div> </div>
<mct-ticks v-show="gridLines && !options.compact" <mct-ticks
:axis-type="'xAxis'" v-show="gridLines && !options.compact"
:position="'right'" :axis-type="'xAxis'"
@plotTickWidth="onTickWidthChange" :position="'right'"
@plotTickWidth="onTickWidthChange"
/> />
<mct-ticks v-show="gridLines" <mct-ticks
:axis-type="'yAxis'" v-show="gridLines"
:position="'bottom'" :axis-type="'yAxis'"
@plotTickWidth="onTickWidthChange" :position="'bottom'"
@plotTickWidth="onTickWidthChange"
/> />
<div ref="chartContainer" <div
class="gl-plot-chart-wrapper" ref="chartContainer"
class="gl-plot-chart-wrapper"
> >
<mct-chart :rectangles="rectangles" <mct-chart
:highlights="highlights" :rectangles="rectangles"
:show-limit-line-labels="showLimitLineLabels" :highlights="highlights"
@plotReinitializeCanvas="initCanvas" :show-limit-line-labels="showLimitLineLabels"
@plotReinitializeCanvas="initCanvas"
/> />
</div> </div>
<div class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover"> <div class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover">
<div v-if="!options.compact" <div
class="c-button-set c-button-set--strip-h js-zoom" v-if="!options.compact"
class="c-button-set c-button-set--strip-h js-zoom"
> >
<button class="c-button icon-minus" <button
title="Zoom out" class="c-button icon-minus"
@click="zoom('out', 0.2)" title="Zoom out"
@click="zoom('out', 0.2)"
> >
</button> </button>
<button class="c-button icon-plus" <button
title="Zoom in" class="c-button icon-plus"
@click="zoom('in', 0.2)" title="Zoom in"
@click="zoom('in', 0.2)"
> >
</button> </button>
</div> </div>
<div v-if="plotHistory.length && !options.compact" <div
class="c-button-set c-button-set--strip-h js-pan" v-if="plotHistory.length && !options.compact"
class="c-button-set c-button-set--strip-h js-pan"
> >
<button class="c-button icon-arrow-left" <button
title="Restore previous pan/zoom" class="c-button icon-arrow-left"
@click="back()" title="Restore previous pan/zoom"
@click="back()"
> >
</button> </button>
<button class="c-button icon-reset" <button
title="Reset pan/zoom" class="c-button icon-reset"
@click="clear()" title="Reset pan/zoom"
@click="clear()"
> >
</button> </button>
</div> </div>
<div v-if="isRealTime && !options.compact" <div
class="c-button-set c-button-set--strip-h js-pause" v-if="isRealTime && !options.compact"
class="c-button-set c-button-set--strip-h js-pause"
> >
<button v-if="!isFrozen" <button
class="c-button icon-pause" v-if="!isFrozen"
title="Pause incoming real-time data" class="c-button icon-pause"
@click="pause()" title="Pause incoming real-time data"
@click="pause()"
> >
</button> </button>
<button v-if="isFrozen" <button
class="c-button icon-arrow-right pause-play is-paused" v-if="isFrozen"
title="Resume displaying real-time data" class="c-button icon-arrow-right pause-play is-paused"
@click="play()" title="Resume displaying real-time data"
@click="play()"
> >
</button> </button>
</div> </div>
<div v-if="isTimeOutOfSync || isFrozen" <div
class="c-button-set c-button-set--strip-h" v-if="isTimeOutOfSync || isFrozen"
class="c-button-set c-button-set--strip-h"
> >
<button class="c-button icon-clock" <button
title="Synchronize Time Conductor" class="c-button icon-clock"
@click="showSynchronizeDialog()" title="Synchronize Time Conductor"
@click="showSynchronizeDialog()"
> >
</button> </button>
</div> </div>
</div> </div>
<!--Cursor guides--> <!--Cursor guides-->
<div v-show="cursorGuide" <div
ref="cursorGuideVertical" v-show="cursorGuide"
class="c-cursor-guide--v js-cursor-guide--v" ref="cursorGuideVertical"
class="c-cursor-guide--v js-cursor-guide--v"
> >
</div> </div>
<div v-show="cursorGuide" <div
ref="cursorGuideHorizontal" v-show="cursorGuide"
class="c-cursor-guide--h js-cursor-guide--h" ref="cursorGuideHorizontal"
class="c-cursor-guide--h js-cursor-guide--h"
> >
</div> </div>
</div> </div>
<x-axis v-if="seriesModels.length > 0 && !options.compact" <x-axis
:series-model="seriesModels[0]" v-if="seriesModels.length > 0 && !options.compact"
:series-model="seriesModels[0]"
/> />
</div> </div>

67
src/plugins/plot/MctTicks.vue
View File

@ -21,53 +21,60 @@
--> -->
<template> <template>
<div ref="tickContainer" <div
class="u-contents js-ticks" ref="tickContainer"
class="u-contents js-ticks"
> >
<div v-if="position === 'left'" <div
class="gl-plot-tick-wrapper" v-if="position === 'left'"
class="gl-plot-tick-wrapper"
> >
<div v-for="tick in ticks" <div
:key="tick.value" v-for="tick in ticks"
class="gl-plot-tick gl-plot-x-tick-label" :key="tick.value"
:style="{ class="gl-plot-tick gl-plot-x-tick-label"
left: (100 * (tick.value - min) / interval) + '%' :style="{
}" left: (100 * (tick.value - min) / interval) + '%'
:title="tick.fullText || tick.text" }"
:title="tick.fullText || tick.text"
> >
{{ tick.text }} {{ tick.text }}
</div> </div>
</div> </div>
<div v-if="position === 'top'" <div
class="gl-plot-tick-wrapper" v-if="position === 'top'"
class="gl-plot-tick-wrapper"
> >
<div v-for="tick in ticks" <div
:key="tick.value" v-for="tick in ticks"
class="gl-plot-tick gl-plot-y-tick-label" :key="tick.value"
:style="{ top: (100 * (max - tick.value) / interval) + '%' }" class="gl-plot-tick gl-plot-y-tick-label"
:title="tick.fullText || tick.text" :style="{ top: (100 * (max - tick.value) / interval) + '%' }"
style="margin-top: -0.50em; direction: ltr;" :title="tick.fullText || tick.text"
style="margin-top: -0.50em; direction: ltr;"
> >
<span>{{ tick.text }}</span> <span>{{ tick.text }}</span>
</div> </div>
</div> </div>
<!-- grid lines follow --> <!-- grid lines follow -->
<template v-if="position === 'right'"> <template v-if="position === 'right'">
<div v-for="tick in ticks" <div
:key="tick.value" v-for="tick in ticks"
class="gl-plot-hash hash-v" :key="tick.value"
:style="{ class="gl-plot-hash hash-v"
right: (100 * (max - tick.value) / interval) + '%', :style="{
height: '100%' right: (100 * (max - tick.value) / interval) + '%',
}" height: '100%'
}"
> >
</div> </div>
</template> </template>
<template v-if="position === 'bottom'"> <template v-if="position === 'bottom'">
<div v-for="tick in ticks" <div
:key="tick.value" v-for="tick in ticks"
class="gl-plot-hash hash-h" :key="tick.value"
:style="{ bottom: (100 * (tick.value - min) / interval) + '%', width: '100%' }" class="gl-plot-hash hash-h"
:style="{ bottom: (100 * (tick.value - min) / interval) + '%', width: '100%' }"
> >
</div> </div>
</template> </template>

65
src/plugins/plot/Plot.vue
View File

@ -20,52 +20,61 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<template> <template>
<div ref="plotWrapper" <div
class="c-plot holder holder-plot has-control-bar" ref="plotWrapper"
class="c-plot holder holder-plot has-control-bar"
> >
<div v-if="!options.compact" <div
class="c-control-bar" v-if="!options.compact"
class="c-control-bar"
> >
<span class="c-button-set c-button-set--strip-h"> <span class="c-button-set c-button-set--strip-h">
<button class="c-button icon-download" <button
title="Export This View's Data as PNG" class="c-button icon-download"
@click="exportPNG()" title="Export This View's Data as PNG"
@click="exportPNG()"
> >
<span class="c-button__label">PNG</span> <span class="c-button__label">PNG</span>
</button> </button>
<button class="c-button" <button
title="Export This View's Data as JPG" class="c-button"
@click="exportJPG()" title="Export This View's Data as JPG"
@click="exportJPG()"
> >
<span class="c-button__label">JPG</span> <span class="c-button__label">JPG</span>
</button> </button>
</span> </span>
<button class="c-button icon-crosshair" <button
:class="{ 'is-active': cursorGuide }" class="c-button icon-crosshair"
title="Toggle cursor guides" :class="{ 'is-active': cursorGuide }"
@click="toggleCursorGuide" title="Toggle cursor guides"
@click="toggleCursorGuide"
> >
</button> </button>
<button class="c-button" <button
:class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }" class="c-button"
title="Toggle grid lines" :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }"
@click="toggleGridLines" title="Toggle grid lines"
@click="toggleGridLines"
> >
</button> </button>
</div> </div>
<div ref="plotContainer" <div
class="l-view-section u-style-receiver js-style-receiver" ref="plotContainer"
:class="{'s-status-timeconductor-unsynced': status && status === 'timeconductor-unsynced'}" class="l-view-section u-style-receiver js-style-receiver"
:class="{'s-status-timeconductor-unsynced': status && status === 'timeconductor-unsynced'}"
> >
<div v-show="!!loading" <div
class="c-loading--overlay loading" v-show="!!loading"
class="c-loading--overlay loading"
></div> ></div>
<mct-plot :grid-lines="gridLines" <mct-plot
:cursor-guide="cursorGuide" :grid-lines="gridLines"
:options="options" :cursor-guide="cursorGuide"
@loadingUpdated="loadingUpdated" :options="options"
@statusUpdated="setStatus" @loadingUpdated="loadingUpdated"
@statusUpdated="setStatus"
/> />
</div> </div>
</div> </div>

19
src/plugins/plot/axis/XAxis.vue
View File

@ -21,12 +21,14 @@
--> -->
<template> <template>
<div v-if="loaded" <div
class="gl-plot-axis-area gl-plot-x has-local-controls" v-if="loaded"
class="gl-plot-axis-area gl-plot-x has-local-controls"
> >
<mct-ticks :axis-type="'xAxis'" <mct-ticks
:position="'left'" :axis-type="'xAxis'"
@plotTickWidth="onTickWidthChange" :position="'left'"
@plotTickWidth="onTickWidthChange"
/> />
<div <div
@ -42,9 +44,10 @@
class="gl-plot-x-label__select local-controls--hidden" class="gl-plot-x-label__select local-controls--hidden"
@change="toggleXKeyOption()" @change="toggleXKeyOption()"
> >
<option v-for="option in xKeyOptions" <option
:key="option.key" v-for="option in xKeyOptions"
:value="option.key" :key="option.key"
:value="option.key"
>{{ option.name }} >{{ option.name }}
</option> </option>
</select> </select>

45
src/plugins/plot/axis/YAxis.vue
View File

@ -20,37 +20,42 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<template> <template>
<div v-if="loaded" <div
class="gl-plot-axis-area gl-plot-y has-local-controls" v-if="loaded"
:style="{ class="gl-plot-axis-area gl-plot-y has-local-controls"
width: (tickWidth + 20) + 'px' :style="{
}" width: (tickWidth + 20) + 'px'
}"
> >
<div v-if="singleSeries" <div
class="gl-plot-label gl-plot-y-label" v-if="singleSeries"
:class="{'icon-gear': (yKeyOptions.length > 1)}" class="gl-plot-label gl-plot-y-label"
:class="{'icon-gear': (yKeyOptions.length > 1)}"
>{{ yAxisLabel }} >{{ yAxisLabel }}
</div> </div>
<select v-if="yKeyOptions.length > 1 && singleSeries" <select
v-model="yAxisLabel" v-if="yKeyOptions.length > 1 && singleSeries"
class="gl-plot-y-label__select local-controls--hidden" v-model="yAxisLabel"
@change="toggleYAxisLabel" class="gl-plot-y-label__select local-controls--hidden"
@change="toggleYAxisLabel"
> >
<option v-for="(option, index) in yKeyOptions" <option
:key="index" v-for="(option, index) in yKeyOptions"
:value="option.name" :key="index"
:selected="option.name === yAxisLabel" :value="option.name"
:selected="option.name === yAxisLabel"
> >
{{ option.name }} {{ option.name }}
</option> </option>
</select> </select>
<mct-ticks :axis-type="'yAxis'" <mct-ticks
class="gl-plot-ticks" :axis-type="'yAxis'"
:position="'top'" class="gl-plot-ticks"
@plotTickWidth="onTickWidthChange" :position="'top'"
@plotTickWidth="onTickWidthChange"
/> />
</div> </div>
</template> </template>

12
src/plugins/plot/chart/LimitLabel.vue
View File

@ -1,14 +1,16 @@
<template> <template>
<div class="c-plot-limit" <div
:style="styleObj" class="c-plot-limit"
:class="limitClass" :style="styleObj"
:class="limitClass"
> >
<div class="c-plot-limit__label"> <div class="c-plot-limit__label">
<span class="c-plot-limit__direction-icon"></span> <span class="c-plot-limit__direction-icon"></span>
<span class="c-plot-limit__severity-icon"></span> <span class="c-plot-limit__severity-icon"></span>
<span class="c-plot-limit__limit-value">{{ limit.value }}</span> <span class="c-plot-limit__limit-value">{{ limit.value }}</span>
<span class="c-plot-limit__series-color-swatch" <span
:style="{ 'background-color': limit.seriesColor }" class="c-plot-limit__series-color-swatch"
:style="{ 'background-color': limit.seriesColor }"
></span> ></span>
<span class="c-plot-limit__series-name">{{ limit.name }}</span> <span class="c-plot-limit__series-name">{{ limit.name }}</span>
</div> </div>

7
src/plugins/plot/chart/LimitLine.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div :style="styleObj" <div
class="c-plot-limit-line js-limit-line" :style="styleObj"
:class="limitClass" class="c-plot-limit-line js-limit-line"
:class="limitClass"
></div> ></div>
</template> </template>

5
src/plugins/plot/chart/MctChart.vue
View File

@ -26,8 +26,9 @@
<div class="gl-plot-chart-area"> <div class="gl-plot-chart-area">
<span v-html="canvasTemplate"></span> <span v-html="canvasTemplate"></span>
<span v-html="canvasTemplate"></span> <span v-html="canvasTemplate"></span>
<div ref="limitArea" <div
class="js-limit-area" ref="limitArea"
class="js-limit-area"
></div> ></div>
</div> </div>
</template> </template>

68
src/plugins/plot/inspector/PlotOptionsBrowse.vue
View File

@ -20,49 +20,58 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<template> <template>
<div v-if="loaded" <div
class="js-plot-options-browse" v-if="loaded"
class="js-plot-options-browse"
> >
<ul class="c-tree"> <ul class="c-tree">
<h2 title="Plot series display properties in this object">Plot Series</h2> <h2 title="Plot series display properties in this object">Plot Series</h2>
<plot-options-item v-for="series in plotSeries" <plot-options-item
:key="series.key" v-for="series in plotSeries"
:series="series" :key="series.key"
:series="series"
/> />
</ul> </ul>
<div v-if="plotSeries.length" <div
class="grid-properties" v-if="plotSeries.length"
class="grid-properties"
> >
<ul class="l-inspector-part"> <ul class="l-inspector-part">
<h2 title="Y axis settings for this object">Y Axis</h2> <h2 title="Y axis settings for this object">Y Axis</h2>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Manually override how the Y axis is labeled." class="grid-cell label"
title="Manually override how the Y axis is labeled."
>Label</div> >Label</div>
<div class="grid-cell value">{{ label ? label : "Not defined" }}</div> <div class="grid-cell value">{{ label ? label : "Not defined" }}</div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Automatically scale the Y axis to keep all values in view." class="grid-cell label"
title="Automatically scale the Y axis to keep all values in view."
>Autoscale</div> >Autoscale</div>
<div class="grid-cell value"> <div class="grid-cell value">
{{ autoscale ? "Enabled: " : "Disabled" }} {{ autoscale ? "Enabled: " : "Disabled" }}
{{ autoscale ? autoscalePadding : "" }} {{ autoscale ? autoscalePadding : "" }}
</div> </div>
</li> </li>
<li v-if="!autoscale && rangeMin" <li
v-if="!autoscale && rangeMin"
class="grid-row" class="grid-row"
> >
<div class="grid-cell label" <div
title="Minimum Y axis value." class="grid-cell label"
title="Minimum Y axis value."
>Minimum value</div> >Minimum value</div>
<div class="grid-cell value">{{ rangeMin }}</div> <div class="grid-cell value">{{ rangeMin }}</div>
</li> </li>
<li v-if="!autoscale && rangeMax" <li
v-if="!autoscale && rangeMax"
class="grid-row" class="grid-row"
> >
<div class="grid-cell label" <div
title="Maximum Y axis value." class="grid-cell label"
title="Maximum Y axis value."
>Maximum value</div> >Maximum value</div>
<div class="grid-cell value">{{ rangeMax }}</div> <div class="grid-cell value">{{ rangeMax }}</div>
</li> </li>
@ -70,26 +79,30 @@
<ul class="l-inspector-part"> <ul class="l-inspector-part">
<h2 title="Legend settings for this object">Legend</h2> <h2 title="Legend settings for this object">Legend</h2>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="The position of the legend relative to the plot display area." class="grid-cell label"
title="The position of the legend relative to the plot display area."
>Position</div> >Position</div>
<div class="grid-cell value capitalize">{{ position }}</div> <div class="grid-cell value capitalize">{{ position }}</div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Hide the legend when the plot is small" class="grid-cell label"
title="Hide the legend when the plot is small"
>Hide when plot small</div> >Hide when plot small</div>
<div class="grid-cell value">{{ hideLegendWhenSmall ? "Yes" : "No" }}</div> <div class="grid-cell value">{{ hideLegendWhenSmall ? "Yes" : "No" }}</div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Show the legend expanded by default" class="grid-cell label"
title="Show the legend expanded by default"
>Expand by Default</div> >Expand by Default</div>
<div class="grid-cell value">{{ expandByDefault ? "Yes" : "No" }}</div> <div class="grid-cell value">{{ expandByDefault ? "Yes" : "No" }}</div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="What to display in the legend when it's collapsed." class="grid-cell label"
title="What to display in the legend when it's collapsed."
>Show when collapsed:</div> >Show when collapsed:</div>
<div class="grid-cell value">{{ <div class="grid-cell value">{{
valueToShowWhenCollapsed.replace('nearest', '') valueToShowWhenCollapsed.replace('nearest', '')
@ -97,8 +110,9 @@
</div> </div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="What to display in the legend when it's expanded." class="grid-cell label"
title="What to display in the legend when it's expanded."
>Show when expanded:</div> >Show when expanded:</div>
<div class="grid-cell value comma-list"> <div class="grid-cell value comma-list">
<span v-if="showTimestampWhenExpanded">Timestamp</span> <span v-if="showTimestampWhenExpanded">Timestamp</span>

22
src/plugins/plot/inspector/PlotOptionsEdit.vue
View File

@ -20,26 +20,30 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<template> <template>
<div v-if="loaded" <div
class="js-plot-options-edit" v-if="loaded"
class="js-plot-options-edit"
> >
<ul class="c-tree"> <ul class="c-tree">
<h2 title="Display properties for this object">Plot Series</h2> <h2 title="Display properties for this object">Plot Series</h2>
<li v-for="series in plotSeries" <li
v-for="series in plotSeries"
:key="series.key" :key="series.key"
> >
<series-form :series="series" /> <series-form :series="series" />
</li> </li>
</ul> </ul>
<y-axis-form v-if="plotSeries.length" <y-axis-form
class="grid-properties" v-if="plotSeries.length"
:y-axis="config.yAxis" class="grid-properties"
:y-axis="config.yAxis"
/> />
<ul class="l-inspector-part"> <ul class="l-inspector-part">
<h2 title="Legend options">Legend</h2> <h2 title="Legend options">Legend</h2>
<legend-form v-if="plotSeries.length" <legend-form
class="grid-properties" v-if="plotSeries.length"
:legend="config.legend" class="grid-properties"
:legend="config.legend"
/> />
</ul> </ul>
</div> </div>

62
src/plugins/plot/inspector/PlotOptionsItem.vue
View File

@ -1,41 +1,49 @@
<template> <template>
<ul> <ul>
<li class="c-tree__item menus-to-left" <li
class="c-tree__item menus-to-left"
:class="isAliasClass" :class="isAliasClass"
> >
<span class="c-disclosure-triangle is-enabled flex-elem" <span
:class="expandedCssClass" class="c-disclosure-triangle is-enabled flex-elem"
@click="toggleExpanded" :class="expandedCssClass"
@click="toggleExpanded"
> >
</span> </span>
<div class="c-object-label" <div
:class="statusClass" class="c-object-label"
:class="statusClass"
> >
<div class="c-object-label__type-icon" <div
:class="getSeriesClass" class="c-object-label__type-icon"
:class="getSeriesClass"
> >
<span class="is-status__indicator" <span
title="This item is missing or suspect" class="is-status__indicator"
title="This item is missing or suspect"
></span> ></span>
</div> </div>
<div class="c-object-label__name">{{ series.domainObject.name }}</div> <div class="c-object-label__name">{{ series.domainObject.name }}</div>
</div> </div>
</li> </li>
<li v-show="expanded" <li
v-show="expanded"
class="c-tree__item menus-to-left" class="c-tree__item menus-to-left"
> >
<ul class="grid-properties js-plot-options-browse-properties"> <ul class="grid-properties js-plot-options-browse-properties">
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="The field to be plotted as a value for this series." class="grid-cell label"
title="The field to be plotted as a value for this series."
>Value</div> >Value</div>
<div class="grid-cell value"> <div class="grid-cell value">
{{ yKey }} {{ yKey }}
</div> </div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="The rendering method to join lines for this series." class="grid-cell label"
title="The rendering method to join lines for this series."
>Line Method</div> >Line Method</div>
<div class="grid-cell value">{{ { <div class="grid-cell value">{{ {
'none': 'None', 'none': 'None',
@ -45,33 +53,37 @@
</div> </div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Whether markers are displayed, and their size." class="grid-cell label"
title="Whether markers are displayed, and their size."
>Markers</div> >Markers</div>
<div class="grid-cell value"> <div class="grid-cell value">
{{ markerOptionsDisplayText }} {{ markerOptionsDisplayText }}
</div> </div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Display markers visually denoting points in alarm." class="grid-cell label"
title="Display markers visually denoting points in alarm."
>Alarm Markers</div> >Alarm Markers</div>
<div class="grid-cell value"> <div class="grid-cell value">
{{ alarmMarkers ? "Enabled" : "Disabled" }} {{ alarmMarkers ? "Enabled" : "Disabled" }}
</div> </div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Display lines visually denoting alarm limits." class="grid-cell label"
title="Display lines visually denoting alarm limits."
>Limit lines</div> >Limit lines</div>
<div class="grid-cell value"> <div class="grid-cell value">
{{ limitLines ? "Enabled" : "Disabled" }} {{ limitLines ? "Enabled" : "Disabled" }}
</div> </div>
</li> </li>
<ColorSwatch :current-color="seriesHexColor" <ColorSwatch
edit-title="Manually set the plot line and marker color for this series." :current-color="seriesHexColor"
view-title="The plot line and marker color for this series." edit-title="Manually set the plot line and marker color for this series."
short-label="Color" view-title="The plot line and marker color for this series."
short-label="Color"
/> />
</ul> </ul>
</li> </li>

84
src/plugins/plot/inspector/forms/LegendForm.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<div> <div>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="The position of the legend relative to the plot display area." class="grid-cell label"
title="The position of the legend relative to the plot display area."
>Position</div> >Position</div>
<div class="grid-cell value"> <div class="grid-cell value">
<select v-model="position" <select
@change="updateForm('position')" v-model="position"
@change="updateForm('position')"
> >
<option value="top">Top</option> <option value="top">Top</option>
<option value="right">Right</option> <option value="right">Right</option>
@ -16,30 +18,36 @@
</div> </div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Hide the legend when the plot is small" class="grid-cell label"
title="Hide the legend when the plot is small"
>Hide when plot small</div> >Hide when plot small</div>
<div class="grid-cell value"><input v-model="hideLegendWhenSmall" <div class="grid-cell value"><input
type="checkbox" v-model="hideLegendWhenSmall"
@change="updateForm('hideLegendWhenSmall')" type="checkbox"
@change="updateForm('hideLegendWhenSmall')"
></div> ></div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Show the legend expanded by default" class="grid-cell label"
title="Show the legend expanded by default"
>Expand by default</div> >Expand by default</div>
<div class="grid-cell value"><input v-model="expandByDefault" <div class="grid-cell value"><input
type="checkbox" v-model="expandByDefault"
@change="updateForm('expandByDefault')" type="checkbox"
@change="updateForm('expandByDefault')"
></div> ></div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="What to display in the legend when it's collapsed." class="grid-cell label"
title="What to display in the legend when it's collapsed."
>When collapsed show</div> >When collapsed show</div>
<div class="grid-cell value"> <div class="grid-cell value">
<select v-model="valueToShowWhenCollapsed" <select
@change="updateForm('valueToShowWhenCollapsed')" v-model="valueToShowWhenCollapsed"
@change="updateForm('valueToShowWhenCollapsed')"
> >
<option value="none">Nothing</option> <option value="none">Nothing</option>
<option value="nearestTimestamp">Nearest timestamp</option> <option value="nearestTimestamp">Nearest timestamp</option>
@ -51,30 +59,36 @@
</div> </div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="What to display in the legend when it's expanded." class="grid-cell label"
title="What to display in the legend when it's expanded."
>When expanded show</div> >When expanded show</div>
<div class="grid-cell value"> <div class="grid-cell value">
<ul> <ul>
<li><input v-model="showTimestampWhenExpanded" <li><input
type="checkbox" v-model="showTimestampWhenExpanded"
@change="updateForm('showTimestampWhenExpanded')" type="checkbox"
@change="updateForm('showTimestampWhenExpanded')"
> Nearest timestamp</li> > Nearest timestamp</li>
<li><input v-model="showValueWhenExpanded" <li><input
type="checkbox" v-model="showValueWhenExpanded"
@change="updateForm('showValueWhenExpanded')" type="checkbox"
@change="updateForm('showValueWhenExpanded')"
> Nearest value</li> > Nearest value</li>
<li><input v-model="showMinimumWhenExpanded" <li><input
type="checkbox" v-model="showMinimumWhenExpanded"
@change="updateForm('showMinimumWhenExpanded')" type="checkbox"
@change="updateForm('showMinimumWhenExpanded')"
> Minimum value</li> > Minimum value</li>
<li><input v-model="showMaximumWhenExpanded" <li><input
type="checkbox" v-model="showMaximumWhenExpanded"
@change="updateForm('showMaximumWhenExpanded')" type="checkbox"
@change="updateForm('showMaximumWhenExpanded')"
> Maximum value</li> > Maximum value</li>
<li><input v-model="showUnitsWhenExpanded" <li><input
type="checkbox" v-model="showUnitsWhenExpanded"
@change="updateForm('showUnitsWhenExpanded')" type="checkbox"
@change="updateForm('showUnitsWhenExpanded')"
> Units</li> > Units</li>
</ul> </ul>

119
src/plugins/plot/inspector/forms/SeriesForm.vue
View File

@ -1,40 +1,48 @@
<template> <template>
<ul> <ul>
<li class="c-tree__item menus-to-left" <li
class="c-tree__item menus-to-left"
:class="isAliasCss" :class="isAliasCss"
> >
<span class="c-disclosure-triangle is-enabled flex-elem" <span
:class="expandedCssClass" class="c-disclosure-triangle is-enabled flex-elem"
@click="toggleExpanded" :class="expandedCssClass"
@click="toggleExpanded"
> >
</span> </span>
<div :class="objectLabelCss"> <div :class="objectLabelCss">
<div class="c-object-label__type-icon" <div
:class="[seriesCss]" class="c-object-label__type-icon"
:class="[seriesCss]"
> >
<span class="is-status__indicator" <span
title="This item is missing or suspect" class="is-status__indicator"
title="This item is missing or suspect"
></span> ></span>
</div> </div>
<div class="c-object-label__name">{{ series.domainObject.name }}</div> <div class="c-object-label__name">{{ series.domainObject.name }}</div>
</div> </div>
</li> </li>
<ul v-show="expanded" <ul
v-show="expanded"
class="grid-properties js-plot-options-edit-properties" class="grid-properties js-plot-options-edit-properties"
> >
<li class="grid-row"> <li class="grid-row">
<!-- Value to be displayed --> <!-- Value to be displayed -->
<div class="grid-cell label" <div
title="The field to be plotted as a value for this series." class="grid-cell label"
title="The field to be plotted as a value for this series."
>Value</div> >Value</div>
<div class="grid-cell value"> <div class="grid-cell value">
<select v-model="yKey" <select
@change="updateForm('yKey')" v-model="yKey"
@change="updateForm('yKey')"
> >
<option v-for="option in yKeyOptions" <option
:key="option.value" v-for="option in yKeyOptions"
:value="option.value" :key="option.value"
:selected="option.value == yKey" :value="option.value"
:selected="option.value == yKey"
> >
{{ option.name }} {{ option.name }}
</option> </option>
@ -42,12 +50,14 @@
</div> </div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="The rendering method to join lines for this series." class="grid-cell label"
title="The rendering method to join lines for this series."
>Line Method</div> >Line Method</div>
<div class="grid-cell value"> <div class="grid-cell value">
<select v-model="interpolate" <select
@change="updateForm('interpolate')" v-model="interpolate"
@change="updateForm('interpolate')"
> >
<option value="none">None</option> <option value="none">None</option>
<option value="linear">Linear interpolate</option> <option value="linear">Linear interpolate</option>
@ -56,13 +66,15 @@
</div> </div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Whether markers are displayed." class="grid-cell label"
title="Whether markers are displayed."
>Markers</div> >Markers</div>
<div class="grid-cell value"> <div class="grid-cell value">
<input v-model="markers" <input
type="checkbox" v-model="markers"
@change="updateForm('markers')" type="checkbox"
@change="updateForm('markers')"
> >
<select <select
v-show="markers" v-show="markers"
@ -81,47 +93,56 @@
</div> </div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Display markers visually denoting points in alarm." class="grid-cell label"
title="Display markers visually denoting points in alarm."
>Alarm Markers</div> >Alarm Markers</div>
<div class="grid-cell value"> <div class="grid-cell value">
<input v-model="alarmMarkers" <input
type="checkbox" v-model="alarmMarkers"
@change="updateForm('alarmMarkers')" type="checkbox"
@change="updateForm('alarmMarkers')"
> >
</div> </div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Display limit lines" class="grid-cell label"
title="Display limit lines"
>Limit lines</div> >Limit lines</div>
<div class="grid-cell value"> <div class="grid-cell value">
<input v-model="limitLines" <input
type="checkbox" v-model="limitLines"
@change="updateForm('limitLines')" type="checkbox"
@change="updateForm('limitLines')"
> >
</div> </div>
</li> </li>
<li v-show="markers || alarmMarkers" <li
v-show="markers || alarmMarkers"
class="grid-row" class="grid-row"
> >
<div class="grid-cell label" <div
title="The size of regular and alarm markers for this series." class="grid-cell label"
title="The size of regular and alarm markers for this series."
>Marker Size:</div> >Marker Size:</div>
<div class="grid-cell value"><input v-model="markerSize" <div class="grid-cell value"><input
class="c-input--flex" v-model="markerSize"
type="text" class="c-input--flex"
@change="updateForm('markerSize')" type="text"
@change="updateForm('markerSize')"
></div> ></div>
</li> </li>
<li v-show="interpolate !== 'none' || markers" <li
v-show="interpolate !== 'none' || markers"
class="grid-row" class="grid-row"
> >
<ColorSwatch :current-color="currentColor" <ColorSwatch
edit-title="Manually set the plot line and marker color for this series." :current-color="currentColor"
view-title="The plot line and marker color for this series." edit-title="Manually set the plot line and marker color for this series."
short-label="Color" view-title="The plot line and marker color for this series."
@colorSet="setColor" short-label="Color"
@colorSet="setColor"
/> />
</li> </li>
</ul> </ul>

79
src/plugins/plot/inspector/forms/YAxisForm.vue
View File

@ -3,71 +3,84 @@
<ul class="l-inspector-part"> <ul class="l-inspector-part">
<h2>Y Axis</h2> <h2>Y Axis</h2>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Manually override how the Y axis is labeled." class="grid-cell label"
title="Manually override how the Y axis is labeled."
>Label</div> >Label</div>
<div class="grid-cell value"><input v-model="label" <div class="grid-cell value"><input
class="c-input--flex" v-model="label"
type="text" class="c-input--flex"
@change="updateForm('label')" type="text"
@change="updateForm('label')"
></div> ></div>
</li> </li>
</ul> </ul>
<ul class="l-inspector-part"> <ul class="l-inspector-part">
<h2>Y Axis Scaling</h2> <h2>Y Axis Scaling</h2>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Automatically scale the Y axis to keep all values in view." class="grid-cell label"
title="Automatically scale the Y axis to keep all values in view."
>Auto scale</div> >Auto scale</div>
<div class="grid-cell value"><input v-model="autoscale" <div class="grid-cell value"><input
type="checkbox" v-model="autoscale"
@change="updateForm('autoscale')" type="checkbox"
@change="updateForm('autoscale')"
></div> ></div>
</li> </li>
<li v-show="autoscale" <li
v-show="autoscale"
class="grid-row" class="grid-row"
> >
<div class="grid-cell label" <div
title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc." class="grid-cell label"
title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc."
> >
Padding</div> Padding</div>
<div class="grid-cell value"> <div class="grid-cell value">
<input v-model="autoscalePadding" <input
class="c-input--flex" v-model="autoscalePadding"
type="text" class="c-input--flex"
@change="updateForm('autoscalePadding')" type="text"
@change="updateForm('autoscalePadding')"
> >
</div> </div>
</li> </li>
</ul> </ul>
<ul v-show="!autoscale" <ul
v-show="!autoscale"
class="l-inspector-part" class="l-inspector-part"
> >
<div v-show="!autoscale && validation.range" <div
class="grid-span-all form-error" v-show="!autoscale && validation.range"
class="grid-span-all form-error"
> >
{{ validation.range }} {{ validation.range }}
</div> </div>
<li class="grid-row force-border"> <li class="grid-row force-border">
<div class="grid-cell label" <div
title="Minimum Y axis value." class="grid-cell label"
title="Minimum Y axis value."
>Minimum Value</div> >Minimum Value</div>
<div class="grid-cell value"> <div class="grid-cell value">
<input v-model="rangeMin" <input
class="c-input--flex" v-model="rangeMin"
type="number" class="c-input--flex"
@change="updateForm('range')" type="number"
@change="updateForm('range')"
> >
</div> </div>
</li> </li>
<li class="grid-row"> <li class="grid-row">
<div class="grid-cell label" <div
title="Maximum Y axis value." class="grid-cell label"
title="Maximum Y axis value."
>Maximum Value</div> >Maximum Value</div>
<div class="grid-cell value"><input v-model="rangeMax" <div class="grid-cell value"><input
class="c-input--flex" v-model="rangeMax"
type="number" class="c-input--flex"
@change="updateForm('range')" type="number"
@change="updateForm('range')"
></div> ></div>
</li> </li>
</ul> </ul>

75
src/plugins/plot/legend/PlotLegend.vue
View File

@ -20,43 +20,51 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<template> <template>
<div class="c-plot-legend gl-plot-legend" <div
:class="{ class="c-plot-legend gl-plot-legend"
'hover-on-plot': !!highlights.length, :class="{
'is-legend-hidden': isLegendHidden 'hover-on-plot': !!highlights.length,
}" 'is-legend-hidden': isLegendHidden
}"
> >
<div class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled" <div
:class="{ 'c-disclosure-triangle--expanded': isLegendExpanded }" class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled"
@click="expandLegend" :class="{ 'c-disclosure-triangle--expanded': isLegendExpanded }"
@click="expandLegend"
> >
</div> </div>
<div class="c-plot-legend__wrapper" <div
:class="{ 'is-cursor-locked': cursorLocked }" class="c-plot-legend__wrapper"
:class="{ 'is-cursor-locked': cursorLocked }"
> >
<!-- COLLAPSED PLOT LEGEND --> <!-- COLLAPSED PLOT LEGEND -->
<div class="plot-wrapper-collapsed-legend" <div
:class="{'is-cursor-locked': cursorLocked }" class="plot-wrapper-collapsed-legend"
:class="{'is-cursor-locked': cursorLocked }"
> >
<div class="c-state-indicator__alert-cursor-lock icon-cursor-lock" <div
title="Cursor is point locked. Click anywhere in the plot to unlock." class="c-state-indicator__alert-cursor-lock icon-cursor-lock"
title="Cursor is point locked. Click anywhere in the plot to unlock."
></div> ></div>
<plot-legend-item-collapsed v-for="seriesObject in series" <plot-legend-item-collapsed
:key="seriesObject.keyString" v-for="seriesObject in series"
:highlights="highlights" :key="seriesObject.keyString"
:value-to-show-when-collapsed="legend.get('valueToShowWhenCollapsed')" :highlights="highlights"
:series-object="seriesObject" :value-to-show-when-collapsed="legend.get('valueToShowWhenCollapsed')"
@legendHoverChanged="legendHoverChanged" :series-object="seriesObject"
@legendHoverChanged="legendHoverChanged"
/> />
</div> </div>
<!-- EXPANDED PLOT LEGEND --> <!-- EXPANDED PLOT LEGEND -->
<div class="plot-wrapper-expanded-legend" <div
:class="{'is-cursor-locked': cursorLocked }" class="plot-wrapper-expanded-legend"
:class="{'is-cursor-locked': cursorLocked }"
> >
<div class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock" <div
title="Click anywhere in the plot to unlock." class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock"
title="Click anywhere in the plot to unlock."
> Cursor locked to point</div> > Cursor locked to point</div>
<table> <table>
<thead> <thead>
@ -71,12 +79,14 @@
<th v-if="showUnitsWhenExpanded"> <th v-if="showUnitsWhenExpanded">
Unit Unit
</th> </th>
<th v-if="showMinimumWhenExpanded" <th
v-if="showMinimumWhenExpanded"
class="mobile-hide" class="mobile-hide"
> >
Min Min
</th> </th>
<th v-if="showMaximumWhenExpanded" <th
v-if="showMaximumWhenExpanded"
class="mobile-hide" class="mobile-hide"
> >
Max Max
@ -84,12 +94,13 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<plot-legend-item-expanded v-for="seriesObject in series" <plot-legend-item-expanded
:key="seriesObject.keyString" v-for="seriesObject in series"
:series-object="seriesObject" :key="seriesObject.keyString"
:highlights="highlights" :series-object="seriesObject"
:legend="legend" :highlights="highlights"
@legendHoverChanged="legendHoverChanged" :legend="legend"
@legendHoverChanged="legendHoverChanged"
/> />
</tbody> </tbody>
</table> </table>

30
src/plugins/plot/legend/PlotLegendItemCollapsed.vue
View File

@ -20,26 +20,30 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<template> <template>
<div class="plot-legend-item" <div
:class="{ class="plot-legend-item"
'is-status--missing': isMissing :class="{
}" 'is-status--missing': isMissing
@mouseover="toggleHover(true)" }"
@mouseleave="toggleHover(false)" @mouseover="toggleHover(true)"
@mouseleave="toggleHover(false)"
> >
<div class="plot-series-swatch-and-name"> <div class="plot-series-swatch-and-name">
<span class="plot-series-color-swatch" <span
:style="{ 'background-color': colorAsHexString }" class="plot-series-color-swatch"
:style="{ 'background-color': colorAsHexString }"
> >
</span> </span>
<span class="is-status__indicator" <span
title="This item is missing or suspect" class="is-status__indicator"
title="This item is missing or suspect"
></span> ></span>
<span class="plot-series-name">{{ nameWithUnit }}</span> <span class="plot-series-name">{{ nameWithUnit }}</span>
</div> </div>
<div v-show="!!highlights.length && (valueToShowWhenCollapsed !== 'none')" <div
class="plot-series-value hover-value-enabled" v-show="!!highlights.length && (valueToShowWhenCollapsed !== 'none')"
:class="[{ 'cursor-hover': notNearest }, valueToDisplayWhenCollapsedClass, mctLimitStateClass]" class="plot-series-value hover-value-enabled"
:class="[{ 'cursor-hover': notNearest }, valueToDisplayWhenCollapsedClass, mctLimitStateClass]"
> >
<span v-if="valueToShowWhenCollapsed === 'nearestValue'">{{ formattedYValue }}</span> <span v-if="valueToShowWhenCollapsed === 'nearestValue'">{{ formattedYValue }}</span>
<span v-else-if="valueToShowWhenCollapsed === 'nearestTimestamp'">{{ formattedXValue }}</span> <span v-else-if="valueToShowWhenCollapsed === 'nearestTimestamp'">{{ formattedXValue }}</span>

21
src/plugins/plot/legend/PlotLegendItemExpanded.vue
View File

@ -29,12 +29,14 @@
@mouseleave="toggleHover(false)" @mouseleave="toggleHover(false)"
> >
<td class="plot-series-swatch-and-name"> <td class="plot-series-swatch-and-name">
<span class="plot-series-color-swatch" <span
:style="{ 'background-color': colorAsHexString }" class="plot-series-color-swatch"
:style="{ 'background-color': colorAsHexString }"
> >
</span> </span>
<span class="is-status__indicator" <span
title="This item is missing or suspect" class="is-status__indicator"
title="This item is missing or suspect"
></span> ></span>
<span class="plot-series-name">{{ name }}</span> <span class="plot-series-name">{{ name }}</span>
</td> </td>
@ -45,8 +47,9 @@
</span> </span>
</td> </td>
<td v-if="showValueWhenExpanded"> <td v-if="showValueWhenExpanded">
<span class="plot-series-value cursor-hover hover-value-enabled" <span
:class="[mctLimitStateClass]" class="plot-series-value cursor-hover hover-value-enabled"
:class="[mctLimitStateClass]"
> >
{{ formattedYValue }} {{ formattedYValue }}
</span> </span>
@ -56,14 +59,16 @@
{{ unit }} {{ unit }}
</span> </span>
</td> </td>
<td v-if="showMinimumWhenExpanded" <td
v-if="showMinimumWhenExpanded"
class="mobile-hide" class="mobile-hide"
> >
<span class="plot-series-value"> <span class="plot-series-value">
{{ formattedMinY }} {{ formattedMinY }}
</span> </span>
</td> </td>
<td v-if="showMaximumWhenExpanded" <td
v-if="showMaximumWhenExpanded"
class="mobile-hide" class="mobile-hide"
> >
<span class="plot-series-value"> <span class="plot-series-value">

58
src/plugins/plot/stackedPlot/StackedPlot.vue
View File

@ -22,47 +22,53 @@
<template> <template>
<div class="c-plot c-plot--stacked holder holder-plot has-control-bar"> <div class="c-plot c-plot--stacked holder holder-plot has-control-bar">
<div v-show="!hideExportButtons && !options.compact" <div
class="c-control-bar" v-show="!hideExportButtons && !options.compact"
class="c-control-bar"
> >
<span class="c-button-set c-button-set--strip-h"> <span class="c-button-set c-button-set--strip-h">
<button class="c-button icon-download" <button
title="Export This View's Data as PNG" class="c-button icon-download"
@click="exportPNG()" title="Export This View's Data as PNG"
@click="exportPNG()"
> >
<span class="c-button__label">PNG</span> <span class="c-button__label">PNG</span>
</button> </button>
<button class="c-button" <button
title="Export This View's Data as JPG" class="c-button"
@click="exportJPG()" title="Export This View's Data as JPG"
@click="exportJPG()"
> >
<span class="c-button__label">JPG</span> <span class="c-button__label">JPG</span>
</button> </button>
</span> </span>
<button class="c-button icon-crosshair" <button
:class="{ 'is-active': cursorGuide }" class="c-button icon-crosshair"
title="Toggle cursor guides" :class="{ 'is-active': cursorGuide }"
@click="toggleCursorGuide" title="Toggle cursor guides"
@click="toggleCursorGuide"
> >
</button> </button>
<button class="c-button" <button
:class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }" class="c-button"
title="Toggle grid lines" :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }"
@click="toggleGridLines" title="Toggle grid lines"
@click="toggleGridLines"
> >
</button> </button>
</div> </div>
<div class="l-view-section"> <div class="l-view-section">
<stacked-plot-item v-for="object in compositionObjects" <stacked-plot-item
:key="object.id" v-for="object in compositionObjects"
class="c-plot--stacked-container" :key="object.id"
:object="object" class="c-plot--stacked-container"
:options="options" :object="object"
:grid-lines="gridLines" :options="options"
:cursor-guide="cursorGuide" :grid-lines="gridLines"
:plot-tick-width="maxTickWidth" :cursor-guide="cursorGuide"
@plotTickWidth="onTickWidthChange" :plot-tick-width="maxTickWidth"
@loadingUpdated="loadingUpdated" @plotTickWidth="onTickWidthChange"
@loadingUpdated="loadingUpdated"
/> />
</div> </div>
</div> </div>

17
src/plugins/tabs/components/tabs.vue
View File

@ -37,18 +37,21 @@
class="c-tabs-view__tab__label c-object-label" class="c-tabs-view__tab__label c-object-label"
:class="[tab.status ? `is-status--${tab.status}` : '']" :class="[tab.status ? `is-status--${tab.status}` : '']"
> >
<div class="c-object-label__type-icon" <div
:class="tab.type.definition.cssClass" class="c-object-label__type-icon"
:class="tab.type.definition.cssClass"
> >
<span class="is-status__indicator" <span
:title="`This item is ${tab.status}`" class="is-status__indicator"
:title="`This item is ${tab.status}`"
></span> ></span>
</div> </div>
<span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span> <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span>
</div> </div>
<button v-if="isEditing" <button
class="icon-x c-click-icon c-tabs-view__tab__close-btn" v-if="isEditing"
@click="showRemoveDialog(index)" class="icon-x c-click-icon c-tabs-view__tab__close-btn"
@click="showRemoveDialog(index)"
></button> ></button>
</div> </div>
</div> </div>

15
src/plugins/telemetryTable/components/table.vue
View File

@ -20,11 +20,13 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div class="c-table-wrapper" <div
:class="{ 'is-paused': paused }" class="c-table-wrapper"
:class="{ 'is-paused': paused }"
> >
<div v-if="enableLegacyToolbar" <div
class="c-table-control-bar c-control-bar" v-if="enableLegacyToolbar"
class="c-table-control-bar c-control-bar"
> >
<button <button
v-if="allowExport" v-if="allowExport"
@ -95,8 +97,9 @@
</div> </div>
<!-- alternate controlbar start --> <!-- alternate controlbar start -->
<div v-if="marking.useAlternateControlBar" <div
class="c-table-control-bar c-control-bar" v-if="marking.useAlternateControlBar"
class="c-table-control-bar c-control-bar"
> >
<div class="c-control-bar__label"> <div class="c-control-bar__label">
{{ markedRows.length > 1 ? `${markedRows.length} ${marking.rowNamePlural} selected`: `${markedRows.length} ${marking.rowName} selected` }} {{ markedRows.length > 1 ? `${markedRows.length} ${marking.rowNamePlural} selected`: `${markedRows.length} ${marking.rowName} selected` }}

10
src/plugins/timeConductor/Conductor.vue
View File

@ -30,11 +30,13 @@
]" ]"
> >
<div class="c-conductor__time-bounds"> <div class="c-conductor__time-bounds">
<conductor-inputs-fixed v-if="isFixed" <conductor-inputs-fixed
@updated="saveFixedOffsets" v-if="isFixed"
@updated="saveFixedOffsets"
/> />
<conductor-inputs-realtime v-else <conductor-inputs-realtime
@updated="saveClockOffsets" v-else
@updated="saveClockOffsets"
/> />
<ConductorModeIcon class="c-conductor__mode-icon" /> <ConductorModeIcon class="c-conductor__mode-icon" />
<conductor-axis <conductor-axis

5
src/plugins/timeConductor/ConductorHistory.vue
View File

@ -20,8 +20,9 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div ref="historyButton" <div
class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" ref="historyButton"
class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
> >
<div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left"> <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
<button <button

5
src/plugins/timeConductor/ConductorInputsFixed.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<form ref="fixedDeltaInput" <form
class="c-conductor__inputs" ref="fixedDeltaInput"
class="c-conductor__inputs"
> >
<div <div
class="c-ctrl-wrapper c-conductor-input c-conductor__start-fixed" class="c-ctrl-wrapper c-conductor-input c-conductor__start-fixed"

5
src/plugins/timeConductor/ConductorInputsRealtime.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<form ref="deltaInput" <form
class="c-conductor__inputs" ref="deltaInput"
class="c-conductor__inputs"
> >
<div <div
class="c-ctrl-wrapper c-conductor-input c-conductor__start-delta" class="c-ctrl-wrapper c-conductor-input c-conductor__start-delta"

5
src/plugins/timeConductor/ConductorMode.vue
View File

@ -20,8 +20,9 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div ref="modeButton" <div
class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" ref="modeButton"
class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
> >
<div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left"> <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
<button <button

7
src/plugins/timeConductor/ConductorTimeSystem.vue
View File

@ -20,9 +20,10 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div v-if="selectedTimeSystem.name" <div
ref="timeSystemButton" v-if="selectedTimeSystem.name"
class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" ref="timeSystemButton"
class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
> >
<button <button
class="c-button--menu c-time-system-button" class="c-button--menu c-time-system-button"

32
src/plugins/timeConductor/independent/IndependentTimeConductor.vue
View File

@ -36,25 +36,29 @@
<ConductorModeIcon /> <ConductorModeIcon />
<div v-if="timeOptions && independentTCEnabled" <div
class="c-conductor__controls" v-if="timeOptions && independentTCEnabled"
class="c-conductor__controls"
> >
<Mode v-if="mode" <Mode
class="c-conductor__mode-select" v-if="mode"
:key-string="domainObject.identifier.key" class="c-conductor__mode-select"
:mode="timeOptions.mode" :key-string="domainObject.identifier.key"
:enabled="independentTCEnabled" :mode="timeOptions.mode"
@modeChanged="saveMode" :enabled="independentTCEnabled"
@modeChanged="saveMode"
/> />
<conductor-inputs-fixed v-if="isFixed" <conductor-inputs-fixed
:key-string="domainObject.identifier.key" v-if="isFixed"
@updated="saveFixedOffsets" :key-string="domainObject.identifier.key"
@updated="saveFixedOffsets"
/> />
<conductor-inputs-realtime v-else <conductor-inputs-realtime
:key-string="domainObject.identifier.key" v-else
@updated="saveClockOffsets" :key-string="domainObject.identifier.key"
@updated="saveClockOffsets"
/> />
</div> </div>
</div> </div>

14
src/plugins/timeConductor/independent/Mode.vue
View File

@ -20,14 +20,16 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div v-if="modes.length > 1" <div
ref="modeMenuButton" v-if="modes.length > 1"
class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" ref="modeMenuButton"
class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
> >
<div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left"> <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
<button v-if="selectedMode" <button
class="c-button--menu c-mode-button" v-if="selectedMode"
@click.prevent.stop="showModesMenu" class="c-button--menu c-mode-button"
@click.prevent.stop="showModesMenu"
> >
<span class="c-button__label">{{ selectedMode.name }}</span> <span class="c-button__label">{{ selectedMode.name }}</span>
</button> </button>

5
src/plugins/timeConductor/timePopup.vue
View File

@ -70,8 +70,9 @@
:disabled="isDisabled" :disabled="isDisabled"
@click.prevent="submit" @click.prevent="submit"
></button> ></button>
<button class="c-button icon-x" <button
@click.prevent="hide" class="c-button icon-x"
@click.prevent="hide"
></button> ></button>
</div> </div>
</div> </div>

11
src/plugins/timeline/TimelineObjectView.vue
View File

@ -20,11 +20,12 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
<template> <template>
<swim-lane :icon-class="item.type.definition.cssClass" <swim-lane
:status="status" :icon-class="item.type.definition.cssClass"
:min-height="item.height" :status="status"
:show-ucontents="item.domainObject.type === 'plan'" :min-height="item.height"
:span-rows-count="item.rowCount" :show-ucontents="item.domainObject.type === 'plan'"
:span-rows-count="item.rowCount"
> >
<template slot="label"> <template slot="label">
{{ item.domainObject.name }} {{ item.domainObject.name }}

24
src/plugins/timeline/TimelineViewLayout.vue
View File

@ -21,27 +21,31 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div ref="timelineHolder" <div
class="c-timeline-holder" ref="timelineHolder"
class="c-timeline-holder"
> >
<swim-lane v-for="timeSystemItem in timeSystems" <swim-lane
:key="timeSystemItem.timeSystem.key" v-for="timeSystemItem in timeSystems"
:key="timeSystemItem.timeSystem.key"
> >
<template slot="label"> <template slot="label">
{{ timeSystemItem.timeSystem.name }} {{ timeSystemItem.timeSystem.name }}
</template> </template>
<template slot="object"> <template slot="object">
<timeline-axis :bounds="timeSystemItem.bounds" <timeline-axis
:time-system="timeSystemItem.timeSystem" :bounds="timeSystemItem.bounds"
:content-height="height" :time-system="timeSystemItem.timeSystem"
:rendering-engine="'svg'" :content-height="height"
:rendering-engine="'svg'"
/> />
</template> </template>
</swim-lane> </swim-lane>
<div ref="contentHolder" <div
class="c-timeline__objects" ref="contentHolder"
class="c-timeline__objects"
> >
<timeline-object-view <timeline-object-view
v-for="item in items" v-for="item in items"

9
src/plugins/timer/components/Timer.vue
View File

@ -32,10 +32,11 @@
:class="[{'hide': timerState === 'stopped' }]" :class="[{'hide': timerState === 'stopped' }]"
@click="restartTimer" @click="restartTimer"
></button> ></button>
<button :title="timerStateButtonText" <button
class="c-timer__ctrl-pause-play c-icon-button c-icon-button--major" :title="timerStateButtonText"
:class="[timerStateButtonIcon]" class="c-timer__ctrl-pause-play c-icon-button c-icon-button--major"
@click="toggleStateButton" :class="[timerStateButtonIcon]"
@click="toggleStateButton"
></button> ></button>
</div> </div>
<div <div

64
src/ui/color/ColorSwatch.vue
View File

@ -21,35 +21,42 @@
--> -->
<template> <template>
<div class="u-contents"> <div class="u-contents">
<div v-if="canEdit" <div
class="grid-row" v-if="canEdit"
class="grid-row"
> >
<div class="grid-cell label" <div
:title="editTitle" class="grid-cell label"
:title="editTitle"
>{{ shortLabel }}</div> >{{ shortLabel }}</div>
<div class="grid-cell value"> <div class="grid-cell value">
<div class="c-click-swatch c-click-swatch--menu" <div
@click="toggleSwatch()" class="c-click-swatch c-click-swatch--menu"
@click="toggleSwatch()"
> >
<span class="c-color-swatch" <span
:style="{ background: currentColor }" class="c-color-swatch"
:style="{ background: currentColor }"
> >
</span> </span>
</div> </div>
<div class="c-palette c-palette--color"> <div class="c-palette c-palette--color">
<div v-show="swatchActive" <div
class="c-palette__items" v-show="swatchActive"
class="c-palette__items"
> >
<div v-for="group in colorPaletteGroups" <div
:key="group.id" v-for="group in colorPaletteGroups"
class="u-contents" :key="group.id"
class="u-contents"
> >
<div v-for="color in group" <div
:key="color.id" v-for="color in group"
class="c-palette__item" :key="color.id"
:class="{ 'selected': currentColor === color.hexString }" class="c-palette__item"
:style="{ background: color.hexString }" :class="{ 'selected': currentColor === color.hexString }"
@click="setColor(color)" :style="{ background: color.hexString }"
@click="setColor(color)"
> >
</div> </div>
</div> </div>
@ -57,17 +64,20 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else <div
class="grid-row" v-else
class="grid-row"
> >
<div class="grid-cell label" <div
:title="viewTitle" class="grid-cell label"
:title="viewTitle"
>{{ shortLabel }}</div> >{{ shortLabel }}</div>
<div class="grid-cell value"> <div class="grid-cell value">
<span class="c-color-swatch" <span
:style="{ class="c-color-swatch"
'background': currentColor :style="{
}" 'background': currentColor
}"
> >
</span> </span>
</div> </div>

29
src/ui/components/ObjectFrame.vue
View File

@ -34,14 +34,17 @@
<div <div
class="c-so-view__header" class="c-so-view__header"
> >
<div class="c-object-label" <div
:class="[ statusClass ]" class="c-object-label"
:class="[ statusClass ]"
> >
<div class="c-object-label__type-icon" <div
:class="cssClass" class="c-object-label__type-icon"
:class="cssClass"
> >
<span class="is-status__indicator" <span
:title="`This item is ${status}`" class="is-status__indicator"
:title="`This item is ${status}`"
></span> ></span>
</div> </div>
<div class="c-object-label__name"> <div class="c-object-label__name">
@ -56,13 +59,15 @@
'has-complex-content': complexContent 'has-complex-content': complexContent
}" }"
> >
<NotebookMenuSwitcher v-if="notebookEnabled" <NotebookMenuSwitcher
:domain-object="domainObject" v-if="notebookEnabled"
:object-path="objectPath" :domain-object="domainObject"
class="c-notebook-snapshot-menubutton" :object-path="objectPath"
class="c-notebook-snapshot-menubutton"
/> />
<div v-if="statusBarItems.length > 0" <div
class="c-so-view__frame-controls__btns" v-if="statusBarItems.length > 0"
class="c-so-view__frame-controls__btns"
> >
<button <button
v-for="(item, index) in statusBarItems" v-for="(item, index) in statusBarItems"

5
src/ui/components/ObjectLabel.vue
View File

@ -10,8 +10,9 @@
class="c-tree__item__type-icon c-object-label__type-icon" class="c-tree__item__type-icon c-object-label__type-icon"
:class="typeClass" :class="typeClass"
> >
<span class="is-status__indicator" <span
:title="`This item is ${status}`" class="is-status__indicator"
:title="`This item is ${status}`"
></span> ></span>
</div> </div>
<div class="c-tree__item__name c-object-label__name"> <div class="c-tree__item__name c-object-label__name">

19
src/ui/components/ObjectView.vue
View File

@ -1,16 +1,19 @@
<template> <template>
<div> <div>
<div v-if="supportsIndependentTime" <div
class="c-conductor-holder--compact l-shell__main-independent-time-conductor" v-if="supportsIndependentTime"
class="c-conductor-holder--compact l-shell__main-independent-time-conductor"
> >
<independent-time-conductor :domain-object="domainObject" <independent-time-conductor
@stateChanged="updateIndependentTimeState" :domain-object="domainObject"
@updated="saveTimeOptions" @stateChanged="updateIndependentTimeState"
@updated="saveTimeOptions"
/> />
</div> </div>
<div ref="objectViewWrapper" <div
class="c-object-view" ref="objectViewWrapper"
:class="objectTypeClass" class="c-object-view"
:class="objectTypeClass"
></div> ></div>
</div> </div>
</template> </template>

7
src/ui/components/ProgressBar.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<div class="c-progress-bar"> <div class="c-progress-bar">
<div class="c-progress-bar__bar" <div
:class="{ '--indeterminate': model.progressPerc === undefined }" class="c-progress-bar__bar"
:style="styleBarWidth" :class="{ '--indeterminate': model.progressPerc === undefined }"
:style="styleBarWidth"
></div> ></div>
<div <div
v-if="model.progressText !== undefined" v-if="model.progressText !== undefined"

5
src/ui/components/TimeSystemAxis.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div ref="axisHolder" <div
class="c-timesystem-axis" ref="axisHolder"
class="c-timesystem-axis"
> >
<div class="nowMarker"><span class="icon-arrow-down"></span></div> <div class="nowMarker"><span class="icon-arrow-down"></span></div>
</div> </div>

41
src/ui/components/swim-lane/SwimLane.vue
View File

@ -1,23 +1,27 @@
<template> <template>
<div class="u-contents" <div
:class="[ class="u-contents"
{'c-swimlane': !isNested}, :class="[
statusClass {'c-swimlane': !isNested},
]" statusClass
]"
> >
<div v-if="hideLabel === false" <div
class="c-swimlane__lane-label c-object-label" v-if="hideLabel === false"
:class="[swimlaneClass, statusClass]" class="c-swimlane__lane-label c-object-label"
:style="gridRowSpan" :class="[swimlaneClass, statusClass]"
:style="gridRowSpan"
> >
<div v-if="iconClass" <div
class="c-object-label__type-icon" v-if="iconClass"
:class="iconClass" class="c-object-label__type-icon"
:class="iconClass"
> >
<span v-if="status" <span
class="is-status__indicator" v-if="status"
:title="`This item is ${status}`" class="is-status__indicator"
:title="`This item is ${status}`"
></span> ></span>
</div> </div>
@ -26,9 +30,10 @@
</div> </div>
</div> </div>
<div class="c-swimlane__lane-object" <div
:style="{'min-height': minHeight}" class="c-swimlane__lane-object"
:class="{'u-contents': showUcontents}" :style="{'min-height': minHeight}"
:class="{'u-contents': showUcontents}"
> >
<slot name="object"></slot> <slot name="object"></slot>
</div> </div>

21
src/ui/inspector/Inspector.vue
View File

@ -23,22 +23,25 @@
<template> <template>
<div class="c-inspector"> <div class="c-inspector">
<object-name /> <object-name />
<div v-if="showStyles" <div
class="c-inspector__tabs c-tabs" v-if="showStyles"
class="c-inspector__tabs c-tabs"
> >
<div v-for="tabbedView in tabbedViews" <div
:key="tabbedView.key" v-for="tabbedView in tabbedViews"
class="c-inspector__tab c-tab" :key="tabbedView.key"
:class="{'is-current': isCurrent(tabbedView)}" class="c-inspector__tab c-tab"
@click="updateCurrentTab(tabbedView)" :class="{'is-current': isCurrent(tabbedView)}"
@click="updateCurrentTab(tabbedView)"
> >
{{ tabbedView.name }} {{ tabbedView.name }}
</div> </div>
</div> </div>
<div class="c-inspector__content"> <div class="c-inspector__content">
<multipane v-show="currentTabbedView.key === '__properties'" <multipane
type="vertical" v-show="currentTabbedView.key === '__properties'"
type="vertical"
> >
<pane class="c-inspector__properties"> <pane class="c-inspector__properties">
<Properties <Properties

32
src/ui/inspector/ObjectName.vue
View File

@ -22,28 +22,34 @@
<template> <template>
<div class="c-inspector__header"> <div class="c-inspector__header">
<div v-if="!multiSelect" <div
class="c-inspector__selected c-object-label" v-if="!multiSelect"
:class="[statusClass]" class="c-inspector__selected c-object-label"
:class="[statusClass]"
> >
<div class="c-object-label__type-icon" <div
:class="typeCssClass" class="c-object-label__type-icon"
:class="typeCssClass"
> >
<span class="is-status__indicator" <span
:title="`This item is ${status}`" class="is-status__indicator"
:title="`This item is ${status}`"
></span> ></span>
</div> </div>
<span v-if="!singleSelectNonObject" <span
class="c-inspector__selected c-object-label__name" v-if="!singleSelectNonObject"
class="c-inspector__selected c-object-label__name"
>{{ item.name }}</span> >{{ item.name }}</span>
<div v-if="singleSelectNonObject" <div
class="c-inspector__selected c-inspector__selected--non-domain-object c-object-label" v-if="singleSelectNonObject"
class="c-inspector__selected c-inspector__selected--non-domain-object c-object-label"
> >
<span class="c-object-label__name">Layout Object</span> <span class="c-object-label__name">Layout Object</span>
</div> </div>
</div> </div>
<div v-if="multiSelect" <div
class="c-inspector__multiple-selected" v-if="multiSelect"
class="c-inspector__multiple-selected"
> >
{{ itemsSelected }} items selected {{ itemsSelected }} items selected
</div> </div>

10
src/ui/inspector/styles/FontStyleEditor.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div class="c-toolbar"> <div class="c-toolbar">
<div ref="fontSizeMenu" <div
class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left" ref="fontSizeMenu"
class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left"
> >
<button <button
class="c-icon-button c-button--menu icon-font-size" class="c-icon-button c-button--menu icon-font-size"
@ -10,8 +11,9 @@
<span class="c-button__label">{{ fontSizeLabel }}</span> <span class="c-button__label">{{ fontSizeLabel }}</span>
</button> </button>
</div> </div>
<div ref="fontMenu" <div
class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left" ref="fontMenu"
class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left"
> >
<button <button
class="c-icon-button c-button--menu icon-font" class="c-icon-button c-button--menu icon-font"

7
src/ui/inspector/styles/SavedStyleSelector.vue
View File

@ -23,9 +23,10 @@
<template> <template>
<div> <div>
<div class="c-style c-style--saved has-local-controls c-toolbar"> <div class="c-style c-style--saved has-local-controls c-toolbar">
<div class="c-style__controls" <div
:title="description" class="c-style__controls"
@click="selectStyle()" :title="description"
@click="selectStyle()"
> >
<div <div
class="c-style-thumb" class="c-style-thumb"

19
src/ui/layout/BrowseBar.vue
View File

@ -11,11 +11,13 @@
class="l-browse-bar__object-name--w c-object-label" class="l-browse-bar__object-name--w c-object-label"
:class="[statusClass]" :class="[statusClass]"
> >
<div class="c-object-label__type-icon" <div
:class="type.cssClass" class="c-object-label__type-icon"
:class="type.cssClass"
> >
<span class="is-status__indicator" <span
:title="`This item is ${status}`" class="is-status__indicator"
:title="`This item is ${status}`"
></span> ></span>
</div> </div>
<span <span
@ -38,10 +40,11 @@
:views="views" :views="views"
/> />
<!-- Action buttons --> <!-- Action buttons -->
<NotebookMenuSwitcher v-if="notebookEnabled" <NotebookMenuSwitcher
:domain-object="domainObject" v-if="notebookEnabled"
:object-path="openmct.router.path" :domain-object="domainObject"
class="c-notebook-snapshot-menubutton" :object-path="openmct.router.path"
class="c-notebook-snapshot-menubutton"
/> />
<div class="l-browse-bar__actions"> <div class="l-browse-bar__actions">
<button <button

5
src/ui/layout/CreateButton.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div ref="createButton" <div
class="c-create-button--w" ref="createButton"
class="c-create-button--w"
> >
<button <button
class="c-create-button c-button--menu c-button--major icon-plus" class="c-create-button c-button--menu c-button--major icon-plus"

5
src/ui/layout/pane.vue
View File

@ -17,8 +17,9 @@
@mousedown="start" @mousedown="start"
></div> ></div>
<div class="l-pane__header"> <div class="l-pane__header">
<span v-if="label" <span
class="l-pane__label" v-if="label"
class="l-pane__label"
>{{ label }}</span> >{{ label }}</span>
<slot name="controls"></slot> <slot name="controls"></slot>
<button <button

7
src/ui/layout/status-bar/NotificationBanner.vue
View File

@ -29,9 +29,10 @@
@click="maximize()" @click="maximize()"
> >
<span class="c-message-banner__message">{{ activeModel.message }}</span> <span class="c-message-banner__message">{{ activeModel.message }}</span>
<span v-if="haslink" <span
class="c-message-banner__message" v-if="haslink"
:class="[haslink ? getLinkProps.cssClass : '']" class="c-message-banner__message"
:class="[haslink ? getLinkProps.cssClass : '']"
>{{ getLinkProps.text }}</span> >{{ getLinkProps.text }}</span>
<progress-bar <progress-bar

18
src/ui/preview/preview-header.vue
View File

@ -4,9 +4,10 @@
<div <div
class="l-browse-bar__object-name--w c-object-label" class="l-browse-bar__object-name--w c-object-label"
> >
<div v-if="type" <div
class="c-object-label__type-icon" v-if="type"
:class="type.definition.cssClass" class="c-object-label__type-icon"
:class="type.definition.cssClass"
></div> ></div>
<span class="l-browse-bar__object-name c-object-label__name"> <span class="l-browse-bar__object-name c-object-label__name">
{{ domainObject.name }} {{ domainObject.name }}
@ -19,11 +20,12 @@
:views="views" :views="views"
:current-view="currentView" :current-view="currentView"
/> />
<NotebookMenuSwitcher :domain-object="domainObject" <NotebookMenuSwitcher
:object-path="objectPath" :domain-object="domainObject"
:is-preview="true" :object-path="objectPath"
:current-view="currentView" :is-preview="true"
class="c-notebook-snapshot-menubutton" :current-view="currentView"
class="c-notebook-snapshot-menubutton"
/> />
<div class="l-browse-bar__actions"> <div class="l-browse-bar__actions">
<button <button