feat(files): Improve UX for files list view (#2261)

components/views/files/list/List.html

@@ -1,74 +1,31 @@
-<div
-  id="file-list"
-  :class="{'hidden-scroll': !$device.isMobile}"
-  v-scroll-lock="true"
->
-  <component
-    :is="!$device.isMobile? 'UiScroll' : 'div'"
-    verticalScroll
-    scrollbarVisibility="scroll"
-  >
-    <table class="table">
-      <thead>
-        <th>
-          {{ $t('pages.files.browse.name') }}
-          <filter-icon size="0.8x" class="sort" />
-        </th>
-        <th v-if="!$device.isMobile">
-          {{ $t('pages.files.browse.modified') }}
-          <filter-icon size="0.8x" class="sort" />
-        </th>
-        <th v-if="!$device.isMobile">
-          {{ $t('pages.files.browse.type') }}
-          <filter-icon size="0.8x" class="sort" />
-        </th>
-        <th v-if="!$device.isMobile">
-          {{ $t('pages.files.browse.encrypted') }}
-          <filter-icon size="0.8x" class="sort" />
-        </th>
-        <th>
-          {{ $t('pages.files.browse.size') }}
-          <filter-icon size="0.8x" class="sort" />
-        </th>
-        <th></th>
-      </thead>
-      <tbody>
-        <tr class="item" v-for="item, i in directory" :key="i + counter">
-          <td class="filename" @click="handle(item)">
-            <span class="icon">
-              <folder-icon size="1x" v-if="item.content" />
-              <archive-icon
-                size="1x"
-                v-else-if="item.type && item.type.includes('archive')"
-              />
-              <image-icon
-                size="1x"
-                v-else-if="item.type && item.type.includes('image')"
-              />
-              <file-icon size="1x" v-else />
-            </span>
-            {{ item.name }}
-          </td>
-          <td v-if="!$device.isMobile">
-            {{ $dayjs(item.modified).fromNow() }}
-          </td>
-          <td v-if="!$device.isMobile">
-            {{ item.type ? item.type : item.children ? 'Folder' : '-' }}
-          </td>
-          <td
-            class="has-tooltip has-tooltip-primary has-tooltip-top"
-            :data-tooltip="(item.encrypted) ? $t('global.encrypted') : $t('global.unencrypted')"
-            v-if="!$device.isMobile"
-          >
-            <lock-icon size="1x" v-if="item.encrypted" />
-            <unlock-icon size="1x" v-else />
-          </td>
-          <td>{{ item.size ? $filesize(item.size) : '-' }}</td>
-          <td class="options">
-            <more-vertical-icon size="1x" />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </component>
+<div id="file-list">
+  <table class="table" :class="{'disabled' : ui.isLoadingFileIndex}">
+    <thead>
+      <th @click="sort">
+        {{ $t('pages.files.browse.name') }}
+        <filter-icon size="0.8x" />
+      </th>
+      <th v-if="!$device.isMobile" @click="sort">
+        {{ $t('pages.files.browse.modified') }}
+        <filter-icon size="0.8x" />
+      </th>
+      <th v-if="!$device.isMobile" @click="sort">
+        {{ $t('pages.files.browse.type') }}
+        <filter-icon size="0.8x" />
+      </th>
+      <th @click="sort">
+        {{ $t('pages.files.browse.size') }}
+        <filter-icon size="0.8x" />
+      </th>
+      <th></th>
+    </thead>
+    <tbody>
+      <FilesRow
+        v-for="item, i in directory"
+        :key="i + counter"
+        :item="item"
+        @handle="handle"
+      />
+    </tbody>
+  </table>
 </div>

components/views/files/list/List.less

@@ -1,63 +1,26 @@
 .table {
-  thead {
-    th {
-      &:extend(.font-secondary);
-      border-bottom-width: 1px;
-      border-bottom-color: @text-muted;
-    }
-  }
-
-  tr {
-    td {
-      &:extend(.font-primary);
-      border-bottom-color: @foreground;
-    }
-  }
-
-  .centered {
-    text-align: center;
-  }
-
-  .icon {
-    width: 30px;
-  }
-
-  .filename {
-    font-family: @primary-font;
-    cursor: pointer;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    max-width: 200px;
-  }
-  .sort {
-    font-size: 9pt;
-    cursor: pointer;
-  }
-
-  .options {
-    cursor: pointer;
-  }
+  cursor: pointer;
+  &:extend(.full-width);
+  font-size: @text-size;
+  background: transparent;
 
-  .feather-folder {
-    &:extend(.font-orange);
+  &.disabled {
+    cursor: not-allowed;
   }
 
-  .feather-image {
-    color: @jade;
-  }
+  th {
+    &:extend(.font-secondary);
+    border-bottom-width: 1px;
+    border-bottom-color: @text-muted;
 
-  .feather-archive {
-    &:extend(.color-danger);
-  }
+    &:first-of-type {
+      padding-left: @xlarge-spacing;
+    }
 
-  .feather-file {
-    &:extend(.font-pink);
+    svg {
+      font-size: 9pt;
+    }
   }
-  &:extend(.full-width);
-  font-size: @text-size;
-  background: transparent;
-  margin: 0;
 }
 
 @media only screen and (max-width: @mobile-breakpoint) {

components/views/files/list/List.vue

@@ -1,6 +1,7 @@
 <template src="./List.html"></template>
 <script lang="ts">
 import Vue, { PropType } from 'vue'
+import { mapState } from 'vuex'
 import {
   FilterIcon,
   FolderIcon,
@@ -11,6 +12,7 @@ import {
   UnlockIcon,
   MoreVerticalIcon,
 } from 'satellite-lucide-icons'
+
 import { Item } from '~/libraries/Files/abstracts/Item.abstract'
 
 export default Vue.extend({
@@ -45,6 +47,9 @@ export default Vue.extend({
       timer: null,
     }
   },
+  computed: {
+    ...mapState(['ui']),
+  },
   mounted() {
     this.$data.timer = setInterval(
       this.forceRender,
@@ -71,6 +76,9 @@ export default Vue.extend({
     forceRender() {
       this.$emit('forceRender')
     },
+    sort() {
+      this.$toast.show(this.$t('todo - sort') as string)
+    },
   },
 })
 </script>

components/views/files/row/Row.html

@@ -0,0 +1,22 @@
+<tr
+  ref="row"
+  v-on="ui.isLoadingFileIndex ? {} : { click: handle, contextmenu: contextMenu }"
+>
+  <td class="filename">
+    <folder-icon v-if="item.content" />
+    <archive-icon v-else-if="item.type.includes('archive')" />
+    <image-icon v-else-if="item.type.includes('image')" />
+    <file-icon v-else />
+    <span> {{ item.name }} </span>
+  </td>
+  <td v-if="!$device.isMobile">{{ $dayjs(item.modified).fromNow() }}</td>
+  <td v-if="!$device.isMobile">{{ item.type }}</td>
+  <td>{{ item.size ? $filesize(item.size) : '-' }}</td>
+  <td
+    @mouseover="menuHover=true"
+    @mouseleave="menuHover=false"
+    @click="contextMenu"
+  >
+    <more-vertical-icon size="1x" />
+  </td>
+</tr>

components/views/files/row/Row.less

@@ -0,0 +1,21 @@
+tr {
+  td {
+    &:extend(.font-primary);
+    border-bottom-color: @foreground;
+    vertical-align: middle;
+
+    &.filename {
+      font-family: @primary-font;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      max-width: 200px;
+
+      svg {
+        color: @primary-color;
+        width: 1em;
+        height: 1em;
+      }
+    }
+  }
+}

components/views/files/row/Row.vue

@@ -0,0 +1,72 @@
+<template src="./Row.html"></template>
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { mapState } from 'vuex'
+import {
+  FolderIcon,
+  ArchiveIcon,
+  FileIcon,
+  ImageIcon,
+  LockIcon,
+  UnlockIcon,
+  MoreVerticalIcon,
+} from 'satellite-lucide-icons'
+import { ContextMenu } from '~/components/mixins/UI/ContextMenu'
+
+import { Item } from '~/libraries/Files/abstracts/Item.abstract'
+
+export default Vue.extend({
+  components: {
+    FileIcon,
+    FolderIcon,
+    ArchiveIcon,
+    ImageIcon,
+    LockIcon,
+    UnlockIcon,
+    MoreVerticalIcon,
+  },
+  mixins: [ContextMenu],
+  props: {
+    /**
+     * File or Directory to be displayed in detail
+     */
+    item: {
+      type: Object as PropType<Item>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      menuHover: false as boolean,
+      contextMenuValues: [
+        { text: 'Favorite', func: this.todo },
+        { text: 'Share', func: this.todo },
+        { text: 'Rename', func: this.todo },
+        { text: 'Delete', func: this.todo },
+      ],
+    }
+  },
+  computed: {
+    ...mapState(['ui']),
+  },
+  methods: {
+    /**
+     * @method handle
+     * @description Emit item to be handled in pages/files/browse/index.vue
+     */
+    handle() {
+      if (this.menuHover) {
+        return
+      }
+      this.$emit('handle', this.item)
+    },
+    /**
+     * @description handle in AP-1054
+     */
+    todo() {
+      this.$toast.show(this.$t('todo') as string)
+    },
+  },
+})
+</script>
+<style scoped lang="less" src="./Row.less"></style>