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

upgrade create from image visuals

Browse source
This commit is contained in:
Kuchenpirat 2025-06-28 15:43:01 +00:00
commit f4f3ce1219
3 changed files with 84 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/assets/css/main.css
View file

@ -64,3 +64,7 @@ a {
.fill-height { .fill-height {
min-height: 100vh; min-height: 100vh;
} }
.vue-simple-handler {
background-color: rgb(var(--v-theme-primary)) !important;
}

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

@ -1,10 +1,42 @@
<template> <template>
<v-container class="pa-0"> <v-card class="ma-0 pt-2" :elevation="4">
<v-row no-gutters> <v-card-text>
<v-col <!-- Controls Row (Menu) -->
cols="8" <v-row class="mb-2 mx-1">
align-self="center" <v-btn
color="error"
:icon="$globals.icons.delete"
@click="$emit('delete')"
/>
<v-spacer />
<v-menu offset-y>
<template #activator="{ props }">
<v-btn color="info" v-bind="props" :icon="$globals.icons.edit" />
</template>
<v-list>
<template v-for="(row, keyRow) in controls" :key="keyRow">
<v-list-item-group>
<v-list-item
v-for="(control, keyControl) in row"
:key="keyControl"
@click="control.callback()"
> >
<v-list-item-icon>
<v-icon :color="control.color">
{{ control.icon }}
</v-icon>
</v-list-item-icon>
<v-list-item-content>
<!-- Optionally, you can add a label here if you want -->
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</template>
</v-list>
</v-menu>
</v-row>
<!-- Image Row -->
<Cropper <Cropper
ref="cropper" ref="cropper"
class="cropper" class="cropper"
@ -12,37 +44,8 @@
:default-size="defaultSize" :default-size="defaultSize"
:style="`height: ${cropperHeight}; width: ${cropperWidth};`" :style="`height: ${cropperHeight}; width: ${cropperWidth};`"
/> />
</v-col> </v-card-text>
<v-spacer /> </v-card>
<v-col
cols="2"
align-self="center"
>
<v-container class="pa-0 mx-0">
<v-row
v-for="(row, keyRow) in controls"
:key="keyRow"
>
<v-col
v-for="(control, keyControl) in row"
:key="keyControl"
:cols="12 / row.length"
class="py-2 mx-0"
style="display: flex; align-items: center; justify-content: center;"
>
<v-btn
icon
:color="control.color"
@click="control.callback()"
>
<v-icon> {{ control.icon }} </v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-col>
</v-row>
</v-container>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -65,9 +68,9 @@ export default defineNuxtComponent({
default: undefined, default: undefined,
}, },
}, },
emits: ["save"], emits: ["save", "delete"],
setup(_, context) { setup(_, context) {
const cropper = ref<Cropper>(); const cropper = ref<any>();
const { $globals } = useNuxtApp(); const { $globals } = useNuxtApp();
interface Control { interface Control {
@ -153,7 +156,6 @@ export default defineNuxtComponent({
}, },
methods: { methods: {
// @ts-expect-error https://advanced-cropper.github.io/vue-advanced-cropper/guides/advanced-recipes.html
defaultSize({ imageSize, visibleArea }) { defaultSize({ imageSize, visibleArea }) {
return { return {
width: (visibleArea || imageSize).width, width: (visibleArea || imageSize).width,

42
frontend/pages/g/[groupSlug]/r/create/image.vue
View file

@ -7,9 +7,7 @@
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<p>{{ $t("recipe.create-recipe-from-an-image-description") }}</p> <p>{{ $t("recipe.create-recipe-from-an-image-description") }}</p>
<v-container class="pa-0"> <v-container class="px-0">
<v-row>
<v-col cols="auto" align-self="center">
<AppButtonUpload <AppButtonUpload
class="ml-auto" class="ml-auto"
url="none" url="none"
@ -20,48 +18,36 @@
:post="false" :post="false"
@uploaded="uploadImage" @uploaded="uploadImage"
/> />
</v-col>
<v-spacer />
</v-row>
<div v-if="uploadedImages.length > 0" class="mt-3"> <div v-if="uploadedImages.length > 0" class="mt-3">
<v-row> <p class="my-2">
<v-col cols="12" class="pb-0">
<v-card-text class="pa-0">
<p class="mb-0">
{{ $t("recipe.crop-and-rotate-the-image") }} {{ $t("recipe.crop-and-rotate-the-image") }}
</p> </p>
</v-card-text>
</v-col>
</v-row>
<v-row style="max-width: 600px">
<v-spacer />
<v-col v-for="(imageUrl, index) in uploadedImagesPreviewUrls" :key="index" cols="12">
<v-row> <v-row>
<v-col cols="auto" align-self="center"> <v-col
v-for="(imageUrl, index) in uploadedImagesPreviewUrls"
:key="index"
cols="12"
sm="6"
lg="4"
xl="3"
>
<ImageCropper <ImageCropper
:img="imageUrl" :img="imageUrl"
cropper-height="100%" cropper-height="100%"
cropper-width="100%" cropper-width="100%"
class="mt-4"
@save="(croppedImage) => updateUploadedImage(index, croppedImage)" @save="(croppedImage) => updateUploadedImage(index, croppedImage)"
@delete="clearImage(index)"
/> />
<v-btn color="error" @click="() => clearImage(index)">
<v-icon start>
{{ $globals.icons.close }}
</v-icon>
{{ $t("recipe.remove-image") }}
</v-btn>
</v-col> </v-col>
</v-row> </v-row>
</v-col>
<v-spacer />
</v-row>
</div> </div>
</v-container> </v-container>
</v-card-text> </v-card-text>
<v-card-actions v-if="uploadedImages.length > 0"> <v-card-actions v-if="uploadedImages.length > 0">
<div> <div class="w-100 d-flex flex-column align-center">
<p style="width: 250px"> <p style="width: 250px">
<BaseButton rounded block type="submit" :loading="loading" /> <BaseButton rounded block type="submit" :loading="loading" />
</p> </p>