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

Update position controls to resemble propertyControl

Browse source 
I've simplified the HTML template and added a refresh button.
This commit is contained in:
Richard Bowman 2023-12-15 00:00:02 +00:00
parent 30deedde9e
commit a9fdb6fd52
1 changed files with 44 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

86
webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
View file

@ -80,50 +80,21 @@
<li class="uk-open"> <li class="uk-open">
<a class="uk-accordion-title" href="#">Move-to</a> <a class="uk-accordion-title" href="#">Move-to</a>
<div class="uk-accordion-content"> <div class="uk-accordion-content">
<form @submit.prevent="handleSubmit"> <form>
<!-- Text boxes to set and view position --> <!-- Text boxes to set and view position -->
<div class="input-and-buttons-container">
<div class="uk-grid-small uk-child-width-1-3" uk-grid> <input
<div> v-for="(_v, key) in setPosition"
<label class="uk-form-label" for="form-stacked-text">x</label> :key="`setPosition_${key}`"
<div class="uk-form-controls"> v-model="setPosition[key]"
<input class="uk-form-small numeric-setting-line-input"
v-model="setPosition.x" type="number"
class="uk-input uk-form-small" @keyup.enter="startMoveTask"
type="number" />
name="inputPositionX" <a class="button-next-to-input" @click="updatePosition">
@keyup.enter="startMoveTask" <i class="material-icons">refresh</i>
/> </a>
</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> </div>
<p> <p>
<taskSubmitter <taskSubmitter
ref="moveTaskSubmitter" ref="moveTaskSubmitter"
@ -407,3 +378,34 @@ export default {
} }
}; };
</script> </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>