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

Consolidate property control menu into own component

Browse source
This commit is contained in:
Julian Stirling 2026-07-01 14:57:28 +01:00
parent a2ebed1006
commit 697a121275
6 changed files with 109 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

6
webapp/src/assets/less/variables.less
View file

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

30
webapp/src/components/genericComponents/iconButton.vue
View file

@ -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 {
color: #888;
transition:
transform 0.3s ease,
color 0.3s ease;
.sync-button.disabled {
cursor: default;
}
.material-symbols-outlined.sync-icon:hover {
transform: rotate(-90deg);
.sync-button .material-symbols-outlined.sync-icon {
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;
}

2
webapp/src/components/genericComponents/miniMenu.vue
View file

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

182
webapp/src/components/labThingsComponents/inputFromSchema.vue
View file

@ -14,30 +14,11 @@
{{ display }}
</option>
</select>
<mini-menu v-slot="{ close }">
<p>
<icon-button
icon="refresh"
: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>
<property-control-menu
:can-reset="isChangedFomDefault"
@reset-default="resetDefault"
@request-update="requestUpdate"
/>
</div>
</label>
<label v-if="!useDropdown && dataType == 'number'">
@ -69,30 +50,11 @@
</button>
</div>
</div>
<mini-menu v-slot="{ close }">
<p>
<icon-button
icon="refresh"
: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>
<property-control-menu
:can-reset="isChangedFomDefault"
@reset-default="resetDefault"
@request-update="requestUpdate"
/>
</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 }">
<p>
<icon-button
icon="refresh"
: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>
<property-control-menu
:can-reset="isChangedFomDefault"
@reset-default="resetDefault"
@request-update="requestUpdate"
/>
</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 }">
<p>
<icon-button
icon="refresh"
: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>
<property-control-menu
:can-reset="isChangedFomDefault"
@reset-default="resetDefault"
@request-update="requestUpdate"
/>
</div>
</label>
<label v-if="!useDropdown && dataType == 'number_object'">
@ -196,30 +120,11 @@
@keydown="keyDown"
@animationend="animationEnd"
/>
<mini-menu v-slot="{ close }">
<p>
<icon-button
icon="refresh"
: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>
<property-control-menu
:can-reset="isChangedFomDefault"
@reset-default="resetDefault"
@request-update="requestUpdate"
/>
</div>
</div>
</label>
@ -238,30 +143,11 @@
@keydown="keyDown"
@animationend="animationEnd"
/>
<mini-menu v-slot="{ close }">
<p>
<icon-button
icon="refresh"
: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>
<property-control-menu
:can-reset="isChangedFomDefault"
@reset-default="resetDefault"
@request-update="requestUpdate"
/>
</div>
</label>
<label v-if="!useDropdown && dataType == 'other'">
@ -281,15 +167,13 @@
</template>
<script>
import iconButton from "@/components/genericComponents/iconButton.vue";
import MiniMenu from "@/components/genericComponents/miniMenu.vue";
import PropertyControlMenu from "./propertyControlMenu.vue";
export default {
name: "InputFromSchema",
components: {
iconButton,
MiniMenu,
PropertyControlMenu,
},
props: {
dataSchema: {
@ -322,7 +206,7 @@ export default {
},
},
emits: ["requestUpdate", "resetDefault", "sendValue", "animationShown"],
emits: ["requestUpdate", "sendValue", "animationShown"],
compatConfig: { COMPONENT_V_MODEL: false },

48
webapp/src/components/labThingsComponents/propertyControlMenu.vue Normal file
View file

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

2
webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
View file

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