css fixes and add any/all control

This commit is contained in:
Joel McKinnon 2020-01-16 09:13:43 -08:00
parent 82f175f6c7
commit fa0a54eee7
2 changed files with 62 additions and 44 deletions

View File

@ -34,7 +34,7 @@
<div class="c-sw-rule">
<div class="c-sw-rule__ui l-compact-form l-widget-rule has-local-controls">
<div>
<ul>
<ul class="t-widget-rule-config">
<li>
<label>Condition Name</label>
<span class="controls">
@ -53,39 +53,59 @@
</select>
</span>
</li>
<li v-if="telemetryObject && telemetryMetadata">
<label>when</label>
<span class="controls">
<select class="">
<option value="">- Select Telemetry -</option>
<option :value="telemetryObject.key">{{ telemetryObject.name }}</option>
</select>
</span>
<span class="controls">
<select v-model="selectedMetaDataKey">
<option value="">- Select Field -</option>
<option v-for="option in telemetryMetadata"
:key="option.key"
:value="option.key"
>
{{ option.name }}
</option>
</select>
</span>
<span class="controls">
<select v-model="selectedOperationKey">
<option value="">- Select Comparison -</option>
<option v-for="option in operations"
:key="option.name"
:value="option.name"
>
{{ option.text }}
</option>
</select>
</span>
</li>
</ul>
<div v-if="!condition.isDefault"
class="widget-rule-content expanded"
>
<ul class="t-widget-rule-config">
<li class="has-local-controls t-condition">
<label>Match when</label>
<span class="controls">
<select>
<option value="all">All criteria are met</option>
<option value="any">Any criteria are met</option>
</select>
</span>
</li>
</ul>
<ul class="t-widget-rule-config">
<li v-if="telemetryObject && telemetryMetadata"
class="has-local-controls t-condition"
>
<label>when</label>
<span class="t-configuration">
<span class="controls">
<select class="">
<option value="">- Select Telemetry -</option>
<option :value="telemetryObject.key">{{ telemetryObject.name }}</option>
</select>
</span>
<span class="controls">
<select v-model="selectedMetaDataKey">
<option value="">- Select Field -</option>
<option v-for="option in telemetryMetadata"
:key="option.key"
:value="option.key"
>
{{ option.name }}
</option>
</select>
</span>
<span class="controls">
<select v-model="selectedOperationKey">
<option value="">- Select Comparison -</option>
<option v-for="option in operations"
:key="option.name"
:value="option.name"
>
{{ option.text }}
</option>
</select>
</span>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>

View File

@ -57,35 +57,33 @@
padding: 0;
}
.l-compact-form ul li {
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;
padding: 2px;
}
.l-compact-form ul li .controls {
line-height: 20px;
min-height: 20px;
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 {
flex-grow: inherit;
}
.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"],