context menu

This commit is contained in:
hay-kot 2021-05-01 19:31:01 -08:00
commit a7fe96faeb
3 changed files with 11 additions and 10 deletions

View file

@ -18,7 +18,7 @@
v-on="on" v-on="on"
@click.prevent @click.prevent
> >
<v-icon>mdi-dots-vertical</v-icon> <v-icon>{{ menuIcon }}</v-icon>
</v-btn> </v-btn>
</template> </template>
<v-list dense> <v-list dense>
@ -48,6 +48,9 @@ export default {
slug: { slug: {
type: String, type: String,
}, },
menuIcon: {
default: "mdi-dots-vertical",
},
}, },
computed: { computed: {
loggedIn() { loggedIn() {

View file

@ -1,5 +1,6 @@
<template> <template>
<v-card <v-card
:ripple="false"
class="mx-auto" class="mx-auto"
hover hover
:to="`/recipe/${slug}`" :to="`/recipe/${slug}`"
@ -15,7 +16,7 @@
<v-img :src="getImage(slug)" lazy-src=""></v-img <v-img :src="getImage(slug)" lazy-src=""></v-img
></v-list-item-avatar> ></v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
<v-list-item-title class=" mb-1">{{ name }}</v-list-item-title> <v-list-item-title class=" mb-1">{{ name }} </v-list-item-title>
<v-list-item-subtitle> {{ description }} </v-list-item-subtitle> <v-list-item-subtitle> {{ description }} </v-list-item-subtitle>
<div class="d-flex justify-center align-center"> <div class="d-flex justify-center align-center">
<RecipeChips <RecipeChips
@ -34,6 +35,7 @@
size="15" size="15"
:value="rating" :value="rating"
></v-rating> ></v-rating>
<ContextMenu :slug="slug" menu-icon="mdi-dots-horizontal" />
</div> </div>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
@ -42,10 +44,12 @@
<script> <script>
import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips"; import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
import ContextMenu from "@/components/Recipe/ContextMenu";
import { api } from "@/api"; import { api } from "@/api";
export default { export default {
components: { components: {
RecipeChips, RecipeChips,
ContextMenu,
}, },
props: { props: {
name: String, name: String,

View file

@ -129,8 +129,7 @@ export default {
mounted() { mounted() {
this.getRecipeDetails(); this.getRecipeDetails();
this.jsonEditor = false; this.jsonEditor = false;
this.form = Boolean(this.edit); this.form = this.$route.query.edit === "true" && this.loggedIn;
console.log(this.form);
}, },
watch: { watch: {
@ -144,7 +143,7 @@ export default {
return this.$route.params.recipe; return this.$route.params.recipe;
}, },
edit() { edit() {
return this.$route.query.edit; return true;
}, },
showIcons() { showIcons() {
return this.form; return this.form;
@ -165,7 +164,6 @@ export default {
async getRecipeDetails() { async getRecipeDetails() {
this.recipeDetails = await api.recipes.requestDetails(this.currentRecipe); this.recipeDetails = await api.recipes.requestDetails(this.currentRecipe);
this.skeleton = false; this.skeleton = false;
this.form = false;
}, },
getImage(image) { getImage(image) {
if (image) { if (image) {
@ -212,10 +210,6 @@ export default {
} }
} }
}, },
showForm() {
this.form = true;
this.jsonEditor = false;
},
}, },
}; };
</script> </script>