mirror of
https://github.com/hay-kot/mealie.git
synced 2025-07-06 04:52:25 -07:00
feat: new create from image visuals (#5595)
This commit is contained in:
Kuchenpirat
GitHub
parent
95fa0af28a
commit
15f06b5378
3 changed files with 102 additions and 106 deletions
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,58 @@
|
||||||
<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"
|
:disabled="submitted"
|
||||||
class="cropper"
|
@click="$emit('delete')"
|
||||||
:src="img"
|
|
||||||
:default-size="defaultSize"
|
|
||||||
:style="`height: ${cropperHeight}; width: ${cropperWidth};`"
|
|
||||||
/>
|
/>
|
||||||
</v-col>
|
<v-spacer />
|
||||||
<v-spacer />
|
<v-btn
|
||||||
<v-col
|
v-if="changed"
|
||||||
cols="2"
|
class="mr-2"
|
||||||
align-self="center"
|
color="success"
|
||||||
>
|
:icon="$globals.icons.save"
|
||||||
<v-container class="pa-0 mx-0">
|
:disabled="submitted"
|
||||||
<v-row
|
@click="() => save()"
|
||||||
v-for="(row, keyRow) in controls"
|
/>
|
||||||
:key="keyRow"
|
<v-menu offset-y :close-on-content-click="false" location="bottom center">
|
||||||
>
|
<template #activator="{ props }">
|
||||||
<v-col
|
<v-btn color="info" v-bind="props" :icon="$globals.icons.edit" :disabled="submitted" />
|
||||||
v-for="(control, keyControl) in row"
|
</template>
|
||||||
:key="keyControl"
|
<v-list class="mt-1">
|
||||||
:cols="12 / row.length"
|
<template v-for="(row, keyRow) in controls" :key="keyRow">
|
||||||
class="py-2 mx-0"
|
<v-list-item-group>
|
||||||
style="display: flex; align-items: center; justify-content: center;"
|
<v-list-item
|
||||||
>
|
v-for="(control, keyControl) in row"
|
||||||
<v-btn
|
:key="keyControl"
|
||||||
icon
|
:disabled="submitted"
|
||||||
:color="control.color"
|
@click="control.callback()"
|
||||||
@click="control.callback()"
|
>
|
||||||
>
|
<v-list-item-icon>
|
||||||
<v-icon> {{ control.icon }} </v-icon>
|
<v-icon :color="control.color" :icon="control.icon" />
|
||||||
</v-btn>
|
</v-list-item-icon>
|
||||||
</v-col>
|
</v-list-item>
|
||||||
</v-row>
|
</v-list-item-group>
|
||||||
</v-container>
|
</template>
|
||||||
</v-col>
|
</v-list>
|
||||||
</v-row>
|
</v-menu>
|
||||||
</v-container>
|
</v-row>
|
||||||
|
|
||||||
|
<!-- Image Row -->
|
||||||
|
<Cropper
|
||||||
|
ref="cropper"
|
||||||
|
class="cropper"
|
||||||
|
:src="img"
|
||||||
|
:default-size="defaultSize"
|
||||||
|
:style="`height: ${cropperHeight}; width: ${cropperWidth};`"
|
||||||
|
@change="changed = changed + 1"
|
||||||
|
@ready="changed = -1"
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
@ -64,10 +74,15 @@ export default defineNuxtComponent({
|
||||||
type: String,
|
type: String,
|
||||||
default: undefined,
|
default: undefined,
|
||||||
},
|
},
|
||||||
|
submitted: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
emits: ["save"],
|
emits: ["save", "delete"],
|
||||||
setup(_, context) {
|
setup(_, context) {
|
||||||
const cropper = ref<Cropper>();
|
const cropper = ref<any>();
|
||||||
|
const changed = ref(0);
|
||||||
const { $globals } = useNuxtApp();
|
const { $globals } = useNuxtApp();
|
||||||
|
|
||||||
interface Control {
|
interface Control {
|
||||||
|
|
@ -101,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);
|
||||||
|
|
@ -149,11 +155,11 @@ export default defineNuxtComponent({
|
||||||
flip,
|
flip,
|
||||||
rotate,
|
rotate,
|
||||||
save,
|
save,
|
||||||
|
changed,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
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,
|
||||||
|
|
|
||||||
|
|
@ -7,62 +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="uploadedImages.length ? $t('recipe.upload-more-images') : $t('recipe.upload-images')"
|
||||||
accept="image/*"
|
:text-btn="false"
|
||||||
:text="uploadedImages.length ? $t('recipe.upload-more-images') : $t('recipe.upload-images')"
|
:post="false"
|
||||||
:text-btn="false"
|
:multiple="true"
|
||||||
:post="false"
|
@uploaded="uploadImages"
|
||||||
:multiple="true"
|
/>
|
||||||
@uploaded="uploadImages"
|
<div v-if="uploadedImages.length > 0" class="mt-3">
|
||||||
/>
|
<p class="my-2">
|
||||||
</v-col>
|
{{ $t("recipe.crop-and-rotate-the-image") }}
|
||||||
<v-spacer />
|
</p>
|
||||||
</v-row>
|
|
||||||
|
|
||||||
<div v-if="uploadedImages.length" class="mt-3">
|
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="12" class="pb-0">
|
<v-col
|
||||||
<v-card-text class="pa-0">
|
v-for="(imageUrl, index) in uploadedImagesPreviewUrls"
|
||||||
<p class="mb-0">
|
:key="index"
|
||||||
{{ $t("recipe.crop-and-rotate-the-image") }}
|
cols="12"
|
||||||
</p>
|
sm="6"
|
||||||
</v-card-text>
|
lg="4"
|
||||||
|
xl="3"
|
||||||
|
>
|
||||||
|
<ImageCropper
|
||||||
|
:img="imageUrl"
|
||||||
|
cropper-height="100%"
|
||||||
|
cropper-width="100%"
|
||||||
|
:submitted="loading"
|
||||||
|
class="mt-4"
|
||||||
|
@save="(croppedImage) => updateUploadedImage(index, croppedImage)"
|
||||||
|
@delete="clearImage(index)"
|
||||||
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</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-icon start>
|
|
||||||
{{ $globals.icons.close }}
|
|
||||||
</v-icon>
|
|
||||||
{{ $t("recipe.remove-image") }}
|
|
||||||
</v-btn>
|
|
||||||
</v-col>
|
|
||||||
</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">
|
<v-card-actions v-if="uploadedImages.length">
|
||||||
<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>
|
||||||
|
|
@ -147,6 +132,7 @@ export default defineNuxtComponent({
|
||||||
|
|
||||||
function updateUploadedImage(index: number, croppedImage: Blob) {
|
function updateUploadedImage(index: number, croppedImage: Blob) {
|
||||||
uploadedImages.value[index] = croppedImage;
|
uploadedImages.value[index] = croppedImage;
|
||||||
|
uploadedImagesPreviewUrls.value[index] = URL.createObjectURL(croppedImage);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue