mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-01 04:10:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

added print mode to recipes

Browse Source
This commit is contained in:
vabene1111
2025-06-05 17:29:08 +02:00
parent 7b819843b7
commit d1a69dac90
8 changed files with 201 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
vue3/src/apps/tandoor/Tandoor.vue
View File

@@ -1,93 +1,97 @@
<template> <template>
<v-app> <v-app>
<v-app-bar color="tandoor" flat density="comfortable" v-if="!useUserPreferenceStore().isAuthenticated"> <v-app-bar color="tandoor" flat density="comfortable" v-if="!useUserPreferenceStore().isAuthenticated">
</v-app-bar> </v-app-bar>
<v-app-bar :color="useUserPreferenceStore().userSettings.navBgColor" flat density="comfortable" v-if="useUserPreferenceStore().isAuthenticated"> <v-app-bar :color="useUserPreferenceStore().userSettings.navBgColor" flat density="comfortable" v-if="useUserPreferenceStore().isAuthenticated">
<router-link :to="{ name: 'StartPage', params: {} }"> <router-link :to="{ name: 'StartPage', params: {} }">
<v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2" v-if="useUserPreferenceStore().userSettings.navShowLogo"></v-img> <v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2" v-if="useUserPreferenceStore().userSettings.navShowLogo"></v-img>
</router-link> </router-link>
<v-spacer></v-spacer>
<global-search-dialog></global-search-dialog>
<v-btn icon="$add">
<v-icon icon="$add" class="fa-fw"></v-icon>
<v-menu activator="parent">
<v-list>
<v-list-item prepend-icon="$add" :to="{ name: 'ModelEditPage', params: {model: 'recipe'} }">{{ $t('Create Recipe') }}</v-list-item>
<v-list-item prepend-icon="fa-solid fa-globe" :to="{ name: 'RecipeImportPage', params: {} }">{{ $t('Import Recipe') }}</v-list-item>
</v-list>
</v-menu>
</v-btn>
<v-avatar color="primary" class="me-2 cursor-pointer">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}
<v-menu activator="parent">
<v-list density="compact"> <v-spacer></v-spacer>
<v-list-item class="mb-1"> <global-search-dialog ></global-search-dialog>
<template #prepend> <v-btn icon="$add" class="d-print-none">
<v-avatar color="primary">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}</v-avatar> <v-icon icon="$add" class="fa-fw"></v-icon>
</template> <v-menu activator="parent">
<v-list-item-title>{{ useUserPreferenceStore().userSettings.user.displayName }}</v-list-item-title> <v-list>
<v-list-item-subtitle>{{ useUserPreferenceStore().activeSpace.name }}</v-list-item-subtitle> <v-list-item prepend-icon="$add" :to="{ name: 'ModelEditPage', params: {model: 'recipe'} }">{{ $t('Create Recipe') }}</v-list-item>
</v-list-item> <v-list-item prepend-icon="fa-solid fa-globe" :to="{ name: 'RecipeImportPage', params: {} }">{{ $t('Import Recipe') }}</v-list-item>
<v-divider></v-divider> </v-list>
<v-list-item :to="{ name: 'SettingsPage', params: {} }"> </v-menu>
<template #prepend> </v-btn>
<v-icon icon="fa-solid fa-sliders"></v-icon>
</template> <v-avatar color="primary" class="me-2 cursor-pointer d-print-none">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}
{{ $t('Settings') }} <v-menu activator="parent">
</v-list-item>
<v-list-item :to="{ name: 'ModelListPage', params: {model: 'food'} }"> <v-list density="compact">
<template #prepend> <v-list-item class="mb-1">
<v-icon icon="fa-solid fa-folder-tree"></v-icon>
</template>
{{ $t('Database') }}
</v-list-item>
<v-list-item :to="{ name: 'HelpPage' }">
<template #prepend>
<v-icon icon="fa-solid fa-question"></v-icon>
</template>
{{ $t('Help') }}
</v-list-item>
<!-- <v-list-item><template #prepend><v-icon icon="fa-solid fa-user-shield"></v-icon></template>Admin</v-list-item>-->
<!-- <v-list-item><template #prepend><v-icon icon="fa-solid fa-question"></v-icon></template>Help</v-list-item>-->
<template v-if="useUserPreferenceStore().spaces.length > 1">
<v-divider></v-divider>
<v-list-subheader>{{ $t('YourSpaces') }}</v-list-subheader>
<v-list-item v-for="s in useUserPreferenceStore().spaces" :key="s.id" @click="useUserPreferenceStore().switchSpace(s)">
<template #prepend> <template #prepend>
<v-icon icon="fa-solid fa-circle-dot" v-if="s.id == useUserPreferenceStore().activeSpace.id"></v-icon> <v-avatar color="primary">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}</v-avatar>
<v-icon icon="fa-solid fa-circle" v-else></v-icon>
</template> </template>
{{ s.name }} <v-list-item-title>{{ useUserPreferenceStore().userSettings.user.displayName }}</v-list-item-title>
<v-list-item-subtitle>{{ useUserPreferenceStore().activeSpace.name }}</v-list-item-subtitle>
</v-list-item> </v-list-item>
</template> <v-divider></v-divider>
<v-list-item :to="{ name: 'SettingsPage', params: {} }">
<template #prepend>
<v-icon icon="fa-solid fa-sliders"></v-icon>
</template>
{{ $t('Settings') }}
</v-list-item>
<v-list-item :to="{ name: 'ModelListPage', params: {model: 'food'} }">
<template #prepend>
<v-icon icon="fa-solid fa-folder-tree"></v-icon>
</template>
{{ $t('Database') }}
</v-list-item>
<v-list-item :to="{ name: 'HelpPage' }">
<template #prepend>
<v-icon icon="fa-solid fa-question"></v-icon>
</template>
{{ $t('Help') }}
</v-list-item>
<!-- <v-list-item><template #prepend><v-icon icon="fa-solid fa-user-shield"></v-icon></template>Admin</v-list-item>-->
<!-- <v-list-item><template #prepend><v-icon icon="fa-solid fa-question"></v-icon></template>Help</v-list-item>-->
<template v-if="useUserPreferenceStore().spaces.length > 1">
<v-divider></v-divider>
<v-list-subheader>{{ $t('YourSpaces') }}</v-list-subheader>
<v-list-item v-for="s in useUserPreferenceStore().spaces" :key="s.id" @click="useUserPreferenceStore().switchSpace(s)">
<template #prepend>
<v-icon icon="fa-solid fa-circle-dot" v-if="s.id == useUserPreferenceStore().activeSpace.id"></v-icon>
<v-icon icon="fa-solid fa-circle" v-else></v-icon>
</template>
{{ s.name }}
</v-list-item>
</template>
<v-divider></v-divider>
<v-list-item link>
<template #prepend>
<v-icon icon="fa-solid fa-database"></v-icon>
</template>
{{ $t('Messages') }}
<message-list-dialog></message-list-dialog>
</v-list-item>
<v-list-item :href="getDjangoUrl('admin')" target="_blank" v-if="useUserPreferenceStore().userSettings.user.isSuperuser">
<template #prepend>
<v-icon icon="fa-solid fa-shield"></v-icon>
</template>
{{ $t('Admin') }}
</v-list-item>
<v-list-item :href="getDjangoUrl('accounts/logout')" link>
<template #prepend>
<v-icon icon="fa-solid fa-arrow-right-from-bracket"></v-icon>
</template>
{{ $t('Logout') }}
</v-list-item>
</v-list>
</v-menu>
</v-avatar>
<v-divider></v-divider>
<v-list-item link>
<template #prepend>
<v-icon icon="fa-solid fa-database"></v-icon>
</template>
{{ $t('Messages') }}
<message-list-dialog></message-list-dialog>
</v-list-item>
<v-list-item :href="getDjangoUrl('admin')" target="_blank" v-if="useUserPreferenceStore().userSettings.user.isSuperuser">
<template #prepend>
<v-icon icon="fa-solid fa-shield"></v-icon>
</template>
{{ $t('Admin') }}
</v-list-item>
<v-list-item :href="getDjangoUrl('accounts/logout')" link>
<template #prepend>
<v-icon icon="fa-solid fa-arrow-right-from-bracket"></v-icon>
</template>
{{ $t('Logout') }}
</v-list-item>
</v-list>
</v-menu>
</v-avatar>
</v-app-bar> </v-app-bar>
<v-app-bar color="info" density="compact" v-if="useUserPreferenceStore().isAuthenticated && useUserPreferenceStore().activeSpace.maxRecipes == 10 && useUserPreferenceStore().serverSettings.hosted"> <v-app-bar color="info" density="compact"
v-if="useUserPreferenceStore().isAuthenticated && useUserPreferenceStore().activeSpace.maxRecipes == 10 && useUserPreferenceStore().serverSettings.hosted">
<p class="text-center w-100"> <p class="text-center w-100">
{{ $t('HostedFreeVersion') }} {{ $t('HostedFreeVersion') }}
<v-btn color="success" variant="flat" href="https://tandoor.dev/manage">{{ $t('UpgradeNow') }}</v-btn> <v-btn color="success" variant="flat" href="https://tandoor.dev/manage">{{ $t('UpgradeNow') }}</v-btn>
@@ -110,7 +114,8 @@
<router-view></router-view> <router-view></router-view>
</v-main> </v-main>
<v-navigation-drawer v-if="lgAndUp && useUserPreferenceStore().isAuthenticated"> <!-- completely hide in print mode because setting d-print-node keeps layout -->
<v-navigation-drawer v-if="lgAndUp && useUserPreferenceStore().isAuthenticated && !isPrintMode">
<v-list nav> <v-list nav>
<v-list-item :to="{ name: 'SettingsPage', params: {} }"> <v-list-item :to="{ name: 'SettingsPage', params: {} }">
<template #prepend> <template #prepend>
@@ -190,10 +195,13 @@ import {useDjangoUrls} from "@/composables/useDjangoUrls";
import {onMounted, ref} from "vue"; import {onMounted, ref} from "vue";
import {isSpaceAboveLimit} from "@/utils/logic_utils"; import {isSpaceAboveLimit} from "@/utils/logic_utils";
import '@/assets/tandoor_light.css' import '@/assets/tandoor_light.css'
import {useMediaQuery} from "@vueuse/core";
const {lgAndUp} = useDisplay() const {lgAndUp} = useDisplay()
const {getDjangoUrl} = useDjangoUrls() const {getDjangoUrl} = useDjangoUrls()
const isPrintMode = useMediaQuery('print')
onMounted(() => { onMounted(() => {
useUserPreferenceStore() useUserPreferenceStore()
}) })

95
vue3/src/components/display/IngredientsTable.vue
View File

@@ -8,56 +8,63 @@
<!-- </v-table>--> <!-- </v-table>-->
<!-- <v-data-table :items="ingredients" hide-default-footer hide-default-header :headers="tableHeaders" density="compact" v-if="ingredients.length > 0" @click:row="handleRowClick"--> <!-- <v-data-table :items="ingredients" hide-default-footer hide-default-header :headers="tableHeaders" density="compact" v-if="ingredients.length > 0" @click:row="handleRowClick"-->
<!-- items-per-page="0">--> <!-- items-per-page="0">-->
<!-- <template v-slot:item.checked="{ item }">--> <!-- <template v-slot:item.checked="{ item }">-->
<!-- <v-checkbox-btn v-model="item.checked" color="success" v-if="!item.isHeader"></v-checkbox-btn>--> <!-- <v-checkbox-btn v-model="item.checked" color="success" v-if="!item.isHeader"></v-checkbox-btn>-->
<!-- </template>--> <!-- </template>-->
<!-- <template v-slot:item.amount="{ item }">--> <!-- <template v-slot:item.amount="{ item }">-->
<!-- <template v-if="item.isHeader"><p style="width: 100px"><b>{{ item.note }}</b></p></template>--> <!-- <template v-if="item.isHeader"><p style="width: 100px"><b>{{ item.note }}</b></p></template>-->
<!-- <template v-else>{{ item.amount * props.ingredientFactor }}</template>--> <!-- <template v-else>{{ item.amount * props.ingredientFactor }}</template>-->
<!-- </template>--> <!-- </template>-->
<!-- <template v-slot:item.note="{ item }">--> <!-- <template v-slot:item.note="{ item }">-->
<!-- <v-icon class="far fa-comment float-right" v-if="item.note != '' && item.note != undefined">--> <!-- <v-icon class="far fa-comment float-right" v-if="item.note != '' && item.note != undefined">-->
<!-- <v-tooltip activator="parent" open-on-click location="start">{{ item.note }}</v-tooltip>--> <!-- <v-tooltip activator="parent" open-on-click location="start">{{ item.note }}</v-tooltip>-->
<!-- </v-icon>--> <!-- </v-icon>-->
<!-- </template>--> <!-- </template>-->
<!-- </v-data-table>--> <!-- </v-data-table>-->
<v-table density="compact"> <v-table density="compact">
<tbody> <tbody>
<template v-for="i in ingredients" :key="i.id" @click="i.checked = !i.checked">
<tr>
<template v-if="i.isHeader">
<td colspan="5" class="font-weight-bold">{{ i.note }}</td>
</template>
<template v-else>
<td style="width: 1%; text-wrap: nowrap" class="pa-0 d-print-none" v-if="showCheckbox">
<v-checkbox-btn v-model="i.checked" color="success" v-if="!i.isHeader"></v-checkbox-btn>
</td>
<td style="width: 1%; text-wrap: nowrap" class="pr-1"
v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)" v-if="!i.noAmount"></td>
<td style="width: 1%; text-wrap: nowrap" class="pr-1" v-if="i.noAmount"></td>
<td style="width: 1%; text-wrap: nowrap" class="pr-1">
<template v-if="i.unit && !i.noAmount"> {{ ingredientToUnitString(i, ingredientFactor) }}</template>
</td>
<td>
<template v-if="i.food">
<router-link v-if="i.food.recipe" :to="{name: 'RecipeViewPage', params: {id: i.food.recipe.id}}">
{{ ingredientToFoodString(i, ingredientFactor) }}
</router-link>
<a v-else-if="i.food.url" :href="i.food.url" target="_blank">{{ ingredientToFoodString(i, ingredientFactor) }}</a>
<span v-else>{{ ingredientToFoodString(i, ingredientFactor) }}</span>
<template v-if="i.note != '' && i.note != undefined">
<span class="text-disabled font-italic">&nbsp;{{ i.note }}</span>
</template>
</template>
<tr v-for="i in ingredients" :key="i.id" @click="i.checked = !i.checked">
<template v-if="i.isHeader">
<td colspan="5" class="font-weight-bold">{{ i.note }}</td>
</template>
<template v-else>
<td style="width: 1%; text-wrap: nowrap" class="pa-0" v-if="showCheckbox">
<v-checkbox-btn v-model="i.checked" color="success" v-if="!i.isHeader"></v-checkbox-btn>
</td>
<td style="width: 1%; text-wrap: nowrap" class="pr-1" v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)" v-if="!i.noAmount"></td>
<td style="width: 1%; text-wrap: nowrap" class="pr-1" v-if="i.noAmount"></td>
<td style="width: 1%; text-wrap: nowrap" class="pr-1">
<template v-if="i.unit && !i.noAmount"> {{ ingredientToUnitString(i, ingredientFactor) }}</template>
</td>
<td>
<template v-if="i.food">
<router-link v-if="i.food.recipe" :to="{name: 'RecipeViewPage', params: {id: i.food.recipe.id}}">
{{ ingredientToFoodString(i, ingredientFactor) }}
</router-link>
<a v-else-if="i.food.url" :href="i.food.url" target="_blank">{{ ingredientToFoodString(i, ingredientFactor) }}</a>
<span v-else>{{ ingredientToFoodString(i, ingredientFactor) }}</span>
</template>
</td>
<td style="width: 1%; text-wrap: nowrap"> </td>
<v-icon class="far fa-comment float-right" v-if="i.note != '' && i.note != undefined">
<v-tooltip activator="parent" open-on-click location="start">{{ i.note }}</v-tooltip> <td style="width: 1%; text-wrap: nowrap" class="d-print-none">
</v-icon> <v-icon class="far fa-comment float-right" v-if="i.note != '' && i.note != undefined">
</td> <v-tooltip activator="parent" open-on-click location="start">{{ i.note }}</v-tooltip>
</template> </v-icon>
</tr> </td>
</template>
</tr>
</template>
</tbody> </tbody>
</v-table> </v-table>

6
vue3/src/components/display/PropertyView.vue
View File

@@ -4,7 +4,7 @@
<v-icon icon="$properties"></v-icon> <v-icon icon="$properties"></v-icon>
{{ $t('Properties') }} {{ $t('Properties') }}
<v-btn-toggle border divided density="compact" class="float-right" v-if="hasRecipeProperties && hasRecipeProperties" v-model="sourceSelectedToShow"> <v-btn-toggle border divided density="compact" class="float-right d-print-none" v-if="hasRecipeProperties && hasRecipeProperties" v-model="sourceSelectedToShow">
<v-btn size="small" value="food">{{ $t('Food') }}</v-btn> <v-btn size="small" value="food">{{ $t('Food') }}</v-btn>
<v-btn size="small" value="recipe">{{ $t('Recipe') }}</v-btn> <v-btn size="small" value="recipe">{{ $t('Recipe') }}</v-btn>
</v-btn-toggle> </v-btn-toggle>
@@ -25,9 +25,9 @@
<td>{{ $n(p.propertyAmountPerServing) }} {{ p.unit }}</td> <td>{{ $n(p.propertyAmountPerServing) }} {{ p.unit }}</td>
<td>{{ $n(p.propertyAmountTotal) }} {{ p.unit }}</td> <td>{{ $n(p.propertyAmountTotal) }} {{ p.unit }}</td>
<td v-if="sourceSelectedToShow == 'food'"> <td v-if="sourceSelectedToShow == 'food'">
<v-btn @click="dialogProperty = p; dialog = true" variant="plain" color="warning" icon="fa-solid fa-triangle-exclamation" size="small" <v-btn @click="dialogProperty = p; dialog = true" variant="plain" color="warning" icon="fa-solid fa-triangle-exclamation" size="small" class="d-print-none"
v-if="p.missingValue"></v-btn> v-if="p.missingValue"></v-btn>
<v-btn @click="dialogProperty = p; dialog = true" variant="plain" icon="fa-solid fa-circle-info" size="small" v-if="!p.missingValue"></v-btn> <v-btn @click="dialogProperty = p; dialog = true" variant="plain" icon="fa-solid fa-circle-info" size="small" v-if="!p.missingValue" class="d-print-none"></v-btn>
</td> </td>
</tr> </tr>
</tbody> </tbody>

6
vue3/src/components/display/RecipeActivity.vue
View File

@@ -1,10 +1,8 @@
<template> <template>
<v-card class="mt-1"> <v-card class="mt-1" v-if="cookLogs.length > 0">
<v-card-title>{{ $t('Activity') }}</v-card-title> <v-card-title>{{ $t('Activity') }}</v-card-title>
<v-card-text> <v-card-text>
<v-list> <v-list>
<v-list-item v-for="c in cookLogs.sort((a,b) => a.createdAt! > b.createdAt! ? 1 : -1)" :key="c.id"> <v-list-item v-for="c in cookLogs.sort((a,b) => a.createdAt! > b.createdAt! ? 1 : -1)" :key="c.id">
<template #prepend> <template #prepend>
@@ -31,7 +29,7 @@
</v-card-text> </v-card-text>
</v-card> </v-card>
<v-card class="mt-1"> <v-card class="mt-1 d-print-none">
<v-card-text> <v-card-text>
<v-textarea :label="$t('Comment')" rows="2" v-model="newCookLog.comment"></v-textarea> <v-textarea :label="$t('Comment')" rows="2" v-model="newCookLog.comment"></v-textarea>
<v-row de> <v-row de>

99
vue3/src/components/display/RecipeView.vue
View File

@@ -89,15 +89,15 @@
</v-card-text> </v-card-text>
<v-row class="text-center text-body-2 mb-1 flex-grow-0"> <v-row class="text-center text-body-2 mb-1 flex-grow-0">
<v-col > <v-col>
<i class="fas fa-cogs fa-fw mr-1"></i> {{ recipe.workingTime }} {{ $t('min') }}<br/> <i class="fas fa-cogs fa-fw mr-1"></i> {{ recipe.workingTime }} {{ $t('min') }}<br/>
<div class="text-grey">{{ $t('WorkingTime') }}</div> <div class="text-grey">{{ $t('WorkingTime') }}</div>
</v-col> </v-col>
<v-col > <v-col>
<div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ recipe.waitingTime }} {{ $t('min') }}</div> <div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ recipe.waitingTime }} {{ $t('min') }}</div>
<div class="text-grey">{{ $t('WaitingTime') }}</div> <div class="text-grey">{{ $t('WaitingTime') }}</div>
</v-col> </v-col>
<v-col > <v-col>
<div class="cursor-pointer"> <div class="cursor-pointer">
<i class="fas fa-sort-numeric-up fa-fw mr-1"></i> {{ servings }} <br/> <i class="fas fa-sort-numeric-up fa-fw mr-1"></i> {{ servings }} <br/>
<div class="text-grey"><span v-if="recipe.servingsText">{{ recipe.servingsText }}</span><span v-else>{{ $t('Servings') }}</span></div> <div class="text-grey"><span v-if="recipe.servingsText">{{ recipe.servingsText }}</span><span v-else>{{ $t('Servings') }}</span></div>
@@ -129,56 +129,46 @@
<property-view v-model="recipe" :servings="servings" v-if="recipe.internal"></property-view> <property-view v-model="recipe" :servings="servings" v-if="recipe.internal"></property-view>
<v-expansion-panels class="mt-2"> <v-card class="mt-2">
<v-card-text>
<v-expansion-panel> <v-row>
<v-expansion-panel-title> <v-col cols="12" md="3">
<v-icon icon="fa-solid fa-circle-info" class="me-2"></v-icon> <v-card
{{ $t('Information') }} variant="outlined"
</v-expansion-panel-title> :title="$t('CreatedBy')"
<v-expansion-panel-text> :subtitle="recipe.createdBy.displayName"
<v-row> prepend-icon="fa-solid fa-user">
<v-col cols="12" md="3"> </v-card>
<v-card </v-col>
variant="outlined" <v-col cols="12" md="3">
:title="$t('CreatedBy')" <v-card
:subtitle="recipe.createdBy.displayName" variant="outlined"
prepend-icon="fa-solid fa-user"> :title="$t('Created')"
</v-card> :subtitle="DateTime.fromJSDate(recipe.createdAt).toLocaleString(DateTime.DATETIME_MED)"
</v-col> prepend-icon="$create">
<v-col cols="12" md="3"> </v-card>
<v-card </v-col>
variant="outlined" <v-col cols="12" md="3">
:title="$t('Created')" <v-card
:subtitle="DateTime.fromJSDate(recipe.createdAt).toLocaleString(DateTime.DATETIME_MED)" variant="outlined"
prepend-icon="$create"> :title="$t('Updated')"
</v-card> :subtitle="DateTime.fromJSDate(recipe.updatedAt).toLocaleString(DateTime.DATETIME_MED)"
</v-col> prepend-icon="$edit">
<v-col cols="12" md="3"> </v-card>
<v-card </v-col>
variant="outlined" <v-col cols="12" md="3" v-if="recipe.sourceUrl">
:title="$t('Updated')" <v-card
:subtitle="DateTime.fromJSDate(recipe.updatedAt).toLocaleString(DateTime.DATETIME_MED)" variant="outlined"
prepend-icon="$edit"> :title="$t('Imported_From')"
</v-card> prepend-icon="$import">
</v-col> <template #subtitle>
<v-col cols="12" md="3" v-if="recipe.sourceUrl"> <a :href="recipe.sourceUrl" target="_blank">{{ recipe.sourceUrl }}</a>
<v-card </template>
variant="outlined" </v-card>
:title="$t('Imported_From')" </v-col>
prepend-icon="$import"> </v-row>
<template #subtitle> </v-card-text>
<a :href="recipe.sourceUrl" target="_blank">{{ recipe.sourceUrl }}</a> </v-card>
</template>
</v-card>
</v-col>
</v-row>
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
<recipe-activity :recipe="recipe"></recipe-activity> <recipe-activity :recipe="recipe"></recipe-activity>
</template> </template>
@@ -195,12 +185,13 @@ import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
import KeywordsComponent from "@/components/display/KeywordsBar.vue"; import KeywordsComponent from "@/components/display/KeywordsBar.vue";
import RecipeImage from "@/components/display/RecipeImage.vue"; import RecipeImage from "@/components/display/RecipeImage.vue";
import ExternalRecipeViewer from "@/components/display/ExternalRecipeViewer.vue"; import ExternalRecipeViewer from "@/components/display/ExternalRecipeViewer.vue";
import {useWakeLock} from "@vueuse/core"; import {useMediaQuery, useWakeLock} from "@vueuse/core";
import StepView from "@/components/display/StepView.vue"; import StepView from "@/components/display/StepView.vue";
import {DateTime} from "luxon"; import {DateTime} from "luxon";
import PropertyView from "@/components/display/PropertyView.vue"; import PropertyView from "@/components/display/PropertyView.vue";
const {request, release} = useWakeLock() const {request, release} = useWakeLock()
const isPrintMode = useMediaQuery('print')
const recipe = defineModel<Recipe>({required: true}) const recipe = defineModel<Recipe>({required: true})

2
vue3/src/components/display/StepView.vue
View File

@@ -8,7 +8,7 @@
<span v-else>{{ $t('Step') }} {{ props.stepNumber }}</span> <span v-else>{{ $t('Step') }} {{ props.stepNumber }}</span>
</v-col> </v-col>
<v-col class="text-right"> <v-col class="text-right">
<v-btn-group density="compact" variant="tonal"> <v-btn-group density="compact" variant="tonal" class="d-print-none">
<v-btn size="small" color="info" v-if="step.time != undefined && step.time > 0" @click="timerRunning = true"><i <v-btn size="small" color="info" v-if="step.time != undefined && step.time > 0" @click="timerRunning = true"><i
class="fas fa-stopwatch mr-1 fa-fw"></i> {{ step.time }} class="fas fa-stopwatch mr-1 fa-fw"></i> {{ step.time }}
</v-btn> </v-btn>

6
vue3/src/components/inputs/GlobalSearchDialog.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<slot name="activator"> <slot name="activator" >
<v-btn @click="dialog = true" variant="plain" icon="fa-solid fa-search" class="mr-1 fa-fw" v-if="mobile"></v-btn> <v-btn @click="dialog = true" variant="plain" icon="fa-solid fa-search" class="mr-1 fa-fw d-print-none" v-if="mobile"></v-btn>
<v-btn @click="dialog = true" variant="plain" v-else> <v-btn @click="dialog = true" variant="plain" class="d-print-none" v-else>
<v-icon icon="fa-solid fa-search" class="mr-1 fa-fw"></v-icon> <v-icon icon="fa-solid fa-search" class="mr-1 fa-fw"></v-icon>
<span class="d-none d-sm-block">{{ $t('Search') }}</span> <span class="d-none d-sm-block">{{ $t('Search') }}</span>
<v-chip size="x-small" variant="tonal" class="d-none d-md-flex ml-1" label>{{ $t('Ctrl+K') }}</v-chip> <v-chip size="x-small" variant="tonal" class="d-none d-md-flex ml-1" label>{{ $t('Ctrl+K') }}</v-chip>

13
vue3/src/components/inputs/RecipeContextMenu.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<v-btn v-bind="props" icon="fa-solid fa-ellipsis-v" variant="plain" :size="props.size"> <v-btn v-bind="props" icon="fa-solid fa-ellipsis-v" variant="plain" :size="props.size" class="d-print-none">
<v-icon icon="fa-solid fa-ellipsis-v"></v-icon> <v-icon icon="fa-solid fa-ellipsis-v"></v-icon>
<v-menu activator="parent" close-on-content-click> <v-menu activator="parent" close-on-content-click>
<v-list density="compact" class="pt-1 pb-1"> <v-list density="compact" class="pt-1 pb-1">
@@ -21,6 +21,11 @@
{{ $t('Share') }} {{ $t('Share') }}
<recipe-share-dialog :recipe="props.recipe"></recipe-share-dialog> <recipe-share-dialog :recipe="props.recipe"></recipe-share-dialog>
</v-list-item> </v-list-item>
<!-- TODO when calling print() some timing or whatever issue makes it so the useMediaQuery does not work and the sidebar is still shown -->
<!-- <v-list-item prepend-icon="fa-solid fa-print" @click="openPrintView()">-->
<!-- {{ $t('Print') }}-->
<!-- </v-list-item>-->
</v-list> </v-list>
</v-menu> </v-menu>
</v-btn> </v-btn>
@@ -29,7 +34,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {PropType} from 'vue' import {nextTick, PropType} from 'vue'
import {Recipe, RecipeFlat, RecipeOverview} from "@/openapi"; import {Recipe, RecipeFlat, RecipeOverview} from "@/openapi";
import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue"; import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
import RecipeShareDialog from "@/components/dialogs/RecipeShareDialog.vue"; import RecipeShareDialog from "@/components/dialogs/RecipeShareDialog.vue";
@@ -41,6 +46,10 @@ const props = defineProps({
size: {type: String, default: 'medium'}, size: {type: String, default: 'medium'},
}) })
function openPrintView() {
print()
}
</script> </script>