Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2026-04-10 23:15:34 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: upgrade to vuetify v4 (#7432)

Browse Source
This commit is contained in:
Kuchenpirat
2026-04-10 02:39:05 +02:00
committed by GitHub
parent 6b28bb8eb0
commit 157b8d2937
25 changed files with 169 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/app/assets/main.css
View File

@@ -61,10 +61,6 @@
max-width: 100%;
}
a {
color: rgb(var(--v-theme-primary));
}
.fill-height {
min-height: 100vh;
}
@@ -72,3 +68,8 @@ a {
.vue-simple-handler {
background-color: rgb(var(--v-theme-primary)) !important;
}
p {
margin-top: 0;
margin-bottom: 0;
}

6
frontend/app/components/Domain/Recipe/RecipeCard.vue
View File

@@ -36,10 +36,8 @@
</div>
</v-expand-transition>
</RecipeCardImage>
<v-card-title class="mb-n3 px-4">
<div class="headerClass">
{{ name }}
</div>
<v-card-title class="mb-n3 px-4" style="font-size: 1.25rem;">
{{ name }}
</v-card-title>
<slot name="actions">

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

@@ -1,24 +1,17 @@
<template>
<div>
<v-app-bar
<v-row
v-if="!disableToolbar"
color="transparent"
:absolute="false"
flat
class="mt-n1 flex-sm-wrap rounded position-relative w-100 left-0 top-0"
class="align-center pb-2"
>
<slot name="title">
<v-icon
v-if="title"
size="large"
start
>
{{ displayTitleIcon }}
</v-icon>
<v-toolbar-title class="headline">
{{ title }}
</v-toolbar-title>
</slot>
<v-icon
v-if="title"
size="large"
start
>
{{ displayTitleIcon }}
</v-icon>
<span class="text-headline-small">{{ title }}</span>
<v-spacer />
<v-btn
:icon="$vuetify.display.xs"
@@ -111,7 +104,7 @@
]"
@toggle-dense-view="toggleMobileCards()"
/>
</v-app-bar>
</v-row>
<div v-if="recipes && ready">
<div class="mt-2">
<v-row v-if="!useMobileCards">
@@ -136,7 +129,7 @@
</v-row>
<v-row
v-else
dense
density="comfortable"
>
<v-col
v-for="recipe in recipes"
@@ -159,7 +152,7 @@
</v-col>
</v-row>
</div>
<v-card v-intersect="infiniteScroll" />
<v-card v-intersect="infiniteScroll" variant="flat" />
</div>
<v-fade-transition>
<AppLoader

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

@@ -13,7 +13,7 @@
/>
<v-row
:no-gutters="mdAndUp"
dense
density="comfortable"
class="d-flex flex-wrap my-1"
>
<v-col

6
frontend/app/components/Domain/Recipe/RecipeOrganizerPage.vue
View File

@@ -43,7 +43,7 @@
</v-card-text>
</BaseDialog>
<v-row dense>
<v-row density="comfortable">
<v-col>
<v-text-field
v-model="searchString"
@@ -57,7 +57,7 @@
</v-col>
</v-row>
<v-app-bar
<v-row
color="transparent"
flat
class="mt-n1 rounded align-center position-relative w-100 left-0 top-0"
@@ -76,7 +76,7 @@
create
@click="dialogs.organizer = true"
/>
</v-app-bar>
</v-row>
<section
v-for="(itms, key, idx) in itemsSorted"
:key="'header' + idx"

6
frontend/app/components/Domain/Recipe/RecipeOrganizerSelector.vue
View File

@@ -27,12 +27,10 @@
color="accent"
variant="flat"
label
:text="item.name"
closable
@click:close="removeByIndex(index)"
>
{{ item.value }}
</v-chip>
/>
</template>
<template
v-if="showAdd"

18
frontend/app/components/Domain/Recipe/RecipePage/RecipePage.vue
View File

@@ -21,7 +21,7 @@
@save="saveParsedIngredients"
/>
<v-container v-show="!isCookMode" key="recipe-page" class="px-0" :class="{ 'pa-0': $vuetify.display.smAndDown }">
<v-card :flat="$vuetify.display.smAndDown" class="d-print-none">
<v-card flat class="d-print-none">
<RecipePageHeader
:recipe="recipe"
:recipe-scale="scale"
@@ -68,17 +68,21 @@
<!--
The left column is conditionally rendered based on cook mode.
-->
<v-col v-if="!isCookMode || isEditForm" cols="12" sm="12" md="4" lg="4">
<RecipePageIngredientToolsView v-if="!isEditForm" :recipe="recipe" :scale="scale" />
<RecipePageOrganizers v-if="$vuetify.display.mdAndUp" v-model="recipe" @item-selected="chipClicked" />
<v-col
v-if="!isCookMode || isEditForm"
cols="12"
sm="12"
md="4"
:class="$vuetify.display.mdAndUp ? 'border-e-thin' : null"
>
<RecipePageIngredientToolsView v-if="!isEditForm" :recipe="recipe" :scale="scale" class="pr-2" />
<RecipePageOrganizers v-if="$vuetify.display.mdAndUp" v-model="recipe" class="pr-2" @item-selected="chipClicked" />
</v-col>
<v-divider v-if="$vuetify.display.mdAndUp && !isCookMode" class="my-divider" :vertical="true" />
<!--
the right column is always rendered, but it's layout width is determined by where the left column is
rendered.
-->
<v-col cols="12" sm="12" :md="8 + (isCookMode ? 1 : 0) * 4" :lg="8 + (isCookMode ? 1 : 0) * 4">
<v-col cols="12" sm="12" :md="8 + (isCookMode ? 1 : 0) * 4">
<RecipePageInstructions
v-model="recipe.recipeInstructions"
v-model:assets="recipe.assets"

1
frontend/app/components/Layout/DefaultLayout.vue
View File

@@ -13,7 +13,6 @@
<AppSidebar
v-model="sidebar"
absolute
:top-link="topLinks"
:secondary-links="cookbookLinks || []"
>

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

@@ -7,7 +7,7 @@
<v-row
justify="center"
align="center"
dense
density="comfortable"
no-gutters
>
<v-col

1
frontend/app/components/global/BannerExperimental.vue
View File

@@ -10,6 +10,7 @@
<a
:href="issue"
target="_blank"
color="primary"
>{{ $t("banner-experimental.issue-link-text") }}</a>
</template>
</BannerWarning>

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

@@ -12,16 +12,13 @@
>
<template #activator="{ props }">
<v-btn
:class="{ 'rounded-circle': fab }"
:small="fab"
:color="color"
:icon="!fab"
size="small"
:icon="$globals.icons.dotsVertical"
variant="text"
dark
v-bind="props"
@click.prevent
>
<v-icon>{{ $globals.icons.dotsVertical }}</v-icon>
</v-btn>
/>
</template>
<v-list density="compact">
<v-list-item
@@ -52,13 +49,5 @@ defineProps({
type: Boolean,
default: true,
},
fab: {
type: Boolean,
default: false,
},
color: {
type: String,
default: "grey-darken-2",
},
});
</script>

5
frontend/app/components/global/LanguageDialog.vue
View File

@@ -22,9 +22,9 @@
v-bind="props"
class="px-2 py-2"
>
<v-list-item-title> {{ item.raw.name }} </v-list-item-title>
<v-list-item-title> {{ item.name }} </v-list-item-title>
<v-list-item-subtitle>
{{ item.raw.progress }}% {{ $t("language-dialog.translated") }}
{{ item.progress }}% {{ $t("language-dialog.translated") }}
</v-list-item-subtitle>
</div>
</template>
@@ -34,6 +34,7 @@
<a
href="https://docs.mealie.io/contributors/translating/"
target="_blank"
class="text-primary"
>
{{ $t("language-dialog.read-the-docs") }}
</a>

1
frontend/app/layouts/admin.vue
View File

@@ -13,7 +13,6 @@
<AppSidebar
v-model="sidebar"
absolute
:top-link="topLinks"
:user="{ data: true }"
:secondary-header="$t('sidebar.developer')"

4
frontend/app/pages/admin/backups.vue
View File

@@ -33,7 +33,7 @@
<p class="mt-3">
<i18n-t keypath="settings.backup.postgresql-note">
<template #backup-restore-process>
<a href="https://nightly.mealie.io/documentation/getting-started/usage/backups-and-restoring/">{{
<a class="text-primary" href="https://nightly.mealie.io/documentation/getting-started/usage/backups-and-restoring/">{{
$t('settings.backup.backup-restore-process-in-the-documentation') }}</a>
</template>
</i18n-t>
@@ -146,7 +146,7 @@
</section>
</section>
<v-container class="mt-4 d-flex justify-center text-center">
<nuxt-link :to="`/group/migrations`"> {{ $t('recipe.looking-for-migrations') }} </nuxt-link>
<nuxt-link class="text-primary" :to="`/group/migrations`"> {{ $t('recipe.looking-for-migrations') }} </nuxt-link>
</v-container>
</v-container>
</template>

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

@@ -177,6 +177,7 @@
<template v-if="property.slot === 'recipe-scraper'">
<v-list-item-subtitle>
<a
class="text-primary"
target="_blank"
:href="`https://github.com/hhursev/recipe-scrapers/releases/tag/${property.value}`"
>
@@ -187,6 +188,7 @@
<template v-else-if="property.slot === 'build'">
<v-list-item-subtitle>
<a
class="text-primary"
target="_blank"
:href="`https://github.com/mealie-recipes/mealie/commit/${property.value}`"
>
@@ -197,6 +199,7 @@
<template v-else-if="property.slot === 'version' && property.value !== 'develop' && property.value !== 'nightly'">
<v-list-item-subtitle>
<a
class="text-primary"
target="_blank"
:href="`https://github.com/mealie-recipes/mealie/releases/tag/${property.value}`"
>

1
frontend/app/pages/g/[groupSlug]/r/create/html.vue
View File

@@ -16,6 +16,7 @@
<a
href="https://schema.org/Recipe"
target="_blank"
class="text-primary"
>https://schema.org/Recipe</a>
</p>
<v-switch

8
frontend/app/pages/g/[groupSlug]/r/create/url.vue
View File

@@ -18,11 +18,11 @@
<v-card-text class="px-0">
<p>
{{ $t('recipe.scrape-recipe-have-a-lot-of-recipes') }}
<router-link :to="bulkImporterTarget">{{ $t('recipe.scrape-recipe-suggest-bulk-importer') }}</router-link>.
<router-link :to="bulkImporterTarget" class="text-primary">{{ $t('recipe.scrape-recipe-suggest-bulk-importer') }}</router-link>.
</p>
<p>
{{ $t('recipe.scrape-recipe-have-raw-html-or-json-data') }}
<router-link :to="htmlOrJsonImporterTarget">{{ $t('recipe.scrape-recipe-you-can-import-from-raw-data-directly') }}</router-link>.
<router-link :to="htmlOrJsonImporterTarget" class="text-primary">{{ $t('recipe.scrape-recipe-you-can-import-from-raw-data-directly') }}</router-link>.
</p>
</v-card-text>
<v-text-field
@@ -113,7 +113,7 @@
</div>
<div class="d-flex row justify-space-around my-3 force-url-white">
<a
class="dark"
class="dark text-primary"
href="https://developers.google.com/search/docs/data-types/recipe"
target="_blank"
rel="noreferrer nofollow"
@@ -121,6 +121,7 @@
{{ $t("new-recipe.google-ld-json-info") }}
</a>
<a
class="text-primary"
href="https://github.com/mealie-recipes/mealie/issues"
target="_blank"
rel="noreferrer nofollow"
@@ -128,6 +129,7 @@
{{ $t("new-recipe.github-issues") }}
</a>
<a
class="text-primary"
href="https://schema.org/Recipe"
target="_blank"
rel="noreferrer nofollow"

7
frontend/app/pages/household/mealplan/planner/edit.vue
View File

@@ -71,9 +71,10 @@
:key="index"
cols="12"
sm="12"
md="3"
lg="3"
xl="2"
md="6"
lg="4"
xl="3"
xxl="2"
class="col-borders my-1 d-flex flex-column"
>
<v-card class="mb-2 border-left-primary rounded-sm pa-2">

5
frontend/app/pages/household/mealplan/planner/view.vue
View File

@@ -6,9 +6,10 @@
:key="index"
cols="12"
sm="12"
md="4"
md="6"
lg="4"
xl="2"
xl="3"
xxl="2"
class="col-borders my-1 d-flex flex-column"
>
<v-card class="mb-2 border-left-primary rounded-sm px-2">

2
frontend/app/pages/household/members.vue
View File

@@ -22,7 +22,7 @@
</i18n-t>
<v-container class="mt-1 px-0">
<nuxt-link
class="text-center"
class="text-center text-primary"
:to="`/user/profile/edit`"
> {{ $t('group.looking-to-update-your-profile') }}
</nuxt-link>

12
frontend/app/pages/household/notifiers.vue
View File

@@ -49,34 +49,34 @@
<a
href="https://github.com/caronc/apprise/wiki"
target="_blanks"
class="mx-2"
class="mx-2 text-primary"
> Apprise </a>
<a
href="https://github.com/caronc/apprise/wiki/Notify_gotify"
target="_blanks"
class="mx-2"
class="mx-2 text-primary"
> Gotify </a>
<a
href="https://github.com/caronc/apprise/wiki/Notify_discord"
target="_blanks"
class="mx-2"
class="mx-2 text-primary"
> Discord </a>
<a
href="https://github.com/caronc/apprise/wiki/Notify_homeassistant"
target="_blanks"
class="mx-2"
class="mx-2 text-primary"
> Home
Assistant
</a>
<a
href="https://github.com/caronc/apprise/wiki/Notify_matrix"
target="_blanks"
class="mx-2"
class="mx-2 text-primary"
> Matrix </a>
<a
href="https://github.com/caronc/apprise/wiki/Notify_pushover"
target="_blanks"
class="mx-2"
class="mx-2 text-primary"
> Pushover </a>
</div>
</BasePageTitle>

2
frontend/app/pages/user/profile/edit.vue
View File

@@ -192,7 +192,7 @@
</v-card-text>
</v-card>
<nuxt-link
class="mt-5 d-flex flex-column justify-center text-center"
class="mt-5 d-flex flex-column justify-center text-center text-primary"
:to="`/group`"
> {{
$t('profile.looking-for-privacy-settings') }} </nuxt-link>

4
frontend/app/plugins/dark-mode.client.ts
View File

@@ -6,12 +6,12 @@ export default defineNuxtPlugin((nuxtApp) => {
console.log(`changing theme to ${v ? "dark" : "light"} using @vueuse/useDark`);
const $vuetify = nuxtApp.vueApp.$nuxt.$vuetify;
if ($vuetify)
$vuetify.theme.global.name.value = v ? "dark" : "light";
$vuetify.theme.toggle();
},
});
nuxtApp.hook("vuetify:ready", (vuetify) => {
vuetify.theme.global.name.value = isDark.value ? "dark" : "light";
vuetify.theme.change(isDark.value ? "dark" : "light");
});
return {