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

Integrate Conditionals styling into topic-conditionals (try 2) (#2730)

Browse Source 
* Styling for Conditionals WIP

- Condition Set markup and styling WIP;

* Styling for Conditionals WIP

- Condition Set markup and styling WIP;

* Styling for Conditionals WIP

- Main layout and container styling refinement, simplification and
normalization;

* Styling for Conditionals WIP

- Begin styling for individual condition elements;

* Styling for Conditionals WIP

- Condition styling, very initial;

* Conditionals styling WIP

- Redo work done previously and lost due to merging;
- Overall layout in edit mode;
- Styling for hint element;

* Conditionals styling WIP

- Major progress on Conditionals edit-view styling;
- Grid layout WIP in condition element;
- Added new `.c-grippy` class;

* Conditionals styling WIP

- discreteItem theme constants refined, add
`$colorDiscreteItemCurrentBg` color value;
- `.c-grippy` enhanced;
- Condition layout significantly refined;

* Conditionals styling WIP

- Styling for browse view in Condition Set;
- Refined alignment and styles for condition header;

* Conditionals styling WIP

- Cleanups;
- Significant improvements to flex layout;
- Test Data layout and element formatting;

* Conditionals styling WIP

- Better approach to condition set hinting;

* Conditionals styling WIP

- Merge and integrate changes from Joel;
- 'Add Criteria' button now disabled until telemetry has been added;
- Fix JS configuration error with help from Joel;

* Conditionals styling WIP

- Much better flex approach to sections layout;
- Sanding and shimming;

* Conditionals styling WIP

- Fixed some linting;

* Conditionals styling WIP

- Tweaks for layouts issues;
This commit is contained in:
Charles Hacskaylo 2020-03-09 10:08:39 -07:00 committed by GitHub
parent 4675fc8ae6
commit 27a09239e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 487 additions and 595 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,178 +1,168 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2020, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
* Open MCT, Copyright (c) 2014-2020, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
<template>
<div v-if="isEditing">
<div v-if="domainObject"
class="c-c-editui__conditions c-c-container__container c-c__drag-wrapper"
:class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
>
<div class="title-bar">
<span class="c-c__menu-hamburger"
:class="{ 'is-enabled': !domainObject.isDefault }"
:draggable="!domainObject.isDefault"
@dragstart="dragStart"
@dragstop="dragStop"
@dragover.stop
></span>
<span
class="is-enabled flex-elem"
:class="['c-c__disclosure-triangle', { 'c-c__disclosure-triangle--expanded': expanded }]"
@click="expanded = !expanded"
></span>
<div class="condition-summary">
<span class="condition-name">{{ domainObject.configuration.name }}</span>
<!-- TODO: description should be derived from criteria -->
<span class="condition-description">{{ domainObject.configuration.name }}</span>
</div>
<span v-if="!domainObject.isDefault"
class="is-enabled c-c__duplicate"
@click="cloneCondition"
></span>
<span v-if="!domainObject.isDefault"
class="is-enabled c-c__trash"
@click="removeCondition"
></span>
<div v-if="isEditing"
class="c-condition c-condition--edit js-condition-drag-wrapper"
:class="{ 'c-condition--current-match': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }"
>
<!-- 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': !domainObject.isDefault }, { 'hide-nice': domainObject.isDefault }]"
:draggable="!domainObject.isDefault"
@dragstart="dragStart"
@dragstop="dragStop"
@dragover.stop
></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>
<span class="c-condition__name">{{ domainObject.configuration.name }}</span>
<!-- TODO: description should be derived from criteria -->
<span class="c-condition__summary">
Description/summary goes here {{ domainObject.configuration.description }}
</span>
<div class="c-condition__buttons">
<button v-if="!domainObject.isDefault"
class="c-click-icon c-condition__duplicate-button icon-duplicate"
title="Duplicate this condition"
@click="cloneCondition"
></button>
<button v-if="!domainObject.isDefault"
class="c-click-icon c-condition__delete-button icon-trash"
title="Delete this condition"
@click="removeCondition"
></button>
</div>
<div v-if="expanded"
class="condition-config-edit widget-condition-content c-sw-editui__conditions-wrapper holder widget-conditions-wrapper flex-elem expanded"
>
<div id="conditionArea"
class="c-c-editui__condition widget-conditions"
</div>
<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="domainObject.configuration.name"
class="t-condition-input__name"
type="text"
@blur="persist"
>
<div class="c-c-condition">
<div class="c-c-condition__ui l-compact-form l-widget-condition has-local-controls">
<div>
<ul class="t-widget-condition-config">
<li>
<label>Condition Name</label>
<span class="controls">
<input v-model="domainObject.configuration.name"
class="t-condition-input__name"
type="text"
@blur="persist"
>
</span>
</li>
<li>
<label>Output</label>
<span class="controls">
<select v-model="selectedOutputSelection"
@change="setOutputValue"
>
<option value="">- Select Output -</option>
<option v-for="option in outputOptions"
:key="option"
:value="option"
>
{{ initCap(option) }}
</option>
</select>
<input v-if="selectedOutputSelection === outputOptions[2]"
v-model="domainObject.configuration.output"
class="t-condition-name-input"
type="text"
@blur="persist"
>
</span>
</li>
</ul>
<div v-if="!domainObject.isDefault"
class="widget-condition-content expanded"
>
<ul class="t-widget-condition-config">
<li class="has-local-controls t-condition">
<label>Match when</label>
<span class="controls">
<select v-model="domainObject.configuration.trigger"
@change="persist"
>
<option value="all">all criteria are met</option>
<option value="any">any criteria are met</option>
</select>
</span>
</li>
</ul>
<ul v-if="telemetry.length"
class="t-widget-condition-config"
>
<li v-for="(criterion, index) in domainObject.configuration.criteria"
:key="index"
class="has-local-controls t-condition"
>
<Criterion :telemetry="telemetry"
:criterion="criterion"
:index="index"
:trigger="domainObject.configuration.trigger"
:is-default="domainObject.configuration.criteria.length === 1"
@persist="persist"
/>
<div class="c-c__criterion-controls">
<span class="is-enabled c-c__duplicate"
@click="cloneCriterion(index)"
></span>
<span v-if="!(domainObject.configuration.criteria.length === 1)"
class="is-enabled c-c__trash"
@click="removeCriterion(index)"
></span>
</div>
</li>
</ul>
<div class="holder c-c-button-wrapper align-left">
<span class="c-c-label-spacer"></span>
<button
class="c-c-button c-c-button--minor add-criteria-button"
@click="addCriteria"
>
<span class="c-c-button__label">Add Criteria</span>
</button>
</div>
</div>
</div>
</span>
<span class="c-cdef__label">Output</span>
<span class="c-cdef__controls">
<select v-model="selectedOutputSelection"
@change="setOutputValue"
>
<option value="">- Select Output -</option>
<option v-for="option in outputOptions"
:key="option"
:value="option"
>
{{ initCap(option) }}
</option>
</select>
<input v-if="selectedOutputSelection === outputOptions[2]"
v-model="domainObject.configuration.output"
class="t-condition-name-input"
type="text"
@blur="persist"
>
</span>
<div v-if="!domainObject.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="domainObject.configuration.trigger"
@change="persist"
>
<option value="all">when all criteria are met</option>
<option value="any">when any criteria are met</option>
</select>
</span>
<template v-if="telemetry.length">
<div v-for="(criterion, index) in domainObject.configuration.criteria"
:key="index"
class="c-cdef__criteria"
>
<Criterion :telemetry="telemetry"
:criterion="criterion"
:index="index"
:trigger="domainObject.configuration.trigger"
:is-default="domainObject.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>
<button v-if="!(domainObject.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"
>
<button
class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
@click="addCriteria"
>
<span class="c-button__label">Add Criteria</span>
</button>
</div>
</div>
</div>
</div>
<div v-else>
<div v-if="domainObject"
id="conditionArea"
class="c-cs-ui__conditions"
:class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
>
<div class="title-bar">
<span class="condition-name">
{{ domainObject.configuration.name }}
</span>
<span class="condition-output">
Output: {{ domainObject.configuration.output }}
</span>
</div>
<div class="condition-config">
<span class="condition-description">
{{ domainObject.configuration.description }}
</span>
</div>
<div v-else
class="c-condition c-condition--browse"
:class="{ 'c-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }"
>
<!-- Browse view -->
<div class="c-condition__header">
<span class="c-condition__name">
{{ domainObject.configuration.name }}
</span>
<span class="c-condition__output">
Output: {{ domainObject.configuration.output }}
</span>
</div>
<div class="c-condition__summary">
Description/summary goes here {{ domainObject.configuration.description }}
</div>
</div>
</template>
@ -210,7 +200,9 @@ export default {
},
data() {
return {
domainObject: this.domainObject,
domainObject: {
configuration: {}
},
currentCriteria: this.currentCriteria,
expanded: true,
trigger: 'all',
@ -262,7 +254,7 @@ export default {
dragStart(e) {
e.dataTransfer.setData('dragging', e.target); // required for FF to initiate drag
e.dataTransfer.effectAllowed = "copyMove";
e.dataTransfer.setDragImage(e.target.closest('.c-c-container__container'), 0, 0);
e.dataTransfer.setDragImage(e.target.closest('.js-condition-drag-wrapper'), 0, 0);
this.$emit('setMoveIndex', this.conditionIndex);
},
dragStop(e) {
@ -301,5 +293,3 @@ export default {
}
}
</script>

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

@ -22,60 +22,59 @@
<template>
<section id="conditionCollection"
class="c-cs__ui_section"
class="c-cs__conditions"
:class="{ 'is-expanded': expanded }"
>
<div class="c-cs__ui__header">
<span class="c-cs__ui__header-label">Conditions</span>
<div class="c-cs__header c-section__header">
<span
class="is-enabled flex-elem"
:class="['c-cs__disclosure-triangle', { 'c-cs__disclosure-triangle--expanded': expanded }]"
class="c-disclosure-triangle c-tree__item__view-control is-enabled"
:class="{ 'c-disclosure-triangle--expanded': expanded }"
@click="expanded = !expanded"
></span>
<div class="c-cs__header-label c-section__label">Conditions</div>
</div>
<div v-if="expanded"
class="c-cs__ui_content"
class="c-cs__content"
>
<div v-show="isEditing"
class="help"
class="hint"
:class="{ 's-status-icon-warning-lo': !telemetryObjs.length }"
>
<span v-if="!telemetryObjs.length">Drag telemetry into Condition Set in order to add conditions.</span>
<span v-else>The first condition to match is the one that wins. Drag conditions to rearrange.</span>
<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>
</div>
<div class="holder add-condition-button-wrapper align-left">
<button
v-show="isEditing"
id="addCondition"
class="c-cs-button c-cs-button--major add-condition-button"
:class="{ 'is-disabled': !telemetryObjs.length}"
:disabled="!telemetryObjs.length"
@click="addCondition"
<button
v-show="isEditing"
id="addCondition"
class="c-button c-button--major icon-plus labeled"
@click="addCondition"
>
<span class="c-cs-button__label">Add Condition</span>
</button>
<div class="c-cs__conditions-h">
<div v-for="(conditionIdentifier, index) in conditionCollection"
:key="conditionIdentifier.key"
class="c-condition-h"
>
<span class="c-cs-button__label">Add Condition</span>
</button>
</div>
<div class="c-c__condition-collection">
<ul class="c-c__container-holder">
<li v-for="(conditionIdentifier, index) in conditionCollection"
:key="conditionIdentifier.key"
>
<div v-if="isEditing"
class="c-c__drag-ghost"
@drop.prevent="dropCondition"
@dragenter="dragEnter"
@dragleave="dragLeave"
@dragover.prevent
></div>
<Condition :condition-identifier="conditionIdentifier"
:current-condition-identifier="currentConditionIdentifier"
:condition-index="index"
:telemetry="telemetryObjs"
:is-editing="isEditing"
@removeCondition="removeCondition"
@cloneCondition="cloneCondition"
@setMoveIndex="setMoveIndex"
/>
</li>
</ul>
<div v-if="isEditing"
class="c-c__drag-ghost"
@drop.prevent="dropCondition"
@dragenter="dragEnter"
@dragleave="dragLeave"
@dragover.prevent
></div>
<Condition :condition-identifier="conditionIdentifier"
:current-condition-identifier="currentConditionIdentifier"
:condition-index="index"
:telemetry="telemetryObjs"
:is-editing="isEditing"
@removeCondition="removeCondition"
@cloneCondition="cloneCondition"
@setMoveIndex="setMoveIndex"
/>
</div>
</div>
</div>
</section>

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

@ -21,24 +21,20 @@
*****************************************************************************/
<template>
<div class="c-cs-edit w-condition-set">
<div class="c-sw-edit__ui holder">
<section id="current-output">
<div class="c-cs__ui__header">
<span class="c-cs__ui__header-label">Current Output</span>
</div>
<div class="c-cs__ui_content">
<span v-if="currentConditionOutput"
class="current-output"
>
{{ currentConditionOutput }}
</span>
<span v-else>No output selected</span>
</div>
</section>
<TestData :is-editing="isEditing" />
<ConditionCollection :is-editing="isEditing" />
</div>
<div class="c-cs">
<section class="c-cs__current-output c-section">
<div class="c-cs__header c-section__header">
<span class="c-cs__header-label c-section__label">Current Output</span>
</div>
<div class="c-cs__content c-cs__current-output-value">
<template v-if="currentConditionOutput">
{{ currentConditionOutput }}
</template>
<template v-else>No output selected</template>
</div>
</section>
<TestData :is-editing="isEditing" />
<ConditionCollection :is-editing="isEditing" />
</div>
</template>

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

@ -1,8 +1,9 @@
<template>
<div>
<label>{{ setRowLabel }}</label>
<span class="t-configuration">
<span class="controls">
<div class="u-contents">
<div class="c-cdef__separator c-row-separator"></div>
<span class="c-cdef__label">{{ setRowLabel }}</span>
<span class="c-cdef__controls">
<span class="c-cdef__control">
<select v-model="criterion.telemetry"
@change="updateMetadataOptions"
>
@ -16,7 +17,7 @@
</select>
</span>
<span v-if="criterion.telemetry"
class="controls"
class="c-cdef__control"
>
<select v-model="criterion.metadata"
@change="updateOperations"
@ -31,7 +32,7 @@
</select>
</span>
<span v-if="criterion.telemetry && criterion.metadata"
class="controls"
class="c-cdef__control"
>
<select v-model="criterion.operation"
@change="updateOperationInputVisibility"
@ -46,9 +47,10 @@
</select>
<span v-for="(item, inputIndex) in inputCount"
:key="inputIndex"
class="c-cdef__control__inputs"
>
<input v-model="criterion.input[inputIndex]"
class="t-condition-name-input"
class="c-cdef__control__input"
type="text"
@blur="persist"
>

0
src/plugins/condition/components/CurrentOutput.vue Normal file
View File

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

@ -23,18 +23,19 @@
<template>
<section v-show="isEditing"
id="test-data"
class="test-data"
class="c-cs__test-data"
:class="{ 'is-expanded': expanded }"
>
<div class="c-cs__ui__header">
<span class="c-cs__ui__header-label">Test Data</span>
<div class="c-cs__header c-section__header">
<span
class="is-enabled flex-elem"
:class="['c-cs__disclosure-triangle', { 'c-cs__disclosure-triangle--expanded': expanded }]"
class="c-disclosure-triangle c-tree__item__view-control is-enabled"
:class="{ 'c-disclosure-triangle--expanded': expanded }"
@click="expanded = !expanded"
></span>
<div class="c-cs__header-label c-section__label">Test Data</div>
</div>
<div v-if="expanded"
class="c-cs__ui_content"
class="c-cs__content"
>
<label class="c-toggle-switch">
<input
@ -43,32 +44,26 @@
@change="applyTestData"
>
<span class="c-toggle-switch__slider"></span>
<span>Apply Test Data</span>
<span class="c-toggle-switch__label">Apply Test Data</span>
</label>
<div class="t-test-data-config">
<div class="c-cs-editui__conditions widget-condition">
<form>
<label>
<span>Set</span>
<select>
<option>- Select Input -</option>
</select>
</label>
<span class="is-enabled flex-elem c-cs__duplicate"></span>
<span class="is-enabled flex-elem c-cs__trash"></span>
</form>
</div>
<div class="c-cs-editui__conditions widget-condition">
<form>
<label>
<span>Set</span>
<select>
<option>- Select Input -</option>
</select>
</label>
<span class="is-enabled c-cs__duplicate"></span>
<span class="is-enabled c-cs__trash"></span>
</form>
<div class="c-cs-test-h">
<div v-for="n in 5"
class="c-test-datum"
>
<span class="c-test-datum__label">Set</span>
<div class="c-test-datum__controls">
<select>
<option>- Select Input -</option>
</select>
</div>
<div class="c-test-datum__buttons">
<button class="c-click-icon c-test-data__duplicate-button icon-duplicate"
title="Duplicate this test data value"
></button>
<button class="c-click-icon c-test-data__delete-button icon-trash"
title="Delete this test data value"
></button>
</div>
</div>
</div>
</div>

204
src/plugins/condition/components/condition-set.scss
View File

@ -1,155 +1,89 @@
.c-cs-edit {
padding: 0;
}
section {
padding-bottom: 5px;
}
.c-cs__ui__header {
background-color: #D0D1D3;
padding: 0.4em 0.6em;
text-transform: uppercase;
font-size: 0.8em;
font-weight: bold;
color: #7C7D80;
.c-cs {
display: flex;
justify-content: stretch;
align-items: center;
}
flex-direction: column;
height: 100%;
overflow: hidden;
.c-cs__ui__header-label {
display: inline-block;
width: 100%;
}
&__content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow: hidden;
.c-cs__ui_content {
padding: 0.4em;
}
.c-cs-ui__label {
color: #333;
}
.c-cs__ui_content .help {
font-style: italic;
padding: 0.4em 0;
}
.current-output {
text-transform: uppercase;
font-weight: bold;
margin: 0.4em 0.6em;
}
.condition-output {
color: #999;
}
.condition-description {
color: #333;
}
.checkbox.custom {
display: flex;
align-items: center;
margin-left: 0.6em;
}
.checkbox.custom span {
display: inline-block;
margin-left: 0.6em;
}
.t-test-data-config {
margin-top: 5px;
}
.c-c__condition-collection.is-disabled {
opacity: 0.5;
}
.widget-condition form {
padding: 0.5em;
display: flex;
align-items: center;
justify-content: stretch;
}
.widget-condition form label {
flex-grow: 1;
margin-left: 0;
}
.widget-condition form input {
min-height: 24px;
}
.c-cs-button[class*="--major"],
.c-cs-button[class*='is-active'],
.c-cs-button--menu[class*="--major"],
.c-cs-button--menu[class*='is-active'] {
border: solid 1px #0B427C;
background-color: #4778A3;
padding: 0.2em 0.6em;
margin: 0.4em;
font-weight: bold;
color: #eee;
border-radius: 6px;
&.is-disabled {
opacity: 0.5;
}
}
.c-cs__disclosure-triangle,
.c-cs__menu-hamburger,
.c-cs__duplicate,
.c-cs__trash {
$d: 8px;
color: $colorDisclosureCtrl;
width: $d;
visibility: hidden;
&.is-enabled {
cursor: pointer;
visibility: visible;
&:hover {
color: $colorDisclosureCtrlHov;
> * {
flex: 0 0 auto;
overflow: hidden;
+ * {
margin-top: $interiorMarginSm;
}
}
&:before {
$s: .5;
display: block;
font-family: symbolsfont;
font-size: 1rem * $s;
.c-button {
align-self: start;
}
}
}
.c-cs__disclosure-triangle {
&:before {
content: $glyph-icon-arrow-right;
.is-editing & {
// Add some space to kick away from blue editing border indication
padding: $interiorMargin;
}
&--expanded {
&:before {
transform: rotate(90deg);
section {
display: flex;
flex-direction: column;
overflow: hidden;
}
&__conditions-h {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow: auto;
padding-right: $interiorMarginSm;
> * + * {
margin-top: $interiorMarginSm;
}
}
}
.c-cs__duplicate {
margin-right: 0.3em;
&:before {
content: $glyph-icon-duplicate;
&__conditions {
> * + * {
margin-top: $interiorMarginSm;
}
}
.hint {
padding: $interiorMarginSm;
}
/************************** SPECIFIC ITEMS */
&__current-output-value {
font-size: 1.25em;
padding: $interiorMargin;
}
}
.c-cs__trash {
&:before {
content: $glyph-icon-trash;
/***************************** TEST DATA */
.c-cs-test-h {
flex: 1 1 auto;
overflow: auto;
padding-right: $interiorMarginSm;
> * + * {
margin-top: $interiorMarginSm;
}
}
.c-test-datum {
> * {
flex: 0 0 auto;
+ * {
margin-left: $interiorMargin;
}
}
&__controls {
flex: 1 1 auto;
}
}

265
src/plugins/condition/components/condition.scss
View File

@ -1,208 +1,111 @@
.widget-condition {
background-color: #eee;
margin: 0 0 0.33em;
border-radius: 3px;
&--current {
background-color: #DEECFA;
}
}
.c-c-editui__conditions.widget-condition {
margin: 0;
}
.c-c-button-wrapper {
border-top: solid 1px #ccc;
padding: 2px;
}
.c-c-label-spacer {
display: inline-block;
width: 90px;
}
.c-c-button[class*="--minor"],
.c-c-button[class*='is-active'],
.c-c-button--menu[class*="--minor"],
.c-c-button--menu[class*='is-active'] {
border: solid 1px #666;
background-color: #fff;
padding: 0.1em 0.4em;
margin: 0.4em;
font-weight: normal;
color: #666;
border-radius: 6px;
}
.title-bar {
.c-condition,
.c-test-datum {
@include discreteItem();
display: flex;
align-items: center;
justify-content: stretch;
padding: 0.4em 0;
padding: $interiorMargin;
&--edit {
line-height: 160%; // For layout when inputs wrap, like in criteria
}
}
.title-bar span {
margin-right: 0.6em;
}
.c-condition {
flex-direction: column;
.title-bar span.c-c__duplicate,
.title-bar span.c-c__trash{
margin-right: 0;
margin-left: 0.3em;
}
.widget-condition > div {
margin: 0 0.4em;
}
.condition-name {
font-weight: bold;
}
.condition-summary .condition-description {
color: #999;
}
.condition-summary {
flex-grow: 1;
}
.condition-config {
padding: 0.3em 0;
}
.widget-condition form label {
flex-grow: 1;
margin-left: 0;
}
.l-widget-condition {
padding: 0;
}
.l-compact-form ul li {
padding: 0;
}
.widget-condition-content.expanded {
margin: 0 3px;
}
.widget-condition-content.expanded ul li {
border-top: solid 1px #ccc;
padding: 2px;
}
.l-compact-form ul li .controls {
display: inline-flex;
flex-grow: inherit;
padding: 2px 0;
}
.l-compact-form ul li > label {
display: block;
width: 90px;
min-width: 90px;
text-align: right;
line-height: 20px;
}
.l-compact-form ul li .controls input[type="text"],
.l-compact-form ul li .controls input[type="search"],
.l-compact-form ul li .controls input[type="number"],
.l-compact-form ul li .controls button,
.l-compact-form ul li .controls select {
min-height: 20px;
}
.condition-config-edit {
padding: 3px 0;
}
.c-c__disclosure-triangle,
.c-c__menu-hamburger,
.c-c__duplicate,
.c-c__trash {
$d: 8px;
color: $colorDisclosureCtrl;
width: $d;
visibility: hidden;
&.is-enabled {
cursor: pointer;
visibility: visible;
&:hover {
color: $colorDisclosureCtrlHov;
}
&:before {
$s: .5;
display: block;
font-family: symbolsfont;
font-size: 1rem * $s;
> * + * {
margin-top: $interiorMarginSm;
}
&--browse {
.c-condition__summary {
border-top: 1px solid $colorInteriorBorder;
padding-top: $interiorMargin;
}
}
}
.c-c__disclosure-triangle {
&:before {
content: $glyph-icon-arrow-right;
}
/***************************** HEADER */
&__header {
display: flex;
align-items: flex-start;
align-content: stretch;
overflow: hidden;
&--expanded {
&:before {
transform: rotate(90deg);
> * {
flex: 0 0 auto;
+ * {
margin-left: $interiorMarginSm;
}
}
}
}
.c-c__menu-hamburger {
&:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
&__name {
font-weight: bold;
align-self: baseline; // Fixes bold line-height offset problem
}
&:before {
content: $glyph-icon-menu-hamburger;
&__output,
&__summary {
flex: 1 1 auto;
}
}
.c-c__duplicate {
&:before {
content: $glyph-icon-duplicate;
}
}
/***************************** CONDITION DEFINITION, EDITING */
.c-cdef {
display: grid;
grid-row-gap: $interiorMarginSm;
grid-column-gap: $interiorMargin;
grid-auto-columns: min-content 1fr max-content;
align-items: start;
min-width: 150px;
margin-left: 29px;
overflow: hidden;
.c-c__trash {
&:before {
content: $glyph-icon-trash;
&__criteria,
&__match-and-criteria {
display: contents;
}
&__label {
grid-column: 1;
text-align: right;
white-space: nowrap;
}
&__separator {
grid-column: 1 / span 3;
}
&__controls {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
//line-height: 200%;
grid-column: 2;
> * > * {
margin-right: $interiorMarginSm;
}
}
&__buttons {
grid-column: 3;
}
}
.c-c__drag-ghost {
width: 100%;
min-height: 0.33em;
min-height: $interiorMarginSm;
//&:before {
// @include test();
// content: '';
// display: block;
// z-index: 2;
//}
&.dragging {
min-height: 2em;
border: solid 1px blue;
min-height: 5em;
//border: solid 1px blue;
background-color: lightblue;
border-radius: 2px;
}
}
.c-c__criterion-controls {
width: 28px;
.c-c__duplicate,
.c-c__trash {
display: inline-block;
}
}

9
src/styles/_constants-espresso.scss
View File

@ -121,7 +121,6 @@ $colorFilter: $colorFilterFg; // Standalone against $colorBodyBg
// States
$colorPausedBg: #ff9900;
$colorPausedFg: #333;
$colorOk: #33cc33;
// Base variations
$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
@ -411,15 +410,21 @@ $transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
// Discrete items, like Notebook entries, Widget rules
$createBtnTextTransform: uppercase;
$colorDiscreteItemBg: rgba($colorBodyFg,0.1);
$colorDiscreteItemCurrentBg: rgba($colorOk,0.3);
@mixin discreteItem() {
background: rgba($colorBodyFg,0.1);
background: $colorDiscreteItemBg;
border: none;
border-radius: $controlCr;
.c-input-inline:hover {
background: $colorBodyBg;
}
&--current-match {
background: $colorDiscreteItemCurrentBg;
}
}
@mixin discreteItemInnerElem() {

7
src/styles/_constants-maelstrom.scss
View File

@ -125,7 +125,6 @@ $colorFilter: $colorFilterFg; // Standalone against $colorBodyBg
// States
$colorPausedBg: #ff9900;
$colorPausedFg: #333;
$colorOk: #33cc33;
// Base variations
$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
@ -415,14 +414,16 @@ $transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
// Discrete items, like Notebook entries, Widget rules
$createBtnTextTransform: uppercase;
$colorDiscreteItemBg: rgba($colorBodyFg,0.1);
$colorDiscreteItemCurrentBg: rgba($colorOk,0.3);
@mixin discreteItem() {
background: rgba($colorBodyFg,0.1);
border: none;
border-radius: $controlCr;
.c-input-inline:hover {
background: $colorBodyBg;
&--current-match {
background: $colorDiscreteItemCurrentBg;
}
}

9
src/styles/_constants-snow.scss
View File

@ -121,7 +121,6 @@ $colorFilter: $colorFilterBg; // Standalone against $colorBodyBg
// States
$colorPausedBg: #ff9900;
$colorPausedFg: #fff;
$colorOk: #33cc33;
// Base variations
$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
@ -411,12 +410,18 @@ $transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
// Discrete items, like Notebook entries, Widget rules
$createBtnTextTransform: uppercase;
$colorDiscreteItemBg: rgba($colorBodyFg,0.1);
$colorDiscreteItemCurrentBg: rgba($colorOk,0.3);
@mixin discreteItem() {
background: rgba($colorBodyFg,0.1);
background: $colorDiscreteItemBg;
border: 1px solid $colorInteriorBorder;
border-radius: $controlCr;
&--current-match {
background: $colorDiscreteItemCurrentBg;
}
.c-input-inline:hover {
background: $colorBodyBg;
}

62
src/styles/_controls.scss
View File

@ -62,6 +62,11 @@ button {
background: $colorBtnBgHov;
color: $colorBtnFgHov;
}
&:before {
content: $glyph-icon-arrow-down;
font-size: 1.1em;
}
}
&.is-active {
@ -78,6 +83,20 @@ button {
/********* Icon Buttons and Links */
.c-click-icon {
@include cClickIcon();
&--section-collapse {
color: inherit;
display: block;
transition: transform $transOutTime;
&:before {
content: $glyph-icon-arrow-down;
font-family: symbolsfont;
}
&.is-collapsed {
transform: rotate(180deg);
}
}
}
.c-click-link {
@ -189,6 +208,44 @@ button {
}
}
/******************************************************** DRAG AFFORDANCES */
.c-grippy {
$d: 10px;
@include grippy($c: $colorItemTreeVC, $dir: 'y');
width: $d; height: $d;
&--vertical-drag {
cursor: ns-resize;
}
}
/******************************************************** SECTION */
section {
flex: 0 0 auto;
overflow: hidden;
+ section {
margin-top: $interiorMargin;
}
&.is-expanded {
flex: 1 1 100%;
}
.c-section__header {
@include propertiesHeader();
display: flex;
align-items: center;
margin-bottom: $interiorMargin;
> * + * { margin-left: $interiorMarginSm; }
}
> [class*='__label'] {
flex: 1 1 auto;
text-transform: uppercase;
}
}
/******************************************************** FORM ELEMENTS */
input, textarea {
font-family: inherit;
@ -621,6 +678,11 @@ select {
@include cToolbarSeparator();
}
.c-row-separator {
border-top: 1px solid $colorInteriorBorder;
height: 1px;
}
.c-toolbar {
> * + * {
margin-left: 2px;

3
src/styles/_status.scss
View File

@ -108,8 +108,9 @@ tr {
}
/*************************************************** STATUS */
[class*='s-status'] {
[class*='s-status-icon'] {
&:before {
font-family: symbolsfont;
margin-right: $interiorMargin;
}
}

2
src/ui/components/toggle-switch.scss
View File

@ -2,6 +2,7 @@
$d: 12px;
$m: 2px;
$br: $d/1.5;
cursor: pointer;
display: inline-flex;
align-items: center;
vertical-align: middle;
@ -39,7 +40,6 @@
display: inline-block;
height: $d + ($m*2);
position: relative;
transform: translateY(2px); // TODO: get this to work without this kind of hack!
width: $d*2 + $m*2;
&:before {

2
src/ui/inspector/Elements.vue
View File

@ -28,7 +28,7 @@
>
<span
v-if="elements.length > 1 && isEditing"
class="c-elements-pool__grippy"
class="c-elements-pool__grippy c-grippy c-grippy--vertical-drag"
></span>
<object-label
:domain-object="element"

3
src/ui/inspector/elements.scss
View File

@ -20,9 +20,8 @@
}
}
&__grippy {
.c-grippy {
$d: 8px;
@include grippy($c: $colorItemTreeVC, $dir: 'y');
flex: 0 0 auto;
margin-right: $interiorMarginSm;
transform: translateY(-2px);