Add viewMode toggle for condensed resource table (owncloud#7976)

changelog/unreleased/enhancement-condensed-files-view

@@ -0,0 +1,7 @@
+Enhancement: Add switch to enable condensed resource table
+
+We've added a switch to have a more condensed resource table. 
+The change gets saved to the route and persisted across resource navigation.
+
+https://github.com/owncloud/web/pull/7976
+https://github.com/owncloud/web/issues/6380

packages/design-system/changelog/unreleased/enhancement-condensed-menu-item

@@ -0,0 +1,5 @@
+Enhancement: Add condensed menu icon 
+
+We added a new menu icon for the switch between condensed and regular resource table.
+
+https://github.com/owncloud/web/pull/7976

packages/web-app-files/src/components/AppBar/ViewOptions.vue

@@ -1,5 +1,19 @@
 <template>
-  <div>
+  <div class="oc-flex oc-flex-middle">
+    <div data-testid="viewmode-switch-buttons" class="oc-button-group oc-visible@s oc-mr-s">
+      <oc-button
+        :appearance="viewModeCurrent === ViewModeConstants.condensedTable ? 'filled' : 'outline'"
+        @click="setViewMode(ViewModeConstants.condensedTable)"
+      >
+        <oc-icon name="menu-line-condensed" fill-type="none" size="small" />
+      </oc-button>
+      <oc-button
+        :appearance="viewModeCurrent === ViewModeConstants.default ? 'filled' : 'outline'"
+        @click="setViewMode(ViewModeConstants.default)"
+      >
+        <oc-icon name="menu-line" fill-type="none" size="small" />
+      </oc-button>
+    </div>
     <oc-button
       id="files-view-options-btn"
       key="files-view-options-btn"
@@ -50,16 +64,22 @@
 <script>
 import { mapMutations, mapState } from 'vuex'
 import { useRouteQueryPersisted } from 'web-pkg/src/composables'
-import { PaginationConstants } from '../../composables'
+import { PaginationConstants, ViewModeConstants } from '../../composables'
 
 export default {
   setup() {
     const perPageQuery = useRouteQueryPersisted({
       name: PaginationConstants.perPageQueryName,
       defaultValue: PaginationConstants.perPageDefault
     })
+    const viewModeQuery = useRouteQueryPersisted({
+      name: ViewModeConstants.queryName,
+      defaultValue: ViewModeConstants.default
+    })
 
     return {
+      ViewModeConstants,
+      viewModeCurrent: viewModeQuery,
       itemsPerPage: perPageQuery
     }
   },
@@ -90,7 +110,10 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY'])
+    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY']),
+    setViewMode(mode) {
+      this.viewModeCurrent = mode
+    }
   }
 }
 </script>

packages/web-app-files/src/components/FilesList/ResourceTable.vue

@@ -1,6 +1,9 @@
 <template>
   <oc-table
-    :class="hoverableQuickActions && 'hoverable-quick-actions'"
+    :class="[
+      hoverableQuickActions && 'hoverable-quick-actions',
+      { condensed: viewMode === ViewModeConstants.condensedTable }
+    ]"
     :data="resources"
     :fields="fields"
     :highlighted="selectedIds"
@@ -181,6 +184,8 @@ import {
   useCapabilityProjectSpacesEnabled,
   useCapabilityShareJailEnabled
 } from 'web-pkg/src/composables'
+import { ViewModeConstants } from 'web-app-files/src/composables/viewMode'
+
 import Rename from '../../mixins/actions/rename'
 import { defineComponent, PropType } from 'vue'
 import { Resource } from 'web-client'
@@ -318,6 +323,10 @@ export default defineComponent({
       required: false,
       default: false
     },
+    viewMode: {
+      type: String,
+      default: ViewModeConstants.default
+    },
     /**
      * Enable hover effect
      */
@@ -367,6 +376,7 @@ export default defineComponent({
   },
   setup() {
     return {
+      ViewModeConstants,
       hasShareJail: useCapabilityShareJailEnabled(),
       hasProjectSpaces: useCapabilityProjectSpacesEnabled()
     }
@@ -833,6 +843,9 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+.oc-table.condensed > tbody > tr {
+  height: 0 !important;
+}
 .resource-table {
   &-resource-cut {
     opacity: 0.6;

packages/web-app-files/src/composables/index.ts

@@ -4,6 +4,7 @@ export * from './resourcesViewDefaults'
 export * from './router'
 export * from './selection'
 export * from './sort'
+export * from './viewMode'
 
 declare module 'vue/types/vue' {
   interface Vue {

packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts

@@ -5,13 +5,19 @@ import { usePagination, useFileListHeaderPosition, SortField } from '../'
 import { useSort, SortDir } from '../sort/'
 import { useSideBar } from '../sideBar'
 
-import { useMutationSubscription, useRouteQuery, useStore } from 'web-pkg/src/composables'
+import {
+  queryItemAsString,
+  useMutationSubscription,
+  useRouteQuery,
+  useStore
+} from 'web-pkg/src/composables'
 import { determineSortFields } from '../../helpers/ui/resourceTable'
 import { Task } from 'vue-concurrency'
 import { Resource } from 'web-client'
 import { useSelectedResources, SelectedResourcesResult } from '../selection'
 import { ReadOnlyRef } from 'web-pkg'
 import { ScrollToResult, useScrollTo } from '../scrollTo'
+import { useViewMode, ViewModeConstants } from '../viewMode'
 
 interface ResourcesViewDefaultsOptions<T, U extends any[]> {
   loadResourcesTask?: Task<T, U>
@@ -30,6 +36,7 @@ type ResourcesViewDefaultsResult<T, TT, TU extends any[]> = {
   handleSort({ sortBy, sortDir }: { sortBy: string; sortDir: SortDir }): void
   sortBy: ReadOnlyRef<string>
   sortDir: ReadOnlyRef<SortDir>
+  viewMode: ReadOnlyRef<string>
 
   selectedResources: Ref<Resource[]>
   selectedResourcesIds: Ref<(string | number)[]>
@@ -61,6 +68,10 @@ export const useResourcesViewDefaults = <T, TT, TU extends any[]>(
     fields
   })
 
+  const currentViewModeQuery = useRouteQuery('view-mode', ViewModeConstants.default)
+  const currentViewMode = computed((): string => queryItemAsString(currentViewModeQuery.value))
+  const viewMode = useViewMode(currentViewMode)
+
   const paginationPageQuery = useRouteQuery('page', '1')
   const paginationPage = computed((): number => parseInt(String(paginationPageQuery.value)))
   const { items: paginatedResources, total: paginationPages } = usePagination({
@@ -80,6 +91,7 @@ export const useResourcesViewDefaults = <T, TT, TU extends any[]>(
     areResourcesLoading,
     storeItems,
     fields,
+    viewMode,
     paginatedResources,
     paginationPages,
     paginationPage,

packages/web-app-files/src/composables/viewMode/constants.ts

@@ -0,0 +1,5 @@
+export abstract class ViewModeConstants {
+  static readonly default: string = 'resource-table'
+  static readonly queryName: string = 'view-mode'
+  static readonly condensedTable: string = 'resource-table-condensed'
+}

packages/web-app-files/src/composables/viewMode/index.ts

@@ -0,0 +1,2 @@
+export * from './constants'
+export * from './useViewMode'

packages/web-app-files/src/composables/viewMode/useViewMode.ts

@@ -0,0 +1,15 @@
+import { computed, ComputedRef, unref } from 'vue'
+import { queryItemAsString, useRouteQueryPersisted } from 'web-pkg/src/composables'
+import { ViewModeConstants } from './constants'
+
+export function useViewMode<T>(options: ComputedRef<string>): ComputedRef<string> {
+  if (options) {
+    return computed(() => unref(options))
+  }
+
+  const viewModeQuery = useRouteQueryPersisted({
+    name: ViewModeConstants.queryName,
+    defaultValue: ViewModeConstants.default
+  })
+  return computed(() => queryItemAsString(unref(viewModeQuery)))
+}

packages/web-app-files/src/views/spaces/GenericSpace.vue

@@ -49,6 +49,7 @@
           v-model="selectedResourcesIds"
           class="files-table"
           :class="{ 'files-table-squashed': sideBarOpen }"
+          :view-mode="viewMode"
           :are-thumbnails-displayed="displayThumbnails"
           :resources="paginatedResources"
           :target-route-callback="resourceTargetRouteCallback"

packages/web-app-files/tests/mocks/useResourcesViewDefaultsMock.ts

@@ -30,6 +30,7 @@ export const useResourcesViewDefaultsMock = (
     sideBarActivePanel: ref(''),
     scrollToResource: jest.fn(),
     scrollToResourceFromRoute: jest.fn(),
+    viewMode: ref('resource-table'),
     ...options
   }
 }

packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js

@@ -1,8 +1,10 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import merge from 'lodash-es/merge'
 
+import DesignSystem from '@ownclouders/design-system'
+
 import Store from 'web-app-files/src/store'
 import stubs from '@/tests/unit/stubs'
 import OcPageSize from '@/tests/unit/stubs/OcPageSize'
@@ -95,4 +97,46 @@ describe('ViewOptions', () => {
 
     expect(mockedStore.modules.Files.mutations.SET_HIDDEN_FILES_VISIBILITY).toHaveBeenCalled()
   })
+
+  it('initially shows normal resource-table by default', () => {
+    const wrapper = shallowMount(ViewOptions, {
+      store,
+      router,
+      localVue,
+      stubs: stubs,
+      directives: { OcTooltip }
+    })
+    const viewModeSwitchButtons = wrapper.find('[data-testid="viewmode-switch-buttons"]')
+
+    expect(viewModeSwitchButtons).toMatchSnapshot()
+  })
+  it('toggles between normal and condensed resource-table upon clicking the respective buttons', async () => {
+    localVue.use(DesignSystem)
+
+    const wrapper = mount(ViewOptions, {
+      store,
+      router,
+      localVue,
+      stubs: {
+        ...stubs,
+        'oc-button': false
+      },
+      directives: { OcTooltip }
+    })
+
+    const viewModeSwitchButtons = wrapper.find('[data-testid="viewmode-switch-buttons"]')
+    console.log(viewModeSwitchButtons.html())
+
+    await wrapper
+      .findAll('[data-testid="viewmode-switch-buttons"] > .oc-button')
+      .at(0)
+      .trigger('click')
+    expect(viewModeSwitchButtons).toMatchSnapshot()
+
+    await wrapper
+      .findAll('[data-testid="viewmode-switch-buttons"] > .oc-button')
+      .at(1)
+      .trigger('click')
+    expect(viewModeSwitchButtons).toMatchSnapshot()
+  })
 })

packages/web-app-files/tests/unit/components/AppBar/__snapshots__/ViewOptions.spec.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ViewOptions initially shows normal resource-table by default 1`] = `
+<div data-testid="viewmode-switch-buttons" class="oc-button-group oc-visible@s oc-mr-s">
+  <oc-button-stub appearance="outline">
+    <oc-icon-stub name="menu-line-condensed" fill-type="none" size="small"></oc-icon-stub>
+  </oc-button-stub>
+  <oc-button-stub appearance="filled">
+    <oc-icon-stub name="menu-line" fill-type="none" size="small"></oc-icon-stub>
+  </oc-button-stub>
+</div>
+`;
+
+exports[`ViewOptions toggles between normal and condensed resource-table upon clicking the respective buttons 1`] = `
+<div data-testid="viewmode-switch-buttons" class="oc-button-group oc-visible@s oc-mr-s"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-filled">
+    <oc-icon-stub name="menu-line-condensed" filltype="none" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub>
+  </button> <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-outline">
+    <oc-icon-stub name="menu-line" filltype="none" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub>
+  </button></div>
+`;
+
+exports[`ViewOptions toggles between normal and condensed resource-table upon clicking the respective buttons 2`] = `
+<div data-testid="viewmode-switch-buttons" class="oc-button-group oc-visible@s oc-mr-s"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-outline">
+    <oc-icon-stub name="menu-line-condensed" filltype="none" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub>
+  </button> <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-filled">
+    <oc-icon-stub name="menu-line" filltype="none" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub>
+  </button></div>
+`;