Feature/style unification (#420)

* set global icons * fixes #419 * button style docs * category/tag page updates * dynamic router imports Co-authored-by: hay-kot <hay-kot@pm.me>
2025-11-02 18:23:40 -05:00 · 2021-05-23 12:38:55 -08:00
parent ef87f2231d
commit eb3d56936e
78 changed files with 332 additions and 201 deletions
--- a/frontend/src/pages/Admin/About/index.vue
+++ b/frontend/src/pages/Admin/About/index.vue
@@ -9,7 +9,7 @@
        <v-list-item-group color="primary">
          <v-list-item v-for="property in prettyInfo" :key="property.name">
            <v-list-item-icon>
-              <v-icon> {{ property.icon || "mdi-account" }} </v-icon>
+              <v-icon> {{ property.icon || $globals.icons.user }} </v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title class="pl-4 flex row justify-space-between">
@@ -92,7 +92,7 @@ export default {
        },
        {
          name: this.$t("about.default-group"),
-          icon: "mdi-account-group",
+          icon: this.$globals.icons.group,
          value: debugInfo.defaultGroup,
        },
      ];
--- a/frontend/src/pages/Admin/Dashboard/BackupViewer.vue
+++ b/frontend/src/pages/Admin/Dashboard/BackupViewer.vue
@@ -31,7 +31,7 @@
        <BackupDialog :color="color" />

        <v-btn :loading="loading" class="mx-2" small color="success" @click="createBackup">
-          <v-icon left> mdi-plus </v-icon> {{ $t("general.create") }}
+          <v-icon left> {{ $globals.icons.create }} </v-icon> {{ $t("general.create") }}
        </v-btn>
      </div>
      <template v-slot:bottom>
@@ -54,7 +54,7 @@

              <v-list-item-action class="ml-auto">
                <v-btn large icon @click.stop="deleteBackup(item.name)">
-                  <v-icon color="error">mdi-delete</v-icon>
+                  <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
                </v-btn>
              </v-list-item-action>
            </v-list-item>
--- a/frontend/src/pages/Admin/Dashboard/EventViewer.vue
+++ b/frontend/src/pages/Admin/Dashboard/EventViewer.vue
@@ -38,7 +38,7 @@

              <v-list-item-action class="ml-auto">
                <v-btn large icon @click="deleteEvent(item.id)">
-                  <v-icon color="error">mdi-delete</v-icon>
+                  <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
                </v-btn>
              </v-list-item-action>
            </v-list-item>
@@ -81,11 +81,11 @@ export default {
          color: "primary",
        },
        user: {
-          icon: "mdi-account",
+          icon: this.$globals.icons.user,
          color: "accent",
        },
        group: {
-          icon: "mdi-account-group-outline",
+          icon: this.$globals.icons.group,
          color: "accent",
        },
      },
--- a/frontend/src/pages/Admin/Dashboard/index.vue
+++ b/frontend/src/pages/Admin/Dashboard/index.vue
@@ -6,7 +6,7 @@
          <template v-slot:after-heading>
            <div class="ml-auto text-right">
              <h2 class="body-3 grey--text font-weight-light">
-                {{$t('general.recipes')}}
+                {{ $t("general.recipes") }}
              </h2>

              <h3 class="display-2 font-weight-light text--primary">
@@ -17,25 +17,27 @@
          <template v-slot:actions>
            <div class="d-flex row py-3 justify-space-around">
              <v-btn small color="primary" :to="{ path: '/admin/toolbox/', query: { tab: 'organize', filter: 'tag' } }">
-                <v-icon left> mdi-tag </v-icon> {{$tc('tag.untagged-count', [statistics.untaggedRecipes])}}
+                <v-icon left> {{ $globals.icons.tags }} </v-icon>
+                {{ $tc("tag.untagged-count", [statistics.untaggedRecipes]) }}
              </v-btn>
              <v-btn
                small
                color="primary"
                :to="{ path: '/admin/toolbox/', query: { tab: 'organize', filter: 'category' } }"
              >
-                <v-icon left> mdi-tag </v-icon> {{$tc('category.uncategorized-count', [statistics.uncategorizedRecipes])}}
+                <v-icon left> {{ $globals.icons.tags }} </v-icon>
+                {{ $tc("category.uncategorized-count", [statistics.uncategorizedRecipes]) }}
              </v-btn>
            </div>
          </template>
        </StatCard>
      </v-col>
      <v-col cols="12" sm="12" md="4">
-        <StatCard icon="mdi-account">
+        <StatCard :icon="$globals.icons.user">
          <template v-slot:after-heading>
            <div class="ml-auto text-right">
              <h2 class="body-3 grey--text font-weight-light">
-                 {{$t('user.users')}}
+                {{ $t("user.users") }}
              </h2>
              <h3 class="display-2 font-weight-light text--primary">
                <small> {{ statistics.totalUsers }}</small>
@@ -45,19 +47,19 @@
          <template v-slot:actions>
            <div class="ml-auto">
              <v-btn color="primary" small to="/admin/manage-users?tab=users">
-                <v-icon left>mdi-account</v-icon>
-                {{$t('user.manage-users')}}
+                <v-icon left>{{ $globals.icons.user }}</v-icon>
+                {{ $t("user.manage-users") }}
              </v-btn>
            </div>
          </template>
        </StatCard>
      </v-col>
      <v-col cols="12" sm="12" md="4">
-        <StatCard icon="mdi-account-group">
+        <StatCard :icon="$globals.icons.group">
          <template v-slot:after-heading>
            <div class="ml-auto text-right">
              <h2 class="body-3 grey--text font-weight-light">
-                {{$t('group.groups')}}
+                {{ $t("group.groups") }}
              </h2>

              <h3 class="display-2 font-weight-light text--primary">
@@ -68,8 +70,8 @@
          <template v-slot:actions>
            <div class="ml-auto">
              <v-btn color="primary" small to="/admin/manage-users?tab=groups">
-                <v-icon left>mdi-account-group</v-icon>
-                {{$t('group.manage-groups')}}
+                <v-icon left>{{ $globals.icons.group }}</v-icon>
+                {{ $t("group.manage-groups") }}
              </v-btn>
            </div>
          </template>
--- a/frontend/src/pages/Admin/ManageUsers/GroupCard.vue
+++ b/frontend/src/pages/Admin/ManageUsers/GroupCard.vue
@@ -21,7 +21,7 @@
        <v-list-item-group color="primary">
          <v-list-item v-for="property in groupProps" :key="property.text">
            <v-list-item-icon>
-              <v-icon> {{ property.icon || "mdi-account" }} </v-icon>
+              <v-icon> {{ property.icon || $globals.icons.user }} </v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title class="pl-4 flex row justify-space-between">
@@ -95,7 +95,7 @@ export default {
      this.groupProps = [
        {
          text: this.$t("user.total-users"),
-          icon: "mdi-account",
+          icon: this.$globals.icons.user,
          value: this.group.users.length,
        },
        {
--- a/frontend/src/pages/Admin/ManageUsers/GroupDashboard.vue
+++ b/frontend/src/pages/Admin/ManageUsers/GroupDashboard.vue
@@ -23,7 +23,7 @@
          <v-card>
            <v-app-bar dark dense color="primary">
              <v-icon left>
-                mdi-account-group
+                {{ $globals.icons.group }}
              </v-icon>

              <v-toolbar-title class="headline">
--- a/frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue
+++ b/frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue
@@ -31,7 +31,7 @@
        <v-card>
          <v-app-bar dark dense color="primary">
            <v-icon left>
-              mdi-account
+              {{ $globals.icons.user }}
            </v-icon>

            <v-toolbar-title class="headline">
@@ -83,7 +83,7 @@
        <template v-slot:item.actions="{ item }">
          <v-btn class="mr-1" small color="error" @click="deleteItem(item)">
            <v-icon small left>
-              mdi-delete
+              {{ $globals.icons.delete }}
            </v-icon>
            {{ $t("general.delete") }}
          </v-btn>
--- a/frontend/src/pages/Admin/ManageUsers/TheUserTable.vue
+++ b/frontend/src/pages/Admin/ManageUsers/TheUserTable.vue
@@ -36,7 +36,7 @@
        <v-card>
          <v-app-bar dark dense color="primary">
            <v-icon left>
-              mdi-account
+              {{ $globals.icons.user }}
            </v-icon>

            <v-toolbar-title class="headline">
@@ -111,7 +111,7 @@
        <template v-slot:item.actions="{ item }">
          <v-btn class="mr-1" small color="error" @click="deleteItem(item)">
            <v-icon small left>
-              mdi-delete
+              {{ $globals.icons.delete }}
            </v-icon>
            {{ $t("general.delete") }}
          </v-btn>
--- a/frontend/src/pages/Admin/ManageUsers/index.vue
+++ b/frontend/src/pages/Admin/ManageUsers/index.vue
@@ -6,7 +6,7 @@

        <v-tab href="#users">
          {{ $t("user.users") }}
-          <v-icon>mdi-account</v-icon>
+          <v-icon>{{ $globals.icons.user }}</v-icon>
        </v-tab>

        <v-tab href="#sign-ups">
@@ -16,7 +16,7 @@

        <v-tab href="#groups">
          {{ $t("group.groups") }}
-          <v-icon>mdi-account-group</v-icon>
+          <v-icon>{{ $globals.icons.group }}</v-icon>
        </v-tab>
      </v-tabs>

--- a/frontend/src/pages/Admin/Profile/APITokenCard.vue
+++ b/frontend/src/pages/Admin/Profile/APITokenCard.vue
@@ -3,7 +3,7 @@
    <template v-slot:after-heading>
      <div class="ml-auto text-right">
        <h2 class="body-3 grey--text font-weight-light">
-          {{$t('settings.token.api-tokens')}}
+          {{ $t("settings.token.api-tokens") }}
        </h2>
        <h3 class="display-2 font-weight-light text--primary">
          <small> {{ user.tokens.length }} </small>
@@ -11,7 +11,7 @@
      </div>
    </template>
    <template v-slot:bottom>
-      <v-subheader class="mb-n2">{{$t('settings.token.active-tokens')}}</v-subheader>
+      <v-subheader class="mb-n2">{{ $t("settings.token.active-tokens") }}</v-subheader>
      <v-virtual-scroll height="210" item-height="70" :items="user.tokens" class="mt-2">
        <template v-slot:default="{ item }">
          <v-divider></v-divider>
@@ -28,7 +28,7 @@

            <v-list-item-action class="ml-auto">
              <v-btn large icon @click.stop="deleteToken(item.id)">
-                <v-icon color="accent">mdi-delete</v-icon>
+                <v-icon color="accent">{{ $globals.icons.delete }}</v-icon>
              </v-btn>
            </v-list-item-action>
          </v-list-item>
@@ -62,14 +62,18 @@
              >
              </v-textarea>
              <v-subheader class="text-center">
-                {{$t('settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again')}}
+                {{
+                  $t(
+                    "settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again"
+                  )
+                }}
              </v-subheader>
            </div>
          </v-card-text>

          <template v-slot:open="{ open }">
            <v-btn color="success" @click="open">
-              <v-icon left> mdi-plus </v-icon>
+              <v-icon left> {{ $globals.icons.create }} </v-icon>
              {{ $t("general.create") }}
            </v-btn>
          </template>
@@ -109,9 +113,9 @@ export default {
    },
    buttonText() {
      if (this.createdToken === "") {
-        return this.$t('general.create');
+        return this.$t("general.create");
      } else {
-        return this.$t('general.close');
+        return this.$t("general.close");
      }
    },
  },
--- a/frontend/src/pages/Admin/Profile/ProfileGroupCard.vue
+++ b/frontend/src/pages/Admin/Profile/ProfileGroupCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <StatCard icon="mdi-account-group">
+  <StatCard :icon="$globals.icons.group">
    <template v-slot:after-heading>
      <div class="ml-auto text-right">
        <div class="body-3 grey--text font-weight-light" v-text="$t('group.group')" />
@@ -11,7 +11,7 @@
    </template>
    <template v-slot:bottom>
      <div v-if="todaysMeal">
-        <v-subheader>{{$t('meal-plan.dinner-tonight')}}</v-subheader>
+        <v-subheader>{{ $t("meal-plan.dinner-tonight") }}</v-subheader>
        <MobileRecipeCard
          :name="todaysMeal.name"
          :slug="todaysMeal.slug"
@@ -48,12 +48,12 @@
          <v-icon x-large>
            mdi-food-variant
          </v-icon>
-          <small> {{$t('meal-plan.mealplan-settings')}} </small>
+          <small> {{ $t("meal-plan.mealplan-settings") }} </small>
        </h3>
      </div>
      <v-divider></v-divider>

-      <v-subheader>{{$t('meal-plan.mealplan-categories')}}</v-subheader>
+      <v-subheader>{{ $t("meal-plan.mealplan-categories") }}</v-subheader>
      <v-card-text class="mt-0 pt-0">
        {{ $t("meal-plan.only-recipes-with-these-categories-will-be-used-in-meal-plans") }}
      </v-card-text>
@@ -66,7 +66,7 @@
      />

      <v-divider></v-divider>
-      <v-subheader>{{$t('settings.webhooks.webhooks-caps')}}</v-subheader>
+      <v-subheader>{{ $t("settings.webhooks.webhooks-caps") }}</v-subheader>
      <v-card-text class="mt-0 pt-0">
        {{
          $t(
@@ -82,7 +82,7 @@

      <v-card-text>
        <v-text-field
-          prepend-icon="mdi-delete"
+          :prepend-icon="$globals.icons.delete"
          v-for="(url, index) in groupSettings.webhookUrls"
          @click:prepend="removeWebhook(index)"
          :key="index"
@@ -93,7 +93,7 @@
          <v-spacer></v-spacer>
          <v-btn small color="success" @click="addWebhook">
            <v-icon left> mdi-webhook </v-icon>
-            {{$t('general.new')}}
+            {{ $t("general.new") }}
          </v-btn>
        </v-card-actions>
      </v-card-text>
@@ -106,7 +106,7 @@
        </v-btn>
        <v-spacer></v-spacer>
        <v-btn color="success" @click="saveGroupSettings">
-          <v-icon left> mdi-content-save </v-icon>
+          <v-icon left> {{ $globals.icons.save }} </v-icon>
          {{ $t("general.update") }}
        </v-btn>
      </v-card-actions>
--- a/frontend/src/pages/Admin/Profile/ProfileThemeCard.vue
+++ b/frontend/src/pages/Admin/Profile/ProfileThemeCard.vue
@@ -64,7 +64,7 @@

              <v-list-item-action class="ml-auto">
                <v-btn large icon @click.stop="editTheme(item)">
-                  <v-icon color="accent">mdi-square-edit-outline</v-icon>
+                  <v-icon color="accent">{{ $globals.icons.edit }}</v-icon>
                </v-btn>
              </v-list-item-action>
            </v-list-item>
@@ -75,7 +75,7 @@
        <v-card-actions>
          <v-spacer class="mx-2"></v-spacer>
          <v-btn class="my-1 mb-n1" color="success" @click="createTheme">
-            <v-icon left> mdi-plus </v-icon> {{ $t("general.create") }}
+            <v-icon left> {{ $globals.icons.create }} </v-icon> {{ $t("general.create") }}
          </v-btn>
        </v-card-actions>
      </template>
--- a/frontend/src/pages/Admin/Profile/UserCard.vue
+++ b/frontend/src/pages/Admin/Profile/UserCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <StatCard icon="mdi-account">
+  <StatCard :icon="$globals.icons.user">
    <template v-slot:avatar>
      <v-avatar color="accent" size="120" class="white--text headline mt-n16">
        <img :src="userProfileImage" v-if="!hideImage" @error="hideImage = true" @load="hideImage = false" />
@@ -90,7 +90,7 @@
        />
        <v-spacer></v-spacer>
        <v-btn color="success" @click="updateUser">
-          <v-icon left> mdi-content-save </v-icon>
+          <v-icon left> {{ $globals.icons.save }} </v-icon>
          {{ $t("general.update") }}
        </v-btn>
      </v-card-actions>
--- a/frontend/src/pages/Admin/Settings/HomePageSettings.vue
+++ b/frontend/src/pages/Admin/Settings/HomePageSettings.vue
@@ -55,7 +55,7 @@
                      <v-list-item-title v-text="item.name"></v-list-item-title>
                    </v-list-item-content>
                    <v-list-item-icon @click="deleteActiveCategory(index)">
-                      <v-icon>mdi-delete</v-icon>
+                      <v-icon>{{ $globals.icons.delete }}</v-icon>
                    </v-list-item-icon>
                  </v-list-item>
                </draggable>
@@ -67,7 +67,7 @@
          <v-card outlined height="350px">
            <v-app-bar dark dense color="primary">
              <v-icon left>
-                mdi-tag
+                {{ $globals.icons.tags }}
              </v-icon>

              <v-toolbar-title class="headline">
@@ -95,7 +95,7 @@
                      <v-list-item-title v-text="item.name"></v-list-item-title>
                    </v-list-item-content>
                    <v-list-item-icon @click="deleteCategoryfromDatabase(item.slug)">
-                      <v-icon>mdi-delete</v-icon>
+                      <v-icon>{{ $globals.icons.delete }}</v-icon>
                    </v-list-item-icon>
                  </v-list-item>
                </draggable>
@@ -127,7 +127,7 @@
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="success" @click="saveSettings" class="mr-2">
-        <v-icon left> mdi-content-save </v-icon>
+        <v-icon left> {{ $globals.icons.save }} </v-icon>
        {{ $t("general.save") }}
      </v-btn>
    </v-card-actions>
--- a/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/BulkAssign.vue
+++ b/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/BulkAssign.vue
@@ -2,7 +2,7 @@
  <div>
    <BaseDialog
      ref="assignDialog"
-      title-icon="mdi-tag"
+      :title-icon="$globals.icons.tags"
      color="primary"
      :title="$t('settings.toolbox.bulk-assign')"
      :loading="loading"
--- a/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/RemoveUnused.vue
+++ b/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/RemoveUnused.vue
@@ -2,7 +2,7 @@
  <div>
    <base-dialog
      ref="deleteDialog"
-      title-icon="mdi-tag"
+      :title-icon="$globals.icons.tags"
      color="error"
      :title="$t('general.delete') + ' ' + (isTags ? $t('tag.tags') : $t('recipe.categories'))"
      :loading="loading"
--- a/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue
+++ b/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue
@@ -2,7 +2,7 @@
  <v-card outlined class="mt-n1">
    <BaseDialog
      ref="renameDialog"
-      title-icon="mdi-tag"
+      :title-icon="$globals.icons.tags"
      :title="renameTarget.title"
      :submit-text="$t('general.update')"
      modal-width="800"
--- a/frontend/src/pages/Admin/ToolBox/EventNotification.vue
+++ b/frontend/src/pages/Admin/ToolBox/EventNotification.vue
@@ -12,7 +12,7 @@
          <template v-slot:open="{ open }">
            <v-btn small color="info" @click="open">
              <v-icon left>
-                mdi-plus
+                {{ $globals.icons.create }}
              </v-icon>
              {{ $t("events.notification") }}
            </v-btn>
@@ -135,7 +135,7 @@
              </td>
              <td>
                <v-btn class="mx-1" small color="error" @click="deleteNotification(item.id)">
-                  <v-icon> mdi-delete </v-icon>
+                  <v-icon> {{ $globals.icons.delete }} </v-icon>
                  {{ $t("general.delete") }}
                </v-btn>
                <v-btn small color="info" @click="testByID(item.id)">
--- a/frontend/src/pages/Admin/ToolBox/RecipeOrganizer.vue
+++ b/frontend/src/pages/Admin/ToolBox/RecipeOrganizer.vue
@@ -3,12 +3,12 @@
    <div class="d-flex justify-center align-center pa-2 flex-wrap">
      <v-btn-toggle v-model="filter" mandatory color="primary">
        <v-btn small value="category">
-          <v-icon>mdi-tag-multiple</v-icon>
+          <v-icon>{{ $globals.icons.tags }}-multiple</v-icon>
          {{ $t("recipe.categories") }}
        </v-btn>

        <v-btn small value="tag">
-          <v-icon>mdi-tag-multiple</v-icon>
+          <v-icon>{{ $globals.icons.tags }}-multiple</v-icon>
          {{ $t("tag.tags") }}
        </v-btn>
      </v-btn-toggle>
--- a/frontend/src/pages/Admin/ToolBox/index.vue
+++ b/frontend/src/pages/Admin/ToolBox/index.vue
@@ -5,20 +5,20 @@
        <v-tabs-slider></v-tabs-slider>

        <v-tab href="#event-notifications">
-          {{$t('settings.notify')}}
+          {{ $t("settings.notify") }}
          <v-icon>mdi-bell-alert</v-icon>
        </v-tab>
        <v-tab href="#category-editor">
          {{ $t("recipe.categories") }}
-          <v-icon>mdi-tag-multiple-outline</v-icon>
+          <v-icon>{{ $globals.icons.tags }}</v-icon>
        </v-tab>

        <v-tab href="#tag-editor">
          {{ $t("tag.tags") }}
-          <v-icon>mdi-tag-multiple-outline</v-icon>
+          <v-icon>{{ $globals.icons.tags }}</v-icon>
        </v-tab>
        <v-tab href="#organize">
-          {{$t('settings.organize')}}
+          {{ $t("settings.organize") }}
          <v-icon>mdi-broom</v-icon>
        </v-tab>
      </v-tabs>