ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-19 15:43:48 +00:00
Code Issues Actions 5 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
16 changed files with 487 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,61 +21,61 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div v-if="isEditing"> <div v-if="isEditing"
<div v-if="domainObject" class="c-condition c-condition--edit js-condition-drag-wrapper"
class="c-c-editui__conditions c-c-container__container c-c__drag-wrapper" :class="{ 'c-condition--current-match': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }"
:class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
> >
<div class="title-bar"> <!-- Edit view -->
<span class="c-c__menu-hamburger" <div class="c-condition__header">
:class="{ 'is-enabled': !domainObject.isDefault }" <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" :draggable="!domainObject.isDefault"
@dragstart="dragStart" @dragstart="dragStart"
@dragstop="dragStop" @dragstop="dragStop"
@dragover.stop @dragover.stop
></span> ></span>
<span
class="is-enabled flex-elem" <span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
:class="['c-c__disclosure-triangle', { 'c-c__disclosure-triangle--expanded': expanded }]" :class="{ 'c-disclosure-triangle--expanded': expanded }"
@click="expanded = !expanded" @click="expanded = !expanded"
></span> ></span>
<div class="condition-summary">
<span class="condition-name">{{ domainObject.configuration.name }}</span> <span class="c-condition__name">{{ domainObject.configuration.name }}</span>
<!-- TODO: description should be derived from criteria --> <!-- TODO: description should be derived from criteria -->
<span class="condition-description">{{ domainObject.configuration.name }}</span> <span class="c-condition__summary">
</div> Description/summary goes here {{ domainObject.configuration.description }}
<span v-if="!domainObject.isDefault" </span>
class="is-enabled c-c__duplicate"
<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" @click="cloneCondition"
></span> ></button>
<span v-if="!domainObject.isDefault"
class="is-enabled c-c__trash" <button v-if="!domainObject.isDefault"
class="c-click-icon c-condition__delete-button icon-trash"
title="Delete this condition"
@click="removeCondition" @click="removeCondition"
></span> ></button>
</div>
</div> </div>
<div v-if="expanded" <div v-if="expanded"
class="condition-config-edit widget-condition-content c-sw-editui__conditions-wrapper holder widget-conditions-wrapper flex-elem expanded" class="c-condition__definition c-cdef"
> >
<div id="conditionArea" <span class="c-cdef__separator c-row-separator"></span>
class="c-c-editui__condition widget-conditions" <span class="c-cdef__label">Condition Name</span>
> <span class="c-cdef__controls">
<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" <input v-model="domainObject.configuration.name"
class="t-condition-input__name" class="t-condition-input__name"
type="text" type="text"
@blur="persist" @blur="persist"
> >
</span> </span>
</li>
<li> <span class="c-cdef__label">Output</span>
<label>Output</label> <span class="c-cdef__controls">
<span class="controls">
<select v-model="selectedOutputSelection" <select v-model="selectedOutputSelection"
@change="setOutputValue" @change="setOutputValue"
> >
@ -94,30 +94,25 @@
@blur="persist" @blur="persist"
> >
</span> </span>
</li>
</ul>
<div v-if="!domainObject.isDefault" <div v-if="!domainObject.isDefault"
class="widget-condition-content expanded" class="c-cdef__match-and-criteria"
> >
<ul class="t-widget-condition-config"> <span class="c-cdef__separator c-row-separator"></span>
<li class="has-local-controls t-condition"> <span class="c-cdef__label">Match</span>
<label>Match when</label> <span class="c-cdef__controls">
<span class="controls">
<select v-model="domainObject.configuration.trigger" <select v-model="domainObject.configuration.trigger"
@change="persist" @change="persist"
> >
<option value="all">all criteria are met</option> <option value="all">when all criteria are met</option>
<option value="any">any criteria are met</option> <option value="any">when any criteria are met</option>
</select> </select>
</span> </span>
</li>
</ul> <template v-if="telemetry.length">
<ul v-if="telemetry.length" <div v-for="(criterion, index) in domainObject.configuration.criteria"
class="t-widget-condition-config"
>
<li v-for="(criterion, index) in domainObject.configuration.criteria"
:key="index" :key="index"
class="has-local-controls t-condition" class="c-cdef__criteria"
> >
<Criterion :telemetry="telemetry" <Criterion :telemetry="telemetry"
:criterion="criterion" :criterion="criterion"
@ -126,53 +121,48 @@
:is-default="domainObject.configuration.criteria.length === 1" :is-default="domainObject.configuration.criteria.length === 1"
@persist="persist" @persist="persist"
/> />
<div class="c-c__criterion-controls"> <div class="c-cdef__criteria__buttons">
<span class="is-enabled c-c__duplicate" <button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
title="Duplicate this criteria"
@click="cloneCriterion(index)" @click="cloneCriterion(index)"
></span> ></button>
<span v-if="!(domainObject.configuration.criteria.length === 1)" <button v-if="!(domainObject.configuration.criteria.length === 1)"
class="is-enabled c-c__trash" class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
title="Delete this criteria"
@click="removeCriterion(index)" @click="removeCriterion(index)"
></span> ></button>
</div> </div>
</li> </div>
</ul> </template>
<div class="holder c-c-button-wrapper align-left"> <div class="c-cdef__separator c-row-separator"></div>
<span class="c-c-label-spacer"></span> <div class="c-cdef__controls"
:disabled="!telemetry.length"
>
<button <button
class="c-c-button c-c-button--minor add-criteria-button" class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
@click="addCriteria" @click="addCriteria"
> >
<span class="c-c-button__label">Add Criteria</span> <span class="c-button__label">Add Criteria</span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div v-else
</div> class="c-condition c-condition--browse"
</div> :class="{ 'c-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }"
</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"> <!-- Browse view -->
<span class="condition-name"> <div class="c-condition__header">
<span class="c-condition__name">
{{ domainObject.configuration.name }} {{ domainObject.configuration.name }}
</span> </span>
<span class="condition-output"> <span class="c-condition__output">
Output: {{ domainObject.configuration.output }} Output: {{ domainObject.configuration.output }}
</span> </span>
</div> </div>
<div class="condition-config"> <div class="c-condition__summary">
<span class="condition-description"> Description/summary goes here {{ domainObject.configuration.description }}
{{ domainObject.configuration.description }}
</span>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -210,7 +200,9 @@ export default {
}, },
data() { data() {
return { return {
domainObject: this.domainObject, domainObject: {
configuration: {}
},
currentCriteria: this.currentCriteria, currentCriteria: this.currentCriteria,
expanded: true, expanded: true,
trigger: 'all', trigger: 'all',
@ -262,7 +254,7 @@ export default {
dragStart(e) { dragStart(e) {
e.dataTransfer.setData('dragging', e.target); // required for FF to initiate drag e.dataTransfer.setData('dragging', e.target); // required for FF to initiate drag
e.dataTransfer.effectAllowed = "copyMove"; 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); this.$emit('setMoveIndex', this.conditionIndex);
}, },
dragStop(e) { dragStop(e) {
@ -301,5 +293,3 @@ export default {
} }
} }
</script> </script>

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

@ -22,41 +22,41 @@
<template> <template>
<section id="conditionCollection" <section id="conditionCollection"
class="c-cs__ui_section" class="c-cs__conditions"
:class="{ 'is-expanded': expanded }"
> >
<div class="c-cs__ui__header"> <div class="c-cs__header c-section__header">
<span class="c-cs__ui__header-label">Conditions</span>
<span <span
class="is-enabled flex-elem" class="c-disclosure-triangle c-tree__item__view-control is-enabled"
:class="['c-cs__disclosure-triangle', { 'c-cs__disclosure-triangle--expanded': expanded }]" :class="{ 'c-disclosure-triangle--expanded': expanded }"
@click="expanded = !expanded" @click="expanded = !expanded"
></span> ></span>
<div class="c-cs__header-label c-section__label">Conditions</div>
</div> </div>
<div v-if="expanded" <div v-if="expanded"
class="c-cs__ui_content" class="c-cs__content"
> >
<div v-show="isEditing" <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> <template v-if="!telemetryObjs.length">Drag telemetry into this Condition Set to configure Conditions and add criteria.</template>
<span v-else>The first condition to match is the one that wins. Drag conditions to rearrange.</span> <template v-else>The first condition to match is the one that is applied. Drag conditions to reorder.</template>
</div> </div>
<div class="holder add-condition-button-wrapper align-left">
<button <button
v-show="isEditing" v-show="isEditing"
id="addCondition" id="addCondition"
class="c-cs-button c-cs-button--major add-condition-button" class="c-button c-button--major icon-plus labeled"
:class="{ 'is-disabled': !telemetryObjs.length}"
:disabled="!telemetryObjs.length"
@click="addCondition" @click="addCondition"
> >
<span class="c-cs-button__label">Add Condition</span> <span class="c-cs-button__label">Add Condition</span>
</button> </button>
</div>
<div class="c-c__condition-collection"> <div class="c-cs__conditions-h">
<ul class="c-c__container-holder"> <div v-for="(conditionIdentifier, index) in conditionCollection"
<li v-for="(conditionIdentifier, index) in conditionCollection"
:key="conditionIdentifier.key" :key="conditionIdentifier.key"
class="c-condition-h"
> >
<div v-if="isEditing" <div v-if="isEditing"
class="c-c__drag-ghost" class="c-c__drag-ghost"
@ -74,8 +74,7 @@
@cloneCondition="cloneCondition" @cloneCondition="cloneCondition"
@setMoveIndex="setMoveIndex" @setMoveIndex="setMoveIndex"
/> />
</li> </div>
</ul>
</div> </div>
</div> </div>
</section> </section>

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

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

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

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

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

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

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

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

@ -1,155 +1,89 @@
.c-cs-edit { .c-cs {
padding: 0; display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
&__content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow: hidden;
> * {
flex: 0 0 auto;
overflow: hidden;
+ * {
margin-top: $interiorMarginSm;
}
}
.c-button {
align-self: start;
}
}
.is-editing & {
// Add some space to kick away from blue editing border indication
padding: $interiorMargin;
} }
section { 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;
display: flex; display: flex;
justify-content: stretch; flex-direction: column;
align-items: center; overflow: hidden;
} }
.c-cs__ui__header-label { &__conditions-h {
display: inline-block;
width: 100%;
}
.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; display: flex;
align-items: center; flex-direction: column;
margin-left: 0.6em; flex: 1 1 auto;
} overflow: auto;
.checkbox.custom span { padding-right: $interiorMarginSm;
display: inline-block;
margin-left: 0.6em;
}
.t-test-data-config { > * + * {
margin-top: 5px; margin-top: $interiorMarginSm;
}
.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, &__conditions {
.c-cs__menu-hamburger, > * + * {
.c-cs__duplicate, margin-top: $interiorMarginSm;
.c-cs__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;
}
}
}
.c-cs__disclosure-triangle {
&:before {
content: $glyph-icon-arrow-right;
}
&--expanded {
&:before {
transform: rotate(90deg);
}
}
}
.c-cs__duplicate {
margin-right: 0.3em;
&:before {
content: $glyph-icon-duplicate;
} }
} }
.c-cs__trash { .hint {
&:before { padding: $interiorMarginSm;
content: $glyph-icon-trash; }
/************************** SPECIFIC ITEMS */
&__current-output-value {
font-size: 1.25em;
padding: $interiorMargin;
} }
} }
/***************************** 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;
}
}

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

@ -1,208 +1,111 @@
.widget-condition { .c-condition,
background-color: #eee; .c-test-datum {
margin: 0 0 0.33em; @include discreteItem();
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 {
display: flex; display: flex;
align-items: center; padding: $interiorMargin;
justify-content: stretch;
padding: 0.4em 0; &--edit {
line-height: 160%; // For layout when inputs wrap, like in criteria
}
} }
.title-bar span { .c-condition {
margin-right: 0.6em; flex-direction: column;
> * + * {
margin-top: $interiorMarginSm;
}
&--browse {
.c-condition__summary {
border-top: 1px solid $colorInteriorBorder;
padding-top: $interiorMargin;
}
} }
.title-bar span.c-c__duplicate, /***************************** HEADER */
.title-bar span.c-c__trash{ &__header {
margin-right: 0; display: flex;
margin-left: 0.3em; align-items: flex-start;
} align-content: stretch;
overflow: hidden;
.widget-condition > div { > * {
margin: 0 0.4em; flex: 0 0 auto;
+ * {
margin-left: $interiorMarginSm;
} }
}
.condition-name { }
&__name {
font-weight: bold; font-weight: bold;
align-self: baseline; // Fixes bold line-height offset problem
} }
.condition-summary .condition-description { &__output,
color: #999; &__summary {
flex: 1 1 auto;
}
} }
.condition-summary { /***************************** CONDITION DEFINITION, EDITING */
flex-grow: 1; .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;
&__criteria,
&__match-and-criteria {
display: contents;
} }
.condition-config { &__label {
padding: 0.3em 0; grid-column: 1;
}
.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; text-align: right;
line-height: 20px; white-space: nowrap;
} }
.l-compact-form ul li .controls input[type="text"], &__separator {
.l-compact-form ul li .controls input[type="search"], grid-column: 1 / span 3;
.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 { &__controls {
padding: 3px 0; display: flex;
} flex-wrap: wrap;
align-items: flex-start;
//line-height: 200%;
grid-column: 2;
> * > * {
.c-c__disclosure-triangle, margin-right: $interiorMarginSm;
.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;
}
} }
} }
.c-c__disclosure-triangle { &__buttons {
&:before { grid-column: 3;
content: $glyph-icon-arrow-right;
}
&--expanded {
&:before {
transform: rotate(90deg);
}
}
}
.c-c__menu-hamburger {
&:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
&:before {
content: $glyph-icon-menu-hamburger;
}
}
.c-c__duplicate {
&:before {
content: $glyph-icon-duplicate;
}
}
.c-c__trash {
&:before {
content: $glyph-icon-trash;
} }
} }
.c-c__drag-ghost { .c-c__drag-ghost {
width: 100%; width: 100%;
min-height: 0.33em; min-height: $interiorMarginSm;
//&:before {
// @include test();
// content: '';
// display: block;
// z-index: 2;
//}
&.dragging { &.dragging {
min-height: 2em; min-height: 5em;
border: solid 1px blue; //border: solid 1px blue;
background-color: lightblue; background-color: lightblue;
border-radius: 2px; 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 // States
$colorPausedBg: #ff9900; $colorPausedBg: #ff9900;
$colorPausedFg: #333; $colorPausedFg: #333;
$colorOk: #33cc33;
// Base variations // Base variations
$colorBodyBgSubtle: pullForward($colorBodyBg, 5%); $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 // Discrete items, like Notebook entries, Widget rules
$createBtnTextTransform: uppercase; $createBtnTextTransform: uppercase;
$colorDiscreteItemBg: rgba($colorBodyFg,0.1);
$colorDiscreteItemCurrentBg: rgba($colorOk,0.3);
@mixin discreteItem() { @mixin discreteItem() {
background: rgba($colorBodyFg,0.1); background: $colorDiscreteItemBg;
border: none; border: none;
border-radius: $controlCr; border-radius: $controlCr;
.c-input-inline:hover { .c-input-inline:hover {
background: $colorBodyBg; background: $colorBodyBg;
} }
&--current-match {
background: $colorDiscreteItemCurrentBg;
}
} }
@mixin discreteItemInnerElem() { @mixin discreteItemInnerElem() {

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

@ -125,7 +125,6 @@ $colorFilter: $colorFilterFg; // Standalone against $colorBodyBg
// States // States
$colorPausedBg: #ff9900; $colorPausedBg: #ff9900;
$colorPausedFg: #333; $colorPausedFg: #333;
$colorOk: #33cc33;
// Base variations // Base variations
$colorBodyBgSubtle: pullForward($colorBodyBg, 5%); $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 // Discrete items, like Notebook entries, Widget rules
$createBtnTextTransform: uppercase; $createBtnTextTransform: uppercase;
$colorDiscreteItemBg: rgba($colorBodyFg,0.1);
$colorDiscreteItemCurrentBg: rgba($colorOk,0.3);
@mixin discreteItem() { @mixin discreteItem() {
background: rgba($colorBodyFg,0.1); background: rgba($colorBodyFg,0.1);
border: none; border: none;
border-radius: $controlCr; border-radius: $controlCr;
.c-input-inline:hover { &--current-match {
background: $colorBodyBg; background: $colorDiscreteItemCurrentBg;
} }
} }

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

@ -121,7 +121,6 @@ $colorFilter: $colorFilterBg; // Standalone against $colorBodyBg
// States // States
$colorPausedBg: #ff9900; $colorPausedBg: #ff9900;
$colorPausedFg: #fff; $colorPausedFg: #fff;
$colorOk: #33cc33;
// Base variations // Base variations
$colorBodyBgSubtle: pullForward($colorBodyBg, 5%); $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 // Discrete items, like Notebook entries, Widget rules
$createBtnTextTransform: uppercase; $createBtnTextTransform: uppercase;
$colorDiscreteItemBg: rgba($colorBodyFg,0.1);
$colorDiscreteItemCurrentBg: rgba($colorOk,0.3);
@mixin discreteItem() { @mixin discreteItem() {
background: rgba($colorBodyFg,0.1); background: $colorDiscreteItemBg;
border: 1px solid $colorInteriorBorder; border: 1px solid $colorInteriorBorder;
border-radius: $controlCr; border-radius: $controlCr;
&--current-match {
background: $colorDiscreteItemCurrentBg;
}
.c-input-inline:hover { .c-input-inline:hover {
background: $colorBodyBg; background: $colorBodyBg;
} }

62
src/styles/_controls.scss
View File

@ -62,6 +62,11 @@ button {
background: $colorBtnBgHov; background: $colorBtnBgHov;
color: $colorBtnFgHov; color: $colorBtnFgHov;
} }
&:before {
content: $glyph-icon-arrow-down;
font-size: 1.1em;
}
} }
&.is-active { &.is-active {
@ -78,6 +83,20 @@ button {
/********* Icon Buttons and Links */ /********* Icon Buttons and Links */
.c-click-icon { .c-click-icon {
@include cClickIcon(); @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 { .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 */ /******************************************************** FORM ELEMENTS */
input, textarea { input, textarea {
font-family: inherit; font-family: inherit;
@ -621,6 +678,11 @@ select {
@include cToolbarSeparator(); @include cToolbarSeparator();
} }
.c-row-separator {
border-top: 1px solid $colorInteriorBorder;
height: 1px;
}
.c-toolbar { .c-toolbar {
> * + * { > * + * {
margin-left: 2px; margin-left: 2px;

3
src/styles/_status.scss
View File

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

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

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

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

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

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

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