Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-09 03:04:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

collapse steps on check (#609)

Browse Source 
* collapse steps on check

* add grad-and-drop reorder of steps

* fix-title bar

Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden 2021-07-01 17:44:46 -08:00 committed by GitHub
parent b54a7d4fcc
commit 74b1e6236b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 93 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
frontend/src/components/Recipe/Parts/Instructions.vue
View File

@ -2,74 +2,98 @@
<div> <div>
<h2 class="mb-4">{{ $t("recipe.instructions") }}</h2> <h2 class="mb-4">{{ $t("recipe.instructions") }}</h2>
<div> <div>
<div v-for="(step, index) in value" :key="index"> <draggable
<v-app-bar v-if="showTitleEditor[index]" class="primary mx-1 mt-6" dark dense rounded> :disabled="!edit"
<v-toolbar-title class="headline" v-if="!edit"> :value="value"
<v-app-bar-title v-text="step.title"> </v-app-bar-title> @input="updateIndex"
</v-toolbar-title> @start="drag = true"
<v-text-field @end="drag = false"
v-if="edit" handle=".handle"
class="headline pa-0 mt-5" >
v-model="step.title" <div v-for="(step, index) in value" :key="index">
dense <v-app-bar v-if="showTitleEditor[index]" class="primary mx-1 mt-6" dark dense rounded>
solo <v-toolbar-title class="headline" v-if="!edit">
flat <v-app-bar-title v-text="step.title"> </v-app-bar-title>
:placeholder="$t('recipe.section-title')" </v-toolbar-title>
background-color="primary" <v-text-field
> v-if="edit"
</v-text-field> class="headline pa-0 mt-5"
</v-app-bar> v-model="step.title"
<v-hover v-slot="{ hover }"> dense
<v-card solo
class="ma-1" flat
:class="[{ 'on-hover': hover }, isDisabled(index)]" :placeholder="$t('recipe.section-title')"
:elevation="hover ? 12 : 2" background-color="primary"
:ripple="!edit" >
@click="toggleDisabled(index)" </v-text-field>
> </v-app-bar>
<v-card-title> <v-hover v-slot="{ hover }">
<v-btn <v-card
v-if="edit" class="ma-1"
fab :class="[{ 'on-hover': hover }, isChecked(index)]"
x-small :elevation="hover ? 12 : 2"
color="white" :ripple="!edit"
class="mr-2" @click="toggleDisabled(index)"
elevation="0" >
@click="removeByIndex(value, index)" <v-card-title :class="{ 'pb-0': !isChecked(index) }">
> <v-btn
<v-icon size="24" color="error">{{ $globals.icons.delete }}</v-icon> v-if="edit"
</v-btn> fab
{{ $t("recipe.step-index", { step: index + 1 }) }} x-small
<v-btn v-if="edit" text color="primary" class="ml-auto" @click="toggleShowTitle(index)"> color="white"
{{ !showTitleEditor[index] ? $t('recipe.insert-section') : $t('recipe.remove-section') }} class="mr-2"
</v-btn> elevation="0"
</v-card-title> @click="removeByIndex(value, index)"
<v-card-text v-if="edit"> >
<v-textarea <v-icon size="24" color="error">{{ $globals.icons.delete }}</v-icon>
auto-grow </v-btn>
dense
v-model="value[index]['text']" {{ $t("recipe.step-index", { step: index + 1 }) }}
:key="generateKey('instructions', index)"
rows="4" <v-fade-transition>
> <v-icon v-if="isChecked(index)" size="24" class="ml-auto" color="success">
</v-textarea> {{ $globals.icons.checkboxMarkedCircle }}
</v-card-text> </v-icon>
<v-card-text v-else> </v-fade-transition>
<vue-markdown :source="step.text"> </vue-markdown>
</v-card-text> <v-btn v-if="edit" text color="primary" class="ml-auto" @click="toggleShowTitle(index)">
</v-card> {{ !showTitleEditor[index] ? $t("recipe.insert-section") : $t("recipe.remove-section") }}
</v-hover> </v-btn>
</div> <v-icon v-if="edit" class="handle">{{ $globals.icons.arrowUpDown }}</v-icon>
</v-card-title>
<v-card-text v-if="edit">
<v-textarea
auto-grow
dense
v-model="value[index]['text']"
:key="generateKey('instructions', index)"
rows="4"
>
</v-textarea>
</v-card-text>
<v-expand-transition>
<div class="m-0 p-0" v-if="!isChecked(index) && !edit">
<v-card-text>
<vue-markdown :source="step.text"> </vue-markdown>
</v-card-text>
</div>
</v-expand-transition>
</v-card>
</v-hover>
</div>
</draggable>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import draggable from "vuedraggable";
import VueMarkdown from "@adapttive/vue-markdown"; import VueMarkdown from "@adapttive/vue-markdown";
import { utils } from "@/utils"; import { utils } from "@/utils";
export default { export default {
components: { components: {
VueMarkdown, VueMarkdown,
draggable,
}, },
props: { props: {
value: { value: {
@ -96,8 +120,9 @@ export default {
value: { value: {
handler() { handler() {
this.disabledSteps = []; this.disabledSteps = [];
} this.showTitleEditor = this.value.map(x => this.validateTitle(x.title));
} },
},
}, },
methods: { methods: {
@ -121,7 +146,7 @@ export default {
this.disabledSteps.push(stepIndex); this.disabledSteps.push(stepIndex);
} }
}, },
isDisabled(stepIndex) { isChecked(stepIndex) {
if (this.disabledSteps.includes(stepIndex) && !this.edit) { if (this.disabledSteps.includes(stepIndex) && !this.edit) {
return "disabled-card"; return "disabled-card";
} else { } else {
@ -135,8 +160,11 @@ export default {
} }
this.$set(this.showTitleEditor, index, newVal); this.$set(this.showTitleEditor, index, newVal);
}, },
updateIndex(data) {
this.$emit("input", data);
},
}, },
}; };
</script> </script>
<style scoped></style>