mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-07-19 06:00:16 -04:00
feat: ui fixes & backup link on onboarding screen (#7743)
This commit is contained in:
Arsène Reymond
GitHub
@@ -89,7 +89,7 @@
|
||||
</v-expansion-panels>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<AppLoader v-else waiting-text="" />
|
||||
<AppLoader v-else />
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -158,6 +158,7 @@
|
||||
<AppLoader
|
||||
v-if="loading"
|
||||
:loading="loading"
|
||||
:waiting-text="$t('general.loading-recipes')"
|
||||
/>
|
||||
</v-fade-transition>
|
||||
<AppScrollToTop />
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
rows="4"
|
||||
/>
|
||||
<div v-if="childRecipes?.length">
|
||||
<v-card-text class="pt-6 pb-0">
|
||||
<v-card-text class="pt-6 pb-0 text-title-medium">
|
||||
{{ $t('recipe.include-linked-recipes') }}
|
||||
</v-card-text>
|
||||
<v-list>
|
||||
@@ -45,14 +45,13 @@
|
||||
</v-list>
|
||||
</div>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<v-row class="mt-4">
|
||||
<v-col cols="5">
|
||||
<v-menu
|
||||
v-model="datePickerMenu"
|
||||
:close-on-content-click="false"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
max-width="290px"
|
||||
>
|
||||
<template #activator="{ props: activatorProps }">
|
||||
<v-text-field
|
||||
@@ -60,6 +59,8 @@
|
||||
:prepend-icon="$globals.icons.calendar"
|
||||
v-bind="activatorProps"
|
||||
readonly
|
||||
density="compact"
|
||||
min-width="160"
|
||||
/>
|
||||
</template>
|
||||
<v-date-picker
|
||||
@@ -72,7 +73,7 @@
|
||||
</v-menu>
|
||||
</v-col>
|
||||
<v-spacer />
|
||||
<v-col cols="auto" align-self="center">
|
||||
<v-col cols="auto">
|
||||
<AppButtonUpload
|
||||
v-if="!newTimelineEventImage"
|
||||
class="ml-auto"
|
||||
@@ -93,7 +94,7 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-if="newTimelineEventImage && newTimelineEventImagePreviewUrl">
|
||||
<v-col cols="12" align-self="center">
|
||||
<v-col cols="12">
|
||||
<ImageCropper
|
||||
:img="newTimelineEventImagePreviewUrl"
|
||||
cropper-height="20vh"
|
||||
@@ -115,16 +116,17 @@
|
||||
<v-btn
|
||||
rounded
|
||||
variant="outlined"
|
||||
size="x-large"
|
||||
size="large"
|
||||
v-bind="tooltipProps"
|
||||
class="font-weight-400"
|
||||
style="border-color: rgb(var(--v-theme-primary));"
|
||||
@click="madeThisDialog = true"
|
||||
>
|
||||
<v-icon start size="large" color="primary">
|
||||
{{ $globals.icons.calendar }}
|
||||
</v-icon>
|
||||
<span class="text-body-1 opacity-80">
|
||||
<b>{{ $t("general.last-made") }}</b>
|
||||
<span class="opacity-80">
|
||||
<strong>{{ $t("general.last-made") }}</strong>
|
||||
<br>
|
||||
{{ lastMade ? $d(new Date(lastMade)) : $t("general.never") }}
|
||||
</span>
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
:recipe="recipe"
|
||||
/>
|
||||
<v-card
|
||||
:width="landscape ? '100%' : '50%'"
|
||||
:width="landscape || !recipe.image ? '100%' : '50%'"
|
||||
flat
|
||||
class="d-flex flex-column justify-center align-center"
|
||||
>
|
||||
<v-card-text class="w-100">
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column align-center">
|
||||
<v-card-title class="text-h5 font-weight-regular pa-0 text-wrap text-center opacity-80">
|
||||
{{ recipe.name }}
|
||||
@@ -67,7 +67,7 @@
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<RecipePageInfoCardImage
|
||||
v-if="!landscape"
|
||||
v-if="!landscape && recipe.image"
|
||||
:recipe="recipe"
|
||||
max-width="50%"
|
||||
class="my-auto"
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
<!-- Recipe Tools Edit -->
|
||||
<v-card
|
||||
v-if="isEditForm"
|
||||
class="mt-2"
|
||||
class="mt-4"
|
||||
>
|
||||
<v-card-title class="py-2">
|
||||
{{ $t('tool.required-tools') }}
|
||||
@@ -64,7 +64,6 @@
|
||||
<RecipeOrganizerSelector
|
||||
v-model="recipe.tools"
|
||||
selector-type="tools"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
>
|
||||
<v-container fluid class="pa-2 ma-0" style="background-color: rgb(var(--v-theme-background));">
|
||||
<div v-if="state.loading.parser" class="my-6">
|
||||
<AppLoader waiting-text="" class="my-6" />
|
||||
<AppLoader class="my-6" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<BaseCardSectionTitle :title="$t('recipe.parser.ingredient-parser')">
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
>
|
||||
<v-icon
|
||||
:size="small ? 'small' : 'large'"
|
||||
left
|
||||
start
|
||||
color="primary"
|
||||
>
|
||||
{{ $globals.icons.knife }}
|
||||
@@ -64,7 +64,7 @@
|
||||
>
|
||||
<v-icon
|
||||
:size="small ? 'small' : 'large'"
|
||||
left
|
||||
start
|
||||
color="primary"
|
||||
>
|
||||
{{ $globals.icons.potSteam }}
|
||||
|
||||
@@ -18,13 +18,11 @@
|
||||
bordered
|
||||
>
|
||||
<v-btn
|
||||
class="rounded-circle"
|
||||
size="small"
|
||||
color="info"
|
||||
variant="text"
|
||||
v-bind="activatorProps"
|
||||
icon
|
||||
:prepend-icon="$globals.icons.filter"
|
||||
>
|
||||
<v-icon> {{ $globals.icons.filter }} </v-icon>
|
||||
{{ $t("general.filter") }}
|
||||
</v-btn>
|
||||
</v-badge>
|
||||
</template>
|
||||
@@ -39,28 +37,24 @@
|
||||
<v-list-item
|
||||
v-for="option, idx in eventTypeFilterState"
|
||||
:key="idx"
|
||||
>
|
||||
<v-checkbox
|
||||
:model-value="option.checked"
|
||||
color="primary"
|
||||
readonly
|
||||
hide-details
|
||||
:active="option.checked"
|
||||
:color="option.checked ? 'primary' : undefined"
|
||||
@click="toggleEventTypeOption(option.value)"
|
||||
>
|
||||
<template #label>
|
||||
<v-icon start>
|
||||
<template #prepend>
|
||||
<v-icon>
|
||||
{{ option.icon }}
|
||||
</v-icon>
|
||||
{{ option.label }}
|
||||
</template>
|
||||
</v-checkbox>
|
||||
<v-list-item-title>
|
||||
{{ option.label }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider class="mx-2" />
|
||||
<div
|
||||
v-if="timelineEvents.length"
|
||||
id="timeline-container"
|
||||
@@ -213,7 +207,10 @@ async function deleteTimelineEvent(index: number) {
|
||||
}
|
||||
|
||||
async function getRecipes(recipeIds: string[]): Promise<Recipe[]> {
|
||||
const qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
|
||||
let qf = "";
|
||||
if (recipeIds.length) {
|
||||
qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
|
||||
}
|
||||
const { data } = await api.recipes.getAll(1, -1, { queryFilter: qf });
|
||||
return data?.items || [];
|
||||
}
|
||||
|
||||
@@ -31,7 +31,6 @@
|
||||
<RecipeTimeline
|
||||
v-model="showTimeline"
|
||||
:query-filter="timelineAttrs.queryFilter"
|
||||
max-height="60vh"
|
||||
/>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
style="font-size: larger;"
|
||||
>
|
||||
<v-icon
|
||||
size="x-large"
|
||||
size="large"
|
||||
start
|
||||
color="primary"
|
||||
>
|
||||
|
||||
@@ -25,7 +25,7 @@ function onScroll() {
|
||||
}
|
||||
|
||||
function scrollToTop() {
|
||||
document.documentElement.scrollTop = 0;
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@@ -3,34 +3,21 @@
|
||||
class="mx-auto my-3 justify-center"
|
||||
style="display: flex;"
|
||||
>
|
||||
<div style="display: inline;">
|
||||
<div class="text-center">
|
||||
<v-progress-circular
|
||||
:width="size.width"
|
||||
:size="size.size"
|
||||
color="primary-lighten-2"
|
||||
indeterminate
|
||||
>
|
||||
<div class="text-center">
|
||||
<v-icon
|
||||
:size="size.icon"
|
||||
color="primary-lighten-2"
|
||||
>
|
||||
{{ $globals.icons.primary }}
|
||||
</v-icon>
|
||||
<div
|
||||
v-if="large"
|
||||
class="text-small"
|
||||
>
|
||||
<slot>
|
||||
{{ (small || tiny) ? "" : waitingText }}
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</v-progress-circular>
|
||||
<div
|
||||
v-if="!large"
|
||||
class="text-small"
|
||||
>
|
||||
<div :class="large ? 'text-title-large mt-5' : 'text-body-large mt-3'">
|
||||
<slot>
|
||||
{{ (small || tiny) ? "" : waitingTextCalculated }}
|
||||
</slot>
|
||||
@@ -97,5 +84,5 @@ const size = computed(() => {
|
||||
});
|
||||
|
||||
const i18n = useI18n();
|
||||
const waitingTextCalculated = props.waitingText == null ? i18n.t("general.loading-recipes") : props.waitingText;
|
||||
const waitingTextCalculated = props.waitingText == null ? i18n.t("general.loading") : props.waitingText;
|
||||
</script>
|
||||
|
||||
@@ -1399,10 +1399,10 @@
|
||||
"setup": {
|
||||
"first-time-setup": "First Time Setup",
|
||||
"welcome-to-mealie-get-started": "Welcome to Mealie! Let's get started",
|
||||
"previous-mealie-instance": "Did you have a previous Mealie instance?",
|
||||
"already-set-up-bring-to-homepage": "I'm already set up, just bring me to the homepage",
|
||||
"common-settings-for-new-sites": "Here are some common settings for new sites",
|
||||
"setup-complete": "Setup Complete!",
|
||||
|
||||
"ai-providers-description": "Optionally configure AI providers for your group. AI providers enable features like creating recipes from images, importing recipes from videos, and enhanced ingredient parsing. You can always configure this later from your group settings.",
|
||||
"here-are-a-few-things-to-help-you-get-started": "Here are a few things to help you get started with Mealie",
|
||||
"restore-from-v1-backup": "Have a backup from a previous instance of Mealie v1? You can restore it here.",
|
||||
|
||||
@@ -81,9 +81,22 @@
|
||||
<v-stepper-window-item :value="Pages.LANDING">
|
||||
<v-container class="mb-12">
|
||||
<AppLogo />
|
||||
<v-card-title class="text-h4 justify-center text-center text-break text-pre-wrap">
|
||||
<v-card-title class="text-headline-medium my-5 justify-center text-center text-break text-pre-wrap">
|
||||
{{ $t('admin.setup.welcome-to-mealie-get-started') }}
|
||||
</v-card-title>
|
||||
<p class="text-body-1 text-center">
|
||||
{{ $t('admin.setup.previous-mealie-instance') }}
|
||||
</p>
|
||||
<v-btn
|
||||
to="backups"
|
||||
rounded
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
class="text-subtitle-2 d-flex mx-auto my-3"
|
||||
style="width: fit-content;"
|
||||
>
|
||||
{{ $t('settings.backup.restore-backup') }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
:to="groupSlug ? `/g/${groupSlug}` : '/login'"
|
||||
rounded
|
||||
|
||||
@@ -248,9 +248,7 @@
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="mb-3 text-center">
|
||||
<AppLoader :waiting-text="$t('general.loading')" />
|
||||
</div>
|
||||
<AppLoader />
|
||||
</template>
|
||||
</v-card>
|
||||
</section>
|
||||
|
||||
@@ -372,9 +372,7 @@
|
||||
cols="12"
|
||||
class="d-flex justify-center"
|
||||
>
|
||||
<div class="text-center">
|
||||
<AppLoader waiting-text="" />
|
||||
</div>
|
||||
<AppLoader :waiting-text="$t('general.loading-recipes')" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
@@ -402,9 +400,7 @@
|
||||
cols="12"
|
||||
class="d-flex justify-center"
|
||||
>
|
||||
<div class="text-center">
|
||||
<AppLoader waiting-text="" />
|
||||
</div>
|
||||
<AppLoader :waiting-text="$t('general.loading-recipes')" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
Reference in New Issue
Block a user