Improve album picker styling

src/components/modal/AddToAlbumModal.vue

@@ -1,19 +1,17 @@
 <template>
   <Modal @close="close" size="normal" v-if="show">
     <template #title>
-      {{ t("memories", "Add to album") }}
+      {{ t("memories", "Add to Album") }}
     </template>
 
     <div class="outer">
       <AlbumPicker @select="selectAlbum" />
 
-      <div v-if="processing" class="info-pad">
-        {{
-          t("memories", "Processing … {n}/{m}", {
-            n: photosDone,
-            m: photos.length,
-          })
-        }}
+      <div v-if="processing">
+        <NcProgressBar
+          :value="Math.round((photosDone * 100) / photos.length)"
+          :error="true"
+        />
       </div>
     </div>
   </Modal>
@@ -26,12 +24,16 @@ import * as dav from "../../services/DavRequests";
 import { showInfo } from "@nextcloud/dialogs";
 import { IAlbum, IPhoto } from "../../types";
 
-import AlbumPicker from "./AlbumPicker.vue";
+const NcProgressBar = () =>
+  import("@nextcloud/vue/dist/Components/NcProgressBar");
+
 import Modal from "./Modal.vue";
+import AlbumPicker from "./AlbumPicker.vue";
 
 export default defineComponent({
   name: "AddToAlbumModal",
   components: {
+    NcProgressBar,
     Modal,
     AlbumPicker,
   },
@@ -63,6 +65,8 @@ export default defineComponent({
     },
 
     async selectAlbum(album: IAlbum) {
+      if (this.processing) return;
+
       const name = album.name || album.album_id.toString();
       const gen = dav.addToAlbum(album.user, name, this.photos);
       this.processing = true;
@@ -92,8 +96,4 @@ export default defineComponent({
 .outer {
   margin-top: 15px;
 }
-
-.info-pad {
-  margin-top: 6px;
-}
-</style>
+</style>

src/components/modal/AlbumPicker.vue

@@ -156,19 +156,20 @@ export default defineComponent({
 
     .album {
       :deep .list-item {
-        padding: 8px 16px;
         box-sizing: border-box;
       }
 
-      &:not(:last-child) {
-        margin-bottom: 16px;
+      :deep .line-one__title {
+        font-weight: 500;
       }
 
       &__image {
-        width: 40px;
-        height: 40px;
+        width: auto;
+        height: 100%;
+        aspect-ratio: 1/1;
         object-fit: cover;
-        border-radius: var(--border-radius);
+        border-radius: 50%;
+        margin-right: 5px;
 
         &--placeholder {
           background: var(--color-primary-light);

src/components/modal/FaceMergeModal.vue

@@ -9,13 +9,11 @@
     <div class="outer">
       <FaceList @select="clickFace" />
 
-      <div v-if="procesingTotal > 0" class="info-pad">
-        {{
-          t("memories", "Processing … {n}/{m}", {
-            n: processing,
-            m: procesingTotal,
-          })
-        }}
+      <div v-if="processingTotal > 0">
+        <NcProgressBar
+          :value="Math.round((processing * 100) / processingTotal)"
+          :error="true"
+        />
       </div>
     </div>
 
@@ -32,6 +30,8 @@ import { defineComponent } from "vue";
 
 import NcButton from "@nextcloud/vue/dist/Components/NcButton";
 const NcTextField = () => import("@nextcloud/vue/dist/Components/NcTextField");
+const NcProgressBar = () =>
+  import("@nextcloud/vue/dist/Components/NcProgressBar");
 
 import { showError } from "@nextcloud/dialogs";
 import { getCurrentUser } from "@nextcloud/auth";
@@ -48,6 +48,7 @@ export default defineComponent({
   components: {
     NcButton,
     NcTextField,
+    NcProgressBar,
     Modal,
     Tag,
     FaceList,
@@ -55,7 +56,7 @@ export default defineComponent({
 
   data: () => ({
     processing: 0,
-    procesingTotal: 0,
+    processingTotal: 0,
     show: false,
   }),
 
@@ -102,7 +103,7 @@ export default defineComponent({
           { details: true }
         )) as any;
         let data: IFileInfo[] = res.data;
-        this.procesingTotal = data.length;
+        this.processingTotal = data.length;
 
         // Don't try too much
         let failures = 0;
@@ -155,8 +156,4 @@ export default defineComponent({
 .outer {
   margin-top: 15px;
 }
-.info-pad {
-  margin-top: 6px;
-  margin-bottom: 2px;
-}
-</style>
+</style>

src/components/modal/MoveToFolderModal.vue

@@ -5,12 +5,10 @@
     </template>
 
     <div class="outer">
-      {{
-        t("memories", "Processing … {n}/{m}", {
-          n: photosDone,
-          m: photos.length,
-        })
-      }}
+      <NcProgressBar
+        :value="Math.round((photosDone * 100) / photos.length)"
+        :error="true"
+      />
     </div>
   </Modal>
 </template>
@@ -23,12 +21,16 @@ import { getFilePickerBuilder, FilePickerType } from "@nextcloud/dialogs";
 import { showInfo } from "@nextcloud/dialogs";
 import { IPhoto } from "../../types";
 
+const NcProgressBar = () =>
+  import("@nextcloud/vue/dist/Components/NcProgressBar");
+
 import UserConfig from "../../mixins/UserConfig";
 import Modal from "./Modal.vue";
 
 export default defineComponent({
   name: "MoveToFolderModal",
   components: {
+    NcProgressBar,
     Modal,
   },