Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2026-07-19 06:00:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: ui fixes & backup link on onboarding screen (#7743)

Browse Source
This commit is contained in:
Arsène Reymond
2026-07-17 20:41:35 +02:00
committed by GitHub
parent 7092497cd2
commit 4eae486908
16 changed files with 67 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/components/Domain/Group/GroupAIProviderDialog.vue
View File

@@ -89,7 +89,7 @@
</v-expansion-panels>
</v-form>
</v-card-text>
<AppLoader v-else waiting-text="" />
<AppLoader v-else />
</BaseDialog>
</template>

1
frontend/app/components/Domain/Recipe/RecipeCardSection.vue
View File

@@ -158,6 +158,7 @@
<AppLoader
v-if="loading"
:loading="loading"
:waiting-text="$t('general.loading-recipes')"
/>
</v-fade-transition>
<AppScrollToTop />

20
frontend/app/components/Domain/Recipe/RecipeLastMade.vue
View File

@@ -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
frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
View File

@@ -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"

3
frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
View File

@@ -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>

2
frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageParseDialog.vue
View File

@@ -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')">

4
frontend/app/components/Domain/Recipe/RecipeTimeCard.vue
View File

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

31
frontend/app/components/Domain/Recipe/RecipeTimeline.vue
View File

@@ -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 || [];
}

1
frontend/app/components/Domain/Recipe/RecipeTimelineBadge.vue
View File

@@ -31,7 +31,6 @@
<RecipeTimeline
v-model="showTimeline"
:query-filter="timelineAttrs.queryFilter"
max-height="60vh"
/>
</BaseDialog>
</template>

2
frontend/app/components/Domain/Recipe/RecipeYield.vue
View File

@@ -9,7 +9,7 @@
style="font-size: larger;"
>
<v-icon
size="x-large"
size="large"
start
color="primary"
>

2
frontend/app/components/Layout/LayoutParts/AppScrollToTop.vue
View File

@@ -25,7 +25,7 @@ function onScroll() {
}
function scrollToTop() {
document.documentElement.scrollTop = 0;
window.scrollTo({ top: 0, behavior: "smooth" });
}
onMounted(() => {

19
frontend/app/components/global/AppLoader.vue
View File

@@ -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>

2
frontend/app/lang/messages/en-US.json
View File

@@ -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.",

15
frontend/app/pages/admin/setup.vue
View File

@@ -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

4
frontend/app/pages/admin/site-settings.vue
View File

@@ -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>

8
frontend/app/pages/g/[groupSlug]/recipes/finder/index.vue
View File

@@ -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>