github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 22:43:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 15

move save button out of menu

Browse source
This commit is contained in:
Kuchenpirat 2025-06-29 13:18:56 +00:00
commit 4d232449b1
1 changed files with 14 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

25
frontend/components/global/ImageCropper.vue
View file

@ -10,6 +10,14 @@
@click="$emit('delete')" @click="$emit('delete')"
/> />
<v-spacer /> <v-spacer />
<v-btn
v-if="changed"
class="mr-2"
color="success"
:icon="$globals.icons.save"
:disabled="submitted"
@click="() => save()"
/>
<v-menu offset-y :close-on-content-click="false"> <v-menu offset-y :close-on-content-click="false">
<template #activator="{ props }"> <template #activator="{ props }">
<v-btn color="info" v-bind="props" :icon="$globals.icons.edit" :disabled="submitted" /> <v-btn color="info" v-bind="props" :icon="$globals.icons.edit" :disabled="submitted" />
@ -40,6 +48,8 @@
:src="img" :src="img"
:default-size="defaultSize" :default-size="defaultSize"
:style="`height: ${cropperHeight}; width: ${cropperWidth};`" :style="`height: ${cropperHeight}; width: ${cropperWidth};`"
@change="changed = changed + 1"
@ready="changed = -1"
/> />
</v-card-text> </v-card-text>
</v-card> </v-card>
@ -72,6 +82,7 @@ export default defineNuxtComponent({
emits: ["save", "delete"], emits: ["save", "delete"],
setup(_, context) { setup(_, context) {
const cropper = ref<any>(); const cropper = ref<any>();
const changed = ref(0);
const { $globals } = useNuxtApp(); const { $globals } = useNuxtApp();
interface Control { interface Control {
@ -105,41 +116,32 @@ export default defineNuxtComponent({
callback: () => rotate(90), callback: () => rotate(90),
}, },
], ],
[
{
color: "success",
icon: $globals.icons.save,
callback: () => save(),
},
],
]); ]);
function flip(hortizontal: boolean, vertical?: boolean) { function flip(hortizontal: boolean, vertical?: boolean) {
if (!cropper.value) { if (!cropper.value) {
return; return;
} }
cropper.value.flip(hortizontal, vertical); cropper.value.flip(hortizontal, vertical);
changed.value = changed.value + 1;
} }
function rotate(angle: number) { function rotate(angle: number) {
if (!cropper.value) { if (!cropper.value) {
return; return;
} }
cropper.value.rotate(angle); cropper.value.rotate(angle);
changed.value = changed.value + 1;
} }
function save() { function save() {
if (!cropper.value) { if (!cropper.value) {
return; return;
} }
const { canvas } = cropper.value.getResult(); const { canvas } = cropper.value.getResult();
if (!canvas) { if (!canvas) {
return; return;
} }
canvas.toBlob((blob) => { canvas.toBlob((blob) => {
if (blob) { if (blob) {
context.emit("save", blob); context.emit("save", blob);
@ -153,6 +155,7 @@ export default defineNuxtComponent({
flip, flip,
rotate, rotate,
save, save,
changed,
}; };
}, },