Consolidate property control menu into own component

webapp/src/assets/less/variables.less

@@ -315,6 +315,12 @@
   cursor: pointer;
   color: @global-color;
 }
+
+.ofm-hidden-link.disabled{
+    cursor: default;
+    color: @global-muted-color;
+}
+
 .hook-inverse() {
     .ofm-hidden-link{
         color: @inverse-global-color;

webapp/src/components/genericComponents/iconButton.vue

@@ -1,9 +1,9 @@
 <template>
-  <a class="sync-button" @click.prevent="$emit('click')">
+  <a class="sync-button" :class="{ disabled: disabled }" @click.prevent="$emit('click')">
     <span class="material-symbols-outlined sync-icon">
       {{ icon }}
     </span>
-    <span v-if="showLabel" class="icon-label ofm-hidden-link">
+    <span v-if="showLabel" class="icon-label ofm-hidden-link" :class="{ disabled: disabled }">
       {{ label }}
     </span>
   </a>
@@ -16,7 +16,7 @@ export default {
   props: {
     icon: {
       type: String,
-      default: "sync",
+      default: "sync_alt",
     },
     showLabel: {
       type: Boolean,
@@ -26,6 +26,10 @@ export default {
       type: String,
       default: "",
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: ["click"],
@@ -44,15 +48,21 @@ export default {
   text-decoration: none !important;
 }
 
-.material-symbols-outlined.sync-icon {
+.sync-button.disabled {
-  color: #888;
+  cursor: default;
-  transition:
-    transform 0.3s ease,
-    color 0.3s ease;
 }
 
-.material-symbols-outlined.sync-icon:hover {
+.sync-button .material-symbols-outlined.sync-icon {
-  transform: rotate(-90deg);
+  color: #888;
+  transition: color 0.3s ease;
+}
+
+.sync-button.disabled .material-symbols-outlined.sync-icon {
+  color: #aaa;
+  transition: color 0.3s ease;
+}
+
+.sync-button:not(.disabled):hover .material-symbols-outlined.sync-icon {
   color: #c5247f;
   text-decoration: none !important;
 }

webapp/src/components/genericComponents/miniMenu.vue

@@ -56,7 +56,7 @@ export default {
   border: 1px solid #ccc;
   border-radius: 4px;
   max-height: 250px;
-  width: 200px;
+  width: 180px;
   overflow-y: auto;
   z-index: 1000;
   padding-top: 5px;

webapp/src/components/labThingsComponents/inputFromSchema.vue

@@ -14,30 +14,11 @@
             {{ display }}
           </option>
         </select>
-        <mini-menu v-slot="{ close }">
+        <property-control-menu
-          <p>
+          :can-reset="isChangedFomDefault"
-            <icon-button
+          @reset-default="resetDefault"
-              icon="refresh"
+          @request-update="requestUpdate"
-              :show-label="true"
+        />
-              label="Reset to default"
-              @click="
-                resetDefault();
-                close();
-              "
-            />
-          </p>
-          <p>
-            <icon-button
-              icon="sync"
-              :show-label="true"
-              label="Re-sync value"
-              @click="
-                requestUpdate;
-                close();
-              "
-            />
-          </p>
-        </mini-menu>
       </div>
     </label>
     <label v-if="!useDropdown && dataType == 'number'">
@@ -69,30 +50,11 @@
             </button>
           </div>
         </div>
-        <mini-menu v-slot="{ close }">
+        <property-control-menu
-          <p>
+          :can-reset="isChangedFomDefault"
-            <icon-button
+          @reset-default="resetDefault"
-              icon="refresh"
+          @request-update="requestUpdate"
-              :show-label="true"
+        />
-              label="Reset to default"
-              @click="
-                resetDefault();
-                close();
-              "
-            />
-          </p>
-          <p>
-            <icon-button
-              icon="sync"
-              :show-label="true"
-              label="Re-sync value"
-              @click="
-                requestUpdate;
-                close();
-              "
-            />
-          </p>
-        </mini-menu>
       </div>
     </label>
     <div v-if="!useDropdown && dataType == 'boolean'" class="input-and-buttons-container">
@@ -109,30 +71,11 @@
           {{ label }}
         </span>
       </label>
-      <mini-menu v-slot="{ close }">
+      <property-control-menu
-        <p>
+        :can-reset="isChangedFomDefault"
-          <icon-button
+        @reset-default="resetDefault"
-            icon="refresh"
+        @request-update="requestUpdate"
-            :show-label="true"
+      />
-            label="Reset to default"
-            @click="
-              resetDefault();
-              close();
-            "
-          />
-        </p>
-        <p>
-          <icon-button
-            icon="sync"
-            :show-label="true"
-            label="Re-sync value"
-            @click="
-              requestUpdate;
-              close();
-            "
-          />
-        </p>
-      </mini-menu>
     </div>
     <label v-if="!useDropdown && dataType == 'number_array'">
       <span class="uk-form-label" :class="{ 'ofm-highlighted-label': isChangedFomDefault }">
@@ -152,30 +95,11 @@
           @keydown="keyDown"
           @animationend="animationEnd"
         />
-        <mini-menu v-slot="{ close }">
+        <property-control-menu
-          <p>
+          :can-reset="isChangedFomDefault"
-            <icon-button
+          @reset-default="resetDefault"
-              icon="refresh"
+          @request-update="requestUpdate"
-              :show-label="true"
+        />
-              label="Reset to default"
-              @click="
-                resetDefault();
-                close();
-              "
-            />
-          </p>
-          <p>
-            <icon-button
-              icon="sync"
-              :show-label="true"
-              label="Re-sync value"
-              @click="
-                requestUpdate;
-                close();
-              "
-            />
-          </p>
-        </mini-menu>
       </div>
     </label>
     <label v-if="!useDropdown && dataType == 'number_object'">
@@ -196,30 +120,11 @@
             @keydown="keyDown"
             @animationend="animationEnd"
           />
-          <mini-menu v-slot="{ close }">
+          <property-control-menu
-            <p>
+            :can-reset="isChangedFomDefault"
-              <icon-button
+            @reset-default="resetDefault"
-                icon="refresh"
+            @request-update="requestUpdate"
-                :show-label="true"
+          />
-                label="Reset to default"
-                @click="
-                  resetDefault();
-                  close();
-                "
-              />
-            </p>
-            <p>
-              <icon-button
-                icon="sync"
-                :show-label="true"
-                label="Re-sync value"
-                @click="
-                  requestUpdate;
-                  close();
-                "
-              />
-            </p>
-          </mini-menu>
         </div>
       </div>
     </label>
@@ -238,30 +143,11 @@
           @keydown="keyDown"
           @animationend="animationEnd"
         />
-        <mini-menu v-slot="{ close }">
+        <property-control-menu
-          <p>
+          :can-reset="isChangedFomDefault"
-            <icon-button
+          @reset-default="resetDefault"
-              icon="refresh"
+          @request-update="requestUpdate"
-              :show-label="true"
+        />
-              label="Reset to default"
-              @click="
-                resetDefault();
-                close();
-              "
-            />
-          </p>
-          <p>
-            <icon-button
-              icon="sync"
-              :show-label="true"
-              label="Re-sync value"
-              @click="
-                requestUpdate;
-                close();
-              "
-            />
-          </p>
-        </mini-menu>
       </div>
     </label>
     <label v-if="!useDropdown && dataType == 'other'">
@@ -281,15 +167,13 @@
 </template>
 
 <script>
-import iconButton from "@/components/genericComponents/iconButton.vue";
+import PropertyControlMenu from "./propertyControlMenu.vue";
-import MiniMenu from "@/components/genericComponents/miniMenu.vue";
 
 export default {
   name: "InputFromSchema",
 
   components: {
-    iconButton,
+    PropertyControlMenu,
-    MiniMenu,
   },
   props: {
     dataSchema: {
@@ -322,7 +206,7 @@ export default {
     },
   },
 
-  emits: ["requestUpdate", "resetDefault", "sendValue", "animationShown"],
+  emits: ["requestUpdate", "sendValue", "animationShown"],
 
   compatConfig: { COMPONENT_V_MODEL: false },
 

webapp/src/components/labThingsComponents/propertyControlMenu.vue

@@ -0,0 +1,48 @@
+<template>
+  <mini-menu v-slot="{ close }">
+    <p>
+      <icon-button
+        icon="refresh"
+        :show-label="true"
+        label="Reset to default"
+        :disabled="!canReset"
+        @click="
+          $emit('reset-default');
+          close();
+        "
+      />
+    </p>
+    <p>
+      <icon-button
+        icon="sync_alt"
+        :show-label="true"
+        label="Re-sync value"
+        @click="
+          $emit('request-update');
+          close();
+        "
+      />
+    </p>
+  </mini-menu>
+</template>
+<script>
+import iconButton from "@/components/genericComponents/iconButton.vue";
+import MiniMenu from "@/components/genericComponents/miniMenu.vue";
+
+export default {
+  name: "PropertyControlMenu",
+
+  components: {
+    iconButton,
+    MiniMenu,
+  },
+
+  props: {
+    canReset: {
+      type: Boolean,
+      default: null,
+    },
+  },
+  emits: ["request-update", "reset-default"],
+};
+</script>

webapp/src/components/tabContentComponents/controlComponents/positionControl.vue

@@ -22,7 +22,7 @@ and zero position buttons. It also includes the d-pad.
                 type="number"
                 @keyup.enter="startMoveTask"
               />
-              <icon-button icon="sync" @click="updatePosition" />
+              <icon-button icon="sync_alt" @click="updatePosition" />
             </div>
             <p>
               <action-button