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 20

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

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

@ -1,48 +1,51 @@
<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"
<Cropper :icon="$globals.icons.delete"
ref="cropper" @click="$emit('delete')"
class="cropper"
:src="img"
:default-size="defaultSize"
:style="`height: ${cropperHeight}; width: ${cropperWidth};`"
/> />
</v-col> <v-spacer />
<v-spacer /> <v-menu offset-y>
<v-col <template #activator="{ props }">
cols="2" <v-btn color="info" v-bind="props" :icon="$globals.icons.edit" />
align-self="center" </template>
> <v-list>
<v-container class="pa-0 mx-0"> <template v-for="(row, keyRow) in controls" :key="keyRow">
<v-row <v-list-item-group>
v-for="(row, keyRow) in controls" <v-list-item
:key="keyRow" v-for="(control, keyControl) in row"
> :key="keyControl"
<v-col @click="control.callback()"
v-for="(control, keyControl) in row" >
:key="keyControl" <v-list-item-icon>
:cols="12 / row.length" <v-icon :color="control.color">
class="py-2 mx-0" {{ control.icon }}
style="display: flex; align-items: center; justify-content: center;" </v-icon>
> </v-list-item-icon>
<v-btn <v-list-item-content>
icon <!-- Optionally, you can add a label here if you want -->
:color="control.color" </v-list-item-content>
@click="control.callback()" </v-list-item>
> </v-list-item-group>
<v-icon> {{ control.icon }} </v-icon> </template>
</v-btn> </v-list>
</v-col> </v-menu>
</v-row> </v-row>
</v-container>
</v-col> <!-- Image Row -->
</v-row> <Cropper
</v-container> ref="cropper"
class="cropper"
:src="img"
:default-size="defaultSize"
:style="`height: ${cropperHeight}; width: ${cropperWidth};`"
/>
</v-card-text>
</v-card>
</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,

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

@ -7,61 +7,47 @@
</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> <AppButtonUpload
<v-col cols="auto" align-self="center"> class="ml-auto"
<AppButtonUpload url="none"
class="ml-auto" file-name="images"
url="none" accept="image/*"
file-name="images" :text="$t('recipe.upload-image')"
accept="image/*" :text-btn="false"
:text="$t('recipe.upload-image')" :post="false"
:text-btn="false" @uploaded="uploadImage"
:post="false" />
@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"> {{ $t("recipe.crop-and-rotate-the-image") }}
<v-card-text class="pa-0"> </p>
<p class="mb-0">
{{ $t("recipe.crop-and-rotate-the-image") }}
</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-col cols="auto" align-self="center">
<ImageCropper
:img="imageUrl"
cropper-height="100%"
cropper-width="100%"
@save="(croppedImage) => updateUploadedImage(index, croppedImage)"
/>
<v-btn color="error" @click="() => clearImage(index)"> <v-row>
<v-icon start> <v-col
{{ $globals.icons.close }} v-for="(imageUrl, index) in uploadedImagesPreviewUrls"
</v-icon> :key="index"
{{ $t("recipe.remove-image") }} cols="12"
</v-btn> sm="6"
</v-col> lg="4"
</v-row> xl="3"
>
<ImageCropper
:img="imageUrl"
cropper-height="100%"
cropper-width="100%"
class="mt-4"
@save="(croppedImage) => updateUploadedImage(index, croppedImage)"
@delete="clearImage(index)"
/>
</v-col> </v-col>
<v-spacer />
</v-row> </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>