ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-30 09:58:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

WIP: all condition set UI elements in place - started condition form elements

Browse Source
This commit is contained in:
Joel McKinnon 2020-01-02 12:59:32 -08:00
parent e5d8f60cdb
commit 8452455050
3 changed files with 93 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/plugins/condition/components/ConditionEdit.vue
View File

@ -36,9 +36,36 @@
<span class="is-enabled c-c__trash"></span>
</div>
<div v-if="expanded"
class="condition-config-edit"
class="condition-config-edit widget-rule-content c-sw-editui__rules-wrapper holder widget-rules-wrapper flex-elem expanded"
>
[form stuff]
<div id="ruleArea"
class="c-sw-editui__rules widget-rules"
>
<div class="c-sw-rule">
<div class="c-sw-rule__ui l-compact-form l-widget-rule has-local-controls">
<div>
<ul>
<li>
<label>Condition Name</label>
<span class="controls">
<input class="t-rule-name-input"
type="text"
>
</span>
</li>
<li>
<label>Output</label>
<span class="controls">
<select class="">
<option value="false">false</option>
</select>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

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

@ -36,8 +36,8 @@
font-weight: bold;
}
.condition-output {
color: #7C7D80;
.condition-summary .condition-description {
color: #999;
}
.condition-summary {
@ -45,14 +45,56 @@
}
.condition-config {
padding: 0.6em 0;
padding: 0.3em 0;
}
.widget-condition form label {
flex-grow: 1;
margin-left: 0;
}
.l-widget-rule {
padding: 0;
}
.widget-rule-content.expanded {
margin: 0 3px;
}
.widget-rule-content.expanded ul {
border-top: solid 1px #ccc;
padding: 5px;
}
.l-compact-form ul li {
padding: 1px 0;
}
.l-compact-form ul li .controls {
line-height: 20px;
min-height: 20px;
}
.l-compact-form ul li > label {
display: block;
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 {
border-top: solid 1px #ccc;
padding: 0.6em 0;
padding: 3px 0;
}
.c-c__disclosure-triangle,
.c-c__menu-hamburger,
.c-c__duplicate,
@ -81,12 +123,12 @@
.c-c__disclosure-triangle {
&:before {
content: $glyph-icon-arrow-down;
content: $glyph-icon-arrow-right;
}
&--expanded {
&:before {
transform: rotate(180deg);
transform: rotate(90deg);
}
}
}

17
src/plugins/conditionSet/components/condition-set.scss
View File

@ -15,6 +15,7 @@ section {
color: #7C7D80;
display: flex;
justify-content: stretch;
align-items: center;
}
.c-cs__ui__header-label {
@ -37,6 +38,14 @@ section {
margin: 0.4em 0.6em;
}
.condition-output {
color: #999;
}
.condition-description {
color: #333;
}
.checkbox.custom {
display: flex;
align-items: center;
@ -63,6 +72,10 @@ section {
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"],
@ -104,12 +117,12 @@ section {
.c-cs__disclosure-triangle {
&:before {
content: $glyph-icon-arrow-down;
content: $glyph-icon-arrow-right;
}
&--expanded {
&:before {
transform: rotate(180deg);
transform: rotate(90deg);
}
}
}