Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-24 15:49:42 +02:00
Code Issues Releases Activity

feat: Added a dedicated cookmode dialog that allows for individual scrolling (#4464)

Browse source
This commit is contained in:
Tarek Auf der Strasse 2024-11-11 12:21:44 +01:00 • committed by GitHub
parent 65c35adc9d
commit d419acd61e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 190 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

44
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
View file

@ -65,8 +65,8 @@
</v-dialog>
<div class="d-flex justify-space-between justify-start">
<h2 class="mb-4 mt-1">{{ $t("recipe.instructions") }}</h2>
<BaseButton v-if="!isEditForm && showCookMode" minor cancel color="primary" @click="toggleCookMode()">
<h2 v-if="!isCookMode" class="mb-4 mt-1">{{ $t("recipe.instructions") }}</h2>
<BaseButton v-if="!isEditForm && !isCookMode" minor cancel color="primary" @click="toggleCookMode()">
<template #icon>
{{ $globals.icons.primary }}
</template>
@ -243,16 +243,31 @@
</DropZone>
<v-expand-transition>
<div v-show="!isChecked(index) && !isEditForm" class="m-0 p-0">
<v-card-text class="markdown">
<SafeMarkdown class="markdown" :source="step.text" />
<div v-if="isCookMode && step.ingredientReferences && step.ingredientReferences.length > 0">
<v-divider class="mb-2"></v-divider>
<RecipeIngredientHtml
v-for="ing in step.ingredientReferences"
:key="ing.referenceId"
:markup="getIngredientByRefId(ing.referenceId)"
/>
</div>
<v-row>
<v-col
v-if="isCookMode && step.ingredientReferences && step.ingredientReferences.length > 0"
cols="12"
sm="5"
>
<div class="ml-n4">
<RecipeIngredients
:value="recipe.recipeIngredient.filter((ing) => {
if(!step.ingredientReferences) return false
return step.ingredientReferences.map((ref) => ref.referenceId).includes(ing.referenceId || '')
})"
:scale="scale"
:disable-amount="recipe.settings.disableAmount"
:is-cook-mode="isCookMode"
/>
</div>
</v-col>
<v-divider v-if="isCookMode && step.ingredientReferences && step.ingredientReferences.length > 0 && $vuetify.breakpoint.smAndUp" vertical ></v-divider>
<v-col>
<SafeMarkdown class="markdown" :source="step.text" />
</v-col>
</v-row>
</v-card-text>
</div>
</v-expand-transition>
@ -261,7 +276,7 @@
</div>
</TransitionGroup>
</draggable>
<v-divider class="mt-10 d-flex d-md-none"/>
<v-divider v-if="!isCookMode" class="mt-10 d-flex d-md-none"/>
</section>
</template>
@ -287,7 +302,7 @@ import { usePageState } from "~/composables/recipe-page/shared-state";
import { useExtractIngredientReferences } from "~/composables/recipe-page/use-extract-ingredient-references";
import { NoUndefinedField } from "~/lib/api/types/non-generated";
import DropZone from "~/components/global/DropZone.vue";
import RecipeIngredients from "~/components/Domain/Recipe/RecipeIngredients.vue";
interface MergerHistory {
target: number;
source: number;
@ -300,6 +315,7 @@ export default defineComponent({
draggable,
RecipeIngredientHtml,
DropZone,
RecipeIngredients
},
props: {
value: {
@ -322,7 +338,7 @@ export default defineComponent({
},
setup(props, context) {
const { i18n, req } = useContext();
const { i18n, req, $vuetify } = useContext();
const BASE_URL = detectServerBaseUrl(req);
const { isCookMode, toggleCookMode, isEditForm } = usePageState(props.recipe.slug);