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

ical export and tooltips for new meal plan

Browse Source
This commit is contained in:
Kaibu
2021-10-17 15:11:30 +02:00
parent a9d3267ca3
commit 2e2b79c093
5 changed files with 36 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,9 +42,10 @@
<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)"
<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>
@@ -62,8 +63,12 @@ export default {
previousPeriodLabel: {type: String, default: "<"},
nextPeriodLabel: {type: String, default: ">"},
nextYearLabel: {type: String, default: ">>"},
iCalUrl: {type: String, default: ""},
},
methods: {
exportiCal() {
window.open(this.iCalUrl)
},
onInput(d) {
this.$emit("input", d)
},
@@ -108,17 +113,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
}