TheButton global component (#425)

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

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