mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-30 18:49:41 +02:00
feat: Added a dedicated cookmode dialog that allows for individual scrolling (#4464)
This commit is contained in:
Tarek Auf der Strasse
GitHub
parent
65c35adc9d
commit
d419acd61e
6 changed files with 190 additions and 87 deletions
|
|
@ -1,14 +1,16 @@
|
|||
<template>
|
||||
<div v-if="value && value.length > 0">
|
||||
<div class="d-flex justify-start">
|
||||
<div v-if="!isCookMode" class="d-flex justify-start" >
|
||||
<h2 class="mb-2 mt-1">{{ $t("recipe.ingredients") }}</h2>
|
||||
<AppButtonCopy btn-class="ml-auto" :copy-text="ingredientCopyText" />
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="(ingredient, index) in value" :key="'ingredient' + index">
|
||||
<template v-if="!isCookMode">
|
||||
<h3 v-if="showTitleEditor[index]" class="mt-2">{{ ingredient.title }}</h3>
|
||||
<v-divider v-if="showTitleEditor[index]"></v-divider>
|
||||
<v-list-item dense @click="toggleChecked(index)">
|
||||
</template>
|
||||
<v-list-item dense @click.stop="toggleChecked(index)">
|
||||
<v-checkbox hide-details :value="checked[index]" class="pt-0 my-auto py-auto" color="secondary" />
|
||||
<v-list-item-content :key="ingredient.quantity">
|
||||
<RecipeIngredientListItem :ingredient="ingredient" :disable-amount="disableAmount" :scale="scale" />
|
||||
|
|
@ -40,6 +42,10 @@ export default defineComponent({
|
|||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
isCookMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
function validateTitle(title?: string) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<v-container :class="{ 'pa-0': $vuetify.breakpoint.smAndDown }">
|
||||
<div>
|
||||
<v-container v-show="!isCookMode" key="recipe-page" :class="{ 'pa-0': $vuetify.breakpoint.smAndDown }">
|
||||
<v-card :flat="$vuetify.breakpoint.smAndDown" class="d-print-none">
|
||||
<RecipePageHeader
|
||||
:recipe="recipe"
|
||||
|
|
@ -70,6 +71,65 @@
|
|||
/>
|
||||
<RecipePrintContainer :recipe="recipe" :scale="scale" />
|
||||
</v-container>
|
||||
<!-- Cook mode displayes two columns with ingredients and instructions side by side, each being scrolled individually, allowing to view both at the same timer -->
|
||||
<v-sheet v-show="isCookMode && !hasLinkedIngredients" key="cookmode" :style="{height: $vuetify.breakpoint.smAndUp ? 'calc(100vh - 48px)' : ''}"> <!-- the calc is to account for the toolbar a more dynamic solution could be needed -->
|
||||
<v-row style="height: 100%;" no-gutters class="overflow-hidden">
|
||||
<v-col cols="12" sm="5" class="overflow-y-auto pl-4 pr-3 py-2" style="height: 100%;">
|
||||
<div class="d-flex align-center">
|
||||
<RecipePageScale :recipe="recipe" :scale.sync="scale" :landscape="landscape" />
|
||||
</div>
|
||||
<RecipePageIngredientToolsView v-if="!isEditForm" :recipe="recipe" :scale="scale" :is-cook-mode="isCookMode" />
|
||||
<v-divider></v-divider>
|
||||
</v-col>
|
||||
<v-col class="overflow-y-auto py-2" style="height: 100%;" cols="12" sm="7">
|
||||
<RecipePageInstructions
|
||||
v-model="recipe.recipeInstructions"
|
||||
class="overflow-y-hidden px-4"
|
||||
:assets.sync="recipe.assets"
|
||||
:recipe="recipe"
|
||||
:scale="scale"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-sheet>
|
||||
<v-sheet v-show="isCookMode && hasLinkedIngredients">
|
||||
<div class="mt-2 px-2 px-md-4">
|
||||
<RecipePageScale :recipe="recipe" :scale.sync="scale" :landscape="landscape"/>
|
||||
</div>
|
||||
<RecipePageInstructions
|
||||
v-model="recipe.recipeInstructions"
|
||||
class="overflow-y-hidden mt-n5 px-2 px-md-4"
|
||||
:assets.sync="recipe.assets"
|
||||
:recipe="recipe"
|
||||
:scale="scale"
|
||||
/>
|
||||
<v-divider></v-divider>
|
||||
<div class="px-2 px-md-4 pb-4 ">
|
||||
<v-card flat>
|
||||
<v-card-title>{{ $t('recipe.not-linked-ingredients') }}</v-card-title>
|
||||
<RecipeIngredients
|
||||
:value="notLinkedIngredients"
|
||||
:scale="scale"
|
||||
:disable-amount="recipe.settings.disableAmount"
|
||||
:is-cook-mode="isCookMode">
|
||||
|
||||
</RecipeIngredients>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-sheet>
|
||||
<v-btn
|
||||
v-if="isCookMode"
|
||||
fab
|
||||
small
|
||||
color="primary"
|
||||
style="position: fixed; right: 12px; top: 60px;"
|
||||
@click="toggleCookMode()"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -84,6 +144,7 @@ import {
|
|||
useRoute,
|
||||
} from "@nuxtjs/composition-api";
|
||||
import { invoke, until } from "@vueuse/core";
|
||||
import RecipeIngredients from "../RecipeIngredients.vue";
|
||||
import RecipePageEditorToolbar from "./RecipePageParts/RecipePageEditorToolbar.vue";
|
||||
import RecipePageFooter from "./RecipePageParts/RecipePageFooter.vue";
|
||||
import RecipePageHeader from "./RecipePageParts/RecipePageHeader.vue";
|
||||
|
|
@ -133,6 +194,7 @@ export default defineComponent({
|
|||
RecipeNotes,
|
||||
RecipePageInstructions,
|
||||
RecipePageFooter,
|
||||
RecipeIngredients
|
||||
},
|
||||
props: {
|
||||
recipe: {
|
||||
|
|
@ -151,6 +213,13 @@ export default defineComponent({
|
|||
const { pageMode, editMode, setMode, isEditForm, isEditJSON, isCookMode, isEditMode, toggleCookMode } =
|
||||
usePageState(props.recipe.slug);
|
||||
const { deactivateNavigationWarning } = useNavigationWarning();
|
||||
const notLinkedIngredients = computed(() => {
|
||||
console.log("inst",props.recipe.recipeInstruction);
|
||||
return props.recipe.recipeIngredient.filter((ingredient) => {
|
||||
return !props.recipe.recipeInstructions.some((step) => step.ingredientReferences?.map((ref) => ref.referenceId).includes(ingredient.referenceId));
|
||||
})
|
||||
})
|
||||
console.log(notLinkedIngredients);
|
||||
|
||||
/** =============================================================
|
||||
* Recipe Snapshot on Mount
|
||||
|
|
@ -176,11 +245,14 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
deactivateNavigationWarning();
|
||||
toggleCookMode()
|
||||
|
||||
clearPageState(props.recipe.slug || "");
|
||||
console.debug("reset RecipePage state during unmount");
|
||||
});
|
||||
|
||||
const hasLinkedIngredients = computed(() => {
|
||||
return props.recipe.recipeInstructions.some((step) => step.ingredientReferences && step.ingredientReferences.length > 0);
|
||||
})
|
||||
/** =============================================================
|
||||
* Set State onMounted
|
||||
*/
|
||||
|
|
@ -278,6 +350,8 @@ export default defineComponent({
|
|||
saveRecipe,
|
||||
deleteRecipe,
|
||||
addStep,
|
||||
hasLinkedIngredients,
|
||||
notLinkedIngredients
|
||||
};
|
||||
},
|
||||
head: {},
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
:value="recipe.recipeIngredient"
|
||||
:scale="scale"
|
||||
:disable-amount="recipe.settings.disableAmount"
|
||||
:is-cook-mode="isCookMode"
|
||||
/>
|
||||
<div v-if="!isEditMode && recipe.tools && recipe.tools.length > 0">
|
||||
<h2 class="mb-2 mt-4">{{ $t('tool.required-tools') }}</h2>
|
||||
|
|
@ -46,6 +47,10 @@ export default defineComponent({
|
|||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
isCookMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const { isOwnGroup } = useLoggedInState();
|
||||
|
|
|
|||
|
|
@ -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)"
|
||||
<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);
|
||||
|
|
|
|||
|
|
@ -662,7 +662,8 @@
|
|||
"missing-food": "Create missing food: {food}",
|
||||
"no-food": "No Food"
|
||||
},
|
||||
"reset-servings-count": "Reset Servings Count"
|
||||
"reset-servings-count": "Reset Servings Count",
|
||||
"not-linked-ingredients": "Additional Ingredients"
|
||||
},
|
||||
"search": {
|
||||
"advanced-search": "Advanced Search",
|
||||
|
|
|
|||
|
|
@ -268,6 +268,7 @@ export interface RecipeStep {
|
|||
title?: string | null;
|
||||
text: string;
|
||||
ingredientReferences?: IngredientReferences[];
|
||||
summary?: string | null;
|
||||
}
|
||||
export interface RecipeAsset {
|
||||
name: string;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue