Rebase Proof-of-concept

owncloud · Jan 4, 2023 · 725db18 · 725db18
1 parent 35d98ce
commit 725db18
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 5 deletions.
diff --git a/changelog/unreleased/enhancement-resources-tiles-view b/changelog/unreleased/enhancement-resources-tiles-view
@@ -0,0 +1,7 @@
+Enhancement: Add tiles view for resource display
+
+We've added a switch to change from the known resource table to a tiles view.
+The change gets saved to the route and persisted across resource navigation.
+
+https://github.com/owncloud/web/pull/7991
+https://github.com/owncloud/web/issues/6378
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -142,7 +142,11 @@ export default defineComponent({
       if (!this.displayViewModeSwitch) {
         return []
       }
-      return [ViewModeConstants.condensedTable, ViewModeConstants.default]
+      return [
+        ViewModeConstants.tilesView,
+        ViewModeConstants.condensedTable,
+        ViewModeConstants.default
+      ]
     }
   },
   mounted() {

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -1,8 +1,9 @@
 <template>
-  <oc-table
+  <component
+    :is="displayMode"
     :class="[
       hoverableQuickActions && 'hoverable-quick-actions',
-      { condensed: viewMode === ViewModeConstants.condensedTable.name }
+      { condensed: viewMode === ViewModeConstants.condensedTable.name },
     ]"
     :data="resources"
     :fields="fields"
@@ -192,7 +193,7 @@
       <!-- @slot Footer of the files table -->
       <slot name="footer" />
     </template>
-  </oc-table>
+  </component>
 </template>
 
 <script lang="ts">
@@ -226,10 +227,13 @@ import { CreateTargetRouteOptions } from '../../helpers/folderLink'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { basename, dirname } from 'path'
 import { useWindowSize } from '@vueuse/core'
-
+import ResourceTiles from './ResourceTiles.vue'
 const TAGS_MINIMUM_SCREEN_WIDTH = 850
 
 export default defineComponent({
+  components: {
+    ResourceTiles
+  },
   mixins: [Rename],
   model: {
     prop: 'selectedIds',
@@ -434,6 +438,12 @@ export default defineComponent({
       'clipboardAction'
     ]),
     ...mapState('runtime/spaces', ['spaces']),
+    displayMode() {
+      if (this.viewMode === 'resource-tiles') {
+        return 'resource-tiles'
+      }
+      return 'oc-table'
+    },
     popperOptions() {
       return {
         modifiers: [

diff --git a/packages/web-app-files/src/composables/viewMode/constants.ts b/packages/web-app-files/src/composables/viewMode/constants.ts
@@ -22,5 +22,13 @@ export abstract class ViewModeConstants {
       fillType: 'none'
     }
   }
+  static readonly tilesView: ViewMode = {
+    name: 'resource-tiles',
+    label: $gettext('Switch to tiles view'),
+    icon: {
+      name: 'apps-2',
+      fillType: 'line'
+    }
+  }
   static readonly queryName: string = 'view-mode'
 }