mirror of
https://github.com/nasa/openmct.git
synced 2025-03-24 13:05:35 +00:00
WIP: all condition set UI elements in place except condition form elements
This commit is contained in:
Joel McKinnon
parent
de466000a0
commit
e5d8f60cdb
@ -4,7 +4,11 @@
|
||||
:class="['widget-condition', { 'widget-condition--current': isCurrent }]"
|
||||
>
|
||||
<div class="title-bar">
|
||||
<span class="is-enabled c-c__menu-hamburger"></span>
|
||||
<span
|
||||
class="c-c__menu-hamburger"
|
||||
:class="{ 'is-enabled': !isDefault }"
|
||||
@click="expanded = !expanded"
|
||||
></span>
|
||||
<span
|
||||
class="is-enabled flex-elem"
|
||||
:class="['c-c__disclosure-triangle', { 'c-c__disclosure-triangle--expanded': expanded }]"
|
||||
@ -31,7 +35,9 @@
|
||||
<span class="is-enabled c-c__duplicate"></span>
|
||||
<span class="is-enabled c-c__trash"></span>
|
||||
</div>
|
||||
<div class="condition-config">
|
||||
<div v-if="expanded"
|
||||
class="condition-config-edit"
|
||||
>
|
||||
[form stuff]
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -15,41 +15,56 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
padding: 0.4em 0;
|
||||
}
|
||||
|
||||
.title-bar span {
|
||||
margin-right: 3px;
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
|
||||
.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.6em;
|
||||
margin: 0 0.4em;
|
||||
}
|
||||
|
||||
.widget-condition .condition-name {
|
||||
.condition-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.widget-condition .condition-output {
|
||||
.condition-output {
|
||||
color: #7C7D80;
|
||||
}
|
||||
|
||||
.widget-condition .condition-summary {
|
||||
.condition-summary {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.condition-config {
|
||||
padding: 0.6em 0;
|
||||
}
|
||||
|
||||
.c-c__disclosure-triangle {
|
||||
.condition-config-edit {
|
||||
border-top: solid 1px #ccc;
|
||||
padding: 0.6em 0;
|
||||
}
|
||||
|
||||
.c-c__disclosure-triangle,
|
||||
.c-c__menu-hamburger,
|
||||
.c-c__duplicate,
|
||||
.c-c__trash {
|
||||
$d: 8px;
|
||||
color: $colorDisclosureCtrl;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
width: $d;
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
|
||||
&.is-enabled {
|
||||
cursor: pointer;
|
||||
visibility: visible;
|
||||
|
||||
&:hover {
|
||||
color: $colorDisclosureCtrlHov;
|
||||
@ -57,84 +72,39 @@
|
||||
|
||||
&:before {
|
||||
$s: .5;
|
||||
content: $glyph-icon-arrow-down;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1rem * $s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-c__disclosure-triangle {
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-down;
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
&:before {
|
||||
transform: rotate(0deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-c__menu-hamburger {
|
||||
$d: 8px;
|
||||
color: $colorDisclosureCtrl;
|
||||
width: $d;
|
||||
|
||||
&.is-enabled {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $colorDisclosureCtrlHov;
|
||||
}
|
||||
|
||||
&:before {
|
||||
$s: .5;
|
||||
content: $glyph-icon-menu-hamburger;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1rem * $s;
|
||||
}
|
||||
&:before {
|
||||
content: $glyph-icon-menu-hamburger;
|
||||
}
|
||||
}
|
||||
|
||||
.c-c__duplicate {
|
||||
$d: 8px;
|
||||
color: $colorDisclosureCtrl;
|
||||
width: $d;
|
||||
|
||||
&.is-enabled {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $colorDisclosureCtrlHov;
|
||||
}
|
||||
|
||||
&:before {
|
||||
$s: .5;
|
||||
content: $glyph-icon-duplicate;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1rem * $s;
|
||||
}
|
||||
&:before {
|
||||
content: $glyph-icon-duplicate;
|
||||
}
|
||||
}
|
||||
|
||||
.c-c__trash {
|
||||
$d: 8px;
|
||||
color: $colorDisclosureCtrl;
|
||||
width: $d;
|
||||
|
||||
&.is-enabled {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $colorDisclosureCtrlHov;
|
||||
}
|
||||
|
||||
&:before {
|
||||
$s: .5;
|
||||
content: $glyph-icon-trash;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1rem * $s;
|
||||
}
|
||||
&:before {
|
||||
content: $glyph-icon-trash;
|
||||
}
|
||||
}
|
||||
|
||||
// $glyph-icon-grippy
|
||||
|
||||
@ -22,9 +22,9 @@
|
||||
<button
|
||||
v-show="isEditing"
|
||||
id="addCondition"
|
||||
class="c-button c-button--major add-condition-button"
|
||||
class="c-cs-button c-cs-button--major add-condition-button"
|
||||
>
|
||||
<span class="c-button__label">Add Condition</span>
|
||||
<span class="c-cs-button__label">Add Condition</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="isEditing">
|
||||
|
||||
@ -22,20 +22,28 @@
|
||||
</label>
|
||||
<div class="t-test-data-config">
|
||||
<div class="c-cs-editui__conditions widget-condition">
|
||||
<label>
|
||||
<span>Set</span>
|
||||
<select>
|
||||
<option>- Select Input -</option>
|
||||
</select>
|
||||
</label>
|
||||
<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">
|
||||
<label>
|
||||
<span>Set</span>
|
||||
<select>
|
||||
<option>- Select Input -</option>
|
||||
</select>
|
||||
</label>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,17 +23,12 @@ section {
|
||||
}
|
||||
|
||||
.c-cs__ui_content {
|
||||
font-size: 0.8em;
|
||||
margin: 0.3em 0.3em 0 0.3em;
|
||||
}
|
||||
|
||||
.c-cs__ui_content label,
|
||||
.c-cs__ui_content div {
|
||||
padding: 0.4em 0;
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
.c-cs__ui_content .help {
|
||||
font-style: italic;
|
||||
padding: 0.4em 0;
|
||||
}
|
||||
|
||||
.current-output {
|
||||
@ -52,30 +47,47 @@ section {
|
||||
margin-left: 0.6em;
|
||||
}
|
||||
|
||||
.c-button[class*="--major"],
|
||||
.c-button[class*='is-active'],
|
||||
.c-button--menu[class*="--major"],
|
||||
.c-button--menu[class*='is-active'] {
|
||||
border: #0B427C;
|
||||
background-color: #4779A4;
|
||||
padding: 0.3em 0.6em;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
color: #D5D5D5;
|
||||
.t-test-data-config {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.c-cs__disclosure-triangle {
|
||||
$d: 8px;
|
||||
color: $colorDisclosureCtrl;
|
||||
.widget-condition form {
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.widget-condition form label {
|
||||
flex-grow: 1;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.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 1.5px #0B427C;
|
||||
background-color: #4778A3;
|
||||
padding: 0.2em 0.6em;
|
||||
margin: 0.4em;
|
||||
font-weight: bold;
|
||||
color: #eee;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.c-cs__disclosure-triangle,
|
||||
.c-cs__menu-hamburger,
|
||||
.c-cs__duplicate,
|
||||
.c-cs__trash {
|
||||
$d: 8px;
|
||||
color: $colorDisclosureCtrl;
|
||||
width: $d;
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
|
||||
&.is-enabled {
|
||||
cursor: pointer;
|
||||
visibility: visible;
|
||||
|
||||
&:hover {
|
||||
color: $colorDisclosureCtrlHov;
|
||||
@ -83,12 +95,17 @@ section {
|
||||
|
||||
&:before {
|
||||
$s: .5;
|
||||
content: $glyph-icon-arrow-down;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1rem * $s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-cs__disclosure-triangle {
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-down;
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
&:before {
|
||||
@ -96,3 +113,17 @@ section {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-cs__duplicate {
|
||||
margin-right: 0.3em;
|
||||
&:before {
|
||||
content: $glyph-icon-duplicate;
|
||||
}
|
||||
}
|
||||
|
||||
.c-cs__trash {
|
||||
&:before {
|
||||
content: $glyph-icon-trash;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user