rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add visual feedback that properties have changed from default

Browse source
This commit is contained in:
Julian Stirling 2026-07-01 12:17:19 +01:00
parent 6ae8f8d970
commit ace42bcf2e
2 changed files with 64 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

18
webapp/src/assets/less/variables.less
View file

@ -15,6 +15,8 @@
@darkened-primary-color: darken(@global-primary-background, 15%);
@inverse-global-color: fade(@global-inverse-color, 80%);
@very-light-primary-color: lighten(@global-primary-background, 40%);
@global-border: #d5d5d5;
// UIkit
@ -265,6 +267,22 @@
}
}
/*
* Text
*/
// A text label for an input control that is highlighted
.ofm-highlighted-label {
color: @darkened-primary-color;
font-weight: 500;
}
.hook-inverse() {
.ofm-highlighted-label{
color: @very-light-primary-color;
}
}
/*
* Links

58
webapp/src/components/labThingsComponents/inputFromSchema.vue
View file

@ -1,6 +1,10 @@
<template>
<div>
<label v-if="useDropdown" class="uk-form-label">
<label
v-if="useDropdown"
class="uk-form-label"
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
>
{{ label }}
<div class="input-and-buttons-container">
<select
@ -15,8 +19,12 @@
<sync-property-button @click="requestUpdate" />
</div>
</label>
<label v-if="!useDropdown && dataType == 'number'" class="uk-form-label"
>{{ label }}
<label
v-if="!useDropdown && dataType == 'number'"
class="uk-form-label"
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
>
{{ label }}
<div class="input-and-buttons-container">
<div class="uk-inline number-wrapper">
<input
@ -46,7 +54,10 @@
</div>
</label>
<div v-if="!useDropdown && dataType == 'boolean'" class="input-and-buttons-container">
<label class="uk-form-label property-input">
<label
class="uk-form-label property-input"
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
>
<input
ref="checkbox"
v-model="internalValue"
@ -59,8 +70,12 @@
</label>
<sync-property-button @click="requestUpdate" />
</div>
<label v-if="!useDropdown && dataType == 'number_array'" class="uk-form-label"
>{{ label }}
<label
v-if="!useDropdown && dataType == 'number_array'"
class="uk-form-label"
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
>
{{ label }}
<div class="input-and-buttons-container">
<input
v-for="i in valueLength"
@ -78,8 +93,12 @@
<sync-property-button @click="requestUpdate" />
</div>
</label>
<label v-if="!useDropdown && dataType == 'number_object'" class="uk-form-label"
>{{ label }}
<label
v-if="!useDropdown && dataType == 'number_object'"
class="uk-form-label"
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
>
{{ label }}
<div v-for="(val, key) in modelValue" :key="key">
<label>{{ internalLabels[key] }}</label>
<div class="input-and-buttons-container">
@ -98,8 +117,12 @@
</div>
</div>
</label>
<label v-if="!useDropdown && dataType == 'string'" class="uk-form-label"
>{{ label }}
<label
v-if="!useDropdown && dataType == 'string'"
class="uk-form-label"
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
>
{{ label }}
<div class="input-and-buttons-container">
<input
v-model="internalValue"
@ -114,8 +137,12 @@
<sync-property-button @click="requestUpdate" />
</div>
</label>
<label v-if="!useDropdown && dataType == 'other'" class="uk-form-label"
>{{ label }}
<label
v-if="!useDropdown && dataType == 'other'"
class="uk-form-label"
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
>
{{ label }}
<div class="input-and-buttons-container">
<input
v-model="internalValue"
@ -267,6 +294,13 @@ export default {
if (this.dataType !== "number") return undefined;
return this.dataSchema.minimum;
},
/**
* Is changed from default (or has no default set)
*/
isChangedFomDefault() {
if (this.dataSchema.default === undefined) return false;
return this.dataSchema.default !== this.modelValue;
},
/**
* The step size for numerical spinners.
*