Add visual feedback that properties have changed from default

webapp/src/assets/less/variables.less

@@ -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

webapp/src/components/labThingsComponents/inputFromSchema.vue

@@ -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.
      *