Merge branch 'develop' into feature/minor_ui_improvements

This commit is contained in:
Kaibu
2021-10-17 19:09:23 +02:00
committed by GitHub
5 changed files with 36 additions and 19 deletions

View File

@@ -41,13 +41,11 @@
<div class="periodLabel">
<slot name="label">{{ headerProps.periodLabel }}</slot>
</div>
<div class="actionArea d-none d-sm-flex">
<button class="btn btn-success plus-button pt-1 pb-1" @click="$emit('create-new')"><i class="fas fa-plus"></i>
</button>
<span class="delete-area text-danger p-1 mr-2 ml-2" @drop.prevent="onDeleteDrop($event)"
@dragenter.prevent="onDeleteDragEnter($event)" @dragleave.prevent="onDeleteDragLeave($event)"
@dragover.prevent="onDeleteDragEnter"><i
class="fas fa-trash"></i> {{ $t('Drag_Here_To_Delete') }}</span>
<div class="actionArea">
<button class="btn btn-secondary ical-button pt-1 pb-1 pl-3 pr-3 text-body" @click="exportiCal" v-b-tooltip.hover :title="$t('Export_As_ICal')"><i class="fas fa-calendar"></i></button>
<button class="btn btn-success plus-button pt-1 pb-1 pl-3 pr-3 mr-1 ml-1 text-body" @click="$emit('create-new')" v-b-tooltip.hover :title="$t('Create_Meal_Plan_Entry')"><i class="fas fa-plus"></i></button>
<span class="delete-area text-danger p-1 mr-2 ml-1 d-none d-sm-flex" @drop.prevent="onDeleteDrop($event)"
@dragenter.prevent="onDeleteDragEnter($event)" @dragleave.prevent="onDeleteDragLeave($event)" @dragover.prevent="onDeleteDragEnter"><i class="fas fa-trash"></i> {{ $t('Drag_Here_To_Delete') }}</span>
</div>
</div>
</template>
@@ -63,6 +61,7 @@ export default {
previousPeriodLabel: {type: String, default: "<"},
nextPeriodLabel: {type: String, default: ">"},
nextYearLabel: {type: String, default: ">>"},
iCalUrl: {type: String, default: ""},
},
methods: {
onDayForward() {
@@ -71,6 +70,9 @@ export default {
onDayBack() {
this.$emit("set-starting-day-back")
},
exportiCal() {
window.open(this.iCalUrl)
},
onInput(d) {
this.$emit("input", d)
},
@@ -115,17 +117,20 @@ export default {
font-size: 1.5em;
}
.plus-button {
border-style: dotted;
.ical-button {
margin-left: auto;
order: 1;
user-select: none
}
.plus-button {
order: 2;
user-select: none
}
.delete-area {
border-style: dotted;
margin-left: auto;
order: 2;
order: 3;
user-select: none
}

View File

@@ -4,7 +4,7 @@
@dragstart="onDragItemStart(value, $event)"
@click="onClickItem(value, $event)"
:aria-grabbed="value == currentDragItem"
:class="value.classes" :title="title"
:class="value.classes"
@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}`">
@@ -30,17 +30,20 @@
<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>
<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 class="row p-1 flex-nowrap" v-if="!detailed" :style="`background-color: ${background_color}`">
<div class="col-2">
<span class="font-light text-center" v-if="entry.entry.meal_type.icon != null">{{
<span class="font-light text-center" v-if="entry.entry.meal_type.icon != null" v-b-tooltip.hover.left
:title=" entry.entry.meal_type.name">{{
entry.entry.meal_type.icon
}}</span>
<span class="font-light text-center" v-if="entry.entry.meal_type.icon == null"></span>
<span class="font-light text-center" v-if="entry.entry.meal_type.icon == null" v-b-tooltip.hover.left
:title=" entry.entry.meal_type.name"></span>
</div>
<div class="col-10 d-inline-block text-truncate" :style="`max-height:${item_height}`">
<span class="font-light">{{ title }}</span>