From 7deb20de2432449e3aae6413d399f9479ca77bf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nam=20Hu=E1=BB=B3nh?= <namhuynh@MacBook-Pro-cua-Nam.local>
Date: Mon, 14 Dec 2020 16:54:33 +0700
Subject: [PATCH 1/4] Show dimensions under info

---
 src/components/manager/GridView.vue | 156 +++++++++++++---------------
 src/mixins/helper.js                |  22 ++++
 2 files changed, 95 insertions(+), 83 deletions(-)

diff --git a/src/components/manager/GridView.vue b/src/components/manager/GridView.vue
index 7c57d73..12d6809 100644
--- a/src/components/manager/GridView.vue
+++ b/src/components/manager/GridView.vue
@@ -1,53 +1,33 @@
 <template>
-    <div class="fm-grid">
-        <div class="d-flex align-content-start flex-wrap">
-            <div v-if="!isRootPath" v-on:click="levelUp" class="fm-grid-item text-center" >
-                <div class="fm-item-icon">
-                    <i class="fas fa-level-up-alt fa-5x pb-2"/>
-                </div>
-                <div class="fm-item-info"><strong>..</strong></div>
-            </div>
-
-            <div class="fm-grid-item text-center unselectable"
-                 v-for="(directory, index) in directories"
-                 v-bind:key="`d-${index}`"
-                 v-bind:title="directory.basename"
-                 v-bind:class="{'active': checkSelect('directories', directory.path)}"
-                 v-on:click="selectItem('directories', directory.path, $event)"
-                 v-on:dblclick.stop="selectDirectory(directory.path)"
-                 v-on:contextmenu.prevent="contextMenu(directory, $event)">
-                <div class="fm-item-icon">
-                    <i class="fa-5x pb-2"
-                       v-bind:class="(acl && directory.acl === 0) ? 'fas fa-unlock-alt' : 'far fa-folder'"/>
-                </div>
-                <div class="fm-item-info">{{ directory.basename }}</div>
-            </div>
-
-            <div class="fm-grid-item text-center unselectable"
-                 v-for="(file, index) in files"
-                 v-bind:key="`f-${index}`"
-                 v-bind:title="file.basename"
-                 v-bind:class="{'active': checkSelect('files', file.path)}"
-                 v-on:click="selectItem('files', file.path, $event)"
-                 v-on:dblclick="selectAction(file.path, file.extension)"
-                 v-on:contextmenu.prevent="contextMenu(file, $event)">
-                <div class="fm-item-icon">
-                    <i v-if="acl && file.acl === 0" class="fas fa-unlock-alt fa-5x pb-2"/>
-                    <thumbnail v-else-if="thisImage(file.extension)"
-                               v-bind:disk="disk"
-                               v-bind:file="file">
-                    </thumbnail>
-                    <i v-else class="far fa-5x pb-2"
-                       v-bind:class="extensionToIcon(file.extension)"/>
-                </div>
-                <div class="fm-item-info">
-                    {{ `${file.filename}.${file.extension}` }}
-                    <br>
-                    {{ bytesToHuman(file.size) }}
-                </div>
-            </div>
+  <div class="fm-grid" v-if="!isLoading">
+    <div class="d-flex align-content-start flex-wrap">
+      <div v-if="!isRootPath" v-on:click="levelUp" class="fm-grid-item text-center">
+        <div class="fm-item-icon">
+          <i class="fas fa-level-up-alt fa-5x pb-2" />
+        </div>
+        <div class="fm-item-info"><strong>..</strong></div>
+      </div>
+      <div class="fm-grid-item text-center unselectable" v-for="(directory, index) in directories" v-bind:key="`d-${index}`" v-bind:title="directory.basename" v-bind:class="{'active': checkSelect('directories', directory.path)}" v-on:click="selectItem('directories', directory.path, $event)" v-on:dblclick.stop="selectDirectory(directory.path)" v-on:contextmenu.prevent="contextMenu(directory, $event)">
+        <div class="fm-item-icon">
+          <i class="fa-5x pb-2" v-bind:class="(acl && directory.acl === 0) ? 'fas fa-unlock-alt' : 'far fa-folder'" />
+        </div>
+        <div class="fm-item-info">{{ directory.basename }}</div>
+      </div>
+      <div class="fm-grid-item text-center unselectable" v-for="(file, index) in files" v-bind:key="`f-${index}`" v-bind:title="file.basename" v-bind:class="{'active': checkSelect('files', file.path)}" v-on:click="selectItem('files', file.path, $event)" v-on:dblclick="selectAction(file.path, file.extension)" v-on:contextmenu.prevent="contextMenu(file, $event)">
+        <div class="fm-item-icon">
+          <i v-if="acl && file.acl === 0" class="fas fa-unlock-alt fa-5x pb-2" />
+          <thumbnail v-else-if="thisImage(file.extension)" v-bind:disk="disk" v-bind:file="file">
+          </thumbnail>
+          <i v-else class="far fa-5x pb-2" v-bind:class="extensionToIcon(file.extension)" />
+        </div>
+        <div class="fm-item-info">
+          {{ `${file.filename}.${file.extension}` }}
+          <br> {{ bytesToHuman(file.size) }}
+          <br> <small><b>{{ file.dimensions }}</b></small>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -62,6 +42,7 @@ export default {
   mixins: [translate, helper, managerHelper],
   data() {
     return {
+      isLoading: false,
       disk: '',
     };
   },
@@ -70,6 +51,21 @@ export default {
   },
   mounted() {
     this.disk = this.selectedDisk;
+    /* eslint space-before-function-paren: ["error", "never"] */
+    this.isLoading = true;
+    const filesBuilder = new Promise((resolve) => {
+      this.files.forEach(async(image, index) => {
+        const dimensions = await this.getFileDimension(this.disk, image);
+        this.files[index].dimensions = dimensions;
+        if (index === this.files.length - 1) {
+          resolve();
+        }
+      });
+    });
+
+    filesBuilder.then(() => {
+      this.isLoading = false;
+    });
   },
   beforeUpdate() {
     // if disk changed
@@ -103,41 +99,35 @@ export default {
 </script>
 
 <style lang="scss">
-    .fm-grid {
-        padding-top: 1rem;
-
-        .fm-grid-item {
-            position: relative;
-            width: 125px;
-            padding: 0.4rem;
-            margin-bottom: 1rem;
-            margin-right: 1rem;
-            border-radius: 5px;
-
-            &.active {
-                background-color: #c2e5eb;
-                box-shadow: 3px 2px 5px gray;
-            }
-
-            &:not(.active):hover {
-                background-color: #f8f9fa;
-                box-shadow: 3px 2px 5px gray;
-            }
-
-            .fm-item-icon{
-                cursor: pointer;
-            }
-
-            .fm-item-icon > i,
-            .fm-item-icon > figure > i {
-                color: #6d757d;
-            }
-
-            .fm-item-info {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
+.fm-grid {
+  padding-top: 1rem;
+  .fm-grid-item {
+    position: relative;
+    width: 125px;
+    padding: 0.4rem;
+    margin-bottom: 1rem;
+    margin-right: 1rem;
+    border-radius: 5px;
+    &.active {
+      background-color: #c2e5eb;
+      box-shadow: 3px 2px 5px gray;
+    }
+    &:not(.active):hover {
+      background-color: #f8f9fa;
+      box-shadow: 3px 2px 5px gray;
+    }
+    .fm-item-icon {
+      cursor: pointer;
+    }
+    .fm-item-icon > i,
+    .fm-item-icon > figure > i {
+      color: #6d757d;
+    }
+    .fm-item-info {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
+  }
+}
 </style>
diff --git a/src/mixins/helper.js b/src/mixins/helper.js
index 831ea50..6591140 100644
--- a/src/mixins/helper.js
+++ b/src/mixins/helper.js
@@ -31,6 +31,28 @@ export default {
       return date.toLocaleString(this.$store.state.fm.settings.lang);
     },
 
+    /**
+     * get file dimensions
+     * @param disk
+     * @param file
+     * @returns {string}
+     */
+    async getFileDimension(disk, file) {
+      const url = `${this.$store.getters['fm/settings/baseUrl']}preview?disk=${disk || 'images'}&path=${encodeURIComponent(file.path)}&v=${file.timestamp}`;
+      let dimensions = 'N/A x N/A';
+      const imageLoadPromise = new Promise((resolve) => {
+        const img = new Image();
+        img.onload = function onload() {
+          dimensions = `${this.width} x ${this.height}`;
+          resolve();
+        };
+        img.src = url;
+      });
+      await imageLoadPromise;
+
+      return dimensions;
+    },
+
     /**
      * Mime type to icon
      * @param mime

From 641838c0059bd1a776ff1b360cd70fc47da46d83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nam=20Hu=E1=BB=B3nh?= <namhuynh@MacBook-Pro-cua-Nam.local>
Date: Mon, 14 Dec 2020 17:02:46 +0700
Subject: [PATCH 2/4] Fixing URL error

---
 src/components/manager/Thumbnail.vue | 54 +++++++++++++---------------
 src/mixins/helper.js                 |  2 +-
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/components/manager/Thumbnail.vue b/src/components/manager/Thumbnail.vue
index 23cb82a..3d44fb9 100644
--- a/src/components/manager/Thumbnail.vue
+++ b/src/components/manager/Thumbnail.vue
@@ -1,13 +1,10 @@
 <template>
-    <figure class="fm-thumbnail">
-        <transition name="fade" mode="out-in">
-            <i v-if="!src" class="far fa-file-image fa-5x pb-2"/>
-            <img v-else
-                 v-bind:http://github.com/src="src"
-                 v-bind:alt="file.filename"
-                 class="img-thumbnail">
-        </transition>
-    </figure>
+  <figure class="fm-thumbnail">
+    <transition name="fade" mode="out-in">
+      <i v-if="!src" class="far fa-file-image fa-5x pb-2" />
+      <img v-else v-bind:http://github.com/src="src" v-bind:alt="file.filename" class="img-thumbnail">
+    </transition>
+  </figure>
 </template>
 
 <script>
@@ -43,8 +40,7 @@ export default {
               obs.unobserve(this.$el);
             }
           });
-        },
-        {
+        }, {
           root: null,
           threshold: '0.5',
         },
@@ -82,7 +78,7 @@ export default {
           this.src = `data:${mimeType};base64,${imgBase64}`;
         });
       } else {
-        this.src = `${this.$store.getters['fm/settings/baseUrl']}thumbnails?disk=${this.disk}&path=${encodeURIComponent(this.file.path)}&v=${this.file.timestamp}`;
+        this.src = `${this.$store.getters['fm/settings/baseUrl']}/thumbnails?disk=${this.disk}&path=${encodeURIComponent(this.file.path)}&v=${this.file.timestamp}`;
       }
     },
   },
@@ -90,21 +86,21 @@ export default {
 </script>
 
 <style lang="scss">
-    .fm-thumbnail {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .img-thumbnail {
-            width: 88px;
-            height: 88px;
-        }
-
-        .fade-enter-active, .fade-leave-active {
-            transition: opacity .3s;
-        }
-        .fade-enter, .fade-leave-to {
-            opacity: 0;
-        }
-    }
+.fm-thumbnail {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .img-thumbnail {
+    width: 88px;
+    height: 88px;
+  }
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity .3s;
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+}
 </style>
diff --git a/src/mixins/helper.js b/src/mixins/helper.js
index 6591140..fdd7980 100644
--- a/src/mixins/helper.js
+++ b/src/mixins/helper.js
@@ -38,7 +38,7 @@ export default {
      * @returns {string}
      */
     async getFileDimension(disk, file) {
-      const url = `${this.$store.getters['fm/settings/baseUrl']}preview?disk=${disk || 'images'}&path=${encodeURIComponent(file.path)}&v=${file.timestamp}`;
+      const url = `${this.$store.getters['fm/settings/baseUrl']}/preview?disk=${disk || 'images'}&path=${encodeURIComponent(file.path)}&v=${file.timestamp}`;
       let dimensions = 'N/A x N/A';
       const imageLoadPromise = new Promise((resolve) => {
         const img = new Image();

From 08c59f3cc7c321b773f260a8f01a3df1c5d09978 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nam=20Hu=E1=BB=B3nh?= <namhuynh@MacBook-Pro-cua-Nam.local>
Date: Mon, 14 Dec 2020 17:22:41 +0700
Subject: [PATCH 3/4] Fixing typo

---
 src/components/manager/GridView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/manager/GridView.vue b/src/components/manager/GridView.vue
index 12d6809..4f8f48c 100644
--- a/src/components/manager/GridView.vue
+++ b/src/components/manager/GridView.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="fm-grid" v-if="!isLoading">
-    <div class="d-flex align-content-start flex-wrap">
+  <div class="fm-grid">
+    <div class="d-flex align-content-start flex-wrap" v-if="!isLoading">
       <div v-if="!isRootPath" v-on:click="levelUp" class="fm-grid-item text-center">
         <div class="fm-item-icon">
           <i class="fas fa-level-up-alt fa-5x pb-2" />

From fafacb1dfb9c363edf1c82b7d8af53846dc1c721 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nam=20Hu=E1=BB=B3nh?= <namhuynh@MacBook-Pro-cua-Nam.local>
Date: Mon, 14 Dec 2020 17:35:33 +0700
Subject: [PATCH 4/4] Fixing some styles

---
 src/components/manager/DiskList.vue | 37 ++++++++++++++---------------
 src/components/manager/GridView.vue |  1 +
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/manager/DiskList.vue b/src/components/manager/DiskList.vue
index 30f59cc..b214885 100644
--- a/src/components/manager/DiskList.vue
+++ b/src/components/manager/DiskList.vue
@@ -1,15 +1,13 @@
 <template>
-    <div class="fm-disk-list">
-        <ul class="list-inline">
-            <li class="list-inline-item" v-for="(disk, index) in disks" v-bind:key="index">
-                <span class="badge"
-                      v-on:click="selectDisk(disk)"
-                      v-bind:class="[disk === selectedDisk ? 'badge-secondary' : 'badge-light']">
+  <div class="fm-disk-list">
+    <ul class="list-inline">
+      <li class="list-inline-item" v-for="(disk, index) in disks" v-bind:key="index">
+        <span class="badge" v-on:click="selectDisk(disk)" v-bind:class="[disk === selectedDisk ? 'badge-secondary' : 'badge-light']">
                     <i class="fa-fw far fa-hdd"/> {{ disk }}
                 </span>
-            </li>
-        </ul>
-    </div>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
@@ -54,14 +52,15 @@ export default {
 </script>
 
 <style lang="scss">
-    .fm-disk-list {
-
-        ul.list-inline {
-            margin-bottom: 0.5rem;
-        }
-
-        .badge.badge-light {
-            cursor: pointer;
-        }
-    }
+.fm-disk-list {
+  .fm-table {
+    padding-bottom: 5rem;
+  }
+  ul.list-inline {
+    margin-bottom: 0.5rem;
+  }
+  .badge.badge-light {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/components/manager/GridView.vue b/src/components/manager/GridView.vue
index 4f8f48c..8557fd1 100644
--- a/src/components/manager/GridView.vue
+++ b/src/components/manager/GridView.vue
@@ -101,6 +101,7 @@ export default {
 <style lang="scss">
 .fm-grid {
   padding-top: 1rem;
+  padding-bottom: 5rem;
   .fm-grid-item {
     position: relative;
     width: 125px;