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