diff options
| author | Joe Pea <joe.pea@nasa.gov> | 2022-03-17 04:54:32 +0300 |
|---|---|---|
| committer | Joe Pea <joe.pea@nasa.gov> | 2022-03-17 04:54:32 +0300 |
| commit | 48343a5fac3022349a1b9a2689e9c72351fec6ed (patch) | |
| tree | 1eb136d42e64b2e0f8bf1eef33cf8169093910b2 | |
| parent | eb16c401cb3158eb4e4c3bb9df4d320aa64698f9 (diff) | |
lint fixes after updating eslintlint-fixes
97 files changed, 1897 insertions, 1439 deletions
diff --git a/src/api/forms/components/FormProperties.vue b/src/api/forms/components/FormProperties.vue index d3caebea6..830fd0753 100644 --- a/src/api/forms/components/FormProperties.vue +++ b/src/api/forms/components/FormProperties.vue @@ -26,45 +26,52 @@ <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> - <form name="mctForm" - class="c-form__contents" - autocomplete="off" - @submit.prevent + <form + name="mctForm" + class="c-form__contents" + autocomplete="off" + @submit.prevent > - <div v-for="section in formSections" - :key="section.id" - class="c-form__section" - :class="section.cssClass" + <div + v-for="section in formSections" + :key="section.id" + class="c-form__section" + :class="section.cssClass" > - <h2 v-if="section.name" + <h2 + v-if="section.name" class="c-form__section-header" > {{ section.name }} </h2> - <div v-for="(row, index) in section.rows" - :key="row.id" - class="u-contents" + <div + v-for="(row, index) in section.rows" + :key="row.id" + class="u-contents" > - <FormRow :css-class="section.cssClass" - :first="index < 1" - :row="row" - @onChange="onChange" + <FormRow + :css-class="section.cssClass" + :first="index < 1" + :row="row" + @onChange="onChange" /> </div> </div> </form> <div class="mct-form__controls c-overlay__button-bar c-form__bottom-bar"> - <button tabindex="0" - :disabled="isInvalid" - class="c-button c-button--major" - @click="onSave" + <button + tabindex="0" + :disabled="isInvalid" + class="c-button c-button--major" + @click="onSave" > {{ submitLabel }} </button> - <button tabindex="0" - class="c-button" - @click="onDismiss" + <button + tabindex="0" + class="c-button" + @click="onDismiss" > {{ cancelLabel }} </button> diff --git a/src/api/forms/components/FormRow.vue b/src/api/forms/components/FormRow.vue index f22216992..800ca7c58 100644 --- a/src/api/forms/components/FormRow.vue +++ b/src/api/forms/components/FormRow.vue @@ -21,21 +21,25 @@ *****************************************************************************/ <template> -<div class="form-row c-form__row" - :class="[{ 'first': first }]" - @onChange="onChange" +<div + class="form-row c-form__row" + :class="[{ 'first': first }]" + @onChange="onChange" > - <div class="c-form-row__label" - :title="row.description" + <div + class="c-form-row__label" + :title="row.description" > {{ row.name }} </div> - <div class="c-form-row__state-indicator" - :class="rowClass" + <div + class="c-form-row__state-indicator" + :class="rowClass" > </div> - <div v-if="row.control" - class="c-form-row__controls" + <div + v-if="row.control" + class="c-form-row__controls" > <div ref="rowElement"></div> </div> diff --git a/src/api/forms/components/controls/AutoCompleteField.vue b/src/api/forms/components/controls/AutoCompleteField.vue index edcec70ce..91d58a31f 100644 --- a/src/api/forms/components/controls/AutoCompleteField.vue +++ b/src/api/forms/components/controls/AutoCompleteField.vue @@ -22,20 +22,24 @@ <template> <div class="form-control autocomplete"> - <input v-model="field" - class="autocompleteInput" - type="text" - @click="inputClicked()" - @keydown="keyDown($event)" + <input + v-model="field" + class="autocompleteInput" + type="text" + @click="inputClicked()" + @keydown="keyDown($event)" > - <span class="icon-arrow-down" - @click="arrowClicked()" + <span + class="icon-arrow-down" + @click="arrowClicked()" ></span> - <div class="autocompleteOptions" - @blur="hideOptions = true" + <div + class="autocompleteOptions" + @blur="hideOptions = true" > <ul v-if="!hideOptions"> - <li v-for="opt in filteredOptions" + <li + v-for="opt in filteredOptions" :key="opt.optionId" :class="{'optionPreSelected': optionIndex === opt.optionId}" @click="fillInputWithString(opt.name)" diff --git a/src/api/forms/components/controls/ClockDisplayFormatField.vue b/src/api/forms/components/controls/ClockDisplayFormatField.vue index 9c6987c21..14785afd6 100644 --- a/src/api/forms/components/controls/ClockDisplayFormatField.vue +++ b/src/api/forms/components/controls/ClockDisplayFormatField.vue @@ -22,10 +22,11 @@ <template> <div class="c-form-control--clock-display-format-fields"> - <SelectField v-for="item in items" - :key="item.key" - :model="item" - @onChange="onChange" + <SelectField + v-for="item in items" + :key="item.key" + :model="item" + @onChange="onChange" /> </div> </template> diff --git a/src/api/forms/components/controls/Composite.vue b/src/api/forms/components/controls/Composite.vue index 0335a4121..65c98ac9d 100644 --- a/src/api/forms/components/controls/Composite.vue +++ b/src/api/forms/components/controls/Composite.vue @@ -22,12 +22,13 @@ <template> <span> - <CompositeItem v-for="(item, index) in model.items" - :key="item.name" - :first="index < 1" - :value="JSON.stringify(model.value[index])" - :item="item" - @onChange="onChange" + <CompositeItem + v-for="(item, index) in model.items" + :key="item.name" + :first="index < 1" + :value="JSON.stringify(model.value[index])" + :item="item" + @onChange="onChange" /> </span> </template> diff --git a/src/api/forms/components/controls/CompositeItem.vue b/src/api/forms/components/controls/CompositeItem.vue index 2976707a5..3386c6367 100644 --- a/src/api/forms/components/controls/CompositeItem.vue +++ b/src/api/forms/components/controls/CompositeItem.vue @@ -22,10 +22,11 @@ <template> <div :class="compositeCssClass"> - <FormRow :css-class="item.cssClass" - :first="first" - :row="row" - @onChange="onChange" + <FormRow + :css-class="item.cssClass" + :first="first" + :row="row" + @onChange="onChange" /> <span class="composite-control-label"> {{ item.name }} diff --git a/src/api/forms/components/controls/Datetime.vue b/src/api/forms/components/controls/Datetime.vue index 6bc1749ea..5c6bee75d 100644 --- a/src/api/forms/components/controls/Datetime.vue +++ b/src/api/forms/components/controls/Datetime.vue @@ -27,50 +27,55 @@ <div class="hint time sm">Min</div> <div class="hint time sm">Sec</div> <div class="hint timezone">Timezone</div> - <form ref="dateTimeForm" - prevent - class="u-contents" + <form + ref="dateTimeForm" + prevent + class="u-contents" > <div class="field control date"> - <input v-model="date" - :pattern="/\d{4}-\d{2}-\d{2}/" - :placeholder="format" - type="date" - name="date" - @change="onChange" + <input + v-model="date" + :pattern="/\d{4}-\d{2}-\d{2}/" + :placeholder="format" + type="date" + name="date" + @change="onChange" > </div> <div class="field control hour sm"> - <input v-model="hour" - :pattern="/\d+/" - type="number" - name="hour" - maxlength="10" - min="0" - max="23" - @change="onChange" + <input + v-model="hour" + :pattern="/\d+/" + type="number" + name="hour" + maxlength="10" + min="0" + max="23" + @change="onChange" > </div> <div class="field control min sm"> - <input v-model="min" - :pattern="/\d+/" - type="number" - name="min" - maxlength="2" - min="0" - max="59" - @change="onChange" + <input + v-model="min" + :pattern="/\d+/" + type="number" + name="min" + maxlength="2" + min="0" + max="59" + @change="onChange" > </div> <div class="field control sec sm"> - <input v-model="sec" - :pattern="/\d+/" - type="number" - name="sec" - maxlength="2" - min="0" - max="59" - @change="onChange" + <input + v-model="sec" + :pattern="/\d+/" + type="number" + name="sec" + maxlength="2" + min="0" + max="59" + @change="onChange" > </div> <div class="field control timezone"> diff --git a/src/api/forms/components/controls/FileInput.vue b/src/api/forms/components/controls/FileInput.vue index b6b17b572..f1b10f8f3 100644 --- a/src/api/forms/components/controls/FileInput.vue +++ b/src/api/forms/components/controls/FileInput.vue @@ -22,18 +22,21 @@ <template> <span class="form-control shell"> - <span class="field control" - :class="model.cssClass" + <span + class="field control" + :class="model.cssClass" > - <input id="fileElem" - ref="fileInput" - type="file" - accept=".json" - style="display:none" + <input + id="fileElem" + ref="fileInput" + type="file" + accept=".json" + style="display:none" > - <button id="fileSelect" - class="c-button" - @click="selectFile" + <button + id="fileSelect" + class="c-button" + @click="selectFile" > {{ name }} </button> diff --git a/src/api/forms/components/controls/NumberField.vue b/src/api/forms/components/controls/NumberField.vue index 77a27795b..e552b492c 100644 --- a/src/api/forms/components/controls/NumberField.vue +++ b/src/api/forms/components/controls/NumberField.vue @@ -22,15 +22,17 @@ <template> <span class="form-control shell"> - <span class="field control" - :class="model.cssClass" + <span + class="field control" + :class="model.cssClass" > - <input v-model="field" - type="number" - :min="model.min" - :max="model.max" - :step="model.step" - @input="updateText()" + <input + v-model="field" + type="number" + :min="model.min" + :max="model.max" + :step="model.step" + @input="updateText()" > </span> </span> diff --git a/src/api/forms/components/controls/SelectField.vue b/src/api/forms/components/controls/SelectField.vue index 4d8147dba..aecf0c286 100644 --- a/src/api/forms/components/controls/SelectField.vue +++ b/src/api/forms/components/controls/SelectField.vue @@ -22,14 +22,16 @@ <template> <div class="form-control select-field"> - <select v-model="selected" - required="model.required" - name="mctControl" - @change="onChange($event)" + <select + v-model="selected" + required="model.required" + name="mctControl" + @change="onChange($event)" > - <option v-for="option in model.options" - :key="option.name" - :value="option.value" + <option + v-for="option in model.options" + :key="option.name" + :value="option.value" > {{ option.name }} </option> diff --git a/src/api/forms/components/controls/TextAreaField.vue b/src/api/forms/components/controls/TextAreaField.vue index 8b0dad0b8..834940b34 100644 --- a/src/api/forms/components/controls/TextAreaField.vue +++ b/src/api/forms/components/controls/TextAreaField.vue @@ -22,13 +22,15 @@ <template> <span class="form-control shell"> - <span class="field control" - :class="model.cssClass" + <span + class="field control" + :class="model.cssClass" > - <textarea v-model="field" - type="text" - :size="model.size" - @input="updateText()" + <textarea + v-model="field" + type="text" + :size="model.size" + @input="updateText()" > </textarea> </span> diff --git a/src/api/forms/components/controls/TextField.vue b/src/api/forms/components/controls/TextField.vue index 939e42375..60b6e1752 100644 --- a/src/api/forms/components/controls/TextField.vue +++ b/src/api/forms/components/controls/TextField.vue @@ -22,13 +22,15 @@ <template> <span class="form-control shell"> - <span class="field control" - :class="model.cssClass" + <span + class="field control" + :class="model.cssClass" > - <input v-model="field" - type="text" - :size="model.size" - @input="updateText()" + <input + v-model="field" + type="text" + :size="model.size" + @input="updateText()" > </span> </span> diff --git a/src/api/menu/components/Menu.vue b/src/api/menu/components/Menu.vue index 50021641d..0073062e0 100644 --- a/src/api/menu/components/Menu.vue +++ b/src/api/menu/components/Menu.vue @@ -1,6 +1,7 @@ <template> -<div class="c-menu" - :class="options.menuClass" +<div + class="c-menu" + :class="options.menuClass" > <ul v-if="options.actions.length && options.actions[0].length"> <template diff --git a/src/api/menu/components/SuperMenu.vue b/src/api/menu/components/SuperMenu.vue index 25f9b51f2..d7fe6a7a6 100644 --- a/src/api/menu/components/SuperMenu.vue +++ b/src/api/menu/components/SuperMenu.vue @@ -1,8 +1,10 @@ <template> -<div class="c-menu" - :class="[options.menuClass, 'c-super-menu']" +<div + 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" > <template @@ -34,7 +36,8 @@ </template> </ul> - <ul v-else + <ul + v-else class="c-super-menu__menu" > <li diff --git a/src/plugins/charts/BarGraphPlot.vue b/src/plugins/charts/BarGraphPlot.vue index b27dcf122..ad5894afc 100644 --- a/src/plugins/charts/BarGraphPlot.vue +++ b/src/plugins/charts/BarGraphPlot.vue @@ -1,28 +1,34 @@ <template> -<div ref="plotWrapper" - class="has-local-controls" - :class="{ 's-unsynced' : isZoomed }" +<div + ref="plotWrapper" + class="has-local-controls" + :class="{ 's-unsynced' : isZoomed }" > - <div v-if="isZoomed" - class="l-state-indicators" + <div + v-if="isZoomed" + class="l-state-indicators" > - <span 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 + 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> </div> - <div ref="plot" - class="c-bar-chart" - @plotly_relayout="zoom" + <div + ref="plot" + class="c-bar-chart" + @plotly_relayout="zoom" ></div> - <div v-if="false" - ref="localControl" - class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover" + <div + v-if="false" + 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" - class="c-button icon-reset" - :disabled="!isZoomed" - title="Reset pan/zoom" - @click="reset()" + <button + v-if="data.length" + class="c-button icon-reset" + :disabled="!isZoomed" + title="Reset pan/zoom" + @click="reset()" > </button> </div> diff --git a/src/plugins/charts/BarGraphView.vue b/src/plugins/charts/BarGraphView.vue index 3d2f9d6bd..dbb07b4a7 100644 --- a/src/plugins/charts/BarGraphView.vue +++ b/src/plugins/charts/BarGraphView.vue @@ -21,12 +21,13 @@ --> <template> -<BarGraph ref="barGraph" - class="c-plot c-bar-chart-view" - :data="trace" - :plot-axis-title="plotAxisTitle" - @subscribe="subscribeToAll" - @unsubscribe="removeAllSubscriptions" +<BarGraph + ref="barGraph" + class="c-plot c-bar-chart-view" + :data="trace" + :plot-axis-title="plotAxisTitle" + @subscribe="subscribeToAll" + @unsubscribe="removeAllSubscriptions" /> </template> diff --git a/src/plugins/charts/inspector/BarGraphOptions.vue b/src/plugins/charts/inspector/BarGraphOptions.vue index 2bd0e780f..a17fbc28b 100644 --- a/src/plugins/charts/inspector/BarGraphOptions.vue +++ b/src/plugins/charts/inspector/BarGraphOptions.vue @@ -22,11 +22,13 @@ <template> <ul class="c-tree c-bar-graph-options"> <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" > - <series-options :item="series" - :color-palette="colorPalette" + <series-options + :item="series" + :color-palette="colorPalette" /> </li> </ul> diff --git a/src/plugins/charts/inspector/SeriesOptions.vue b/src/plugins/charts/inspector/SeriesOptions.vue index 5a6568cb5..29c1f9cc3 100644 --- a/src/plugins/charts/inspector/SeriesOptions.vue +++ b/src/plugins/charts/inspector/SeriesOptions.vue @@ -21,12 +21,14 @@ --> <template> <ul> - <li class="c-tree__item menus-to-left" + <li + class="c-tree__item menus-to-left" :class="aliasCss" > - <span class="c-disclosure-triangle is-enabled flex-elem" - :class="expandedCssClass" - @click="expanded = !expanded" + <span + class="c-disclosure-triangle is-enabled flex-elem" + :class="expandedCssClass" + @click="expanded = !expanded" > </span> @@ -36,14 +38,15 @@ <div class="c-object-label__name">{{ name }}</div> </div> </li> - <ColorSwatch v-if="expanded" - :current-color="currentColor" - title="Manually set the color for this bar graph series." - edit-title="Manually set the color for this bar graph series" - view-title="The color for this bar graph series." - short-label="Color" - class="grid-properties" - @colorSet="setColor" + <ColorSwatch + v-if="expanded" + :current-color="currentColor" + title="Manually set the color for this bar graph series." + edit-title="Manually set the color for this bar graph series" + view-title="The color for this bar graph series." + short-label="Color" + class="grid-properties" + @colorSet="setColor" /> </ul> </template> diff --git a/src/plugins/condition/components/Condition.vue b/src/plugins/condition/components/Condition.vue index 37c97f5dd..791b37117 100644 --- a/src/plugins/condition/components/Condition.vue +++ b/src/plugins/condition/components/Condition.vue @@ -21,31 +21,35 @@ *****************************************************************************/ <template> -<div class="c-condition-h" - :class="{ 'is-drag-target': draggingOver }" - @dragover.prevent - @drop.prevent="dropCondition($event, conditionIndex)" - @dragenter="dragEnter($event, conditionIndex)" - @dragleave="dragLeave($event, conditionIndex)" +<div + class="c-condition-h" + :class="{ 'is-drag-target': draggingOver }" + @dragover.prevent + @drop.prevent="dropCondition($event, conditionIndex)" + @dragenter="dragEnter($event, conditionIndex)" + @dragleave="dragLeave($event, conditionIndex)" > <div class="c-condition-h__drop-target"></div> - <div v-if="isEditing" - :class="{'is-current': condition.id === currentConditionId}" - class="c-condition c-condition--edit" + <div + v-if="isEditing" + :class="{'is-current': condition.id === currentConditionId}" + class="c-condition c-condition--edit" > <!-- Edit view --> <div class="c-condition__header"> - <span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag" - title="Drag to reorder conditions" - :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]" - :draggable="!condition.isDefault" - @dragstart="dragStart" - @dragend="dragEnd" + <span + class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag" + title="Drag to reorder conditions" + :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]" + :draggable="!condition.isDefault" + @dragstart="dragStart" + @dragend="dragEnd" ></span> - <span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled" - :class="{ 'c-disclosure-triangle--expanded': expanded }" - @click="expanded = !expanded" + <span + class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled" + :class="{ 'c-disclosure-triangle--expanded': expanded }" + @click="expanded = !expanded" ></span> <span class="c-condition__name">{{ condition.configuration.name }}</span> @@ -54,107 +58,123 @@ Define criteria </template> <span v-else> - <condition-description :show-label="false" - :condition="condition" + <condition-description + :show-label="false" + :condition="condition" /> </span> </span> <div class="c-condition__buttons"> - <button v-if="!condition.isDefault" - class="c-click-icon c-condition__duplicate-button icon-duplicate" - title="Duplicate this condition" - @click="cloneCondition" + <button + v-if="!condition.isDefault" + class="c-click-icon c-condition__duplicate-button icon-duplicate" + title="Duplicate this condition" + @click="cloneCondition" ></button> - <button v-if="!condition.isDefault" - class="c-click-icon c-condition__delete-button icon-trash" - title="Delete this condition" - @click="removeCondition" + <button + v-if="!condition.isDefault" + class="c-click-icon c-condition__delete-button icon-trash" + title="Delete this condition" + @click="removeCondition" ></button> </div> </div> - <div v-if="expanded" - class="c-condition__definition c-cdef" + <div + v-if="expanded" + class="c-condition__definition c-cdef" > <span class="c-cdef__separator c-row-separator"></span> <span class="c-cdef__label">Condition Name</span> <span class="c-cdef__controls"> - <input v-model="condition.configuration.name" - class="t-condition-input__name" - type="text" - @change="persist" + <input + v-model="condition.configuration.name" + class="t-condition-input__name" + type="text" + @change="persist" > </span> <span class="c-cdef__label">Output</span> <span class="c-cdef__controls"> <span class="c-cdef__control"> - <select v-model="selectedOutputSelection" - @change="setOutputValue" + <select + v-model="selectedOutputSelection" + @change="setOutputValue" > - <option v-for="option in outputOptions" - :key="option" - :value="option" + <option + v-for="option in outputOptions" + :key="option" + :value="option" > {{ initCap(option) }} </option> </select> </span> <span class="c-cdef__control"> - <input v-if="selectedOutputSelection === outputOptions[2]" - v-model="condition.configuration.output" - class="t-condition-name-input" - type="text" - @change="persist" + <input + v-if="selectedOutputSelection === outputOptions[2]" + v-model="condition.configuration.output" + class="t-condition-name-input" + type="text" + @change="persist" > </span> </span> - <div v-if="!condition.isDefault" - class="c-cdef__match-and-criteria" + <div + v-if="!condition.isDefault" + class="c-cdef__match-and-criteria" > <span class="c-cdef__separator c-row-separator"></span> <span class="c-cdef__label">Match</span> <span class="c-cdef__controls"> - <select v-model="condition.configuration.trigger" - @change="persist" + <select + v-model="condition.configuration.trigger" + @change="persist" > - <option v-for="option in triggers" - :key="option.value" - :value="option.value" + <option + v-for="option in triggers" + :key="option.value" + :value="option.value" > {{ option.label }}</option> </select> </span> <template v-if="telemetry.length || condition.configuration.criteria.length"> - <div v-for="(criterion, index) in condition.configuration.criteria" - :key="criterion.id" - class="c-cdef__criteria" + <div + v-for="(criterion, index) in condition.configuration.criteria" + :key="criterion.id" + class="c-cdef__criteria" > - <Criterion :telemetry="telemetry" - :criterion="criterion" - :index="index" - :trigger="condition.configuration.trigger" - :is-default="condition.configuration.criteria.length === 1" - @persist="persist" + <Criterion + :telemetry="telemetry" + :criterion="criterion" + :index="index" + :trigger="condition.configuration.trigger" + :is-default="condition.configuration.criteria.length === 1" + @persist="persist" /> <div class="c-cdef__criteria__buttons"> - <button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate" - title="Duplicate this criteria" - @click="cloneCriterion(index)" + <button + class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate" + title="Duplicate this criteria" + @click="cloneCriterion(index)" ></button> - <button v-if="!(condition.configuration.criteria.length === 1)" - class="c-click-icon c-cdef__criteria-duplicate-button icon-trash" - title="Delete this criteria" - @click="removeCriterion(index)" + <button + v-if="!(condition.configuration.criteria.length === 1)" + class="c-click-icon c-cdef__criteria-duplicate-button icon-trash" + title="Delete this criteria" + @click="removeCriterion(index)" ></button> </div> </div> </template> <div class="c-cdef__separator c-row-separator"></div> - <div class="c-cdef__controls" - :disabled="!telemetry.length" + <div + class="c-cdef__controls" + :disabled="!telemetry.length" > <button class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus" @@ -166,9 +186,10 @@ </div> </div> </div> - <div v-else - class="c-condition c-condition--browse" - :class="{'is-current': condition.id === currentConditionId}" + <div + v-else + class="c-condition c-condition--browse" + :class="{'is-current': condition.id === currentConditionId}" > <!-- Browse view --> <div class="c-condition__header"> @@ -180,8 +201,9 @@ </span> </div> <div class="c-condition__summary"> - <condition-description :show-label="false" - :condition="condition" + <condition-description + :show-label="false" + :condition="condition" /> </div> </div> diff --git a/src/plugins/condition/components/ConditionCollection.vue b/src/plugins/condition/components/ConditionCollection.vue index 9718fafc7..9825cd094 100644 --- a/src/plugins/condition/components/ConditionCollection.vue +++ b/src/plugins/condition/components/ConditionCollection.vue @@ -21,8 +21,9 @@ *****************************************************************************/ <template> -<section id="conditionCollection" - :class="{ 'is-expanded': expanded }" +<section + id="conditionCollection" + :class="{ 'is-expanded': expanded }" > <div class="c-cs__header c-section__header"> <span @@ -32,12 +33,14 @@ ></span> <div class="c-cs__header-label c-section__label">Conditions</div> </div> - <div v-if="expanded" - class="c-cs__content" + <div + v-if="expanded" + class="c-cs__content" > - <div v-show="isEditing" - class="hint" - :class="{ 's-status-icon-warning-lo': !telemetryObjs.length }" + <div + v-show="isEditing" + 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-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> </button> - <div class="c-cs__conditions-h" - :class="{ 'is-active-dragging': isDragging }" + <div + class="c-cs__conditions-h" + :class="{ 'is-active-dragging': isDragging }" > - <Condition v-for="(condition, index) in conditionCollection" - :key="condition.id" - :condition="condition" - :current-condition-id="currentConditionId" - :condition-index="index" - :telemetry="telemetryObjs" - :is-editing="isEditing" - :move-index="moveIndex" - :is-dragging="isDragging" - @updateCondition="updateCondition" - @removeCondition="removeCondition" - @cloneCondition="cloneCondition" - @setMoveIndex="setMoveIndex" - @dragComplete="dragComplete" - @dropCondition="dropCondition" + <Condition + v-for="(condition, index) in conditionCollection" + :key="condition.id" + :condition="condition" + :current-condition-id="currentConditionId" + :condition-index="index" + :telemetry="telemetryObjs" + :is-editing="isEditing" + :move-index="moveIndex" + :is-dragging="isDragging" + @updateCondition="updateCondition" + @removeCondition="removeCondition" + @cloneCondition="cloneCondition" + @setMoveIndex="setMoveIndex" + @dragComplete="dragComplete" + @dropCondition="dropCondition" /> </div> </div> diff --git a/src/plugins/condition/components/ConditionDescription.vue b/src/plugins/condition/components/ConditionDescription.vue index 6001aa5fa..e044f6a4d 100644 --- a/src/plugins/condition/components/ConditionDescription.vue +++ b/src/plugins/condition/components/ConditionDescription.vue @@ -22,18 +22,21 @@ <template> <div class="c-style__condition-desc"> - <span v-if="showLabel && condition" - class="c-style__condition-desc__name c-condition__name" + <span + v-if="showLabel && condition" + class="c-style__condition-desc__name c-condition__name" > {{ condition.configuration.name }} </span> - <span v-if="!condition.isDefault" - class="c-style__condition-desc__text" + <span + v-if="!condition.isDefault" + class="c-style__condition-desc__text" > {{ description }} </span> - <span v-else - class="c-style__condition-desc__text" + <span + v-else + class="c-style__condition-desc__text" > Match if no other condition is matched </span> diff --git a/src/plugins/condition/components/ConditionError.vue b/src/plugins/condition/components/ConditionError.vue index 318ac1e9e..280ef46c2 100644 --- a/src/plugins/condition/components/ConditionError.vue +++ b/src/plugins/condition/components/ConditionError.vue @@ -21,12 +21,14 @@ *****************************************************************************/ <template> -<div v-if="conditionErrors.length" - class="c-condition__errors" +<div + v-if="conditionErrors.length" + class="c-condition__errors" > - <div v-for="(error, index) in conditionErrors" - :key="index" - class="u-alert u-alert--block u-alert--with-icon" + <div + v-for="(error, index) in conditionErrors" + :key="index" + class="u-alert u-alert--block u-alert--with-icon" >{{ error.message.errorText }} {{ error.additionalInfo }} </div> </div> diff --git a/src/plugins/condition/components/ConditionSet.vue b/src/plugins/condition/components/ConditionSet.vue index 0762e6a8f..eb4ce2c98 100644 --- a/src/plugins/condition/components/ConditionSet.vue +++ b/src/plugins/condition/components/ConditionSet.vue @@ -36,18 +36,20 @@ </div> </section> <div class="c-cs__test-data-and-conditions-w"> - <TestData class="c-cs__test-data" - :is-editing="isEditing" - :test-data="testData" - :telemetry="telemetryObjs" - @updateTestData="updateTestData" + <TestData + class="c-cs__test-data" + :is-editing="isEditing" + :test-data="testData" + :telemetry="telemetryObjs" + @updateTestData="updateTestData" /> - <ConditionCollection class="c-cs__conditions" - :is-editing="isEditing" - :test-data="testData" - @conditionSetResultUpdated="updateCurrentOutput" - @updateDefaultOutput="updateDefaultOutput" - @telemetryUpdated="updateTelemetry" + <ConditionCollection + class="c-cs__conditions" + :is-editing="isEditing" + :test-data="testData" + @conditionSetResultUpdated="updateCurrentOutput" + @updateDefaultOutput="updateDefaultOutput" + @telemetryUpdated="updateTelemetry" /> </div> </div> diff --git a/src/plugins/condition/components/Criterion.vue b/src/plugins/condition/components/Criterion.vue index 9af5337ef..be1bde745 100644 --- a/src/plugins/condition/components/Criterion.vue +++ b/src/plugins/condition/components/Criterion.vue @@ -26,76 +26,89 @@ <span class="c-cdef__label">{{ setRowLabel }}</span> <span class="c-cdef__controls"> <span class="c-cdef__control"> - <select ref="telemetrySelect" - v-model="criterion.telemetry" - @change="updateMetadataOptions" + <select + ref="telemetrySelect" + v-model="criterion.telemetry" + @change="updateMetadataOptions" > <option value="">- Select Telemetry -</option> <option value="all">all telemetry</option> <option value="any">any telemetry</option> - <option v-for="telemetryOption in telemetry" - :key="telemetryOption.identifier.key" - :value="telemetryOption.identifier" + <option + v-for="telemetryOption in telemetry" + :key="telemetryOption.identifier.key" + :value="telemetryOption.identifier" > {{ telemetryOption.name }} </option> </select> </span> - <span v-if="criterion.telemetry" - class="c-cdef__control" + <span + v-if="criterion.telemetry" + class="c-cdef__control" > - <select ref="metadataSelect" - v-model="criterion.metadata" - @change="updateOperations" + <select + ref="metadataSelect" + v-model="criterion.metadata" + @change="updateOperations" > <option value="">- Select Field -</option> - <option v-for="option in telemetryMetadataOptions" - :key="option.key" - :value="option.key" + <option + v-for="option in telemetryMetadataOptions" + :key="option.key" + :value="option.key" > {{ option.name }} </option> <option value="dataReceived">any data received</option> </select> </span> - <span v-if="criterion.telemetry && criterion.metadata" - class="c-cdef__control" + <span + v-if="criterion.telemetry && criterion.metadata" + class="c-cdef__control" > - <select v-model="criterion.operation" - @change="updateInputVisibilityAndValues" + <select + v-model="criterion.operation" + @change="updateInputVisibilityAndValues" > <option value="">- Select Comparison -</option> - <option v-for="option in filteredOps" - :key="option.name" - :value="option.name" + <option + v-for="option in filteredOps" + :key="option.name" + :value="option.name" > {{ option.text }} </option> </select> <template v-if="!enumerations.length"> - <span v-for="(item, inputIndex) in inputCount" - :key="inputIndex" - class="c-cdef__control__inputs" + <span + v-for="(item, inputIndex) in inputCount" + :key="inputIndex" + class="c-cdef__control__inputs" > - <input v-model="criterion.input[inputIndex]" - class="c-cdef__control__input" - :type="setInputType" - @change="persist" + <input + v-model="criterion.input[inputIndex]" + class="c-cdef__control__input" + :type="setInputType" + @change="persist" > <span v-if="inputIndex < inputCount-1">and</span> </span> <span v-if="criterion.metadata === 'dataReceived'">seconds</span> </template> <span v-else> - <span v-if="inputCount && criterion.operation" - class="c-cdef__control" + <span + v-if="inputCount && criterion.operation" + class="c-cdef__control" > - <select v-model="criterion.input[0]" - @change="persist" + <select + v-model="criterion.input[0]" + @change="persist" > - <option v-for="option in enumerations" - :key="option.string" - :value="option.value.toString()" + <option + v-for="option in enumerations" + :key="option.string" + :value="option.value.toString()" > {{ option.string }} </option> diff --git a/src/plugins/condition/components/TestData.vue b/src/plugins/condition/components/TestData.vue index 99d080d08..2668ce448 100644 --- a/src/plugins/condition/components/TestData.vue +++ b/src/plugins/condition/components/TestData.vue @@ -21,9 +21,10 @@ *****************************************************************************/ <template> -<section v-show="isEditing" - id="test-data" - :class="{ 'is-expanded': expanded }" +<section + v-show="isEditing" + id="test-data" + :class="{ 'is-expanded': expanded }" > <div class="c-cs__header c-section__header"> <span @@ -33,11 +34,13 @@ ></span> <div class="c-cs__header-label c-section__label">Test Data</div> </div> - <div v-if="expanded" - class="c-cs__content" + <div + v-if="expanded" + class="c-cs__content" > - <div class="c-cs__test-data__controls c-cdef__controls" - :disabled="!telemetry.length" + <div + class="c-cs__test-data__controls c-cdef__controls" + :disabled="!telemetry.length" > <label class="c-toggle-switch"> <input @@ -50,59 +53,69 @@ </label> </div> <div class="c-cs-tests"> - <span v-for="(testInput, tIndex) in testInputs" - :key="tIndex" - class="c-test-datum c-cs-test" + <span + v-for="(testInput, tIndex) in testInputs" + :key="tIndex" + class="c-test-datum c-cs-test" > <span class="c-cs-test__label">Set</span> <span class="c-cs-test__controls"> <span class="c-cdef__control"> - <select v-model="testInput.telemetry" - @change="updateMetadata(testInput)" + <select + v-model="testInput.telemetry" + @change="updateMetadata(testInput)" > <option value="">- Select Telemetry -</option> - <option v-for="(telemetryOption, index) in telemetry" - :key="index" - :value="telemetryOption.identifier" + <option + v-for="(telemetryOption, index) in telemetry" + :key="index" + :value="telemetryOption.identifier" > {{ telemetryOption.name }} </option> </select> </span> - <span v-if="testInput.telemetry" - class="c-cdef__control" + <span + v-if="testInput.telemetry" + class="c-cdef__control" > - <select v-model="testInput.metadata" - @change="updateTestData" + <select + v-model="testInput.metadata" + @change="updateTestData" > <option value="">- Select Field -</option> - <option v-for="(option, index) in telemetryMetadataOptions[getId(testInput.telemetry)]" - :key="index" - :value="option.key" + <option + v-for="(option, index) in telemetryMetadataOptions[getId(testInput.telemetry)]" + :key="index" + :value="option.key" > {{ option.name }} </option> </select> </span> - <span v-if="testInput.metadata" - class="c-cdef__control__inputs" + <span + v-if="testInput.metadata" + class="c-cdef__control__inputs" > - <input v-model="testInput.value" - placeholder="Enter test input" - type="text" - class="c-cdef__control__input" - @change="updateTestData" + <input + v-model="testInput.value" + placeholder="Enter test input" + type="text" + class="c-cdef__control__input" + @change="updateTestData" > </span> </span> <div class="c-cs-test__buttons"> - <button class="c-click-icon c-test-data__duplicate-button icon-duplicate" - title="Duplicate this test datum" - @click="addTestInput(testInput)" + <button + class="c-click-icon c-test-data__duplicate-button icon-duplicate" + title="Duplicate this test datum" + @click="addTestInput(testInput)" ></button> - <button class="c-click-icon c-test-data__delete-button icon-trash" - title="Delete this test datum" - @click="removeTestInput(tIndex)" + <button + class="c-click-icon c-test-data__delete-button icon-trash" + title="Delete this test datum" + @click="removeTestInput(tIndex)" ></button> </div> </span> diff --git a/src/plugins/condition/components/inspector/StyleEditor.vue b/src/plugins/condition/components/inspector/StyleEditor.vue index 92e66d85e..f5a107e75 100644 --- a/src/plugins/condition/components/inspector/StyleEditor.vue +++ b/src/plugins/condition/components/inspector/StyleEditor.vue @@ -23,52 +23,60 @@ <template> <div class="c-style has-local-controls c-toolbar"> <div class="c-style__controls"> - <div :class="[ - { '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" + <div + :class="[ + { '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" > - <span class="c-style-thumb__text" - :class="{ 'hide-nice': !hasProperty(styleItem.style.color) }" + <span + class="c-style-thumb__text" + :class="{ 'hide-nice': !hasProperty(styleItem.style.color) }" > ABC </span> </div> - <toolbar-color-picker v-if="hasProperty(styleItem.style.border)" - class="c-style__toolbar-button--border-color u-menu-to--center" - :options="borderColorOption" - @change="updateStyleValue" + <toolbar-color-picker + v-if="hasProperty(styleItem.style.border)" + class="c-style__toolbar-button--border-color u-menu-to--center" + :options="borderColorOption" + @change="updateStyleValue" /> - <toolbar-color-picker v-if="hasProperty(styleItem.style.backgroundColor)" - class="c-style__toolbar-button--background-color u-menu-to--center" - :options="backgroundColorOption" - @change="updateStyleValue" + <toolbar-color-picker + v-if="hasProperty(styleItem.style.backgroundColor)" + class="c-style__toolbar-button--background-color u-menu-to--center" + :options="backgroundColorOption" + @change="updateStyleValue" /> - <toolbar-color-picker v-if="hasProperty(styleItem.style.color)" - class="c-style__toolbar-button--color u-menu-to--center" - :options="colorOption" - @change="updateStyleValue" + <toolbar-color-picker + v-if="hasProperty(styleItem.style.color)" + class="c-style__toolbar-button--color u-menu-to--center" + :options="colorOption" + @change="updateStyleValue" /> - <toolbar-button v-if="hasProperty(styleItem.style.imageUrl)" - class="c-style__toolbar-button--image-url" - :options="imageUrlOption" - @change="updateStyleValue" + <toolbar-button + v-if="hasProperty(styleItem.style.imageUrl)" + class="c-style__toolbar-button--image-url" + :options="imageUrlOption" + @change="updateStyleValue" /> - <toolbar-toggle-button v-if="hasProperty(styleItem.style.isStyleInvisible)" - class="c-style__toolbar-button--toggle-visible" - :options="isStyleInvisibleOption" - @change="updateStyleValue" + <toolbar-toggle-button + v-if="hasProperty(styleItem.style.isStyleInvisible)" + class="c-style__toolbar-button--toggle-visible" + :options="isStyleInvisibleOption" + @change="updateStyleValue" /> </div> <!-- Save Styles --> - <toolbar-button v-if="canSaveStyle" - class="c-style__toolbar-button--save c-local-controls--show-on-hover c-icon-button c-icon-button--major" - :options="saveOptions" - @click="saveItemStyle()" + <toolbar-button + v-if="canSaveStyle" + class="c-style__toolbar-button--save c-local-controls--show-on-hover c-icon-button c-icon-button--major" + :options="saveOptions" + @click="saveItemStyle()" /> </div> </template> diff --git a/src/plugins/condition/components/inspector/StylesView.vue b/src/plugins/condition/components/inspector/StylesView.vue index 9e0d8f9d4..378776d5c 100644 --- a/src/plugins/condition/components/inspector/StylesView.vue +++ b/src/plugins/condition/components/inspector/StylesView.vue @@ -22,8 +22,9 @@ <template> <div class="c-inspector__styles c-inspect-styles"> - <div v-if="isStaticAndConditionalStyles" - class="c-inspect-styles__mixed-static-and-conditional u-alert u-alert--block u-alert--with-icon" + <div + 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. </div> @@ -37,16 +38,18 @@ @set-font-property="setFontProperty" /> <div class="c-inspect-styles__content"> - <div v-if="staticStyle" - class="c-inspect-styles__style" + <div + v-if="staticStyle" + class="c-inspect-styles__style" > - <StyleEditor class="c-inspect-styles__editor" - :style-item="staticStyle" - :is-editing="allowEditing" - :mixed-styles="mixedStyles" - :non-specific-font-properties="nonSpecificFontProperties" - @persist="updateStaticStyle" - @save-style="saveStyle" + <StyleEditor + class="c-inspect-styles__editor" + :style-item="staticStyle" + :is-editing="allowEditing" + :mixed-styles="mixedStyles" + :non-specific-font-properties="nonSpecificFontProperties" + @persist="updateStaticStyle" + @save-style="saveStyle" /> </div> <button @@ -64,9 +67,10 @@ Conditional Object Styles </div> <div class="c-inspect-styles__content c-inspect-styles__condition-set c-inspect-styles__elem"> - <a v-if="conditionSetDomainObject" - class="c-object-label" - @click="navigateOrPreview" + <a + v-if="conditionSetDomainObject" + class="c-object-label" + @click="navigateOrPreview" > <span class="c-object-label__type-icon icon-conditional"></span> <span class="c-object-label__name">{{ conditionSetDomainObject.name }}</span> @@ -80,15 +84,17 @@ <span class="c-button__label">Change...</span> </button> - <button class="c-click-icon icon-x" - title="Remove conditional styles" - @click="removeConditionSet" + <button + class="c-click-icon icon-x" + title="Remove conditional styles" + @click="removeConditionSet" ></button> </template> </div> - <div v-if="isConditionWidget && allowEditing" - class="c-inspect-styles__elem c-inspect-styles__output-label-toggle" + <div + v-if="isConditionWidget && allowEditing" + class="c-inspect-styles__elem c-inspect-styles__output-label-toggle" > <label class="c-toggle-switch"> <input @@ -100,8 +106,9 @@ <span class="c-toggle-switch__label">Use Condition Set output as label</span> </label> </div> - <div v-if="isConditionWidget && !allowEditing" - class="c-inspect-styles__elem" + <div + v-if="isConditionWidget && !allowEditing" + class="c-inspect-styles__elem" > <span class="c-toggle-switch__label">Condition Set output as label: <span v-if="useConditionSetOutputAsLabel"> Yes</span><span v-else> No</span> @@ -114,27 +121,32 @@ @set-font-property="setFontProperty" /> - <div v-if="conditionsLoaded" - class="c-inspect-styles__conditions" + <div + v-if="conditionsLoaded" + class="c-inspect-styles__conditions" > - <div v-for="(conditionStyle, index) in conditionalStyles" - :key="index" - class="c-inspect-styles__condition" - :class="{'is-current': conditionStyle.conditionId === selectedConditionId}" - @click="applySelectedConditionStyle(conditionStyle.conditionId)" + <div + v-for="(conditionStyle, index) in conditionalStyles" + :key="index" + class="c-inspect-styles__condition" + :class="{'is-current': conditionStyle.conditionId === selectedConditionId}" + @click="applySelectedConditionStyle(conditionStyle.conditionId)" > - <condition-error :show-label="true" - :condition="getCondition(conditionStyle.conditionId)" + <condition-error + :show-label="true" + :condition="getCondition(conditionStyle.conditionId)" /> - <condition-description :show-label="true" - :condition="getCondition(conditionStyle.conditionId)" + <condition-description + :show-label="true" + :condition="getCondition(conditionStyle.conditionId)" /> - <StyleEditor class="c-inspect-styles__editor" - :style-item="conditionStyle" - :non-specific-font-properties="nonSpecificFontProperties" - :is-editing="allowEditing" - @persist="updateConditionalStyle" - @save-style="saveStyle" + <StyleEditor + class="c-inspect-styles__editor" + :style-item="conditionStyle" + :non-specific-font-properties="nonSpecificFontProperties" + :is-editing="allowEditing" + @persist="updateConditionalStyle" + @save-style="saveStyle" /> </div> </div> diff --git a/src/plugins/conditionWidget/components/ConditionWidget.vue b/src/plugins/conditionWidget/components/ConditionWidget.vue index 4eb39afb3..2f2ec4724 100644 --- a/src/plugins/conditionWidget/components/ConditionWidget.vue +++ b/src/plugins/conditionWidget/components/ConditionWidget.vue @@ -21,9 +21,10 @@ *****************************************************************************/ <template> -<component :is="urlDefined ? 'a' : 'span'" - class="c-condition-widget u-style-receiver js-style-receiver" - :href="url" +<component + :is="urlDefined ? 'a' : 'span'" + class="c-condition-widget u-style-receiver js-style-receiver" + :href="url" > <div class="c-condition-widget__label"> {{ internalDomainObject.conditionalLabel || internalDomainObject.label }} diff --git a/src/plugins/displayLayout/components/TelemetryView.vue b/src/plugins/displayLayout/components/TelemetryView.vue index ec645c8b9..a2ff8b3bc 100644 --- a/src/plugins/displayLayout/components/TelemetryView.vue +++ b/src/plugins/displayLayout/components/TelemetryView.vue @@ -37,8 +37,9 @@ :data-font="item.font" @contextmenu.prevent="showContextMenu" > - <div class="is-status__indicator" - :title="`This item is ${status}`" + <div + class="is-status__indicator" + :title="`This item is ${status}`" ></div> <div v-if="showLabel" diff --git a/src/plugins/folderView/components/GridItem.vue b/src/plugins/folderView/components/GridItem.vue index 47649d942..b8ffa4e87 100644 --- a/src/plugins/folderView/components/GridItem.vue +++ b/src/plugins/folderView/components/GridItem.vue @@ -26,8 +26,9 @@ </div> </div> <div class="c-grid-item__controls"> - <div class="is-status__indicator" - :title="`This item is ${status}`" + <div + class="is-status__indicator" + :title="`This item is ${status}`" ></div> <div class="icon-people" diff --git a/src/plugins/folderView/components/ListItem.vue b/src/plugins/folderView/components/ListItem.vue index c1b013090..41f47b019 100644 --- a/src/plugins/folderView/components/ListItem.vue +++ b/src/plugins/folderView/components/ListItem.vue @@ -17,8 +17,9 @@ class="c-object-label__type-icon c-list-item__name__type-icon" :class="item.type.cssClass" > - <span class="is-status__indicator" - :title="`This item is ${status}`" + <span + class="is-status__indicator" + :title="`This item is ${status}`" ></span> </div> <div class="c-object-label__name c-list-item__name__name">{{ item.model.name }}</div> diff --git a/src/plugins/hyperlink/HyperlinkLayout.vue b/src/plugins/hyperlink/HyperlinkLayout.vue index 25b7542ff..c4cdf0c6c 100644 --- a/src/plugins/hyperlink/HyperlinkLayout.vue +++ b/src/plugins/hyperlink/HyperlinkLayout.vue @@ -22,12 +22,13 @@ <template> -<a class="c-hyperlink" - :class="{ - 'c-hyperlink--button' : isButton - }" - :target="domainObject.linkTarget" - :href="url" +<a + class="c-hyperlink" + :class="{ + 'c-hyperlink--button' : isButton + }" + :target="domainObject.linkTarget" + :href="url" > <span class="c-hyperlink__label">{{ domainObject.displayText }}</span> </a> diff --git a/src/plugins/imagery/components/Compass/CompassRose.vue b/src/plugins/imagery/components/Compass/CompassRose.vue index 7cd7b5cdb..d66e382a4 100644 --- a/src/plugins/imagery/components/Compass/CompassRose.vue +++ b/src/plugins/imagery/components/Compass/CompassRose.vue @@ -21,124 +21,144 @@ *****************************************************************************/ <template> -<div ref="compassRoseWrapper" - class="w-direction-rose" - :class="compassRoseSizingClasses" - @click="toggleLockCompass" +<div + ref="compassRoseWrapper" + class="w-direction-rose" + :class="compassRoseSizingClasses" + @click="toggleLockCompass" > - <svg ref="compassRoseSvg" - class="c-compass-rose-svg" - viewBox="0 0 100 100" + <svg + ref="compassRoseSvg" + class="c-compass-rose-svg" + viewBox="0 0 100 100" > - <mask id="mask0" - mask-type="alpha" - maskUnits="userSpaceOnUse" - x="0" - y="0" - width="100" - height="100" + <mask + id="mask0" + mask-type="alpha" + maskUnits="userSpaceOnUse" + x="0" + y="0" + width="100" + height="100" > - <circle cx="50" - cy="50" - r="50" - fill="black" + <circle + cx="50" + cy="50" + r="50" + fill="black" /> </mask> <g class="c-cr__compass-wrapper"> - <g class="c-cr__compass-main" - mask="url(#mask0)" + <g + class="c-cr__compass-main" + mask="url(#mask0)" > <!-- Background and clipped elements --> - <rect class="c-cr__bg" - width="100" - height="100" - fill="black" + <rect + class="c-cr__bg" + width="100" + height="100" + fill="black" /> - <rect class="c-cr__edge" - width="100" - height="100" - fill="url(#paint0_radial)" + <rect + class="c-cr__edge" + width="100" + height="100" + fill="url(#paint0_radial)" /> - <rect v-if="hasSunHeading" - class="c-cr__sun" - width="100" - height="100" - fill="url(#paint1_radial)" - :style="sunHeadingStyle" + <rect + v-if="hasSunHeading" + class="c-cr__sun" + width="100" + height="100" + fill="url(#paint1_radial)" + :style="sunHeadingStyle" /> <!-- Camera FOV --> - <mask id="mask2" - class="c-cr__cam-fov-l-mask" - mask-type="alpha" - maskUnits="userSpaceOnUse" - x="0" - y="0" - width="50" - height="100" + <mask + id="mask2" + class="c-cr__cam-fov-l-mask" + mask-type="alpha" + maskUnits="userSpaceOnUse" + x="0" + y="0" + width="50" + height="100" > - <rect width="51" - height="100" + <rect + width="51" + height="100" /> </mask> - <mask id="mask1" - class="c-cr__cam-fov-r-mask" - mask-type="alpha" - maskUnits="userSpaceOnUse" - x="50" - y="0" - width="50" - height="100" + <mask + id="mask1" + class="c-cr__cam-fov-r-mask" + mask-type="alpha" + maskUnits="userSpaceOnUse" + x="50" + y="0" + width="50" + height="100" > - <rect x="49" - width="51" - height="100" + <rect + x="49" + width="51" + height="100" /> </mask> - <g class="c-cr__cam-fov" - :style="cameraPanStyle" + <g + class="c-cr__cam-fov" + :style="cameraPanStyle" > <g mask="url(#mask2)"> - <rect class="c-cr__cam-fov-r" - x="49" - width="51" - height="100" - :style="cameraFOVStyleRightHalf" + <rect + class="c-cr__cam-fov-r" + x="49" + width="51" + height="100" + :style="cameraFOVStyleRightHalf" /> </g> <g mask="url(#mask1)"> - <rect class="c-cr__cam-fov-l" - width="51" - height="100" - :style="cameraFOVStyleLeftHalf" + <rect + class="c-cr__cam-fov-l" + width="51" + height="100" + :style="cameraFOVStyleLeftHalf" /> </g> </g> </g> <!-- Spacecraft body --> - <path v-if="hasHeading" - class="c-cr__spacecraft-body" - fill-rule="evenodd" - clip-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" - :style="headingStyle" + <path + v-if="hasHeading" + class="c-cr__spacecraft-body" + fill-rule="evenodd" + clip-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" + :style="headingStyle" /> <!-- NSEW and ticks --> - <g class="c-cr__nsew" - :style="compassRoseStyle" + <g + class="c-cr__nsew" + :style="compassRoseStyle" > <g class="c-cr__ticks-major"> <path d="M50 3L43 10H57L50 3Z" /> - <path d="M4 51V49H10V51H4Z" - class="--hide-min" + <path + d="M4 51V49H10V51H4Z" + class="--hide-min" /> - <path d="M49 96V90H51V96H49Z" - class="--hide-min" + <path + d="M49 96V90H51V96H49Z" + class="--hide-min" /> - <path d="M90 49V51H96V49H90Z" - class="--hide-min" + <path + d="M90 49V51H96V49H90Z" + class="--hide-min" /> </g> <g class="c-cr__ticks-minor --hide-small"> @@ -148,53 +168,63 @@ <path d="M51 10L49 10V4L51 4V10Z" /> </g> <g class="c-cr__nsew-text"> - <path :style="cardinalTextRotateW" - 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="cardinalTextRotateW" + 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" - class="c-cr__nsew-e --hide-small" - d="M46.104 55H54.21V52.76H48.708V50.856H53.608V48.84H48.708V47.09H54.07V45.004H46.104V55Z" + <path + :style="cardinalTextRotateE" + 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" - 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="cardinalTextRotateS" + 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" - class="c-cr__nsew-n" - d="M42.5935 60H46.7935V49.32H46.8415L52.7935 60H57.3775V42.864H53.1775V53.424H53.1295L47.1775 42.864H42.5935V60Z" + <path + :style="cardinalTextRotateN" + 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> <defs> - <radialGradient id="paint0_radial" - cx="0" - cy="0" - r="1" - gradientUnits="userSpaceOnUse" - gradientTransform="translate(50 50) rotate(90) scale(50)" + <radialGradient + id="paint0_radial" + cx="0" + cy="0" + r="1" + gradientUnits="userSpaceOnUse" + gradientTransform="translate(50 50) rotate(90) scale(50)" > - <stop offset="0.751387" - stop-opacity="0" + <stop + offset="0.751387" + stop-opacity="0" /> - <stop offset="1" - stop-color="white" + <stop + offset="1" + stop-color="white" /> </radialGradient> - <radialGradient id="paint1_radial" - cx="0" - cy="0" - r="1" - gradientUnits="userSpaceOnUse" - gradientTransform="translate(50 -7) rotate(-90) scale(18.5)" + <radialGradient + id="paint1_radial" + cx="0" + cy="0" + r="1" + gradientUnits="userSpaceOnUse" + gradientTransform="translate(50 -7) rotate(-90) scale(18.5)" > - <stop offset="0.716377" - stop-color="#FFCC00" + <stop + offset="0.716377" + stop-color="#FFCC00" /> - <stop offset="1" - stop-color="#FF9900" - stop-opacity="0" + <stop + offset="1" + stop-color="#FF9900" + stop-opacity="0" /> </radialGradient> </defs> diff --git a/src/plugins/imagery/components/ImageryTimeView.vue b/src/plugins/imagery/components/ImageryTimeView.vue index 137924b15..ccaf7b71b 100644 --- a/src/plugins/imagery/components/ImageryTimeView.vue +++ b/src/plugins/imagery/components/ImageryTimeView.vue @@ -21,11 +21,13 @@ --> <template> -<div ref="imagery" - class="c-imagery-tsv c-timeline-holder" +<div + ref="imagery" + class="c-imagery-tsv c-timeline-holder" > - <div ref="imageryHolder" - class="c-imagery-tsv__contents u-contents" + <div + ref="imageryHolder" + class="c-imagery-tsv__contents u-contents" > </div> </div> diff --git a/src/plugins/imagery/components/ImageryView.vue b/src/plugins/imagery/components/ImageryView.vue index f15ed9546..ff71b8f3c 100644 --- a/src/plugins/imagery/components/ImageryView.vue +++ b/src/plugins/imagery/components/ImageryView.vue @@ -30,50 +30,57 @@ > <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"> - <span class="c-image-controls__sliders" - draggable="true" - @dragstart="startDrag" + <span + class="c-image-controls__sliders" + draggable="true" + @dragstart="startDrag" > <div class="c-image-controls__slider-wrapper icon-brightness"> - <input v-model="filters.brightness" - type="range" - min="0" - max="500" + <input + v-model="filters.brightness" + type="range" + min="0" + max="500" > </div> <div class="c-image-controls__slider-wrapper icon-contrast"> - <input v-model="filters.contrast" - type="range" - min="0" - max="500" + <input + v-model="filters.contrast" + type="range" + min="0" + max="500" > </div> </span> <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" - @click="filters={brightness: 100, contrast: 100}" + <a + class="s-icon-button icon-reset t-btn-reset" + @click="filters={brightness: 100, contrast: 100}" ></a> </span> </div> - <div ref="imageBG" - class="c-imagery__main-image__bg" - :class="{'paused unnsynced': isPaused && !isFixed,'stale':false }" - @click="expand" + <div + ref="imageBG" + class="c-imagery__main-image__bg" + :class="{'paused unnsynced': isPaused && !isFixed,'stale':false }" + @click="expand" > - <div class="image-wrapper" - :style="{ - 'width': `${sizedImageDimensions.width}px`, - 'height': `${sizedImageDimensions.height}px` - }" + <div + class="image-wrapper" + :style="{ + 'width': `${sizedImageDimensions.width}px`, + 'height': `${sizedImageDimensions.height}px` + }" > - <img ref="focusedImage" - class="c-imagery__main-image__image js-imageryView-image" - :src="imageUrl" - :style="{ - 'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)` - }" - :data-openmct-image-timestamp="time" - :data-openmct-object-keystring="keyString" + <img + ref="focusedImage" + class="c-imagery__main-image__image js-imageryView-image" + :src="imageUrl" + :style="{ + 'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)` + }" + :data-openmct-image-timestamp="time" + :data-openmct-object-keystring="keyString" > <Compass v-if="shouldDisplayCompass" @@ -85,16 +92,18 @@ </div> </div> - <button class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--prev" - title="Previous image" - :disabled="isPrevDisabled" - @click="prevImage()" + <button + class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--prev" + title="Previous image" + :disabled="isPrevDisabled" + @click="prevImage()" ></button> - <button class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--next" - title="Next image" - :disabled="isNextDisabled" - @click="nextImage()" + <button + class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-button c-nav c-nav--next" + title="Next image" + :disabled="isNextDisabled" + @click="nextImage()" ></button> <div class="c-imagery__control-bar"> @@ -130,29 +139,33 @@ </div> </div> </div> - <div class="c-imagery__thumbs-wrapper" - :class="[ - { 'is-paused': isPaused && !isFixed }, - { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused } - ]" + <div + class="c-imagery__thumbs-wrapper" + :class="[ + { 'is-paused': isPaused && !isFixed }, + { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused } + ]" > <div ref="thumbsWrapper" class="c-imagery__thumbs-scroll-area" @scroll="handleScroll" > - <div v-for="(image, index) in imageHistory" - :key="image.url + image.time" - class="c-imagery__thumb c-thumb" - :class="{ selected: focusedImageIndex === index && isPaused }" - @click="setFocusedImage(index, thumbnailClick)" + <div + v-for="(image, index) in imageHistory" + :key="image.url + image.time" + class="c-imagery__thumb c-thumb" + :class="{ selected: focusedImageIndex === index && isPaused }" + @click="setFocusedImage(index, thumbnailClick)" > - <a href="" - :download="image.imageDownloadName" - @click.prevent + <a + href="" + :download="image.imageDownloadName" + @click.prevent > - <img class="c-thumb__image" - :src="image.url" + <img + class="c-thumb__image" + :src="image.url" > </a> <div class="c-thumb__timestamp">{{ image.formattedTime }}</div> diff --git a/src/plugins/notebook/components/Notebook.vue b/src/plugins/notebook/components/Notebook.vue index 07925be42..ff329cb75 100644 --- a/src/plugins/notebook/components/Notebook.vue +++ b/src/plugins/notebook/components/Notebook.vue @@ -23,46 +23,51 @@ <template> <div class="c-notebook"> <div class="c-notebook__head"> - <Search class="c-notebook__search" - :value="search" - @input="search = $event" - @clear="resetSearch()" + <Search + class="c-notebook__search" + :value="search" + @input="search = $event" + @clear="resetSearch()" /> </div> - <SearchResults v-if="search.length" - ref="searchResults" - :domain-object="domainObject" - :results="searchResults" - @changeSectionPage="changeSelectedSection" - @updateEntries="updateEntries" + <SearchResults + v-if="search.length" + ref="searchResults" + :domain-object="domainObject" + :results="searchResults" + @changeSectionPage="changeSelectedSection" + @updateEntries="updateEntries" /> - <div v-if="!search.length" - class="c-notebook__body" + <div + v-if="!search.length" + class="c-notebook__body" > - <Sidebar ref="sidebar" - class="c-notebook__nav c-sidebar c-drawer c-drawer--align-left" - :class="[{'is-expanded': showNav}, {'c-drawer--push': !sidebarCoversEntries}, {'c-drawer--overlays': sidebarCoversEntries}]" - :default-page-id="defaultPageId" - :selected-page-id="getSelectedPageId()" - :default-section-id="defaultSectionId" - :selected-section-id="getSelectedSectionId()" - :domain-object="domainObject" - :page-title="domainObject.configuration.pageTitle" - :section-title="domainObject.configuration.sectionTitle" - :sections="sections" - :sidebar-covers-entries="sidebarCoversEntries" - @defaultPageDeleted="cleanupDefaultNotebook" - @defaultSectionDeleted="cleanupDefaultNotebook" - @pagesChanged="pagesChanged" - @selectPage="selectPage" - @sectionsChanged="sectionsChanged" - @selectSection="selectSection" - @toggleNav="toggleNav" + <Sidebar + ref="sidebar" + class="c-notebook__nav c-sidebar c-drawer c-drawer--align-left" + :class="[{'is-expanded': showNav}, {'c-drawer--push': !sidebarCoversEntries}, {'c-drawer--overlays': sidebarCoversEntries}]" + :default-page-id="defaultPageId" + :selected-page-id="getSelectedPageId()" + :default-section-id="defaultSectionId" + :selected-section-id="getSelectedSectionId()" + :domain-object="domainObject" + :page-title="domainObject.configuration.pageTitle" + :section-title="domainObject.configuration.sectionTitle" + :sections="sections" + :sidebar-covers-entries="sidebarCoversEntries" + @defaultPageDeleted="cleanupDefaultNotebook" + @defaultSectionDeleted="cleanupDefaultNotebook" + @pagesChanged="pagesChanged" + @selectPage="selectPage" + @sectionsChanged="sectionsChanged" + @selectSection="selectSection" + @toggleNav="toggleNav" /> <div class="c-notebook__page-view"> <div class="c-notebook__page-view__header"> - <button class="c-notebook__toggle-nav-button c-icon-button c-icon-button--major icon-menu-hamburger" - @click="toggleNav" + <button + class="c-notebook__toggle-nav-button c-icon-button c-icon-button--major icon-menu-hamburger" + @click="toggleNav" ></button> <div class="c-notebook__page-view__path c-path"> <span class="c-notebook__path__section c-path__item"> @@ -73,59 +78,70 @@ </span> </div> <div class="c-notebook__page-view__controls"> - <select v-model="showTime" - class="c-notebook__controls__time" + <select + v-model="showTime" + class="c-notebook__controls__time" > - <option value="0" - :selected="showTime === 0" + <option + value="0" + :selected="showTime === 0" > Show all </option> - <option value="1" - :selected="showTime === 1" + <option + value="1" + :selected="showTime === 1" >Last hour</option> - <option value="8" - :selected="showTime === 8" + <option + value="8" + :selected="showTime === 8" >Last 8 hours</option> - <option value="24" - :selected="showTime === 24" + <option + value="24" + :selected="showTime === 24" >Last 24 hours</option> </select> - <select v-model="defaultSort" - class="c-notebook__controls__time" + <select + v-model="defaultSort" + class="c-notebook__controls__time" > - <option value="newest" - :selected="defaultSort === 'newest'" + <option + value="newest" + :selected="defaultSort === 'newest'" >Newest first</option> - <option value="oldest" - :selected="defaultSort === 'oldest'" + <option + value="oldest" + :selected="defaultSort === 'oldest'" >Oldest first</option> </select> </div> </div> - <div class="c-notebook__drag-area icon-plus" - @click="newEntry()" - @dragover="dragOver" - @drop.capture="dropCapture" - @drop="dropOnEntry($event)" + <div + class="c-notebook__drag-area icon-plus" + @click="newEntry()" + @dragover="dragOver" + @drop.capture="dropCapture" + @drop="dropOnEntry($event)" > <span class="c-notebook__drag-area__label"> To start a new entry, click here or drag and drop any object </span> </div> - <div v-if="selectedSection && selectedPage" - ref="notebookEntries" - class="c-notebook__entries" + <div + v-if="selectedSection && selectedPage" + ref="notebookEntries" + class="c-notebook__entries" > - <NotebookEntry v-for="entry in filteredAndSortedEntries" - :key="entry.id" - :entry="entry" - :domain-object="domainObject" - :selected-page="selectedPage" - :selected-section="selectedSection" - :read-only="false" - @deleteEntry="deleteEntry" - @updateEntry="updateEntry" + <NotebookEntry + v-for="entry in filteredAndSortedEntries" + :key="entry.id" + :entry="entry" + :domain-object="domainObject" + :selected-page="selectedPage" + :selected-section="selectedSection" + :read-only="false" + @deleteEntry="deleteEntry" + @updateEntry="updateEntry" /> </div> </div> diff --git a/src/plugins/notebook/components/NotebookEmbed.vue b/src/plugins/notebook/components/NotebookEmbed.vue index 81bdef31d..2fdd4d7de 100644 --- a/src/plugins/notebook/components/NotebookEmbed.vue +++ b/src/plugins/notebook/components/NotebookEmbed.vue @@ -1,21 +1,24 @@ <template> <div class="c-snapshot c-ne__embed"> - <div v-if="embed.snapshot" - class="c-ne__embed__snap-thumb" - @click="openSnapshot()" + <div + v-if="embed.snapshot" + class="c-ne__embed__snap-thumb" + @click="openSnapshot()" > <img :src="thumbnailImage"> </div> <div class="c-ne__embed__info"> <div class="c-ne__embed__name"> - <a class="c-ne__embed__link" - :class="embed.cssClass" - @click="changeLocation" + <a + class="c-ne__embed__link" + :class="embed.cssClass" + @click="changeLocation" >{{ embed.name }}</a> <PopupMenu :popup-menu-items="popupMenuItems" /> </div> - <div v-if="embed.snapshot" - class="c-ne__embed__time" + <div + v-if="embed.snapshot" + class="c-ne__embed__time" > {{ createdOn }} </div> diff --git a/src/plugins/notebook/components/NotebookEntry.vue b/src/plugins/notebook/components/NotebookEntry.vue index 3f734cf9a..112f80e5c 100644 --- a/src/plugins/notebook/components/NotebookEntry.vue +++ b/src/plugins/notebook/components/NotebookEntry.vue @@ -21,10 +21,11 @@ *****************************************************************************/ <template> -<div class="c-notebook__entry c-ne has-local-controls" - @dragover="changeCursor" - @drop.capture="cancelEditMode" - @drop.prevent="dropOnEntry" +<div + class="c-notebook__entry c-ne has-local-controls" + @dragover="changeCursor" + @drop.capture="cancelEditMode" + @drop.prevent="dropOnEntry" > <div class="c-ne__time-and-content"> <div class="c-ne__time"> @@ -62,27 +63,31 @@ </div> </template> <div class="c-snapshots c-ne__embeds"> - <NotebookEmbed v-for="embed in entry.embeds" - :key="embed.id" - :embed="embed" - @removeEmbed="removeEmbed" - @updateEmbed="updateEmbed" + <NotebookEmbed + v-for="embed in entry.embeds" + :key="embed.id" + :embed="embed" + @removeEmbed="removeEmbed" + @updateEmbed="updateEmbed" /> </div> </div> </div> - <div v-if="!readOnly" - class="c-ne__local-controls--hidden" + <div + v-if="!readOnly" + class="c-ne__local-controls--hidden" > - <button class="c-icon-button c-icon-button--major icon-trash" - title="Delete this entry" - tabindex="-1" - @click="deleteEntry" + <button + class="c-icon-button c-icon-button--major icon-trash" + title="Delete this entry" + tabindex="-1" + @click="deleteEntry" > </button> </div> - <div v-if="readOnly" - class="c-ne__section-and-page" + <div + v-if="readOnly" + class="c-ne__section-and-page" > <a class="c-click-link" diff --git a/src/plugins/notebook/components/NotebookSnapshotContainer.vue b/src/plugins/notebook/components/NotebookSnapshotContainer.vue index 96fd506ca..9f35801ce 100644 --- a/src/plugins/notebook/components/NotebookSnapshotContainer.vue +++ b/src/plugins/notebook/components/NotebookSnapshotContainer.vue @@ -8,39 +8,45 @@ <div class="c-object-label__name"> Notebook Snapshots </div> - <div v-if="snapshots.length" - class="l-browse-bar__object-details" + <div + v-if="snapshots.length" + class="l-browse-bar__object-details" >{{ snapshots.length }} of {{ getNotebookSnapshotMaxCount() }} </div> </div> - <PopupMenu v-if="snapshots.length > 0" - :popup-menu-items="popupMenuItems" + <PopupMenu + v-if="snapshots.length > 0" + :popup-menu-items="popupMenuItems" /> </div> </div> <div class="l-browse-bar__end"> - <button class="c-click-icon c-click-icon--major icon-x" - @click="close" + <button + class="c-click-icon c-click-icon--major icon-x" + @click="close" ></button> </div> </div><!-- closes l-browse-bar --> <div class="c-snapshots"> - <span v-for="snapshot in snapshots" - :key="snapshot.embedObject.id" - draggable="true" - @dragstart="startEmbedDrag(snapshot, $event)" + <span + v-for="snapshot in snapshots" + :key="snapshot.embedObject.id" + draggable="true" + @dragstart="startEmbedDrag(snapshot, $event)" > - <NotebookEmbed ref="notebookEmbed" - :key="snapshot.embedObject.id" - :embed="snapshot.embedObject" - :is-snapshot-container="true" - :remove-action-string="'Delete Snapshot'" - @removeEmbed="removeSnapshot" + <NotebookEmbed + ref="notebookEmbed" + :key="snapshot.embedObject.id" + :embed="snapshot.embedObject" + :is-snapshot-container="true" + :remove-action-string="'Delete Snapshot'" + @removeEmbed="removeSnapshot" /> </span> - <div v-if="!snapshots.length > 0" - class="hint" + <div + v-if="!snapshots.length > 0" + class="hint" > There are no Notebook Snapshots currently. </div> diff --git a/src/plugins/notebook/components/NotebookSnapshotIndicator.vue b/src/plugins/notebook/components/NotebookSnapshotIndicator.vue index ee07777ac..2dc164b31 100644 --- a/src/plugins/notebook/components/NotebookSnapshotIndicator.vue +++ b/src/plugins/notebook/components/NotebookSnapshotIndicator.vue @@ -1,11 +1,12 @@ <template> -<div class="c-indicator c-indicator--clickable icon-camera" - :class="[ - { 's-status-off': snapshotCount === 0 }, - { 's-status-on': snapshotCount > 0 }, - { 's-status-caution': snapshotCount === snapshotMaxCount }, - { 'has-new-snapshot': flashIndicator } - ]" +<div + class="c-indicator c-indicator--clickable icon-camera" + :class="[ + { 's-status-off': snapshotCount === 0 }, + { 's-status-on': snapshotCount > 0 }, + { 's-status-caution': snapshotCount === snapshotMaxCount }, + { 'has-new-snapshot': flashIndicator } + ]" > <span class="label c-indicator__label"> {{ indicatorTitle }} diff --git a/src/plugins/notebook/components/PageCollection.vue b/src/plugins/notebook/components/PageCollection.vue index 4e4a5d78f..15de8ffb8 100644 --- a/src/plugins/notebook/components/PageCollection.vue +++ b/src/plugins/notebook/components/PageCollection.vue @@ -1,17 +1,19 @@ <template> <ul class="c-list"> - <li v-for="page in pages" + <li + v-for="page in pages" :key="page.id" class="c-list__item-h" > - <Page ref="pageComponent" - :default-page-id="defaultPageId" - :selected-page-id="selectedPageId" - :page="page" - :page-title="pageTitle" - @deletePage="deletePage" - @renamePage="updatePage" - @selectPage="selectPage" + <Page + ref="pageComponent" + :default-page-id="defaultPageId" + :selected-page-id="selectedPageId" + :page="page" + :page-title="pageTitle" + @deletePage="deletePage" + @renamePage="updatePage" + @selectPage="selectPage" /> </li> </ul> diff --git a/src/plugins/notebook/components/PageComponent.vue b/src/plugins/notebook/components/PageComponent.vue index ed87bc2eb..3f59fd454 100644 --- a/src/plugins/notebook/components/PageComponent.vue +++ b/src/plugins/notebook/components/PageComponent.vue @@ -1,13 +1,15 @@ <template> -<div class="c-list__item js-list__item" - :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultPageId === page.id) }]" - :data-id="page.id" - @click="selectPage" +<div + class="c-list__item js-list__item" + :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultPageId === page.id) }]" + :data-id="page.id" + @click="selectPage" > - <span class="c-list__item__name js-list__item__name" - :data-id="page.id" - @keydown.enter="updateName" - @blur="updateName" + <span + class="c-list__item__name js-list__item__name" + :data-id="page.id" + @keydown.enter="updateName" + @blur="updateName" >{{ page.name.length ? page.name : `Unnamed ${pageTitle}` }}</span> <PopupMenu :popup-menu-items="popupMenuItems" /> </div> diff --git a/src/plugins/notebook/components/SearchResults.vue b/src/plugins/notebook/components/SearchResults.vue index 929184a27..e3f490981 100644 --- a/src/plugins/notebook/components/SearchResults.vue +++ b/src/plugins/notebook/components/SearchResults.vue @@ -24,16 +24,17 @@ <div class="c-notebook__search-results"> <div class="c-notebook__search-results__header">Search Results ({{ results.length }})</div> <div class="c-notebook__entries"> - <NotebookEntry v-for="(result, index) in results" - :key="index" - :domain-object="domainObject" - :result="result" - :entry="result.entry" - :read-only="true" - :selected-page="result.page" - :selected-section="result.section" - @changeSectionPage="changeSectionPage" - @updateEntries="updateEntries" + <NotebookEntry + v-for="(result, index) in results" + :key="index" + :domain-object="domainObject" + :result="result" + :entry="result.entry" + :read-only="true" + :selected-page="result.page" + :selected-section="result.section" + @changeSectionPage="changeSectionPage" + @updateEntries="updateEntries" /> </div> </div> diff --git a/src/plugins/notebook/components/SectionCollection.vue b/src/plugins/notebook/components/SectionCollection.vue index 860cd5698..c5adf2082 100644 --- a/src/plugins/notebook/components/SectionCollection.vue +++ b/src/plugins/notebook/components/SectionCollection.vue @@ -1,17 +1,19 @@ <template> <ul class="c-list"> - <li v-for="section in sections" + <li + v-for="section in sections" :key="section.id" class="c-list__item-h" > - <NotebookSection ref="sectionComponent" - :default-section-id="defaultSectionId" - :selected-section-id="selectedSectionId" - :section="section" - :section-title="sectionTitle" - @deleteSection="deleteSection" - @renameSection="updateSection" - @selectSection="selectSection" + <NotebookSection + ref="sectionComponent" + :default-section-id="defaultSectionId" + :selected-section-id="selectedSectionId" + :section="section" + :section-title="sectionTitle" + @deleteSection="deleteSection" + @renameSection="updateSection" + @selectSection="selectSection" /> </li> </ul> diff --git a/src/plugins/notebook/components/SectionComponent.vue b/src/plugins/notebook/components/SectionComponent.vue index d3d317aa8..a5392eeb9 100644 --- a/src/plugins/notebook/components/SectionComponent.vue +++ b/src/plugins/notebook/components/SectionComponent.vue @@ -1,13 +1,15 @@ <template> -<div class="c-list__item js-list__item" - :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultSectionId === section.id) }]" - :data-id="section.id" - @click="selectSection" +<div + class="c-list__item js-list__item" + :class="[{ 'is-selected': isSelected, 'is-notebook-default' : (defaultSectionId === section.id) }]" + :data-id="section.id" + @click="selectSection" > - <span class="c-list__item__name js-list__item__name" - :data-id="section.id" - @keydown.enter="updateName" - @blur="updateName" + <span + class="c-list__item__name js-list__item__name" + :data-id="section.id" + @keydown.enter="updateName" + @blur="updateName" >{{ section.name.length ? section.name : `Unnamed ${sectionTitle}` }}</span> <PopupMenu :popup-menu-items="popupMenuItems" /> </div> diff --git a/src/plugins/notebook/components/Sidebar.vue b/src/plugins/notebook/components/Sidebar.vue index 26709dc53..f34c47979 100644 --- a/src/plugins/notebook/components/Sidebar.vue +++ b/src/plugins/notebook/components/Sidebar.vue @@ -7,21 +7,23 @@ </div> </div> <div class="c-sidebar__contents-and-controls"> - <button class="c-list-button" - @click="addSection" + <button + class="c-list-button" + @click="addSection" > <span class="c-button c-list-button__button icon-plus"></span> <span class="c-list-button__label">Add {{ sectionTitle }}</span> </button> - <SectionCollection class="c-sidebar__contents" - :default-section-id="defaultSectionId" - :selected-section-id="selectedSectionId" - :domain-object="domainObject" - :sections="sections" - :section-title="sectionTitle" - @defaultSectionDeleted="defaultSectionDeleted" - @updateSection="sectionsChanged" - @selectSection="selectSection" + <SectionCollection + class="c-sidebar__contents" + :default-section-id="defaultSectionId" + :selected-section-id="selectedSectionId" + :domain-object="domainObject" + :sections="sections" + :section-title="sectionTitle" + @defaultSectionDeleted="defaultSectionDeleted" + @updateSection="sectionsChanged" + @selectSection="selectSection" /> </div> </div> @@ -30,31 +32,34 @@ <div class="c-sidebar__header"> <span class="c-sidebar__header-label">{{ pageTitle }}</span> </div> - <button class="c-click-icon c-click-icon--major icon-x-in-circle" - @click="toggleNav" + <button + class="c-click-icon c-click-icon--major icon-x-in-circle" + @click="toggleNav" ></button> </div> <div class="c-sidebar__contents-and-controls"> - <button class="c-list-button" - @click="addPage" + <button + class="c-list-button" + @click="addPage" > <span class="c-button c-list-button__button icon-plus"></span> <span class="c-list-button__label">Add {{ pageTitle }}</span> </button> - <PageCollection ref="pageCollection" - class="c-sidebar__contents" - :default-page-id="defaultPageId" - :selected-page-id="selectedPageId" - :domain-object="domainObject" - :pages="pages" - :sections="sections" - :sidebar-covers-entries="sidebarCoversEntries" - :page-title="pageTitle" - @defaultPageDeleted="defaultPageDeleted" - @toggleNav="toggleNav" - @updatePage="pagesChanged" - @selectPage="selectPage" + <PageCollection + ref="pageCollection" + class="c-sidebar__contents" + :default-page-id="defaultPageId" + :selected-page-id="selectedPageId" + :domain-object="domainObject" + :pages="pages" + :sections="sections" + :sidebar-covers-entries="sidebarCoversEntries" + :page-title="pageTitle" + @defaultPageDeleted="defaultPageDeleted" + @toggleNav="toggleNav" + @updatePage="pagesChanged" + @selectPage="selectPage" /> </div> </div> diff --git a/src/plugins/plan/Plan.vue b/src/plugins/plan/Plan.vue index 5b080bd57..1f34e97a6 100644 --- a/src/plugins/plan/Plan.vue +++ b/src/plugins/plan/Plan.vue @@ -21,8 +21,9 @@ --> <template> -<div ref="plan" - class="c-plan c-timeline-holder" +<div + ref="plan" + class="c-plan c-timeline-holder" > <template v-if="viewBounds && !options.compact"> <swim-lane> @@ -36,8 +37,9 @@ /> </swim-lane> </template> - <div ref="planHolder" - class="c-plan__contents u-contents" + <div + ref="planHolder" + class="c-plan__contents u-contents" > </div> </div> diff --git a/src/plugins/plan/inspector/PlanActivitiesView.vue b/src/plugins/plan/inspector/PlanActivitiesView.vue index 1517e2125..be737379a 100644 --- a/src/plugins/plan/inspector/PlanActivitiesView.vue +++ b/src/plugins/plan/inspector/PlanActivitiesView.vue @@ -21,10 +21,11 @@ --> <template> <div class="c-inspector__properties c-inspect-properties"> - <plan-activity-view v-for="activity in activities" - :key="activity.id" - :activity="activity" - :heading="heading" + <plan-activity-view + v-for="activity in activities" + :key="activity.id" + :activity="activity" + :heading="heading" /> </div> </template> diff --git a/src/plugins/plan/inspector/PlanActivityView.vue b/src/plugins/plan/inspector/PlanActivityView.vue index 2ea216365..ef8792d65 100644 --- a/src/plugins/plan/inspector/PlanActivityView.vue +++ b/src/plugins/plan/inspector/PlanActivityView.vue @@ -21,18 +21,21 @@ --> <template> -<div v-if="timeProperties.length" - class="u-contents" +<div + v-if="timeProperties.length" + class="u-contents" > <div class="c-inspect-properties__header"> {{ heading }} </div> - <ul v-for="timeProperty in timeProperties" + <ul + v-for="timeProperty in timeProperties" :key="timeProperty.id" class="c-inspect-properties__section" > - <activity-property :label="timeProperty.label" - :value="timeProperty.value" + <activity-property + :label="timeProperty.label" + :value="timeProperty.value" /> </ul> </div> diff --git a/src/plugins/plot/MctPlot.vue b/src/plugins/plot/MctPlot.vue index fabf19084..98affcb2b 100644 --- a/src/plugins/plot/MctPlot.vue +++ b/src/plugins/plot/MctPlot.vue @@ -20,132 +20,155 @@ at runtime from the About dialog for additional information. --> <template> -<div v-if="loaded" - class="gl-plot" - :class="[plotLegendExpandedStateClass, plotLegendPositionClass]" +<div + v-if="loaded" + class="gl-plot" + :class="[plotLegendExpandedStateClass, plotLegendPositionClass]" > - <plot-legend :cursor-locked="!!lockHighlightPoint" - :series="seriesModels" - :highlights="highlights" - :legend="legend" - @legendHoverChanged="legendHoverChanged" + <plot-legend + :cursor-locked="!!lockHighlightPoint" + :series="seriesModels" + :highlights="highlights" + :legend="legend" + @legendHoverChanged="legendHoverChanged" /> <div class="plot-wrapper-axis-and-display-area flex-elem grows"> - <y-axis v-if="seriesModels.length > 0" - :tick-width="tickWidth" - :single-series="seriesModels.length === 1" - :series-model="seriesModels[0]" - :style="{ - left: (plotWidth - tickWidth) + 'px' - }" - @yKeyChanged="setYAxisKey" - @tickWidthChanged="onTickWidthChange" + <y-axis + v-if="seriesModels.length > 0" + :tick-width="tickWidth" + :single-series="seriesModels.length === 1" + :series-model="seriesModels[0]" + :style="{ + left: (plotWidth - tickWidth) + 'px' + }" + @yKeyChanged="setYAxisKey" + @tickWidthChanged="onTickWidthChange" /> - <div class="gl-plot-wrapper-display-area-and-x-axis" - :style="{ - left: (plotWidth + 20) + 'px' - }" + <div + class="gl-plot-wrapper-display-area-and-x-axis" + :style="{ + left: (plotWidth + 20) + 'px' + }" > <div class="gl-plot-display-area has-local-controls has-cursor-guides"> <div class="l-state-indicators"> - <span 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 + 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> </div> - <mct-ticks v-show="gridLines && !options.compact" - :axis-type="'xAxis'" - :position="'right'" - @plotTickWidth="onTickWidthChange" + <mct-ticks + v-show="gridLines && !options.compact" + :axis-type="'xAxis'" + :position="'right'" + @plotTickWidth="onTickWidthChange" /> - <mct-ticks v-show="gridLines" - :axis-type="'yAxis'" - :position="'bottom'" - @plotTickWidth="onTickWidthChange" + <mct-ticks + v-show="gridLines" + :axis-type="'yAxis'" + :position="'bottom'" + @plotTickWidth="onTickWidthChange" /> - <div ref="chartContainer" - class="gl-plot-chart-wrapper" + <div + ref="chartContainer" + class="gl-plot-chart-wrapper" > - <mct-chart :rectangles="rectangles" - :highlights="highlights" - :show-limit-line-labels="showLimitLineLabels" - @plotReinitializeCanvas="initCanvas" + <mct-chart + :rectangles="rectangles" + :highlights="highlights" + :show-limit-line-labels="showLimitLineLabels" + @plotReinitializeCanvas="initCanvas" /> </div> <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" - class="c-button-set c-button-set--strip-h js-zoom" + <div + v-if="!options.compact" + class="c-button-set c-button-set--strip-h js-zoom" > - <button class="c-button icon-minus" - title="Zoom out" - @click="zoom('out', 0.2)" + <button + class="c-button icon-minus" + title="Zoom out" + @click="zoom('out', 0.2)" > </button> - <button class="c-button icon-plus" - title="Zoom in" - @click="zoom('in', 0.2)" + <button + class="c-button icon-plus" + title="Zoom in" + @click="zoom('in', 0.2)" > </button> </div> - <div v-if="plotHistory.length && !options.compact" - class="c-button-set c-button-set--strip-h js-pan" + <div + v-if="plotHistory.length && !options.compact" + class="c-button-set c-button-set--strip-h js-pan" > - <button class="c-button icon-arrow-left" - title="Restore previous pan/zoom" - @click="back()" + <button + class="c-button icon-arrow-left" + title="Restore previous pan/zoom" + @click="back()" > </button> - <button class="c-button icon-reset" - title="Reset pan/zoom" - @click="clear()" + <button + class="c-button icon-reset" + title="Reset pan/zoom" + @click="clear()" > </button> </div> - <div v-if="isRealTime && !options.compact" - class="c-button-set c-button-set--strip-h js-pause" + <div + v-if="isRealTime && !options.compact" + class="c-button-set c-button-set--strip-h js-pause" > - <button v-if="!isFrozen" - class="c-button icon-pause" - title="Pause incoming real-time data" - @click="pause()" + <button + v-if="!isFrozen" + class="c-button icon-pause" + title="Pause incoming real-time data" + @click="pause()" > </button> - <button v-if="isFrozen" - class="c-button icon-arrow-right pause-play is-paused" - title="Resume displaying real-time data" - @click="play()" + <button + v-if="isFrozen" + class="c-button icon-arrow-right pause-play is-paused" + title="Resume displaying real-time data" + @click="play()" > </button> </div> - <div v-if="isTimeOutOfSync || isFrozen" - class="c-button-set c-button-set--strip-h" + <div + v-if="isTimeOutOfSync || isFrozen" + class="c-button-set c-button-set--strip-h" > - <button class="c-button icon-clock" - title="Synchronize Time Conductor" - @click="showSynchronizeDialog()" + <button + class="c-button icon-clock" + title="Synchronize Time Conductor" + @click="showSynchronizeDialog()" > </button> </div> </div> <!--Cursor guides--> - <div v-show="cursorGuide" - ref="cursorGuideVertical" - class="c-cursor-guide--v js-cursor-guide--v" + <div + v-show="cursorGuide" + ref="cursorGuideVertical" + class="c-cursor-guide--v js-cursor-guide--v" > </div> - <div v-show="cursorGuide" - ref="cursorGuideHorizontal" - class="c-cursor-guide--h js-cursor-guide--h" + <div + v-show="cursorGuide" + ref="cursorGuideHorizontal" + class="c-cursor-guide--h js-cursor-guide--h" > </div> </div> - <x-axis v-if="seriesModels.length > 0 && !options.compact" - :series-model="seriesModels[0]" + <x-axis + v-if="seriesModels.length > 0 && !options.compact" + :series-model="seriesModels[0]" /> </div> diff --git a/src/plugins/plot/MctTicks.vue b/src/plugins/plot/MctTicks.vue index ca6698a6d..87e615999 100644 --- a/src/plugins/plot/MctTicks.vue +++ b/src/plugins/plot/MctTicks.vue @@ -21,53 +21,60 @@ --> <template> -<div ref="tickContainer" - class="u-contents js-ticks" +<div + ref="tickContainer" + class="u-contents js-ticks" > - <div v-if="position === 'left'" - class="gl-plot-tick-wrapper" + <div + v-if="position === 'left'" + class="gl-plot-tick-wrapper" > - <div v-for="tick in ticks" - :key="tick.value" - class="gl-plot-tick gl-plot-x-tick-label" - :style="{ - left: (100 * (tick.value - min) / interval) + '%' - }" - :title="tick.fullText || tick.text" + <div + v-for="tick in ticks" + :key="tick.value" + class="gl-plot-tick gl-plot-x-tick-label" + :style="{ + left: (100 * (tick.value - min) / interval) + '%' + }" + :title="tick.fullText || tick.text" > {{ tick.text }} </div> </div> - <div v-if="position === 'top'" - class="gl-plot-tick-wrapper" + <div + v-if="position === 'top'" + class="gl-plot-tick-wrapper" > - <div v-for="tick in ticks" - :key="tick.value" - class="gl-plot-tick gl-plot-y-tick-label" - :style="{ top: (100 * (max - tick.value) / interval) + '%' }" - :title="tick.fullText || tick.text" - style="margin-top: -0.50em; direction: ltr;" + <div + v-for="tick in ticks" + :key="tick.value" + class="gl-plot-tick gl-plot-y-tick-label" + :style="{ top: (100 * (max - tick.value) / interval) + '%' }" + :title="tick.fullText || tick.text" + style="margin-top: -0.50em; direction: ltr;" > <span>{{ tick.text }}</span> </div> </div> <!-- grid lines follow --> <template v-if="position === 'right'"> - <div v-for="tick in ticks" - :key="tick.value" - class="gl-plot-hash hash-v" - :style="{ - right: (100 * (max - tick.value) / interval) + '%', - height: '100%' - }" + <div + v-for="tick in ticks" + :key="tick.value" + class="gl-plot-hash hash-v" + :style="{ + right: (100 * (max - tick.value) / interval) + '%', + height: '100%' + }" > </div> </template> <template v-if="position === 'bottom'"> - <div v-for="tick in ticks" - :key="tick.value" - class="gl-plot-hash hash-h" - :style="{ bottom: (100 * (tick.value - min) / interval) + '%', width: '100%' }" + <div + v-for="tick in ticks" + :key="tick.value" + class="gl-plot-hash hash-h" + :style="{ bottom: (100 * (tick.value - min) / interval) + '%', width: '100%' }" > </div> </template> diff --git a/src/plugins/plot/Plot.vue b/src/plugins/plot/Plot.vue index 2142b2290..beb3b9245 100644 --- a/src/plugins/plot/Plot.vue +++ b/src/plugins/plot/Plot.vue @@ -20,52 +20,61 @@ at runtime from the About dialog for additional information. --> <template> -<div ref="plotWrapper" - class="c-plot holder holder-plot has-control-bar" +<div + ref="plotWrapper" + class="c-plot holder holder-plot has-control-bar" > - <div v-if="!options.compact" - class="c-control-bar" + <div + v-if="!options.compact" + class="c-control-bar" > <span class="c-button-set c-button-set--strip-h"> - <button class="c-button icon-download" - title="Export This View's Data as PNG" - @click="exportPNG()" + <button + class="c-button icon-download" + title="Export This View's Data as PNG" + @click="exportPNG()" > <span class="c-button__label">PNG</span> </button> - <button class="c-button" - title="Export This View's Data as JPG" - @click="exportJPG()" + <button + class="c-button" + title="Export This View's Data as JPG" + @click="exportJPG()" > <span class="c-button__label">JPG</span> </button> </span> - <button class="c-button icon-crosshair" - :class="{ 'is-active': cursorGuide }" - title="Toggle cursor guides" - @click="toggleCursorGuide" + <button + class="c-button icon-crosshair" + :class="{ 'is-active': cursorGuide }" + title="Toggle cursor guides" + @click="toggleCursorGuide" > </button> - <button class="c-button" - :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }" - title="Toggle grid lines" - @click="toggleGridLines" + <button + class="c-button" + :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }" + title="Toggle grid lines" + @click="toggleGridLines" > </button> </div> - <div ref="plotContainer" - class="l-view-section u-style-receiver js-style-receiver" - :class="{'s-status-timeconductor-unsynced': status && status === 'timeconductor-unsynced'}" + <div + ref="plotContainer" + class="l-view-section u-style-receiver js-style-receiver" + :class="{'s-status-timeconductor-unsynced': status && status === 'timeconductor-unsynced'}" > - <div v-show="!!loading" - class="c-loading--overlay loading" + <div + v-show="!!loading" + class="c-loading--overlay loading" ></div> - <mct-plot :grid-lines="gridLines" - :cursor-guide="cursorGuide" - :options="options" - @loadingUpdated="loadingUpdated" - @statusUpdated="setStatus" + <mct-plot + :grid-lines="gridLines" + :cursor-guide="cursorGuide" + :options="options" + @loadingUpdated="loadingUpdated" + @statusUpdated="setStatus" /> </div> </div> diff --git a/src/plugins/plot/axis/XAxis.vue b/src/plugins/plot/axis/XAxis.vue index 970b60604..7d2bf2545 100644 --- a/src/plugins/plot/axis/XAxis.vue +++ b/src/plugins/plot/axis/XAxis.vue @@ -21,12 +21,14 @@ --> <template> -<div v-if="loaded" - class="gl-plot-axis-area gl-plot-x has-local-controls" +<div + v-if="loaded" + class="gl-plot-axis-area gl-plot-x has-local-controls" > - <mct-ticks :axis-type="'xAxis'" - :position="'left'" - @plotTickWidth="onTickWidthChange" + <mct-ticks + :axis-type="'xAxis'" + :position="'left'" + @plotTickWidth="onTickWidthChange" /> <div @@ -42,9 +44,10 @@ class="gl-plot-x-label__select local-controls--hidden" @change="toggleXKeyOption()" > - <option v-for="option in xKeyOptions" - :key="option.key" - :value="option.key" + <option + v-for="option in xKeyOptions" + :key="option.key" + :value="option.key" >{{ option.name }} </option> </select> diff --git a/src/plugins/plot/axis/YAxis.vue b/src/plugins/plot/axis/YAxis.vue index 781834ebe..85f7946c1 100644 --- a/src/plugins/plot/axis/YAxis.vue +++ b/src/plugins/plot/axis/YAxis.vue @@ -20,37 +20,42 @@ at runtime from the About dialog for additional information. --> <template> -<div v-if="loaded" - class="gl-plot-axis-area gl-plot-y has-local-controls" - :style="{ - width: (tickWidth + 20) + 'px' - }" +<div + v-if="loaded" + class="gl-plot-axis-area gl-plot-y has-local-controls" + :style="{ + width: (tickWidth + 20) + 'px' + }" > - <div v-if="singleSeries" - class="gl-plot-label gl-plot-y-label" - :class="{'icon-gear': (yKeyOptions.length > 1)}" + <div + v-if="singleSeries" + class="gl-plot-label gl-plot-y-label" + :class="{'icon-gear': (yKeyOptions.length > 1)}" >{{ yAxisLabel }} </div> - <select v-if="yKeyOptions.length > 1 && singleSeries" - v-model="yAxisLabel" - class="gl-plot-y-label__select local-controls--hidden" - @change="toggleYAxisLabel" + <select + v-if="yKeyOptions.length > 1 && singleSeries" + v-model="yAxisLabel" + class="gl-plot-y-label__select local-controls--hidden" + @change="toggleYAxisLabel" > - <option v-for="(option, index) in yKeyOptions" - :key="index" - :value="option.name" - :selected="option.name === yAxisLabel" + <option + v-for="(option, index) in yKeyOptions" + :key="index" + :value="option.name" + :selected="option.name === yAxisLabel" > {{ option.name }} </option> </select> - <mct-ticks :axis-type="'yAxis'" - class="gl-plot-ticks" - :position="'top'" - @plotTickWidth="onTickWidthChange" + <mct-ticks + :axis-type="'yAxis'" + class="gl-plot-ticks" + :position="'top'" + @plotTickWidth="onTickWidthChange" /> </div> </template> diff --git a/src/plugins/plot/chart/LimitLabel.vue b/src/plugins/plot/chart/LimitLabel.vue index dff4429b3..2bb2c2f24 100644 --- a/src/plugins/plot/chart/LimitLabel.vue +++ b/src/plugins/plot/chart/LimitLabel.vue @@ -1,14 +1,16 @@ <template> -<div class="c-plot-limit" - :style="styleObj" - :class="limitClass" +<div + class="c-plot-limit" + :style="styleObj" + :class="limitClass" > <div class="c-plot-limit__label"> <span class="c-plot-limit__direction-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__series-color-swatch" - :style="{ 'background-color': limit.seriesColor }" + <span + class="c-plot-limit__series-color-swatch" + :style="{ 'background-color': limit.seriesColor }" ></span> <span class="c-plot-limit__series-name">{{ limit.name }}</span> </div> diff --git a/src/plugins/plot/chart/LimitLine.vue b/src/plugins/plot/chart/LimitLine.vue index 7fe45be29..1d1118924 100644 --- a/src/plugins/plot/chart/LimitLine.vue +++ b/src/plugins/plot/chart/LimitLine.vue @@ -1,7 +1,8 @@ <template> -<div :style="styleObj" - class="c-plot-limit-line js-limit-line" - :class="limitClass" +<div + :style="styleObj" + class="c-plot-limit-line js-limit-line" + :class="limitClass" ></div> </template> diff --git a/src/plugins/plot/chart/MctChart.vue b/src/plugins/plot/chart/MctChart.vue index 34170e570..2ec6d74f5 100644 --- a/src/plugins/plot/chart/MctChart.vue +++ b/src/plugins/plot/chart/MctChart.vue @@ -26,8 +26,9 @@ <div class="gl-plot-chart-area"> <span v-html="canvasTemplate"></span> <span v-html="canvasTemplate"></span> - <div ref="limitArea" - class="js-limit-area" + <div + ref="limitArea" + class="js-limit-area" ></div> </div> </template> diff --git a/src/plugins/plot/inspector/PlotOptionsBrowse.vue b/src/plugins/plot/inspector/PlotOptionsBrowse.vue index 87ac76f78..e45755a4f 100644 --- a/src/plugins/plot/inspector/PlotOptionsBrowse.vue +++ b/src/plugins/plot/inspector/PlotOptionsBrowse.vue @@ -20,49 +20,58 @@ at runtime from the About dialog for additional information. --> <template> -<div v-if="loaded" - class="js-plot-options-browse" +<div + v-if="loaded" + class="js-plot-options-browse" > <ul class="c-tree"> <h2 title="Plot series display properties in this object">Plot Series</h2> - <plot-options-item v-for="series in plotSeries" - :key="series.key" - :series="series" + <plot-options-item + v-for="series in plotSeries" + :key="series.key" + :series="series" /> </ul> - <div v-if="plotSeries.length" - class="grid-properties" + <div + v-if="plotSeries.length" + class="grid-properties" > <ul class="l-inspector-part"> <h2 title="Y axis settings for this object">Y Axis</h2> <li class="grid-row"> - <div class="grid-cell label" - title="Manually override how the Y axis is labeled." + <div + class="grid-cell label" + title="Manually override how the Y axis is labeled." >Label</div> <div class="grid-cell value">{{ label ? label : "Not defined" }}</div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="Automatically scale the Y axis to keep all values in view." + <div + class="grid-cell label" + title="Automatically scale the Y axis to keep all values in view." >Autoscale</div> <div class="grid-cell value"> {{ autoscale ? "Enabled: " : "Disabled" }} {{ autoscale ? autoscalePadding : "" }} </div> </li> - <li v-if="!autoscale && rangeMin" + <li + v-if="!autoscale && rangeMin" class="grid-row" > - <div class="grid-cell label" - title="Minimum Y axis value." + <div + class="grid-cell label" + title="Minimum Y axis value." >Minimum value</div> <div class="grid-cell value">{{ rangeMin }}</div> </li> - <li v-if="!autoscale && rangeMax" + <li + v-if="!autoscale && rangeMax" class="grid-row" > - <div class="grid-cell label" - title="Maximum Y axis value." + <div + class="grid-cell label" + title="Maximum Y axis value." >Maximum value</div> <div class="grid-cell value">{{ rangeMax }}</div> </li> @@ -70,26 +79,30 @@ <ul class="l-inspector-part"> <h2 title="Legend settings for this object">Legend</h2> <li class="grid-row"> - <div class="grid-cell label" - title="The position of the legend relative to the plot display area." + <div + class="grid-cell label" + title="The position of the legend relative to the plot display area." >Position</div> <div class="grid-cell value capitalize">{{ position }}</div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="Hide the legend when the plot is small" + <div + class="grid-cell label" + title="Hide the legend when the plot is small" >Hide when plot small</div> <div class="grid-cell value">{{ hideLegendWhenSmall ? "Yes" : "No" }}</div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="Show the legend expanded by default" + <div + class="grid-cell label" + title="Show the legend expanded by default" >Expand by Default</div> <div class="grid-cell value">{{ expandByDefault ? "Yes" : "No" }}</div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="What to display in the legend when it's collapsed." + <div + class="grid-cell label" + title="What to display in the legend when it's collapsed." >Show when collapsed:</div> <div class="grid-cell value">{{ valueToShowWhenCollapsed.replace('nearest', '') @@ -97,8 +110,9 @@ </div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="What to display in the legend when it's expanded." + <div + class="grid-cell label" + title="What to display in the legend when it's expanded." >Show when expanded:</div> <div class="grid-cell value comma-list"> <span v-if="showTimestampWhenExpanded">Timestamp</span> diff --git a/src/plugins/plot/inspector/PlotOptionsEdit.vue b/src/plugins/plot/inspector/PlotOptionsEdit.vue index 91620fa37..77dc89198 100644 --- a/src/plugins/plot/inspector/PlotOptionsEdit.vue +++ b/src/plugins/plot/inspector/PlotOptionsEdit.vue @@ -20,26 +20,30 @@ at runtime from the About dialog for additional information. --> <template> -<div v-if="loaded" - class="js-plot-options-edit" +<div + v-if="loaded" + class="js-plot-options-edit" > <ul class="c-tree"> <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" > <series-form :series="series" /> </li> </ul> - <y-axis-form v-if="plotSeries.length" - class="grid-properties" - :y-axis="config.yAxis" + <y-axis-form + v-if="plotSeries.length" + class="grid-properties" + :y-axis="config.yAxis" /> <ul class="l-inspector-part"> <h2 title="Legend options">Legend</h2> - <legend-form v-if="plotSeries.length" - class="grid-properties" - :legend="config.legend" + <legend-form + v-if="plotSeries.length" + class="grid-properties" + :legend="config.legend" /> </ul> </div> diff --git a/src/plugins/plot/inspector/PlotOptionsItem.vue b/src/plugins/plot/inspector/PlotOptionsItem.vue index 4b87e64a7..41d4b586f 100644 --- a/src/plugins/plot/inspector/PlotOptionsItem.vue +++ b/src/plugins/plot/inspector/PlotOptionsItem.vue @@ -1,41 +1,49 @@ <template> <ul> - <li class="c-tree__item menus-to-left" + <li + class="c-tree__item menus-to-left" :class="isAliasClass" > - <span class="c-disclosure-triangle is-enabled flex-elem" - :class="expandedCssClass" - @click="toggleExpanded" + <span + class="c-disclosure-triangle is-enabled flex-elem" + :class="expandedCssClass" + @click="toggleExpanded" > </span> - <div class="c-object-label" - :class="statusClass" + <div + class="c-object-label" + :class="statusClass" > - <div class="c-object-label__type-icon" - :class="getSeriesClass" + <div + class="c-object-label__type-icon" + :class="getSeriesClass" > - <span class="is-status__indicator" - title="This item is missing or suspect" + <span + class="is-status__indicator" + title="This item is missing or suspect" ></span> </div> <div class="c-object-label__name">{{ series.domainObject.name }}</div> </div> </li> - <li v-show="expanded" + <li + v-show="expanded" class="c-tree__item menus-to-left" > <ul class="grid-properties js-plot-options-browse-properties"> <li class="grid-row"> - <div class="grid-cell label" - title="The field to be plotted as a value for this series." + <div + class="grid-cell label" + title="The field to be plotted as a value for this series." >Value</div> <div class="grid-cell value"> {{ yKey }} </div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="The rendering method to join lines for this series." + <div + class="grid-cell label" + title="The rendering method to join lines for this series." >Line Method</div> <div class="grid-cell value">{{ { 'none': 'None', @@ -45,33 +53,37 @@ </div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="Whether markers are displayed, and their size." + <div + class="grid-cell label" + title="Whether markers are displayed, and their size." >Markers</div> <div class="grid-cell value"> {{ markerOptionsDisplayText }} </div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="Display markers visually denoting points in alarm." + <div + class="grid-cell label" + title="Display markers visually denoting points in alarm." >Alarm Markers</div> <div class="grid-cell value"> {{ alarmMarkers ? "Enabled" : "Disabled" }} </div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="Display lines visually denoting alarm limits." + <div + class="grid-cell label" + title="Display lines visually denoting alarm limits." >Limit lines</div> <div class="grid-cell value"> {{ limitLines ? "Enabled" : "Disabled" }} </div> </li> - <ColorSwatch :current-color="seriesHexColor" - edit-title="Manually set the plot line and marker color for this series." - view-title="The plot line and marker color for this series." - short-label="Color" + <ColorSwatch + :current-color="seriesHexColor" + edit-title="Manually set the plot line and marker color for this series." + view-title="The plot line and marker color for this series." + short-label="Color" /> </ul> </li> diff --git a/src/plugins/plot/inspector/forms/LegendForm.vue b/src/plugins/plot/inspector/forms/LegendForm.vue index e00d7987b..370c1d52e 100644 --- a/src/plugins/plot/inspector/forms/LegendForm.vue +++ b/src/plugins/plot/inspector/forms/LegendForm.vue @@ -1,12 +1,14 @@ <template> <div> <li class="grid-row"> - <div class="grid-cell label" - title="The position of the legend relative to the plot display area." + <div + class="grid-cell label" + title="The position of the legend relative to the plot display area." >Position</div> <div class="grid-cell value"> - <select v-model="position" - @change="updateForm('position')" + <select + v-model="position" + @change="updateForm('position')" > <option value="top">Top</option> <option value="right">Right</option> @@ -16,30 +18,36 @@ </div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="Hide the legend when the plot is small" + <div + class="grid-cell label" + title="Hide the legend when the plot is small" >Hide when plot small</div> - <div class="grid-cell value"><input v-model="hideLegendWhenSmall" - type="checkbox" - @change="updateForm('hideLegendWhenSmall')" + <div class="grid-cell value"><input + v-model="hideLegendWhenSmall" + type="checkbox" + @change="updateForm('hideLegendWhenSmall')" ></div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="Show the legend expanded by default" + <div + class="grid-cell label" + title="Show the legend expanded by default" >Expand by default</div> - <div class="grid-cell value"><input v-model="expandByDefault" - type="checkbox" - @change="updateForm('expandByDefault')" + <div class="grid-cell value"><input + v-model="expandByDefault" + type="checkbox" + @change="updateForm('expandByDefault')" ></div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="What to display in the legend when it's collapsed." + <div + class="grid-cell label" + title="What to display in the legend when it's collapsed." >When collapsed show</div> <div class="grid-cell value"> - <select v-model="valueToShowWhenCollapsed" - @change="updateForm('valueToShowWhenCollapsed')" + <select + v-model="valueToShowWhenCollapsed" + @change="updateForm('valueToShowWhenCollapsed')" > <option value="none">Nothing</option> <option value="nearestTimestamp">Nearest timestamp</option> @@ -51,30 +59,36 @@ </div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="What to display in the legend when it's expanded." + <div + class="grid-cell label" + title="What to display in the legend when it's expanded." >When expanded show</div> <div class="grid-cell value"> <ul> - <li><input v-model="showTimestampWhenExpanded" - type="checkbox" - @change="updateForm('showTimestampWhenExpanded')" + <li><input + v-model="showTimestampWhenExpanded" + type="checkbox" + @change="updateForm('showTimestampWhenExpanded')" > Nearest timestamp</li> - <li><input v-model="showValueWhenExpanded" - type="checkbox" - @change="updateForm('showValueWhenExpanded')" + <li><input + v-model="showValueWhenExpanded" + type="checkbox" + @change="updateForm('showValueWhenExpanded')" > Nearest value</li> - <li><input v-model="showMinimumWhenExpanded" - type="checkbox" - @change="updateForm('showMinimumWhenExpanded')" + <li><input + v-model="showMinimumWhenExpanded" + type="checkbox" + @change="updateForm('showMinimumWhenExpanded')" > Minimum value</li> - <li><input v-model="showMaximumWhenExpanded" - type="checkbox" - @change="updateForm('showMaximumWhenExpanded')" + <li><input + v-model="showMaximumWhenExpanded" + type="checkbox" + @change="updateForm('showMaximumWhenExpanded')" > Maximum value</li> - <li><input v-model="showUnitsWhenExpanded" - type="checkbox" - @change="updateForm('showUnitsWhenExpanded')" + <li><input + v-model="showUnitsWhenExpanded" + type="checkbox" + @change="updateForm('showUnitsWhenExpanded')" > Units</li> </ul> diff --git a/src/plugins/plot/inspector/forms/SeriesForm.vue b/src/plugins/plot/inspector/forms/SeriesForm.vue index d9a97b230..8434bd349 100644 --- a/src/plugins/plot/inspector/forms/SeriesForm.vue +++ b/src/plugins/plot/inspector/forms/SeriesForm.vue @@ -1,40 +1,48 @@ <template> <ul> - <li class="c-tree__item menus-to-left" + <li + class="c-tree__item menus-to-left" :class="isAliasCss" > - <span class="c-disclosure-triangle is-enabled flex-elem" - :class="expandedCssClass" - @click="toggleExpanded" + <span + class="c-disclosure-triangle is-enabled flex-elem" + :class="expandedCssClass" + @click="toggleExpanded" > </span> <div :class="objectLabelCss"> - <div class="c-object-label__type-icon" - :class="[seriesCss]" + <div + class="c-object-label__type-icon" + :class="[seriesCss]" > - <span class="is-status__indicator" - title="This item is missing or suspect" + <span + class="is-status__indicator" + title="This item is missing or suspect" ></span> </div> <div class="c-object-label__name">{{ series.domainObject.name }}</div> </div> </li> - <ul v-show="expanded" + <ul + v-show="expanded" class="grid-properties js-plot-options-edit-properties" > <li class="grid-row"> <!-- Value to be displayed --> - <div class="grid-cell label" - title="The field to be plotted as a value for this series." + <div + class="grid-cell label" + title="The field to be plotted as a value for this series." >Value</div> <div class="grid-cell value"> - <select v-model="yKey" - @change="updateForm('yKey')" + <select + v-model="yKey" + @change="updateForm('yKey')" > - <option v-for="option in yKeyOptions" - :key="option.value" - :value="option.value" - :selected="option.value == yKey" + <option + v-for="option in yKeyOptions" + :key="option.value" + :value="option.value" + :selected="option.value == yKey" > {{ option.name }} </option> @@ -42,12 +50,14 @@ </div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="The rendering method to join lines for this series." + <div + class="grid-cell label" + title="The rendering method to join lines for this series." >Line Method</div> <div class="grid-cell value"> - <select v-model="interpolate" - @change="updateForm('interpolate')" + <select + v-model="interpolate" + @change="updateForm('interpolate')" > <option value="none">None</option> <option value="linear">Linear interpolate</option> @@ -56,13 +66,15 @@ </div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="Whether markers are displayed." + <div + class="grid-cell label" + title="Whether markers are displayed." >Markers</div> <div class="grid-cell value"> - <input v-model="markers" - type="checkbox" - @change="updateForm('markers')" + <input + v-model="markers" + type="checkbox" + @change="updateForm('markers')" > <select v-show="markers" @@ -81,47 +93,56 @@ </div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="Display markers visually denoting points in alarm." + <div + class="grid-cell label" + title="Display markers visually denoting points in alarm." >Alarm Markers</div> <div class="grid-cell value"> - <input v-model="alarmMarkers" - type="checkbox" - @change="updateForm('alarmMarkers')" + <input + v-model="alarmMarkers" + type="checkbox" + @change="updateForm('alarmMarkers')" > </div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="Display limit lines" + <div + class="grid-cell label" + title="Display limit lines" >Limit lines</div> <div class="grid-cell value"> - <input v-model="limitLines" - type="checkbox" - @change="updateForm('limitLines')" + <input + v-model="limitLines" + type="checkbox" + @change="updateForm('limitLines')" > </div> </li> - <li v-show="markers || alarmMarkers" + <li + v-show="markers || alarmMarkers" class="grid-row" > - <div class="grid-cell label" - title="The size of regular and alarm markers for this series." + <div + class="grid-cell label" + title="The size of regular and alarm markers for this series." >Marker Size:</div> - <div class="grid-cell value"><input v-model="markerSize" - class="c-input--flex" - type="text" - @change="updateForm('markerSize')" + <div class="grid-cell value"><input + v-model="markerSize" + class="c-input--flex" + type="text" + @change="updateForm('markerSize')" ></div> </li> - <li v-show="interpolate !== 'none' || markers" + <li + v-show="interpolate !== 'none' || markers" class="grid-row" > - <ColorSwatch :current-color="currentColor" - edit-title="Manually set the plot line and marker color for this series." - view-title="The plot line and marker color for this series." - short-label="Color" - @colorSet="setColor" + <ColorSwatch + :current-color="currentColor" + edit-title="Manually set the plot line and marker color for this series." + view-title="The plot line and marker color for this series." + short-label="Color" + @colorSet="setColor" /> </li> </ul> diff --git a/src/plugins/plot/inspector/forms/YAxisForm.vue b/src/plugins/plot/inspector/forms/YAxisForm.vue index c96129c10..6bcabd9e7 100644 --- a/src/plugins/plot/inspector/forms/YAxisForm.vue +++ b/src/plugins/plot/inspector/forms/YAxisForm.vue @@ -3,71 +3,84 @@ <ul class="l-inspector-part"> <h2>Y Axis</h2> <li class="grid-row"> - <div class="grid-cell label" - title="Manually override how the Y axis is labeled." + <div + class="grid-cell label" + title="Manually override how the Y axis is labeled." >Label</div> - <div class="grid-cell value"><input v-model="label" - class="c-input--flex" - type="text" - @change="updateForm('label')" + <div class="grid-cell value"><input + v-model="label" + class="c-input--flex" + type="text" + @change="updateForm('label')" ></div> </li> </ul> <ul class="l-inspector-part"> <h2>Y Axis Scaling</h2> <li class="grid-row"> - <div class="grid-cell label" - title="Automatically scale the Y axis to keep all values in view." + <div + class="grid-cell label" + title="Automatically scale the Y axis to keep all values in view." >Auto scale</div> - <div class="grid-cell value"><input v-model="autoscale" - type="checkbox" - @change="updateForm('autoscale')" + <div class="grid-cell value"><input + v-model="autoscale" + type="checkbox" + @change="updateForm('autoscale')" ></div> </li> - <li v-show="autoscale" + <li + v-show="autoscale" class="grid-row" > - <div class="grid-cell label" - title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc." + <div + class="grid-cell label" + title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc." > Padding</div> <div class="grid-cell value"> - <input v-model="autoscalePadding" - class="c-input--flex" - type="text" - @change="updateForm('autoscalePadding')" + <input + v-model="autoscalePadding" + class="c-input--flex" + type="text" + @change="updateForm('autoscalePadding')" > </div> </li> </ul> - <ul v-show="!autoscale" + <ul + v-show="!autoscale" class="l-inspector-part" > - <div v-show="!autoscale && validation.range" - class="grid-span-all form-error" + <div + v-show="!autoscale && validation.range" + class="grid-span-all form-error" > {{ validation.range }} </div> <li class="grid-row force-border"> - <div class="grid-cell label" - title="Minimum Y axis value." + <div + class="grid-cell label" + title="Minimum Y axis value." >Minimum Value</div> <div class="grid-cell value"> - <input v-model="rangeMin" - class="c-input--flex" - type="number" - @change="updateForm('range')" + <input + v-model="rangeMin" + class="c-input--flex" + type="number" + @change="updateForm('range')" > </div> </li> <li class="grid-row"> - <div class="grid-cell label" - title="Maximum Y axis value." + <div + class="grid-cell label" + title="Maximum Y axis value." >Maximum Value</div> - <div class="grid-cell value"><input v-model="rangeMax" - class="c-input--flex" - type="number" - @change="updateForm('range')" + <div class="grid-cell value"><input + v-model="rangeMax" + class="c-input--flex" + type="number" + @change="updateForm('range')" ></div> </li> </ul> diff --git a/src/plugins/plot/legend/PlotLegend.vue b/src/plugins/plot/legend/PlotLegend.vue index 1e0fe496e..e62fc5d99 100644 --- a/src/plugins/plot/legend/PlotLegend.vue +++ b/src/plugins/plot/legend/PlotLegend.vue @@ -20,43 +20,51 @@ at runtime from the About dialog for additional information. --> <template> -<div class="c-plot-legend gl-plot-legend" - :class="{ - 'hover-on-plot': !!highlights.length, - 'is-legend-hidden': isLegendHidden - }" +<div + class="c-plot-legend gl-plot-legend" + :class="{ + '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" - :class="{ 'c-disclosure-triangle--expanded': isLegendExpanded }" - @click="expandLegend" + <div + class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled" + :class="{ 'c-disclosure-triangle--expanded': isLegendExpanded }" + @click="expandLegend" > </div> - <div class="c-plot-legend__wrapper" - :class="{ 'is-cursor-locked': cursorLocked }" + <div + class="c-plot-legend__wrapper" + :class="{ 'is-cursor-locked': cursorLocked }" > <!-- COLLAPSED PLOT LEGEND --> - <div class="plot-wrapper-collapsed-legend" - :class="{'is-cursor-locked': cursorLocked }" + <div + class="plot-wrapper-collapsed-legend" + :class="{'is-cursor-locked': cursorLocked }" > - <div class="c-state-indicator__alert-cursor-lock icon-cursor-lock" - title="Cursor is point locked. Click anywhere in the plot to unlock." + <div + class="c-state-indicator__alert-cursor-lock icon-cursor-lock" + title="Cursor is point locked. Click anywhere in the plot to unlock." ></div> - <plot-legend-item-collapsed v-for="seriesObject in series" - :key="seriesObject.keyString" - :highlights="highlights" - :value-to-show-when-collapsed="legend.get('valueToShowWhenCollapsed')" - :series-object="seriesObject" - @legendHoverChanged="legendHoverChanged" + <plot-legend-item-collapsed + v-for="seriesObject in series" + :key="seriesObject.keyString" + :highlights="highlights" + :value-to-show-when-collapsed="legend.get('valueToShowWhenCollapsed')" + :series-object="seriesObject" + @legendHoverChanged="legendHoverChanged" /> </div> <!-- EXPANDED PLOT LEGEND --> - <div class="plot-wrapper-expanded-legend" - :class="{'is-cursor-locked': cursorLocked }" + <div + class="plot-wrapper-expanded-legend" + :class="{'is-cursor-locked': cursorLocked }" > - <div class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock" - title="Click anywhere in the plot to unlock." + <div + class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock" + title="Click anywhere in the plot to unlock." > Cursor locked to point</div> <table> <thead> @@ -71,12 +79,14 @@ <th v-if="showUnitsWhenExpanded"> Unit </th> - <th v-if="showMinimumWhenExpanded" + <th + v-if="showMinimumWhenExpanded" class="mobile-hide" > Min </th> - <th v-if="showMaximumWhenExpanded" + <th + v-if="showMaximumWhenExpanded" class="mobile-hide" > Max @@ -84,12 +94,13 @@ </tr> </thead> <tbody> - <plot-legend-item-expanded v-for="seriesObject in series" - :key="seriesObject.keyString" - :series-object="seriesObject" - :highlights="highlights" - :legend="legend" - @legendHoverChanged="legendHoverChanged" + <plot-legend-item-expanded + v-for="seriesObject in series" + :key="seriesObject.keyString" + :series-object="seriesObject" + :highlights="highlights" + :legend="legend" + @legendHoverChanged="legendHoverChanged" /> </tbody> </table> diff --git a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue index a586cf3d4..690afd926 100644 --- a/src/plugins/plot/legend/PlotLegendItemCollapsed.vue +++ b/src/plugins/plot/legend/PlotLegendItemCollapsed.vue @@ -20,26 +20,30 @@ at runtime from the About dialog for additional information. --> <template> -<div class="plot-legend-item" - :class="{ - 'is-status--missing': isMissing - }" - @mouseover="toggleHover(true)" - @mouseleave="toggleHover(false)" +<div + class="plot-legend-item" + :class="{ + 'is-status--missing': isMissing + }" + @mouseover="toggleHover(true)" + @mouseleave="toggleHover(false)" > <div class="plot-series-swatch-and-name"> - <span class="plot-series-color-swatch" - :style="{ 'background-color': colorAsHexString }" + <span + class="plot-series-color-swatch" + :style="{ 'background-color': colorAsHexString }" > </span> - <span class="is-status__indicator" - title="This item is missing or suspect" + <span + class="is-status__indicator" + title="This item is missing or suspect" ></span> <span class="plot-series-name">{{ nameWithUnit }}</span> </div> - <div v-show="!!highlights.length && (valueToShowWhenCollapsed !== 'none')" - class="plot-series-value hover-value-enabled" - :class="[{ 'cursor-hover': notNearest }, valueToDisplayWhenCollapsedClass, mctLimitStateClass]" + <div + v-show="!!highlights.length && (valueToShowWhenCollapsed !== 'none')" + class="plot-series-value hover-value-enabled" + :class="[{ 'cursor-hover': notNearest }, valueToDisplayWhenCollapsedClass, mctLimitStateClass]" > <span v-if="valueToShowWhenCollapsed === 'nearestValue'">{{ formattedYValue }}</span> <span v-else-if="valueToShowWhenCollapsed === 'nearestTimestamp'">{{ formattedXValue }}</span> diff --git a/src/plugins/plot/legend/PlotLegendItemExpanded.vue b/src/plugins/plot/legend/PlotLegendItemExpanded.vue index e62008263..1b3157172 100644 --- a/src/plugins/plot/legend/PlotLegendItemExpanded.vue +++ b/src/plugins/plot/legend/PlotLegendItemExpanded.vue @@ -29,12 +29,14 @@ @mouseleave="toggleHover(false)" > <td class="plot-series-swatch-and-name"> - <span class="plot-series-color-swatch" - :style="{ 'background-color': colorAsHexString }" + <span + class="plot-series-color-swatch" + :style="{ 'background-color': colorAsHexString }" > </span> - <span class="is-status__indicator" - title="This item is missing or suspect" + <span + class="is-status__indicator" + title="This item is missing or suspect" ></span> <span class="plot-series-name">{{ name }}</span> </td> @@ -45,8 +47,9 @@ </span> </td> <td v-if="showValueWhenExpanded"> - <span class="plot-series-value cursor-hover hover-value-enabled" - :class="[mctLimitStateClass]" + <span + class="plot-series-value cursor-hover hover-value-enabled" + :class="[mctLimitStateClass]" > {{ formattedYValue }} </span> @@ -56,14 +59,16 @@ {{ unit }} </span> </td> - <td v-if="showMinimumWhenExpanded" + <td + v-if="showMinimumWhenExpanded" class="mobile-hide" > <span class="plot-series-value"> {{ formattedMinY }} </span> </td> - <td v-if="showMaximumWhenExpanded" + <td + v-if="showMaximumWhenExpanded" class="mobile-hide" > <span class="plot-series-value"> diff --git a/src/plugins/plot/stackedPlot/StackedPlot.vue b/src/plugins/plot/stackedPlot/StackedPlot.vue index ed49500e6..1c63a0413 100644 --- a/src/plugins/plot/stackedPlot/StackedPlot.vue +++ b/src/plugins/plot/stackedPlot/StackedPlot.vue @@ -22,47 +22,53 @@ <template> <div class="c-plot c-plot--stacked holder holder-plot has-control-bar"> - <div v-show="!hideExportButtons && !options.compact" - class="c-control-bar" + <div + v-show="!hideExportButtons && !options.compact" + class="c-control-bar" > <span class="c-button-set c-button-set--strip-h"> - <button class="c-button icon-download" - title="Export This View's Data as PNG" - @click="exportPNG()" + <button + class="c-button icon-download" + title="Export This View's Data as PNG" + @click="exportPNG()" > <span class="c-button__label">PNG</span> </button> - <button class="c-button" - title="Export This View's Data as JPG" - @click="exportJPG()" + <button + class="c-button" + title="Export This View's Data as JPG" + @click="exportJPG()" > <span class="c-button__label">JPG</span> </button> </span> - <button class="c-button icon-crosshair" - :class="{ 'is-active': cursorGuide }" - title="Toggle cursor guides" - @click="toggleCursorGuide" + <button + class="c-button icon-crosshair" + :class="{ 'is-active': cursorGuide }" + title="Toggle cursor guides" + @click="toggleCursorGuide" > </button> - <button class="c-button" - :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }" - title="Toggle grid lines" - @click="toggleGridLines" + <button + class="c-button" + :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }" + title="Toggle grid lines" + @click="toggleGridLines" > </button> </div> <div class="l-view-section"> - <stacked-plot-item v-for="object in compositionObjects" - :key="object.id" - class="c-plot--stacked-container" - :object="object" - :options="options" - :grid-lines="gridLines" - :cursor-guide="cursorGuide" - :plot-tick-width="maxTickWidth" - @plotTickWidth="onTickWidthChange" - @loadingUpdated="loadingUpdated" + <stacked-plot-item + v-for="object in compositionObjects" + :key="object.id" + class="c-plot--stacked-container" + :object="object" + :options="options" + :grid-lines="gridLines" + :cursor-guide="cursorGuide" + :plot-tick-width="maxTickWidth" + @plotTickWidth="onTickWidthChange" + @loadingUpdated="loadingUpdated" /> </div> </div> diff --git a/src/plugins/tabs/components/tabs.vue b/src/plugins/tabs/components/tabs.vue index bc1372b20..8224fc80c 100644 --- a/src/plugins/tabs/components/tabs.vue +++ b/src/plugins/tabs/components/tabs.vue @@ -37,18 +37,21 @@ class="c-tabs-view__tab__label c-object-label" :class="[tab.status ? `is-status--${tab.status}` : '']" > - <div class="c-object-label__type-icon" - :class="tab.type.definition.cssClass" + <div + class="c-object-label__type-icon" + :class="tab.type.definition.cssClass" > - <span class="is-status__indicator" - :title="`This item is ${tab.status}`" + <span + class="is-status__indicator" + :title="`This item is ${tab.status}`" ></span> </div> <span class="c-button__label c-object-label__name">{{ tab.domainObject.name }}</span> </div> - <button v-if="isEditing" - class="icon-x c-click-icon c-tabs-view__tab__close-btn" - @click="showRemoveDialog(index)" + <button + v-if="isEditing" + class="icon-x c-click-icon c-tabs-view__tab__close-btn" + @click="showRemoveDialog(index)" ></button> </div> </div> diff --git a/src/plugins/telemetryTable/components/table.vue b/src/plugins/telemetryTable/components/table.vue index e30cea705..ffc94ba54 100644 --- a/src/plugins/telemetryTable/components/table.vue +++ b/src/plugins/telemetryTable/components/table.vue @@ -20,11 +20,13 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ <template> -<div class="c-table-wrapper" - :class="{ 'is-paused': paused }" +<div + class="c-table-wrapper" + :class="{ 'is-paused': paused }" > - <div v-if="enableLegacyToolbar" - class="c-table-control-bar c-control-bar" + <div + v-if="enableLegacyToolbar" + class="c-table-control-bar c-control-bar" > <button v-if="allowExport" @@ -95,8 +97,9 @@ </div> <!-- alternate controlbar start --> - <div v-if="marking.useAlternateControlBar" - class="c-table-control-bar c-control-bar" + <div + v-if="marking.useAlternateControlBar" + class="c-table-control-bar c-control-bar" > <div class="c-control-bar__label"> {{ markedRows.length > 1 ? `${markedRows.length} ${marking.rowNamePlural} selected`: `${markedRows.length} ${marking.rowName} selected` }} diff --git a/src/plugins/timeConductor/Conductor.vue b/src/plugins/timeConductor/Conductor.vue index cc2af69d8..7fb481cc8 100644 --- a/src/plugins/timeConductor/Conductor.vue +++ b/src/plugins/timeConductor/Conductor.vue @@ -30,11 +30,13 @@ ]" > <div class="c-conductor__time-bounds"> - <conductor-inputs-fixed v-if="isFixed" - @updated="saveFixedOffsets" + <conductor-inputs-fixed + v-if="isFixed" + @updated="saveFixedOffsets" /> - <conductor-inputs-realtime v-else - @updated="saveClockOffsets" + <conductor-inputs-realtime + v-else + @updated="saveClockOffsets" /> <ConductorModeIcon class="c-conductor__mode-icon" /> <conductor-axis diff --git a/src/plugins/timeConductor/ConductorHistory.vue b/src/plugins/timeConductor/ConductorHistory.vue index f32acac14..a91accfa2 100644 --- a/src/plugins/timeConductor/ConductorHistory.vue +++ b/src/plugins/timeConductor/ConductorHistory.vue @@ -20,8 +20,9 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ <template> -<div ref="historyButton" - class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" +<div + ref="historyButton" + class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" > <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left"> <button diff --git a/src/plugins/timeConductor/ConductorInputsFixed.vue b/src/plugins/timeConductor/ConductorInputsFixed.vue index 8e3bddd3b..8c3f47e9b 100644 --- a/src/plugins/timeConductor/ConductorInputsFixed.vue +++ b/src/plugins/timeConductor/ConductorInputsFixed.vue @@ -1,6 +1,7 @@ <template> -<form ref="fixedDeltaInput" - class="c-conductor__inputs" +<form + ref="fixedDeltaInput" + class="c-conductor__inputs" > <div class="c-ctrl-wrapper c-conductor-input c-conductor__start-fixed" diff --git a/src/plugins/timeConductor/ConductorInputsRealtime.vue b/src/plugins/timeConductor/ConductorInputsRealtime.vue index 3f6924a47..9a21097f7 100644 --- a/src/plugins/timeConductor/ConductorInputsRealtime.vue +++ b/src/plugins/timeConductor/ConductorInputsRealtime.vue @@ -1,6 +1,7 @@ <template> -<form ref="deltaInput" - class="c-conductor__inputs" +<form + ref="deltaInput" + class="c-conductor__inputs" > <div class="c-ctrl-wrapper c-conductor-input c-conductor__start-delta" diff --git a/src/plugins/timeConductor/ConductorMode.vue b/src/plugins/timeConductor/ConductorMode.vue index 395fc3d6d..869ca1b0a 100644 --- a/src/plugins/timeConductor/ConductorMode.vue +++ b/src/plugins/timeConductor/ConductorMode.vue @@ -20,8 +20,9 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ <template> -<div ref="modeButton" - class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" +<div + ref="modeButton" + class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" > <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left"> <button diff --git a/src/plugins/timeConductor/ConductorTimeSystem.vue b/src/plugins/timeConductor/ConductorTimeSystem.vue index 4da0d7d1a..d37b206ee 100644 --- a/src/plugins/timeConductor/ConductorTimeSystem.vue +++ b/src/plugins/timeConductor/ConductorTimeSystem.vue @@ -20,9 +20,10 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ <template> -<div v-if="selectedTimeSystem.name" - ref="timeSystemButton" - class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" +<div + v-if="selectedTimeSystem.name" + ref="timeSystemButton" + class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" > <button class="c-button--menu c-time-system-button" diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue index 8694238bc..c64b0c38d 100644 --- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue +++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue @@ -36,25 +36,29 @@ <ConductorModeIcon /> - <div v-if="timeOptions && independentTCEnabled" - class="c-conductor__controls" + <div + v-if="timeOptions && independentTCEnabled" + class="c-conductor__controls" > - <Mode v-if="mode" - class="c-conductor__mode-select" - :key-string="domainObject.identifier.key" - :mode="timeOptions.mode" - :enabled="independentTCEnabled" - @modeChanged="saveMode" + <Mode + v-if="mode" + class="c-conductor__mode-select" + :key-string="domainObject.identifier.key" + :mode="timeOptions.mode" + :enabled="independentTCEnabled" + @modeChanged="saveMode" /> - <conductor-inputs-fixed v-if="isFixed" - :key-string="domainObject.identifier.key" - @updated="saveFixedOffsets" + <conductor-inputs-fixed + v-if="isFixed" + :key-string="domainObject.identifier.key" + @updated="saveFixedOffsets" /> - <conductor-inputs-realtime v-else - :key-string="domainObject.identifier.key" - @updated="saveClockOffsets" + <conductor-inputs-realtime + v-else + :key-string="domainObject.identifier.key" + @updated="saveClockOffsets" /> </div> </div> diff --git a/src/plugins/timeConductor/independent/Mode.vue b/src/plugins/timeConductor/independent/Mode.vue index 7ceb8b29b..08c498538 100644 --- a/src/plugins/timeConductor/independent/Mode.vue +++ b/src/plugins/timeConductor/independent/Mode.vue @@ -20,14 +20,16 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ <template> -<div v-if="modes.length > 1" - ref="modeMenuButton" - class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" +<div + v-if="modes.length > 1" + ref="modeMenuButton" + class="c-ctrl-wrapper c-ctrl-wrapper--menus-up" > <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left"> - <button v-if="selectedMode" - class="c-button--menu c-mode-button" - @click.prevent.stop="showModesMenu" + <button + v-if="selectedMode" + class="c-button--menu c-mode-button" + @click.prevent.stop="showModesMenu" > <span class="c-button__label">{{ selectedMode.name }}</span> </button> diff --git a/src/plugins/timeConductor/timePopup.vue b/src/plugins/timeConductor/timePopup.vue index ddaad859f..0d631a672 100644 --- a/src/plugins/timeConductor/timePopup.vue +++ b/src/plugins/timeConductor/timePopup.vue @@ -70,8 +70,9 @@ :disabled="isDisabled" @click.prevent="submit" ></button> - <button class="c-button icon-x" - @click.prevent="hide" + <button + class="c-button icon-x" + @click.prevent="hide" ></button> </div> </div> diff --git a/src/plugins/timeline/TimelineObjectView.vue b/src/plugins/timeline/TimelineObjectView.vue index 4f339b53a..24bd52967 100644 --- a/src/plugins/timeline/TimelineObjectView.vue +++ b/src/plugins/timeline/TimelineObjectView.vue @@ -20,11 +20,12 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ <template> -<swim-lane :icon-class="item.type.definition.cssClass" - :status="status" - :min-height="item.height" - :show-ucontents="item.domainObject.type === 'plan'" - :span-rows-count="item.rowCount" +<swim-lane + :icon-class="item.type.definition.cssClass" + :status="status" + :min-height="item.height" + :show-ucontents="item.domainObject.type === 'plan'" + :span-rows-count="item.rowCount" > <template slot="label"> {{ item.domainObject.name }} diff --git a/src/plugins/timeline/TimelineViewLayout.vue b/src/plugins/timeline/TimelineViewLayout.vue index 0205ecf43..b1764ec1a 100644 --- a/src/plugins/timeline/TimelineViewLayout.vue +++ b/src/plugins/timeline/TimelineViewLayout.vue @@ -21,27 +21,31 @@ *****************************************************************************/ <template> -<div ref="timelineHolder" - class="c-timeline-holder" +<div + ref="timelineHolder" + class="c-timeline-holder" > - <swim-lane v-for="timeSystemItem in timeSystems" - :key="timeSystemItem.timeSystem.key" + <swim-lane + v-for="timeSystemItem in timeSystems" + :key="timeSystemItem.timeSystem.key" > <template slot="label"> {{ timeSystemItem.timeSystem.name }} </template> <template slot="object"> - <timeline-axis :bounds="timeSystemItem.bounds" - :time-system="timeSystemItem.timeSystem" - :content-height="height" - :rendering-engine="'svg'" + <timeline-axis + :bounds="timeSystemItem.bounds" + :time-system="timeSystemItem.timeSystem" + :content-height="height" + :rendering-engine="'svg'" /> </template> </swim-lane> - <div ref="contentHolder" - class="c-timeline__objects" + <div + ref="contentHolder" + class="c-timeline__objects" > <timeline-object-view v-for="item in items" diff --git a/src/plugins/timer/components/Timer.vue b/src/plugins/timer/components/Timer.vue index da7cae7b3..6154eac9e 100644 --- a/src/plugins/timer/components/Timer.vue +++ b/src/plugins/timer/components/Timer.vue @@ -32,10 +32,11 @@ :class="[{'hide': timerState === 'stopped' }]" @click="restartTimer" ></button> - <button :title="timerStateButtonText" - class="c-timer__ctrl-pause-play c-icon-button c-icon-button--major" - :class="[timerStateButtonIcon]" - @click="toggleStateButton" + <button + :title="timerStateButtonText" + class="c-timer__ctrl-pause-play c-icon-button c-icon-button--major" + :class="[timerStateButtonIcon]" + @click="toggleStateButton" ></button> </div> <div diff --git a/src/ui/color/ColorSwatch.vue b/src/ui/color/ColorSwatch.vue index ca29371df..c07291f5d 100644 --- a/src/ui/color/ColorSwatch.vue +++ b/src/ui/color/ColorSwatch.vue @@ -21,35 +21,42 @@ --> <template> <div class="u-contents"> - <div v-if="canEdit" - class="grid-row" + <div + v-if="canEdit" + class="grid-row" > - <div class="grid-cell label" - :title="editTitle" + <div + class="grid-cell label" + :title="editTitle" >{{ shortLabel }}</div> <div class="grid-cell value"> - <div class="c-click-swatch c-click-swatch--menu" - @click="toggleSwatch()" + <div + class="c-click-swatch c-click-swatch--menu" + @click="toggleSwatch()" > - <span class="c-color-swatch" - :style="{ background: currentColor }" + <span + class="c-color-swatch" + :style="{ background: currentColor }" > </span> </div> <div class="c-palette c-palette--color"> - <div v-show="swatchActive" - class="c-palette__items" + <div + v-show="swatchActive" + class="c-palette__items" > - <div v-for="group in colorPaletteGroups" - :key="group.id" - class="u-contents" + <div + v-for="group in colorPaletteGroups" + :key="group.id" + class="u-contents" > - <div v-for="color in group" - :key="color.id" - class="c-palette__item" - :class="{ 'selected': currentColor === color.hexString }" - :style="{ background: color.hexString }" - @click="setColor(color)" + <div + v-for="color in group" + :key="color.id" + class="c-palette__item" + :class="{ 'selected': currentColor === color.hexString }" + :style="{ background: color.hexString }" + @click="setColor(color)" > </div> </div> @@ -57,17 +64,20 @@ </div> </div> </div> - <div v-else - class="grid-row" + <div + v-else + class="grid-row" > - <div class="grid-cell label" - :title="viewTitle" + <div + class="grid-cell label" + :title="viewTitle" >{{ shortLabel }}</div> <div class="grid-cell value"> - <span class="c-color-swatch" - :style="{ - 'background': currentColor - }" + <span + class="c-color-swatch" + :style="{ + 'background': currentColor + }" > </span> </div> diff --git a/src/ui/components/ObjectFrame.vue b/src/ui/components/ObjectFrame.vue index 93c6e3ff7..cef893187 100644 --- a/src/ui/components/ObjectFrame.vue +++ b/src/ui/components/ObjectFrame.vue @@ -34,14 +34,17 @@ <div class="c-so-view__header" > - <div class="c-object-label" - :class="[ statusClass ]" + <div + class="c-object-label" + :class="[ statusClass ]" > - <div class="c-object-label__type-icon" - :class="cssClass" + <div + class="c-object-label__type-icon" + :class="cssClass" > - <span class="is-status__indicator" - :title="`This item is ${status}`" + <span + class="is-status__indicator" + :title="`This item is ${status}`" ></span> </div> <div class="c-object-label__name"> @@ -56,13 +59,15 @@ 'has-complex-content': complexContent }" > - <NotebookMenuSwitcher v-if="notebookEnabled" - :domain-object="domainObject" - :object-path="objectPath" - class="c-notebook-snapshot-menubutton" + <NotebookMenuSwitcher + v-if="notebookEnabled" + :domain-object="domainObject" + :object-path="objectPath" + class="c-notebook-snapshot-menubutton" /> - <div v-if="statusBarItems.length > 0" - class="c-so-view__frame-controls__btns" + <div + v-if="statusBarItems.length > 0" + class="c-so-view__frame-controls__btns" > <button v-for="(item, index) in statusBarItems" diff --git a/src/ui/components/ObjectLabel.vue b/src/ui/components/ObjectLabel.vue index c721288f6..af4cf1a09 100644 --- a/src/ui/components/ObjectLabel.vue +++ b/src/ui/components/ObjectLabel.vue @@ -10,8 +10,9 @@ class="c-tree__item__type-icon c-object-label__type-icon" :class="typeClass" > - <span class="is-status__indicator" - :title="`This item is ${status}`" + <span + class="is-status__indicator" + :title="`This item is ${status}`" ></span> </div> <div class="c-tree__item__name c-object-label__name"> diff --git a/src/ui/components/ObjectView.vue b/src/ui/components/ObjectView.vue index d022dcd7c..8e799e2a1 100644 --- a/src/ui/components/ObjectView.vue +++ b/src/ui/components/ObjectView.vue @@ -1,16 +1,19 @@ <template> <div> - <div v-if="supportsIndependentTime" - class="c-conductor-holder--compact l-shell__main-independent-time-conductor" + <div + v-if="supportsIndependentTime" + class="c-conductor-holder--compact l-shell__main-independent-time-conductor" > - <independent-time-conductor :domain-object="domainObject" - @stateChanged="updateIndependentTimeState" - @updated="saveTimeOptions" + <independent-time-conductor + :domain-object="domainObject" + @stateChanged="updateIndependentTimeState" + @updated="saveTimeOptions" /> </div> - <div ref="objectViewWrapper" - class="c-object-view" - :class="objectTypeClass" + <div + ref="objectViewWrapper" + class="c-object-view" + :class="objectTypeClass" ></div> </div> </template> diff --git a/src/ui/components/ProgressBar.vue b/src/ui/components/ProgressBar.vue index 001849733..aaa2c911d 100644 --- a/src/ui/components/ProgressBar.vue +++ b/src/ui/components/ProgressBar.vue @@ -1,8 +1,9 @@ <template> <div class="c-progress-bar"> - <div class="c-progress-bar__bar" - :class="{ '--indeterminate': model.progressPerc === undefined }" - :style="styleBarWidth" + <div + class="c-progress-bar__bar" + :class="{ '--indeterminate': model.progressPerc === undefined }" + :style="styleBarWidth" ></div> <div v-if="model.progressText !== undefined" diff --git a/src/ui/components/TimeSystemAxis.vue b/src/ui/components/TimeSystemAxis.vue index f2ad538c1..76538b94d 100644 --- a/src/ui/components/TimeSystemAxis.vue +++ b/src/ui/components/TimeSystemAxis.vue @@ -1,6 +1,7 @@ <template> -<div ref="axisHolder" - class="c-timesystem-axis" +<div + ref="axisHolder" + class="c-timesystem-axis" > <div class="nowMarker"><span class="icon-arrow-down"></span></div> </div> diff --git a/src/ui/components/swim-lane/SwimLane.vue b/src/ui/components/swim-lane/SwimLane.vue index f2ea344e1..7b10e3820 100644 --- a/src/ui/components/swim-lane/SwimLane.vue +++ b/src/ui/components/swim-lane/SwimLane.vue @@ -1,23 +1,27 @@ <template> -<div class="u-contents" - :class="[ - {'c-swimlane': !isNested}, - statusClass - ]" +<div + class="u-contents" + :class="[ + {'c-swimlane': !isNested}, + statusClass + ]" > - <div v-if="hideLabel === false" - class="c-swimlane__lane-label c-object-label" - :class="[swimlaneClass, statusClass]" - :style="gridRowSpan" + <div + v-if="hideLabel === false" + class="c-swimlane__lane-label c-object-label" + :class="[swimlaneClass, statusClass]" + :style="gridRowSpan" > - <div v-if="iconClass" - class="c-object-label__type-icon" - :class="iconClass" + <div + v-if="iconClass" + class="c-object-label__type-icon" + :class="iconClass" > - <span v-if="status" - class="is-status__indicator" - :title="`This item is ${status}`" + <span + v-if="status" + class="is-status__indicator" + :title="`This item is ${status}`" ></span> </div> @@ -26,9 +30,10 @@ </div> </div> - <div class="c-swimlane__lane-object" - :style="{'min-height': minHeight}" - :class="{'u-contents': showUcontents}" + <div + class="c-swimlane__lane-object" + :style="{'min-height': minHeight}" + :class="{'u-contents': showUcontents}" > <slot name="object"></slot> </div> diff --git a/src/ui/inspector/Inspector.vue b/src/ui/inspector/Inspector.vue index 33ab1e70e..dab49de24 100644 --- a/src/ui/inspector/Inspector.vue +++ b/src/ui/inspector/Inspector.vue @@ -23,22 +23,25 @@ <template> <div class="c-inspector"> <object-name /> - <div v-if="showStyles" - class="c-inspector__tabs c-tabs" + <div + v-if="showStyles" + class="c-inspector__tabs c-tabs" > - <div v-for="tabbedView in tabbedViews" - :key="tabbedView.key" - class="c-inspector__tab c-tab" - :class="{'is-current': isCurrent(tabbedView)}" - @click="updateCurrentTab(tabbedView)" + <div + v-for="tabbedView in tabbedViews" + :key="tabbedView.key" + class="c-inspector__tab c-tab" + :class="{'is-current': isCurrent(tabbedView)}" + @click="updateCurrentTab(tabbedView)" > {{ tabbedView.name }} </div> </div> <div class="c-inspector__content"> - <multipane v-show="currentTabbedView.key === '__properties'" - type="vertical" + <multipane + v-show="currentTabbedView.key === '__properties'" + type="vertical" > <pane class="c-inspector__properties"> <Properties diff --git a/src/ui/inspector/ObjectName.vue b/src/ui/inspector/ObjectName.vue index 044fe4d11..9703d4a91 100644 --- a/src/ui/inspector/ObjectName.vue +++ b/src/ui/inspector/ObjectName.vue @@ -22,28 +22,34 @@ <template> <div class="c-inspector__header"> - <div v-if="!multiSelect" - class="c-inspector__selected c-object-label" - :class="[statusClass]" + <div + v-if="!multiSelect" + class="c-inspector__selected c-object-label" + :class="[statusClass]" > - <div class="c-object-label__type-icon" - :class="typeCssClass" + <div + class="c-object-label__type-icon" + :class="typeCssClass" > - <span class="is-status__indicator" - :title="`This item is ${status}`" + <span + class="is-status__indicator" + :title="`This item is ${status}`" ></span> </div> - <span v-if="!singleSelectNonObject" - class="c-inspector__selected c-object-label__name" + <span + v-if="!singleSelectNonObject" + class="c-inspector__selected c-object-label__name" >{{ item.name }}</span> - <div v-if="singleSelectNonObject" - class="c-inspector__selected c-inspector__selected--non-domain-object c-object-label" + <div + 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> </div> </div> - <div v-if="multiSelect" - class="c-inspector__multiple-selected" + <div + v-if="multiSelect" + class="c-inspector__multiple-selected" > {{ itemsSelected }} items selected </div> diff --git a/src/ui/inspector/styles/FontStyleEditor.vue b/src/ui/inspector/styles/FontStyleEditor.vue index 0a1e7cc53..aa78cd319 100644 --- a/src/ui/inspector/styles/FontStyleEditor.vue +++ b/src/ui/inspector/styles/FontStyleEditor.vue @@ -1,7 +1,8 @@ <template> <div class="c-toolbar"> - <div ref="fontSizeMenu" - class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left" + <div + ref="fontSizeMenu" + class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left" > <button class="c-icon-button c-button--menu icon-font-size" @@ -10,8 +11,9 @@ <span class="c-button__label">{{ fontSizeLabel }}</span> </button> </div> - <div ref="fontMenu" - class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left" + <div + ref="fontMenu" + class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left" > <button class="c-icon-button c-button--menu icon-font" diff --git a/src/ui/inspector/styles/SavedStyleSelector.vue b/src/ui/inspector/styles/SavedStyleSelector.vue index 1c892976a..c69f57b2b 100644 --- a/src/ui/inspector/styles/SavedStyleSelector.vue +++ b/src/ui/inspector/styles/SavedStyleSelector.vue @@ -23,9 +23,10 @@ <template> <div> <div class="c-style c-style--saved has-local-controls c-toolbar"> - <div class="c-style__controls" - :title="description" - @click="selectStyle()" + <div + class="c-style__controls" + :title="description" + @click="selectStyle()" > <div class="c-style-thumb" diff --git a/src/ui/layout/BrowseBar.vue b/src/ui/layout/BrowseBar.vue index 9dacff691..ba427d9c5 100644 --- a/src/ui/layout/BrowseBar.vue +++ b/src/ui/layout/BrowseBar.vue @@ -11,11 +11,13 @@ class="l-browse-bar__object-name--w c-object-label" :class="[statusClass]" > - <div class="c-object-label__type-icon" - :class="type.cssClass" + <div + class="c-object-label__type-icon" + :class="type.cssClass" > - <span class="is-status__indicator" - :title="`This item is ${status}`" + <span + class="is-status__indicator" + :title="`This item is ${status}`" ></span> </div> <span @@ -38,10 +40,11 @@ :views="views" /> <!-- Action buttons --> - <NotebookMenuSwitcher v-if="notebookEnabled" - :domain-object="domainObject" - :object-path="openmct.router.path" - class="c-notebook-snapshot-menubutton" + <NotebookMenuSwitcher + v-if="notebookEnabled" + :domain-object="domainObject" + :object-path="openmct.router.path" + class="c-notebook-snapshot-menubutton" /> <div class="l-browse-bar__actions"> <button diff --git a/src/ui/layout/CreateButton.vue b/src/ui/layout/CreateButton.vue index a1450599e..4615aff3e 100644 --- a/src/ui/layout/CreateButton.vue +++ b/src/ui/layout/CreateButton.vue @@ -1,6 +1,7 @@ <template> -<div ref="createButton" - class="c-create-button--w" +<div + ref="createButton" + class="c-create-button--w" > <button class="c-create-button c-button--menu c-button--major icon-plus" diff --git a/src/ui/layout/pane.vue b/src/ui/layout/pane.vue index 569a3d3f8..270df6fb9 100644 --- a/src/ui/layout/pane.vue +++ b/src/ui/layout/pane.vue @@ -17,8 +17,9 @@ @mousedown="start" ></div> <div class="l-pane__header"> - <span v-if="label" - class="l-pane__label" + <span + v-if="label" + class="l-pane__label" >{{ label }}</span> <slot name="controls"></slot> <button diff --git a/src/ui/layout/status-bar/NotificationBanner.vue b/src/ui/layout/status-bar/NotificationBanner.vue index cb564f138..757e98c60 100644 --- a/src/ui/layout/status-bar/NotificationBanner.vue +++ b/src/ui/layout/status-bar/NotificationBanner.vue @@ -29,9 +29,10 @@ @click="maximize()" > <span class="c-message-banner__message">{{ activeModel.message }}</span> - <span v-if="haslink" - class="c-message-banner__message" - :class="[haslink ? getLinkProps.cssClass : '']" + <span + v-if="haslink" + class="c-message-banner__message" + :class="[haslink ? getLinkProps.cssClass : '']" >{{ getLinkProps.text }}</span> <progress-bar diff --git a/src/ui/preview/preview-header.vue b/src/ui/preview/preview-header.vue index b01c6203e..20d94851d 100644 --- a/src/ui/preview/preview-header.vue +++ b/src/ui/preview/preview-header.vue @@ -4,9 +4,10 @@ <div class="l-browse-bar__object-name--w c-object-label" > - <div v-if="type" - class="c-object-label__type-icon" - :class="type.definition.cssClass" + <div + v-if="type" + class="c-object-label__type-icon" + :class="type.definition.cssClass" ></div> <span class="l-browse-bar__object-name c-object-label__name"> {{ domainObject.name }} @@ -19,11 +20,12 @@ :views="views" :current-view="currentView" /> - <NotebookMenuSwitcher :domain-object="domainObject" - :object-path="objectPath" - :is-preview="true" - :current-view="currentView" - class="c-notebook-snapshot-menubutton" + <NotebookMenuSwitcher + :domain-object="domainObject" + :object-path="objectPath" + :is-preview="true" + :current-view="currentView" + class="c-notebook-snapshot-menubutton" /> <div class="l-browse-bar__actions"> <button |