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

improved meal plan UI

Browse Source
This commit is contained in:
vabene1111
2023-09-08 14:13:27 +02:00
parent 15ed040533
commit 65d670a995
3 changed files with 184 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
vue/src/apps/MealPlanView/MealPlanView.vue
View File

@@ -1,29 +1,34 @@
<template> <template>
<div> <div>
<b-tabs content-class="mt-3" v-model="current_tab">
<b-tab :title="$t('Planner')" active>
<div class=" d-none d-lg-block"> <div class=" d-none d-lg-block">
<div class="row"> <div class="row">
<div class="col col-2"> <div class="col col-2">
<h4>{{ $t('Meal_Types') }}</h4> <h4>{{ $t('Meal_Types') }}</h4>
<b-form-checkbox :button-variant="danger" v-model="mt.checked" size="lg" v-for="mt in meal_types" v-bind:key="mt.id"> <div class="d-flex flex-row align-items-center border" v-for="mt in meal_types" v-bind:key="mt.id">
<div class="flex-column" style="width: 2.5rem; height: 2.5rem;" :style="{'background-color': mt.color}"></div>
<div class="flex-column flex-grow-1 align-middle justify-content-center">
<div class="card-body p-2 align-middle">
{{ mt.name }}
</div>
</div>
<b-badge variant="primary" :style="{'background-color':mt.color}">{{ mt.name }}</b-badge> </div>
</b-form-checkbox>
<hr/> <hr/>
<button class="btn btn-success shadow-none mt-1 btn-block" @click="createEntryClick(new Date())"><i <button class="btn btn-success shadow-none mt-1 btn-block" @click="createEntryClick(new Date())"><i
class="fas fa-calendar-plus"></i> {{ $t("Create") }} class="fas fa-calendar-plus"></i> {{ $t("Create") }}
</button> </button>
<button class="btn btn-primary shadow-none mt-1 btn-block" @click="createAutoPlan(new Date())"><i <button class="btn btn-warning shadow-none mt-1 btn-block" @click="createAutoPlan(new Date())"><i
class="fas fa-calendar-plus"></i> {{ $t("Auto_Planner") }} class="fas fa-calendar-plus"></i> {{ $t("Auto_Planner") }}
</button> </button>
<a class="btn btn-primary shadow-none mt-1 btn-blockmt-1 btn-block" :href="iCalUrl"><i class="fas fa-download"></i> <a class="btn btn-primary shadow-none mt-1 btn-blockmt-1 btn-block" :href="iCalUrl"><i class="fas fa-download"></i>
{{ $t("Export_To_ICal") }} {{ $t("Export_To_ICal") }}
</a> </a>
<a class="btn btn-info shadow-none mt-1 btn-block" :href="resolveDjangoUrl('view_settings')">
<i class="fas fa-cogs"></i> {{ $t("Settings") }}
</a>
</div> </div>
<div class="col col-10"> <div class="col col-10">
<div class="row calender-row "> <div class="row calender-row ">
@@ -152,68 +157,7 @@
</div> </div>
</div> </div>
</b-tab>
<b-tab :title="$t('Settings')">
<div class="row mt-3">
<div class="col-12 col-md-9 col-lg-6">
<h5>{{ $t("Meal_Types") }}</h5>
<div>
<draggable :list="meal_types" group="meal_types" :empty-insert-threshold="10"
@sort="sortMealTypes()" ghost-class="ghost">
<b-card no-body class="mt-1 list-group-item p-2" style="cursor: move"
v-for="(meal_type, index) in meal_types" v-hover :key="meal_type.id">
<b-card-header class="p-2 border-0">
<div class="row">
<div class="col-2">
<button type="button" class="btn btn-lg shadow-none"><i
class="fas fa-arrows-alt-v"></i></button>
</div>
<div class="col-10">
<h5 class="mt-1 mb-1">
{{ meal_type.name }}<span class="float-right text-primary" style="cursor: pointer"
><i class="fa"
v-bind:class="{ 'fa-pen': !meal_type.editing, 'fa-save': meal_type.editing }"
@click="editOrSaveMealType(index)" aria-hidden="true"></i
></span>
</h5>
</div>
</div>
</b-card-header>
<b-card-body class="p-4" v-if="meal_type.editing">
<div class="form-group">
<label>{{ $t("Name") }}</label>
<input class="form-control" :placeholder="$t('Name')"
v-model="meal_type.name"/>
</div>
<div class="form-group">
<label>{{ $t("Color") }}</label>
<input class="form-control" type="color" name="Name"
:value="meal_type.color"
@change="meal_type.color = $event.target.value"/>
</div>
<b-form-checkbox id="checkbox-1" v-model="meal_type.default"
name="default_checkbox" class="mb-2">
{{ $t("Default") }}
</b-form-checkbox>
<button class="btn btn-danger" @click="deleteMealType(index)">{{
$t("Delete")
}}
</button>
<button class="btn btn-primary float-right" @click="editOrSaveMealType(index)">
{{ $t("Save") }}
</button>
</b-card-body>
</b-card>
</draggable>
<button class="btn btn-success float-right mt-1" @click="newMealType">
<i class="fas fa-plus"></i>
{{ $t("New_Meal_Type") }}
</button>
</div>
</div>
</div>
</b-tab>
</b-tabs>
<ContextMenu ref="menu"> <ContextMenu ref="menu">
<template #menu="{ contextData }"> <template #menu="{ contextData }">
<ContextMenuItem <ContextMenuItem
@@ -336,7 +280,6 @@ export default {
ContextMenu, ContextMenu,
ContextMenuItem, ContextMenuItem,
MealPlanCalenderHeader, MealPlanCalenderHeader,
draggable,
BottomNavigationBar, BottomNavigationBar,
}, },
mixins: [CalendarMathMixin, ApiMixin, ResolveUrlMixin], mixins: [CalendarMathMixin, ApiMixin, ResolveUrlMixin],
@@ -362,7 +305,6 @@ export default {
displayWeekNumbers: true, displayWeekNumbers: true,
}, },
dragged_item: null, dragged_item: null,
current_tab: 0,
meal_types: [], meal_types: [],
current_context_menu_item: null, current_context_menu_item: null,
options: { options: {
@@ -404,7 +346,7 @@ export default {
}, },
item_height: function () { item_height: function () {
if (this.settings.displayPeriodUom === "week") { if (this.settings.displayPeriodUom === "week") {
return "10rem" return "3rem"
} else { } else {
return "1.6rem" return "1.6rem"
} }

2
vue/src/components/MealPlanCalenderHeader.vue
View File

@@ -29,7 +29,7 @@
<b-form-select class="ml-1" id="UomInput" v-model="settings.displayPeriodCount" :options="options.displayPeriodCount"></b-form-select> <b-form-select class="ml-1" id="UomInput" v-model="settings.displayPeriodCount" :options="options.displayPeriodCount"></b-form-select>
</span> </span>
<span <span
class="delete-area text-danger p-1 mr-2 ml-1 d-none d-sm-flex align-items-center" class="delete-area text-danger p-1 mr-2 ml-1 d-none d-sm-flex align-items-center rounded"
@drop.prevent="onDeleteDrop($event)" @drop.prevent="onDeleteDrop($event)"
@dragenter.prevent="onDeleteDragEnter($event)" @dragenter.prevent="onDeleteDragEnter($event)"
@dragleave.prevent="onDeleteDragLeave($event)" @dragleave.prevent="onDeleteDragLeave($event)"

72
vue/src/components/MealPlanCard.vue
View File

@@ -1,52 +1,34 @@
<template> <template>
<div
v-hover <div v-hover
class="card cv-item meal-plan-card p-0" class="card cv-item meal-plan-card p-0"
:key="value.id" :key="value.id"
:draggable="true" :draggable="true"
:style="`top:${top};max-height:${item_height}`" :style="{'top': top, 'height': item_height, 'border-color': entry.entry.meal_type.color}"
@dragstart="onDragItemStart(value, $event)" @dragstart="onDragItemStart(value, $event)"
@click="onClickItem(value, $event)" @click="onClickItem(value, $event)"
:aria-grabbed="value == currentDragItem" :aria-grabbed="value == currentDragItem"
:class="value.classes" :class="value.classes"
@contextmenu.prevent="$emit('open-context-menu', $event, value)" @contextmenu.prevent="$emit('open-context-menu', $event, value)">
>
<div class="card-header p-1 text-center text-primary border-bottom-0" v-if="detailed" :style="`background-color: ${background_color}`"> <div class="d-flex flex-row align-items-center">
<span class="font-light text-center" v-if="entry.entry.meal_type.icon != null">{{ entry.entry.meal_type.icon }}</span> <div class="flex-column">
<span class="font-light d-none d-md-inline">{{ entry.entry.meal_type.name }}</span> <img class="" style="object-fit: cover" :style="{'height': item_height, 'width': item_height}" :src="entry.entry.recipe.image"
<span v-if="entry.entry.shopping" class="font-light"><i class="fas fa-shopping-cart fa-xs float-left" v-b-tooltip.hover.top :title="$t('in_shopping')"/></span> v-if="hasRecipe && detailed"/>
<img class="" style="object-fit: cover" :style="{'height': item_height, 'width': item_height}" :src="image_placeholder"
v-if="detailed && ((!hasRecipe && entry.entry.note === '') || (hasRecipe && entry.entry.recipe.image === null))"/>
</div> </div>
<div class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right p-0" v-if="detailed"> <div class="flex-column flex-grow-0 align-middle justify-content-center">
<a> <div class="card-body p-0 pl-1 align-middle">
<div style="position: static">
<div class="dropdown b-dropdown position-static btn-group"> <span class="font-light" :class="{'two-line-text': detailed,'one-line-text': !detailed,}">
<button <i class="fas fa-shopping-cart fa-xs float-left" v-b-tooltip.hover.top :title="$t('in_shopping')" v-if="entry.entry.shopping"/>
aria-haspopup="true" {{ title }}</span>
aria-expanded="false"
type="button"
class="btn btn-link text-decoration-none text-body pr-2 dropdown-toggle-no-caret"
@click.stop="$emit('open-context-menu', $event, value)"
>
<i class="fas fa-ellipsis-v fa-lg"></i>
</button>
</div> </div>
</div> </div>
</a>
</div>
<div class="card-header p-1 text-center" v-if="detailed" :style="`background-color: ${background_color}`">
<span class="font-light">{{ title }}</span>
</div>
<b-img fluid class="card-img-bottom" :src="entry.entry.recipe.image" v-if="hasRecipe && detailed"></b-img>
<b-img fluid class="card-img-bottom" :src="image_placeholder" v-if="detailed && ((!hasRecipe && entry.entry.note === '') || (hasRecipe && entry.entry.recipe.image === null))"></b-img>
<div class="card-body p-1" v-if="detailed && entry.entry.recipe == null" :style="`background-color: ${background_color}`">
<p>{{ entry.entry.note }}</p>
</div> </div>
<div class="row p-1 flex-nowrap" v-if="!detailed" :style="`background-color: ${background_color}`">
<div class="col-10 d-inline-block text-truncate" :style="`max-height:${item_height}`">
<span class="font-light">{{ title }}</span>
</div>
</div>
</div> </div>
</template> </template>
@@ -131,4 +113,22 @@ export default {
font-size: 13px; font-size: 13px;
} }
} }
.two-line-text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.one-line-text {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
</style> </style>