wbrawner/mealie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

TheButton global component (#425)

Browse source 
Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden 2021-05-24 10:12:46 -08:00 committed by GitHub
parent fd1b54ae70
commit 034a21e203
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 283 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/docs/overrides/api.html
View file

File diff suppressed because one or more lines are too long

1
frontend/src/App.vue
View file

@ -78,5 +78,4 @@ export default {
:root {
scrollbar-color: transparent transparent;
}
</style>

4
frontend/src/components/MealPlan/MealPlanEditor.vue
View file

@ -9,9 +9,7 @@
<MealPlanCard v-model="mealPlan.planDays" />
<v-row align="center" justify="end">
<v-card-actions>
<v-btn color="success" text @click="update">
{{ $t("general.update") }}
</v-btn>
<TheButton update @click="update" />
<v-spacer></v-spacer>
</v-card-actions>
</v-row>

31
frontend/src/components/Recipe/CardImage.vue
View file

@ -1,22 +1,21 @@
<template>
<div @click="$emit('click')">
<v-img
:height="height"
v-if="!fallBackImage"
:src="getImage(slug)"
@load="fallBackImage = false"
@error="fallBackImage = true"
>
<v-img
@click="$emit('click')"
:height="height"
v-if="!fallBackImage"
:src="getImage(slug)"
@load="fallBackImage = false"
@error="fallBackImage = true"
>
<slot> </slot>
</v-img>
<div class="icon-slot" v-else @click="$emit('click')">
<div>
<slot> </slot>
</v-img>
<div class="icon-slot" v-else>
<div>
<slot> </slot>
</div>
<v-icon color="primary" class="icon-position" :size="iconSize">
{{ $globals.icons.primary }}
</v-icon>
</div>
<v-icon color="primary" class="icon-position" :size="iconSize">
{{ $globals.icons.primary }}
</v-icon>
</div>
</template>

158
frontend/src/components/UI/Buttons/TheButton.vue Normal file
View file

@ -0,0 +1,158 @@
<template>
<v-btn
:color="btnAttrs.color"
:small="small"
:x-small="xSmall"
:loading="loading"
@click="$emit('click')"
:outlined="btnStyle.outlined"
:text="btnStyle.text"
>
<v-icon left>
<slot name="icon">
{{ btnAttrs.icon }}
</slot>
</v-icon>
<slot>
{{ btnAttrs.text }}
</slot>
</v-btn>
</template>
<script>
export default {
name: "theButton",
props: {
// Types
cancel: {
type: Boolean,
default: false,
},
create: {
type: Boolean,
default: false,
},
update: {
type: Boolean,
default: false,
},
edit: {
type: Boolean,
default: false,
},
delete: {
type: Boolean,
default: false,
},
// Property
loading: {
type: Boolean,
default: false,
},
// Styles
small: {
type: Boolean,
default: false,
},
xSmall: {
type: Boolean,
default: false,
},
secondary: {
type: Boolean,
default: false,
},
minor: {
type: Boolean,
default: false,
},
},
data() {
return {
buttonOptions: {
create: {
text: this.$t("general.create"),
icon: this.$globals.icons.create,
color: "success",
},
update: {
text: this.$t("general.update"),
icon: this.$globals.icons.update,
color: "success",
},
save: {
text: this.$t("general.save"),
icon: this.$globals.icons.save,
color: "success",
},
edit: {
text: this.$t("general.edit"),
icon: this.$globals.icons.edit,
color: "info",
},
delete: {
text: this.$t("general.delete"),
icon: this.$globals.icons.delete,
color: "error",
},
cancel: {
text: this.$t("general.cancel"),
icon: this.$globals.icons.close,
color: "grey",
},
},
buttonStyles: {
defaults: {
text: false,
outlined: false,
},
secondary: {
text: false,
outlined: true,
},
minor: {
outlined: false,
text: true,
},
},
};
},
computed: {
btnAttrs() {
if (this.delete) {
return this.buttonOptions.delete;
} else if (this.update) {
return this.buttonOptions.update;
} else if (this.edit) {
return this.buttonOptions.edit;
} else if (this.cancel) {
this.setMinor();
return this.buttonOptions.cancel;
} else if (this.save) {
return this.buttonOptions.save;
}
return this.buttonOptions.create;
},
btnStyle() {
if (this.secondary) {
return this.buttonStyles.secondary;
} else if (this.minor) {
return this.buttonStyles.minor;
}
return this.buttonStyles.defaults;
},
},
methods: {
setMinor() {
this.buttonStyles.defaults = this.buttonStyles.minor;
},
setSecondary() {
this.buttonStyles.defaults = this.buttonStyles.secondary;
},
},
};
</script>
<style lang="scss" scoped>
</style>

8
frontend/src/components/UI/Dialogs/NewCategoryTagDialog.vue
View file

@ -24,13 +24,9 @@
<v-text-field dense :label="inputLabel" v-model="itemName" :rules="[rules.required]"></v-text-field>
</v-card-text>
<v-card-actions>
<TheButton cancel @click="dialog = false" />
<v-spacer></v-spacer>
<v-btn color="grey" text @click="dialog = false">
{{ $t("general.cancel") }}
</v-btn>
<v-btn color="success" text type="submit" :disabled="!itemName">
{{ $t("general.create") }}
</v-btn>
<TheButton type="submit" create :disabled="!itemName" />
</v-card-actions>
</v-form>
</v-card>

2
frontend/src/components/UI/TheRecipeFab.vue
View file

@ -50,7 +50,7 @@
<v-speed-dial v-model="fab" :open-on-hover="absolute" :fixed="absolute" :bottom="absolute" :right="absolute">
<template v-slot:activator>
<v-btn v-model="fab" :color="absolute ? 'accent' : 'white'" dark :icon="!absolute" :fab="absolute">
<v-icon> {{ $globals.icons.create }} </v-icon>
<v-icon> {{ $globals.icons.createAlt }} </v-icon>
</v-btn>
</template>
<v-btn fab dark small color="primary" @click="addRecipe = true">

2
frontend/src/components/UI/TheSidebar.vue
View file

@ -127,7 +127,7 @@ export default {
return pages.map(x => ({
title: x.name,
to: `/pages/${x.slug}`,
icon: this.$globals.icons.tags,
icon: this.$globals.icons.pages,
}));
}
return [];

1
frontend/src/main.js
View file

@ -11,6 +11,7 @@ import "typeface-roboto/index.css";
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.component("TheButton", () => import("@/components/UI/Buttons/TheButton.vue"));
Vue.prototype.$globals = globals;

5
frontend/src/pages/Admin/Profile/APITokenCard.vue
View file

@ -72,10 +72,7 @@
</v-card-text>
<template v-slot:open="{ open }">
<v-btn color="success" @click="open">
<v-icon left> {{ $globals.icons.create }} </v-icon>
{{ $t("general.create") }}
</v-btn>
<TheButton create @click="open" />
</template>
</BaseDialog>
</v-card-actions>

5
frontend/src/pages/Admin/Profile/ProfileGroupCard.vue
View file

@ -105,10 +105,7 @@
{{ $t("settings.webhooks.test-webhooks") }}
</v-btn>
<v-spacer></v-spacer>
<v-btn color="success" @click="saveGroupSettings">
<v-icon left> {{ $globals.icons.save }} </v-icon>
{{ $t("general.update") }}
</v-btn>
<TheButton update @click="saveGroupSettings" />
</v-card-actions>
</template>
</StatCard>

6
frontend/src/pages/Admin/Profile/ProfileThemeCard.vue
View file

@ -73,10 +73,8 @@
</v-virtual-scroll>
<v-divider></v-divider>
<v-card-actions>
<v-spacer class="mx-2"></v-spacer>
<v-btn class="my-1 mb-n1" color="success" @click="createTheme">
<v-icon left> {{ $globals.icons.create }} </v-icon> {{ $t("general.create") }}
</v-btn>
<v-spacer></v-spacer>
<TheButton class="mt-1 mb-n1" create @click="createTheme" />
</v-card-actions>
</template>
</StatCard>

5
frontend/src/pages/Admin/Profile/UserCard.vue
View file

@ -89,10 +89,7 @@
file-name="profile_image"
/>
<v-spacer></v-spacer>
<v-btn color="success" @click="updateUser">
<v-icon left> {{ $globals.icons.save }} </v-icon>
{{ $t("general.update") }}
</v-btn>
<TheButton update @click="updateUser" />
</v-card-actions>
</template>
</StatCard>

16
frontend/src/pages/Admin/Settings/CustomPageCreator.vue
View file

@ -5,9 +5,7 @@
<h2 class="mt-1 mb-1 ">
{{ $t("settings.custom-pages") }}
<span>
<v-btn color="success" @click="newPage" small class="ml-3">
{{ $t("general.create") }}
</v-btn>
<TheButton create small class="ml-3" @click="newPage" />
</span>
</h2>
<draggable class="row mt-1" v-model="customPages">
@ -33,13 +31,9 @@
</v-card-text>
<v-card-actions>
<v-btn text small color="error" @click="deletePage(item.id)">
{{ $t("general.delete") }}
</v-btn>
<TheButton delete small minor @click="deletePage(item.id)" />
<v-spacer> </v-spacer>
<v-btn small text color="success" @click="editPage(index)">
{{ $t("general.edit") }}
</v-btn>
<TheButton edit small @click="editPage(index)" />
</v-card-actions>
</v-card>
</v-col>
@ -47,9 +41,7 @@
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="success" @click="savePages">
{{ $t("general.save") }}
</v-btn>
<TheButton update @click="savePages" />
</v-card-actions>
</v-card>
</template>

5
frontend/src/pages/Admin/Settings/HomePageSettings.vue
View file

@ -126,10 +126,7 @@
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="success" @click="saveSettings" class="mr-2">
<v-icon left> {{ $globals.icons.save }} </v-icon>
{{ $t("general.save") }}
</v-btn>
<TheButton class="mr-2" update @click="saveSettings" />
</v-card-actions>
</v-card>
</template>

15
frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue
View file

@ -36,11 +36,11 @@
</BaseDialog>
<div class="d-flex justify-center align-center pa-2 flex-wrap">
<new-category-tag-dialog ref="newDialog" :tag-dialog="isTags">
<NewCategoryTagDialog ref="newDialog" :tag-dialog="isTags">
<v-btn @click="openNewDialog" small color="success" class="mr-1 mb-1">
{{ $t("general.create") }}
</v-btn>
</new-category-tag-dialog>
</NewCategoryTagDialog>
<BulkAssign isTags="isTags" class="mr-1 mb-1" />
@ -72,15 +72,12 @@
<v-row>
<v-col cols="12" :sm="12" :md="6" :lg="4" :xl="3" v-for="item in results" :key="item.id">
<v-card>
<v-card-title class="py-1">{{ item.name }}</v-card-title>
<v-divider class="mx-2"></v-divider>
<v-card-actions>
<v-card-title class="py-1">{{ item.name }}</v-card-title>
<TheButton minor small delete @click="deleteItem(item.slug)" />
<v-spacer></v-spacer>
<v-btn small text color="info" @click="openEditDialog(item)">
{{ $t("general.edit") }}
</v-btn>
<v-btn small text color="error" @click="deleteItem(item.slug)">
{{ $t("general.delete") }}
</v-btn>
<TheButton small edit @click="openEditDialog(item)" />
</v-card-actions>
</v-card>
</v-col>

20
frontend/src/pages/Admin/ToolBox/EventNotification.vue
View file

@ -10,12 +10,7 @@
@submit="createNotification"
>
<template v-slot:open="{ open }">
<v-btn small color="info" @click="open">
<v-icon left>
{{ $globals.icons.create }}
</v-icon>
{{ $t("events.notification") }}
</v-btn>
<TheButton create small @click="open"> {{ $t("events.notification") }}</TheButton>
</template>
<template v-slot:default>
<v-card-text class="mt-2">
@ -134,14 +129,13 @@
<v-icon color="success"> {{ item.user ? "mdi-check" : "" }} </v-icon>
</td>
<td>
<v-btn class="mx-1" small color="error" @click="deleteNotification(item.id)">
<v-icon> {{ $globals.icons.delete }} </v-icon>
{{ $t("general.delete") }}
</v-btn>
<v-btn small color="info" @click="testByID(item.id)">
<v-icon left> mdi-test-tube</v-icon>
<TheButton delete small minor @click="deleteNotification(item.id)"> </TheButton>
<TheButton edit small @click="testByID(item.id)">
<template v-slot:icon>
mdi-test-tube
</template>
{{ $t("general.test") }}
</v-btn>
</TheButton>
</td>
</tr>
</tbody>

8
frontend/src/pages/MealPlan/Planner.vue
View file

@ -69,13 +69,9 @@
</v-list>
<v-card-actions class="mt-n3">
<v-btn color="error lighten-2" small outlined @click="deletePlan(mealplan.uid)">
{{ $t("general.delete") }}
</v-btn>
<TheButton small secondary delete @click="deletePlan(mealplan.uid)" />
<v-spacer></v-spacer>
<v-btn color="info" small @click="editPlan(mealplan.uid)">
{{ $t("general.edit") }}
</v-btn>
<TheButton small edit @click="editPlan(mealplan.uid)" />
</v-card-actions>
</v-card>
</v-col>

12
frontend/src/pages/Recipe/ViewRecipe.vue
View file

@ -5,7 +5,13 @@
</v-card>
<NoRecipe v-else-if="loadFailed" />
<v-card v-else-if="!loadFailed" id="myRecipe" class="d-print-none">
<v-img height="400" :src="getImage(recipeDetails.slug)" class="d-print-none" :key="imageKey">
<v-img
:height="hideImage ? '40' : imageHeight"
@error="hideImage = true"
:src="getImage(recipeDetails.slug)"
class="d-print-none"
:key="imageKey"
>
<RecipeTimeCard
:class="isMobile ? undefined : 'force-bottom'"
:prepTime="recipeDetails.prepTime"
@ -71,6 +77,7 @@ export default {
},
data() {
return {
hideImage: false,
loadFailed: false,
skeleton: true,
form: false,
@ -123,6 +130,9 @@ export default {
isMobile() {
return this.$vuetify.breakpoint.name === "xs";
},
imageHeight() {
return this.isMobile ? "200" : "400";
},
currentRecipe() {
return this.$route.params.recipe;
},

34
frontend/src/pages/Recipes/CustomPage.vue
View file

@ -1,25 +1,23 @@
<template>
<v-container>
<v-card flat height="100%">
<v-app-bar color="transparent" flat class="mt-n1 rounded">
<v-icon large left> {{ $globals.icons.tags }}-multiple-outline </v-icon>
<v-toolbar-title class="headline"> {{ page.name }} </v-toolbar-title>
</v-app-bar>
<v-app-bar color="transparent" flat class="mt-n1 rounded">
<v-icon large left> {{ $globals.icons.pages }} </v-icon>
<v-toolbar-title class="headline"> {{ page.name }} </v-toolbar-title>
</v-app-bar>
<div v-if="render">
<v-tabs v-model="tab" background-color="transparent" grow>
<v-tab v-for="item in page.categories" :key="item.slug" :href="`#${item.slug}`">
{{ item.name }}
</v-tab>
</v-tabs>
<div v-if="render">
<v-tabs v-model="tab" background-color="transparent" grow>
<v-tab v-for="item in page.categories" :key="item.slug" :href="`#${item.slug}`">
{{ item.name }}
</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item v-for="(item, index) in page.categories" :key="item.slug + index" :value="item.slug">
<CardSection class="mb-5 mx-1" :recipes="item.recipes" @sort="sortRecipes($event, index)" />
</v-tab-item>
</v-tabs-items>
</div>
</v-card>
<v-tabs-items class="transparent" v-model="tab">
<v-tab-item v-for="(item, index) in page.categories" :key="item.slug + index" :value="item.slug">
<CardSection class="mb-5 mx-1" :recipes="item.recipes" @sort="sortRecipes($event, index)" />
</v-tab-item>
</v-tabs-items>
</div>
</v-container>
</template>

84
frontend/src/pages/SearchPage/index.vue
View file

@ -1,53 +1,45 @@
<template>
<v-container>
<v-card flat class="pa-3">
<v-row dense>
<v-col>
<v-text-field
v-model="searchString"
outlined
color="primary accent-3"
:placeholder="$t('search.search-placeholder')"
append-icon="mdi-magnify"
>
</v-text-field>
</v-col>
<v-col cols="12" md="2" sm="12">
<v-text-field
class="mt-0 pt-0"
:label="$t('search.max-results')"
v-model="maxResults"
type="number"
outlined
/>
</v-col>
</v-row>
<v-row dense>
<v-col>
<v-text-field
v-model="searchString"
outlined
color="primary accent-3"
:placeholder="$t('search.search-placeholder')"
append-icon="mdi-magnify"
>
</v-text-field>
</v-col>
<v-col cols="12" md="2" sm="12">
<v-text-field class="mt-0 pt-0" :label="$t('search.max-results')" v-model="maxResults" type="number" outlined />
</v-col>
</v-row>
<v-row dense class="mt-0 flex-row align-center justify-space-around">
<v-col>
<h3 class="pl-2 text-center headline">
{{ $t("category.category-filter") }}
</h3>
<FilterSelector class="mb-1" @update="updateCatParams" />
<CategoryTagSelector :solo="true" :dense="false" v-model="includeCategories" :return-object="false" />
</v-col>
<v-col>
<h3 class="pl-2 text-center headline">
{{ $t("search.tag-filter") }}
</h3>
<FilterSelector class="mb-1" @update="updateTagParams" />
<CategoryTagSelector
:solo="true"
:dense="false"
v-model="includeTags"
:return-object="false"
:tag-selector="true"
/>
</v-col>
</v-row>
<v-row dense class="my-0 flex-row align-center justify-space-around">
<v-col>
<h3 class="pl-2 text-center headline">
{{ $t("category.category-filter") }}
</h3>
<FilterSelector class="mb-1" @update="updateCatParams" />
<CategoryTagSelector :solo="true" :dense="false" v-model="includeCategories" :return-object="false" />
</v-col>
<v-col>
<h3 class="pl-2 text-center headline">
{{ $t("search.tag-filter") }}
</h3>
<FilterSelector class="mb-1" @update="updateTagParams" />
<CategoryTagSelector
:solo="true"
:dense="false"
v-model="includeTags"
:return-object="false"
:tag-selector="true"
/>
</v-col>
</v-row>
<CardSection title-icon="mdi-mag" :recipes="showRecipes" :hardLimit="maxResults" @sort="assignFuzzy" />
</v-card>
<CardSection class="mt-n9" title-icon="mdi-mag" :recipes="showRecipes" :hardLimit="maxResults" @sort="assignFuzzy" />
</v-container>
</template>

28
frontend/src/pages/ShoppingList/index.vue
View file

@ -14,14 +14,8 @@
<v-spacer></v-spacer>
<BaseDialog title="New List" title-icon="mdi-format-list-checks" submit-text="Create" @submit="createNewList">
<template v-slot:open="{ open }">
<v-btn color="info" @click="open">
<v-icon left>
{{ $globals.icons.create }}
</v-icon>
New List
</v-btn>
<TheButton create @click="open" />
</template>
<v-card-text>
<v-text-field autofocus v-model="newList.name" label="List Name"> </v-text-field>
</v-card-text>
@ -37,12 +31,7 @@
</v-card-title>
<v-divider class="mx-2"></v-divider>
<v-card-actions>
<v-btn text color="error" @click="deleteList(item.id)">
<v-icon left>
{{ $globals.icons.delete }}
</v-icon>
Delete
</v-btn>
<TheButton delete minor @click="deleteList(item.id)" />
<v-spacer></v-spacer>
<v-btn color="info" @click="list = item.id">
<v-icon left>
@ -63,12 +52,8 @@
{{ activeList.name }}
</div>
<v-spacer></v-spacer>
<v-btn v-if="edit" color="success" @click="saveList">
Save
</v-btn>
<v-btn v-else color="info" @click="edit = true">
Edit
</v-btn>
<TheButton v-if="edit" update @click="saveList" />
<TheButton v-else edit @click="edit = true" />
</v-card-title>
<v-divider class="mx-2 mb-1"></v-divider>
@ -276,5 +261,8 @@ export default {
};
</script>
<style >
<style >
.dense-markdown p {
margin: auto !important;
}
</style>

6
frontend/src/utils/globals.js
View file

@ -2,13 +2,17 @@ const icons = {
primary: "mdi-silverware-variant",
// Crud
create: "mdi-plus",
createAlt: "mdi-plus",
create: "mdi-plus-circle",
delete: "mdi-delete",
save: "mdi-content-save",
update: "mdi-content-save-edit",
edit: "mdi-square-edit-outline",
close: "mdi-close",
// Organization
tags: "mdi-tag-multiple-outline",
pages: "mdi-book-outline",
// Admin
user: "mdi-account",