TheButton global component (#425)

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/App.vue

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

frontend/src/components/MealPlan/MealPlanEditor.vue

@@ -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>

frontend/src/components/Recipe/CardImage.vue

@@ -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>
 

frontend/src/components/UI/Buttons/TheButton.vue

@@ -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>

frontend/src/components/UI/Dialogs/NewCategoryTagDialog.vue

@@ -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>

frontend/src/components/UI/TheRecipeFab.vue

@@ -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">

frontend/src/components/UI/TheSidebar.vue

@@ -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 [];

frontend/src/main.js

@@ -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;
 

frontend/src/pages/Admin/Profile/APITokenCard.vue

@@ -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>

frontend/src/pages/Admin/Profile/ProfileGroupCard.vue

@@ -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>

frontend/src/pages/Admin/Profile/ProfileThemeCard.vue

@@ -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>

frontend/src/pages/Admin/Profile/UserCard.vue

@@ -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>

frontend/src/pages/Admin/Settings/CustomPageCreator.vue

@@ -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>

frontend/src/pages/Admin/Settings/HomePageSettings.vue

@@ -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>

frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue

@@ -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>

frontend/src/pages/Admin/ToolBox/EventNotification.vue

@@ -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>

frontend/src/pages/MealPlan/Planner.vue

@@ -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>

frontend/src/pages/Recipe/ViewRecipe.vue

@@ -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;
     },

frontend/src/pages/Recipes/CustomPage.vue

@@ -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>
 

frontend/src/pages/SearchPage/index.vue

@@ -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>
 

frontend/src/pages/ShoppingList/index.vue

@@ -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>

frontend/src/utils/globals.js

@@ -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",