Skip to content

Commit

Permalink
Closes #7823
Browse files Browse the repository at this point in the history 
- Markup/CSS sanding and shimming for derived telemetry front-end.
- Toggle switch CSS improved to use `gap` instead of left margin.
  • Loading branch information
@charlesh88
charlesh88 committed Nov 14, 2024
1 parent f19d7a8 commit 402d951
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 63 deletions.
129 changes: 74 additions & 55 deletions src/plugins/comps/components/CompsView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,55 +53,68 @@
</div>
</div>

<div :class="['c-comps__refs-controls c-cdef__controls', { disabled: !parameters?.length }]">
<label v-if="isEditing" class="c-toggle-switch">
<div
v-if="isEditing"
class="c-comps__apply-test-data-control"
:class="['c-comps__refs-controls c-cdef__controls', { disabled: !parameters?.length }]"
>
<label class="c-toggle-switch">
<input type="checkbox" :checked="testDataApplied" @change="toggleTestData" />
<span class="c-toggle-switch__slider" aria-label="Apply Test Data"></span>
<span class="c-toggle-switch__label">Apply Test Values</span>
</label>
</div>
<div class="c-comps__refs">
<div v-for="parameter in parameters" :key="parameter.keyString" class="c-comps__ref">
<span class="c-test-datum__string">Reference</span>
<input
v-if="isEditing"
v-model="parameter.name"
:aria-label="`Reference Name Input for ${parameter.name}`"
type="text"
class="c-input--md"
@change="updateParameters"
/>
<div v-else class="--em">{{ parameter.name }}</div>
<span class="c-test-datum__string">=</span>
<span
class="c-comps__path-and-field"
:aria-label="`Reference ${parameter.name} Object Path`"
>
<ObjectPathString
:domain-object="compsManager.getTelemetryObjectForParameter(parameter.keyString)"
:show-object-itself="true"
class="--em"
/>
<!-- drop down to select value from telemetry -->
<select v-if="isEditing" v-model="parameter.valueToUse" @change="updateParameters">
<option
v-for="parameterValueOption in compsManager.getMetaDataValuesForParameter(
parameter.keyString
)"
:key="parameterValueOption.key"
:value="parameterValueOption.key"
<div class="c-comps__ref-section">
<div class="c-comps__ref-sub-section ref-and-path">
<span class="c-test-datum__string">Reference</span>
<input
v-if="isEditing"
v-model="parameter.name"
:aria-label="`Reference Name Input for ${parameter.name}`"
type="text"
class="c-input--md"
@change="updateParameters"
/>
<div v-else class="--em">{{ parameter.name }}</div>
<span class="c-test-datum__string">=</span>
<span
class="c-comps__path-and-field"
:aria-label="`Reference ${parameter.name} Object Path`"
>
{{ parameterValueOption.name }}
</option>
</select>
<div v-else>{{ parameter.valueToUse }}</div>
<ObjectPathString
:domain-object="compsManager.getTelemetryObjectForParameter(parameter.keyString)"
:show-object-itself="true"
class="c-comp__ref-path --em"
/>
<!-- drop down to select value from telemetry -->
<select
v-if="isEditing"
v-model="parameter.valueToUse"
class="c-comp__ref-field"
@change="updateParameters"
>
<option
v-for="parameterValueOption in compsManager.getMetaDataValuesForParameter(
parameter.keyString
)"
:key="parameterValueOption.key"
:value="parameterValueOption.key"
>
{{ parameterValueOption.name }}
</option>
</select>
<div v-else class="c-comp__ref-field">{{ parameter.valueToUse }}</div>
</span>
</div>
<div
:class="[
'c-comps__refs-controls c-cdef__controls',
{ disabled: !parameters?.length }
]"
v-if="isEditing"
class="c-comps__ref-sub-section accum-vals"
:class="['c-comps__refs-controls', { disabled: !parameters?.length }]"
>
<label v-if="isEditing" class="c-toggle-switch">
<label class="c-toggle-switch">
<span class="c-toggle-switch__label">Accumulate Values</span>
<input
v-model="parameter.accumulateValues"
Expand All @@ -113,33 +126,39 @@
aria-label="Toggle Parameter Accumulation"
></span>
</label>
<div v-if="!isEditing && parameter.accumulateValues">
- accumulating values with sample size {{ parameter.sampleSize }}
</div>
<span v-if="isEditing && parameter.accumulateValues" class="c-test-datum__string"
<span v-if="isEditing && parameter.accumulateValues" class="c-comps__label"
>Sample Size</span
>
<input
v-if="isEditing && parameter.accumulateValues"
v-model="parameter.sampleSize"
:aria-label="`Sample Size for ${parameter.name}`"
type="number"
class="c-input--md"
class="c-input--sm c-comps__value"
@change="updateParameters"
/>
</div>
</span>
<span v-if="isEditing" class="c-test-datum__string">Test value</span>
<input
v-if="isEditing"
v-model="parameter.testValue"
:aria-label="`Reference Test Value for ${parameter.name}`"
type="text"
class="c-input--md"
@change="updateTestValue(parameter)"
/>
<div
v-if="!isEditing && parameter.accumulateValues"
class="c-comps__ref-sub-section accum-vals"
>
Accumulating values with sample size {{ parameter.sampleSize }}
</div>
</div>
<div v-if="isEditing" class="c-comps__ref-section">
<span class="c-comps__label">Test value</span>
<input
v-if="isEditing"
v-model="parameter.testValue"
:aria-label="`Reference Test Value for ${parameter.name}`"
type="text"
class="c-input--md c-comps__value"
@change="updateTestValue(parameter)"
/>
</div>
</div>
</div>
</section>
Expand Down
55 changes: 48 additions & 7 deletions src/plugins/comps/components/comps.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,25 +56,68 @@
gap: $interiorMarginSm;
}


&__apply-test-data-control {
padding: $interiorMargin 0;
}

&__refs {

}

&__ref {
@include discreteItem();
display: grid;
gap: $interiorMargin;
grid-template-columns: max-content max-content min-content 1fr;
padding: $interiorMargin;
align-items: start;
display: flex;
flex-direction: column;
padding: 0 $interiorMargin;
line-height: 170%; // Aligns text with controls like selects

> * + * {
border-top: 1px solid $colorInteriorBorder;
}
}

&__ref-section {
align-items: baseline;
display: flex;
flex-wrap: wrap;
gap: $interiorMargin;
padding: $interiorMargin 0;
width: 100%;
}

&__ref-sub-section {
align-items: baseline;
display: flex;
flex: 1 1 auto;
gap: $interiorMargin;

&.ref-and-path {
flex: 0 1 auto;
flex-wrap: wrap;
}
}

&__path-and-field {
align-items: start;
display: flex;
flex-wrap: wrap;
gap: $interiorMargin;

.c-comp__ref-path {
word-break: break-all;
}
}

&__label,
&__value {
white-space: nowrap;
}

&__expression {
*[class*=value] {
font-family: monospace;
//font-size: 1.1em;
resize: vertical; // Only applies to textarea
}
div[class*=value] {
Expand All @@ -87,7 +130,6 @@
border-radius: $basicCr;
display: flex; // Creates hanging indent from :before icon
padding: $interiorMarginSm $interiorMarginLg $interiorMarginSm $interiorMargin;
//text-wrap: normal;
max-width: max-content;

&:before {
Expand All @@ -107,6 +149,5 @@

.--em {
color: $colorBodyFgEm;
//font-weight: bold;
}
}
2 changes: 1 addition & 1 deletion src/ui/components/toggle-switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
.c-toggle-switch {
cursor: pointer;
display: inline-flex;
gap: $interiorMarginSm;
align-items: center;
vertical-align: middle;

Expand Down Expand Up @@ -55,7 +56,6 @@
}

&__label {
margin-left: $interiorMarginSm;
white-space: nowrap;
}

Expand Down

0 comments on commit 402d951

Please sign in to comment.