Merge pull request #2754 from p0lycarpio/fixes/ui-improvements

fix: frontend improvements

frontend/components/Domain/Recipe/RecipeAssets.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="value.length > 0 || edit">
-    <v-card class="mt-2">
+    <v-card class="mt-4">
       <v-card-title class="py-2">
         {{ $t("asset.assets") }}
       </v-card-title>

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -18,7 +18,6 @@
           solo
           hide-details
           dense
-          class="mx-1"
           type="number"
           :placeholder="$t('recipe.quantity')"
           @keypress="quantityFilter"
@@ -89,7 +88,6 @@
             hide-details
             dense
             solo
-            class="mx-1"
             :placeholder="$t('recipe.notes')"
             @click="$emit('clickIngredientField', 'note')"
           >
@@ -100,7 +98,7 @@
           <BaseButtonGroup
             hover
             :large="false"
-            class="my-auto"
+            class="my-auto d-flex"
             :buttons="btns"
             @toggle-section="toggleTitle"
             @toggle-original="toggleOriginalText"

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageComments.vue

@@ -35,7 +35,7 @@
       <v-card outlined class="flex-grow-1">
         <v-card-text class="pa-3 pb-0">
           <p class="">{{ comment.user.username }} • {{ $d(Date.parse(comment.createdAt), "medium") }}</p>
-          {{ comment.text }}
+          <SafeMarkdown :source="comment.text" />
         </v-card-text>
         <v-card-actions class="justify-end mt-0 pt-0">
           <v-btn
@@ -60,11 +60,13 @@ import { Recipe, RecipeCommentOut } from "~/lib/api/types/recipe";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { usePageUser } from "~/composables/recipe-page/shared-state";
+import SafeMarkdown from "~/components/global/SafeMarkdown.vue";
 
 export default defineComponent({
   components: {
     UserAvatar,
-  },
+    SafeMarkdown
+},
   props: {
     recipe: {
       type: Object as () => NoUndefinedField<Recipe>,

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageFooter.vue

@@ -24,13 +24,13 @@
       </v-btn>
     </v-card-actions>
     <AdvancedOnly>
-      <v-card v-if="isEditForm" flat class="ma-2 mb-2">
+      <v-card v-if="isEditForm" flat class="mb-2 mx-n2">
         <v-card-title> {{ $t('recipe.api-extras') }} </v-card-title>
-        <v-divider class="mx-2"></v-divider>
+        <v-divider class="ml-4"></v-divider>
         <v-card-text>
           {{ $t('recipe.api-extras-description') }}
           <v-row v-for="(_, key) in recipe.extras" :key="key" class="mt-1">
-            <v-col cols="8">
+            <v-col style="max-width: 400px;">
               <v-text-field v-model="recipe.extras[key]" dense :label="key">
                 <template #prepend>
                   <v-btn color="error" icon class="mt-n4" @click="removeApiExtra(key)">
@@ -41,8 +41,8 @@
             </v-col>
           </v-row>
         </v-card-text>
-        <v-card-actions class="d-flex">
+        <v-card-actions class="d-flex ml-2 mt-n3">
-          <div style="max-width: 200px">
+          <div>
             <v-text-field v-model="apiNewKey" :label="$t('recipe.message-key')"></v-text-field>
           </div>
           <BaseButton create small class="ml-5" @click="createApiExtra" />

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue

@@ -26,7 +26,7 @@
       </TransitionGroup>
     </draggable>
     <v-skeleton-loader v-else boilerplate elevation="2" type="list-item"> </v-skeleton-loader>
-    <div class="d-flex flex-wrap justify-center justify-sm-end mt-2">
+    <div class="d-flex flex-wrap justify-center justify-sm-end mt-3">
       <v-tooltip top color="accent">
         <template #activator="{ on, attrs }">
           <span v-on="on">

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue

@@ -49,11 +49,13 @@
         <v-card-actions>
           <BaseButton cancel @click="dialog = false"> </BaseButton>
           <v-spacer></v-spacer>
-          <BaseButton color="info" @click="autoSetReferences">
+          <div class="d-flex flex-wrap justify-end">
-            <template #icon> {{ $globals.icons.robot }}</template>
+            <BaseButton color="info" @click="autoSetReferences">
-            {{ $t("recipe.auto") }}
+              <template #icon> {{ $globals.icons.robot }}</template>
-          </BaseButton>
+              {{ $t("recipe.auto") }}
-          <BaseButton save @click="setIngredientIds"> </BaseButton>
+            </BaseButton>
+            <BaseButton class="ml-2" save @click="setIngredientIds"> </BaseButton>
+          </div>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -84,7 +86,7 @@
         <div v-for="(step, index) in value" :key="step.id" class="list-group-item">
           <v-app-bar
             v-if="step.id && showTitleEditor[step.id]"
-            class="primary mx-1 mt-6"
+            class="primary mt-6"
             style="cursor: pointer"
             dark
             dense
@@ -219,6 +221,7 @@
         </div>
       </TransitionGroup>
     </draggable>
+    <v-divider class="mt-10 d-flex d-md-none"/>
   </section>
 </template>
 

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- Recipe Categories -->
-    <v-card v-if="recipe.recipeCategory.length > 0 || isEditForm" class="mt-2">
+    <v-card v-if="recipe.recipeCategory.length > 0 || isEditForm" :class="{'mt-10': !isEditForm}">
       <v-card-title class="py-2">
         {{ $t("recipe.categories") }}
       </v-card-title>
@@ -19,7 +19,7 @@
     </v-card>
 
     <!-- Recipe Tags -->
-    <v-card v-if="recipe.tags.length > 0 || isEditForm" class="mt-2">
+    <v-card v-if="recipe.tags.length > 0 || isEditForm" class="mt-4">
       <v-card-title class="py-2">
         {{ $t("tag.tags") }}
       </v-card-title>
@@ -45,7 +45,7 @@
       </v-card-text>
     </v-card>
 
-    <RecipeNutrition v-if="recipe.settings.showNutrition" v-model="recipe.nutrition" class="mt-10" :edit="isEditForm" />
+    <RecipeNutrition v-if="recipe.settings.showNutrition" v-model="recipe.nutrition" class="mt-4" :edit="isEditForm" />
     <RecipeAssets
       v-if="recipe.settings.showAssets"
       v-model="recipe.assets"

frontend/components/Domain/Recipe/RecipeTimeline.vue

@@ -8,7 +8,7 @@
         </v-btn>
       </v-col>
     </v-row>
-    <v-divider class="mx-2" />
+    <v-divider class="mx-2"/>
     <div
       v-if="timelineEvents.length"
       id="timeline-container"
@@ -34,7 +34,7 @@
         {{ $t("recipe.timeline-is-empty") }}
       </v-card-title>
     </v-card>
-    <div v-if="loading" class="mb-3">
+    <div v-if="loading" class="mb-3 text-center">
       <AppLoader :loading="loading" :waiting-text="$tc('general.loading-events')" />
     </div>
   </div>

frontend/components/Domain/Recipe/RecipeTimelineItem.vue

@@ -85,7 +85,7 @@
                 @error="hideImage = true"
               />
               <div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
-              {{ event.eventMessage }}
+                <SafeMarkdown :source="event.eventMessage" />
               </div>
           </v-col>
         </v-row>
@@ -101,9 +101,10 @@ import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
 import { useStaticRoutes } from "~/composables/api";
 import { Recipe, RecipeTimelineEventOut } from "~/lib/api/types/recipe"
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
+import SafeMarkdown from "~/components/global/SafeMarkdown.vue";
 
 export default defineComponent({
-  components: { RecipeCardMobile, RecipeTimelineContextMenu, UserAvatar },
+  components: { RecipeCardMobile, RecipeTimelineContextMenu, UserAvatar, SafeMarkdown },
 
   props: {
     event: {

frontend/pages/admin/backups.vue

@@ -1,6 +1,5 @@
 <template>
   <v-container fluid>
-    <BannerExperimental issue="https://github.com/hay-kot/mealie/issues/871"></BannerExperimental>
     <section>
       <!-- Delete Dialog -->
       <BaseDialog
@@ -44,7 +43,7 @@
           ></v-checkbox>
         </v-card-text>
         <v-card-actions class="justify-center pt-0">
-          <BaseButton delete :disabled="!confirmImport" @click="restoreBackup(selected)">
+          <BaseButton delete :disabled="!confirmImport || runningRestore" @click="restoreBackup(selected)">
             <template #icon> {{ $globals.icons.database }} </template>
             {{ $t('settings.backup.restore-backup') }}
           </BaseButton>
@@ -52,6 +51,7 @@
         <p class="caption pb-0 mb-1 text-center">
           {{ selected }}
         </p>
+        <v-progress-linear v-if="runningRestore" indeterminate></v-progress-linear>
       </BaseDialog>
 
       <section>
@@ -60,7 +60,16 @@
           <i18n path="settings.backup.experimental-description" />
           </v-card-text>
         </BaseCardSectionTitle>
-        <BaseButton @click="createBackup"> {{ $t("settings.backup.create-heading") }} </BaseButton>
+        <v-toolbar color="background" flat class="justify-between">
+        <BaseButton class="mr-2" @click="createBackup"> {{ $t("settings.backup.create-heading") }} </BaseButton>
+        <AppButtonUpload
+                :text-btn="false"
+                url="/api/admin/backups/upload"
+                accept=".zip"
+                color="info"
+                @uploaded="refreshBackups()"
+              />
+        </v-toolbar>
 
         <v-data-table
           :headers="headers"
@@ -86,20 +95,17 @@
             >
               <v-icon> {{ $globals.icons.delete }} </v-icon>
             </v-btn>
-            <BaseButton small download :download-url="backupsFileNameDownload(item.name)" @click.stop="() => {}" />
+            <BaseButton small download :download-url="backupsFileNameDownload(item.name)" class="mx-1" @click.stop="() => {}"/>
+            <BaseButton small @click.stop="setSelected(item); importDialog = true">
+              <template #icon> {{ $globals.icons.backupRestore }}</template>
+              {{ $t("settings.backup.backup-restore") }}
+          </BaseButton>
           </template>
         </v-data-table>
         <v-divider></v-divider>
         <div class="d-flex justify-end mt-6">
           <div>
-            <AppButtonUpload
+
-              :text-btn="false"
-              class="mr-4"
-              url="/api/admin/backups/upload"
-              accept=".zip"
-              color="info"
-              @uploaded="refreshBackups()"
-            />
           </div>
         </div>
       </section>
@@ -114,6 +120,7 @@
 import { computed, defineComponent, reactive, ref, toRefs, useContext, onMounted, useRoute } from "@nuxtjs/composition-api";
 import { useAdminApi } from "~/composables/api";
 import { AllBackups } from "~/lib/api/types/admin";
+import { alert } from "~/composables/use-toast";
 
 export default defineComponent({
   layout: "admin",
@@ -142,19 +149,23 @@ export default defineComponent({
 
       if (!data?.error) {
         refreshBackups();
+        alert.success(i18n.tc("settings.backup.backup-created"));
+      } else {
+        alert.error(i18n.tc("settings.backup.error-creating-backup-see-log-file"));
       }
     }
 
     async function restoreBackup(fileName: string) {
+      state.runningRestore = true;
       const { error } = await adminApi.backups.restore(fileName);
 
       if (error) {
         console.log(error);
         state.importDialog = false;
-        return;
+      } else {
+        alert.success(i18n.tc("settings.backup.restore-success"));
+        $auth.logout();
       }
-
-      $auth.logout();
     }
 
     const deleteTarget = ref("");
@@ -163,6 +174,7 @@ export default defineComponent({
       const { data } = await adminApi.backups.delete(deleteTarget.value);
 
       if (!data?.error) {
+        alert.success(i18n.tc("settings.backup.backup-deleted"));
         refreshBackups();
       }
     }
@@ -172,6 +184,7 @@ export default defineComponent({
       deleteDialog: false,
       createDialog: false,
       importDialog: false,
+      runningRestore: false,
       search: "",
       headers: [
         { text: i18n.t("general.name"), value: "name" },
@@ -186,7 +199,6 @@ export default defineComponent({
         return;
       }
       selected.value = data.name;
-      state.importDialog = true;
     }
 
     const backupsFileNameDownload = (fileName: string) => `api/admin/backups/${fileName}`;

frontend/pages/g/_groupSlug/recipes/timeline.vue

@@ -1,6 +1,6 @@
 <template>
   <v-sheet :class="$vuetify.breakpoint.smAndDown ? 'pa-0' : 'px-3 py-0'">
-    <BasePageTitle v-if="groupName" divider>
+    <BasePageTitle v-if="groupName">
       <template #header>
         <v-img max-height="200" max-width="150" :src="require('~/static/svgs/manage-members.svg')" />
       </template>

frontend/pages/user/profile/index.vue

@@ -6,7 +6,6 @@
       <h2 class="headline">{{ $t('profile.welcome-user', [user.fullName]) }}</h2>
       <p class="subtitle-1 mb-0 text-center">
        {{ $t('profile.description') }}
-        <a href="https://hay-kot.github.io/mealie/" target="_blank"> {{ $t('general.learn-more') }} </a>
       </p>
       <v-card flat color="background" width="100%" max-width="600px">
         <v-card-actions class="d-flex justify-center my-4">