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

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