From a9fdb6fd5229ff0d8ab1926ffed9a1d824842afe Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Fri, 15 Dec 2023 00:00:02 +0000
Subject: [PATCH] Update position controls to resemble propertyControl

I've simplified the HTML template and added a refresh button.
---
 .../navigateComponents/paneNavigate.vue       | 86 ++++++++++---------
 1 file changed, 44 insertions(+), 42 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
index 5160f0f6..7a2975d6 100644
--- a/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
+++ b/webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
@@ -80,50 +80,21 @@
         <li class="uk-open">
           <a class="uk-accordion-title" href="#">Move-to</a>
           <div class="uk-accordion-content">
-            <form @submit.prevent="handleSubmit">
+            <form>
               <!-- Text boxes to set and view position -->
-
-              <div class="uk-grid-small uk-child-width-1-3" uk-grid>
-                <div>
-                  <label class="uk-form-label" for="form-stacked-text">x</label>
-                  <div class="uk-form-controls">
-                    <input
-                      v-model="setPosition.x"
-                      class="uk-input uk-form-small"
-                      type="number"
-                      name="inputPositionX"
-                      @keyup.enter="startMoveTask"
-                    />
-                  </div>
-                </div>
-
-                <div>
-                  <label class="uk-form-label" for="form-stacked-text">y</label>
-                  <div class="uk-form-controls">
-                    <input
-                      v-model="setPosition.y"
-                      class="uk-input uk-form-small"
-                      type="number"
-                      name="inputPositionY"
-                      @keyup.enter="startMoveTask"
-                    />
-                  </div>
-                </div>
-
-                <div>
-                  <label class="uk-form-label" for="form-stacked-text">z</label>
-                  <div class="uk-form-controls">
-                    <input
-                      v-model="setPosition.z"
-                      class="uk-input uk-form-small"
-                      type="number"
-                      name="inputPositionZx"
-                      @keyup.enter="startMoveTask"
-                    />
-                  </div>
-                </div>
+              <div class="input-and-buttons-container">
+                <input
+                  v-for="(_v, key) in setPosition"
+                  :key="`setPosition_${key}`"
+                  v-model="setPosition[key]"
+                  class="uk-form-small numeric-setting-line-input"
+                  type="number"
+                  @keyup.enter="startMoveTask"
+                />
+                <a class="button-next-to-input" @click="updatePosition">
+                  <i class="material-icons">refresh</i>
+                </a>
               </div>
-
               <p>
                 <taskSubmitter
                   ref="moveTaskSubmitter"
@@ -407,3 +378,34 @@ export default {
   }
 };
 </script>
+
+
+<style scoped>
+.input-and-buttons-container {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-content: stretch;
+  align-items: center;
+  width: 100%;
+}
+.numeric-setting-line-input {
+  flex-grow: 1;
+  margin-left: 5px;
+  margin-right: 5px;
+  width: 3em;
+}
+/* Chrome, Safari, Edge, Opera */
+.numeric-setting-line-input::-webkit-outer-spin-button,
+.numeric-setting-line-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.button-next-to-input {
+  flex-grow: 0;
+  padding-left: 5px;
+  padding-right: 5px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+</style>