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

recipe context actions

Browse Source
This commit is contained in:
vabene1111
2024-12-22 17:18:47 +01:00
parent 0c547353cd
commit d611391bea
9 changed files with 192 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
vue3/src/components/display/RecipeCard.vue
View File

@@ -1,52 +1,70 @@
<template>
<template v-if="!componentProps.loading">
<v-card :to="`/recipe/${componentProps.recipe.id}`" :style="{'height': componentProps.height}">
<template v-if="!props.loading">
<recipe-image :to="`/recipe/${props.recipe.id}`" :style="{'height': props.height}" :recipe="props.recipe" rounded="lg" class="mr-3 ml-3">
</recipe-image>
<div class="ml-3">
<div class="d-flex ">
<div class="flex-grow-1 ">
<p class="font-weight-bold mt-2">{{ props.recipe.name }}</p>
</div>
<div class="mt-1">
<!-- <v-btn icon="fas fa-ellipsis-v" size="small" variant="plain"></v-btn>-->
<recipe-context-menu :recipe="props.recipe" size="small"></recipe-context-menu>
</div>
</div>
<!-- <p class="text-disabled">{{ props.recipe.createdBy.displayName}}</p>-->
</div>
<v-card :to="`/recipe/${props.recipe.id}`" :style="{'height': props.height}" v-if="false">
<v-tooltip
class="align-center justify-center"
location="top center" origin="overlap"
no-click-animation
:open-on-hover="componentProps.recipe.description != null && componentProps.recipe.description != ''"
:open-on-hover="props.recipe.description != null && props.recipe.description != ''"
contained
>
<template v-slot:activator="{ props }">
<recipe-image
height="70%"
width="100%"
:recipe="componentProps.recipe"
:recipe="props.recipe"
>
</recipe-image>
<v-divider class="p-0" v-if="componentProps.recipe.image == null"></v-divider>
<v-divider class="p-0" v-if="props.recipe.image == null"></v-divider>
</template>
<div v-if="componentProps.recipe.description != null && componentProps.recipe.description != ''">
{{ componentProps.recipe.description }}
<div v-if="props.recipe.description != null && props.recipe.description != ''">
{{ props.recipe.description }}
</div>
</v-tooltip>
<v-card-item>
<div class="text-rows-2">
<h3>{{ componentProps.recipe.name }}</h3>
<h3>{{ props.recipe.name }}</h3>
</div>
<!-- TODO decide if context menu should be re-added (maybe make it a setting) -->
<!-- <recipe-context-menu class="float-end" :recipe="recipe"></recipe-context-menu>-->
</v-card-item>
<!-- <v-card-text>-->
<!-- <div class="text-rows-2">-->
<!-- <keywords-component variant="outlined" :keywords="componentProps.recipe.keywords">-->
<!-- <template #prepend>-->
<!-- <v-chip class="mb-1 me-1" size="x-small" prepend-icon="far fa-clock" label variant="outlined" v-if="componentProps.recipe.workingTime != undefined && componentProps.recipe.workingTime > 0">-->
<!-- {{ recipe.workingTime! + recipe.waitingTime! }}-->
<!-- </v-chip>-->
<!-- </template>-->
<!-- </keywords-component>-->
<!-- </div>-->
<!-- </v-card-text>-->
<!-- <v-card-text>-->
<!-- <div class="text-rows-2">-->
<!-- <keywords-component variant="outlined" :keywords="componentProps.recipe.keywords">-->
<!-- <template #prepend>-->
<!-- <v-chip class="mb-1 me-1" size="x-small" prepend-icon="far fa-clock" label variant="outlined" v-if="componentProps.recipe.workingTime != undefined && componentProps.recipe.workingTime > 0">-->
<!-- {{ recipe.workingTime! + recipe.waitingTime! }}-->
<!-- </v-chip>-->
<!-- </template>-->
<!-- </keywords-component>-->
<!-- </div>-->
<!-- </v-card-text>-->
</v-card>
</template>
<template v-else>
<v-card :style="{'height': componentProps.height}">
<v-card :style="{'height': props.height}">
<v-img src="../../assets/recipe_no_image.svg" cover height="60%"></v-img>
<v-card-title>
<v-skeleton-loader type="heading"></v-skeleton-loader>
@@ -68,12 +86,12 @@ import {Recipe, RecipeOverview} from "@/openapi";
import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
import RecipeImage from "@/components/display/RecipeImage.vue";
const componentProps = defineProps({
const props = defineProps({
recipe: {type: {} as PropType<Recipe | RecipeOverview>, required: true,},
loading: {type: Boolean, required: false},
show_keywords: {type: Boolean, required: false},
show_description: {type: Boolean, required: false},
height: {type: String, required: false, default: '25vh'},
height: {type: String, required: false, default: '15vh'},
})
</script>

5
vue3/src/components/display/RecipeImage.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-img :cover="cover" :style="{'height': height, 'width': width,}" :src="image" alt="Recipe Image">
<v-img :cover="cover" :style="{'height': height, 'width': width,}" style="background-color: #ffffff" :src="image" :alt="$t('Recipe_Image')" :rounded="props.rounded">
<slot name="overlay">
</slot>
@@ -16,7 +16,8 @@ const props = defineProps({
recipe: {type: {} as PropType<Recipe | RecipeOverview | undefined>, required: false, default: undefined},
height: {type: String},
width: {type: String},
cover: {type: Boolean, default: true}
cover: {type: Boolean, default: true},
rounded: {type: Boolean as PropType<Boolean|String>, default: false},
})
const image = computed(() => {