Tile resize follow up

changelog/unreleased/enhancement-resources-tiles-view

@@ -10,6 +10,7 @@ https://github.com/owncloud/web/pull/8392
 https://github.com/owncloud/web/pull/8404
 https://github.com/owncloud/web/pull/8410
 https://github.com/owncloud/web/pull/8460
+https://github.com/owncloud/web/pull/8483
 https://github.com/owncloud/web/issues/6378
 https://github.com/owncloud/web/issues/6379
 https://github.com/owncloud/web/issues/6380

packages/design-system/src/components/OcTile/OcTile.spec.ts

@@ -23,6 +23,13 @@ describe('OcTile component', () => {
     const wrapper = getWrapper({ resource: getSpaceMock(), isResourceSelected: true })
     expect(wrapper.find('.oc-tile-card-selected').exists()).toBeTruthy()
   })
+  it.each(['xlarge, xxlarge, xxxlarge'])(
+    'renders resource icon size correctly',
+    (resourceIconSize) => {
+      const wrapper = getWrapper({ resource: getSpaceMock(), resourceIconSize })
+      expect(wrapper.find('oc-resource-icon-stub').attributes().size).toEqual(resourceIconSize)
+    }
+  )
 
   function getWrapper(props = {}) {
     return shallowMount(OcTile, {

packages/design-system/src/components/OcTile/OcTile.vue

@@ -31,7 +31,7 @@
           <oc-resource-icon
             v-else
             :resource="resource"
-            size="xlarge"
+            :size="resourceIconSize"
             class="tile-default-image oc-pt-xs"
           />
         </slot>
@@ -103,6 +103,13 @@ export default defineComponent({
     isExtensionDisplayed: {
       type: Boolean,
       default: true
+    },
+    resourceIconSize: {
+      type: String,
+      default: 'xlarge',
+      validator: (value: string) => {
+        return ['large', 'xlarge', 'xxlarge', 'xxxlarge'].includes(value)
+      }
     }
   },
   emits: ['click', 'contextmenu']

packages/web-app-files/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <main id="files" class="oc-flex oc-height-1-1">
     <div v-if="dragareaEnabled" class="dragarea" />
-    <router-view tabindex="0" class="oc-width-expand" />
+    <router-view tabindex="0" class="files-wrapper oc-width-expand oc-height-1-1 oc-flex-wrap" />
   </main>
 </template>
 <script lang="ts">

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

@@ -28,7 +28,13 @@
         </oc-breadcrumb>
         <shares-navigation v-if="hasSharesNavigation" />
         <div v-if="hasViewOptions || hasSidebarToggle" class="oc-flex">
-          <view-options v-if="hasViewOptions" :view-modes="viewModes" />
+          <view-options
+            v-if="hasViewOptions"
+            :view-modes="viewModes"
+            :has-hidden-files="hasHiddenFiles"
+            :has-file-extensions="hasFileExtensions"
+            :has-pagination="hasPagination"
+          />
           <sidebar-toggle v-if="hasSidebarToggle" :side-bar-open="sideBarOpen" />
         </div>
       </div>
@@ -60,7 +66,6 @@ import { mapGetters, mapState, mapMutations } from 'vuex'
 import { Resource } from 'web-client'
 import { SpaceResource } from 'web-client/src/helpers'
 import BatchActions from 'web-pkg/src/components/BatchActions.vue'
-import { ViewModeConstants } from '../../composables/viewMode/constants'
 import { BreadcrumbItem } from '../../helpers/breadcrumbs'
 import MixinFileActions from '../../mixins/fileActions'
 import EmptyTrashBin from '../../mixins/actions/emptyTrashBin'
@@ -70,6 +75,7 @@ import ContextActions from '../FilesList/ContextActions.vue'
 import SharesNavigation from './SharesNavigation.vue'
 import SidebarToggle from './SidebarToggle.vue'
 import ViewOptions from './ViewOptions.vue'
+import { ViewMode } from 'web-pkg/src/ui/types'
 
 export default defineComponent({
   components: {
@@ -89,14 +95,17 @@ export default defineComponent({
       type: Array as PropType<Resource[]>,
       default: () => []
     },
-    displayViewModeSwitch: {
-      type: Boolean,
-      default: false
+    viewModes: {
+      type: Array as PropType<ViewMode[]>,
+      default: () => []
     },
     hasBulkActions: { type: Boolean, default: false },
     hasSharesNavigation: { type: Boolean, default: false },
     hasSidebarToggle: { type: Boolean, default: true },
     hasViewOptions: { type: Boolean, default: true },
+    hasHiddenFiles: { type: Boolean, default: true },
+    hasFileExtensions: { type: Boolean, default: true },
+    hasPagination: { type: Boolean, default: true },
     showActionsOnSelection: { type: Boolean, default: false },
     sideBarOpen: { type: Boolean, default: false },
     space: {
@@ -140,16 +149,6 @@ export default defineComponent({
       )
       return this.$gettextInterpolate(translated, { amount: this.selectedFiles.length })
     },
-    viewModes() {
-      if (!this.displayViewModeSwitch) {
-        return []
-      }
-      return [
-        ViewModeConstants.condensedTable,
-        ViewModeConstants.default,
-        ViewModeConstants.tilesView
-      ]
-    },
     batchActions() {
       return [
         ...this.$_clearSelection_items,

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

@@ -1,7 +1,7 @@
 <template>
   <div class="oc-flex oc-flex-middle">
     <div
-      v-if="viewModes.length"
+      v-if="viewModes.length > 1"
       class="viewmode-switch-buttons oc-button-group oc-visible@s oc-mr-s"
     >
       <oc-button
@@ -35,23 +35,23 @@
       padding-size="medium"
     >
       <oc-list>
-        <li class="files-view-options-list-item oc-mb-m">
+        <li v-if="hasHiddenFiles" class="files-view-options-list-item">
           <oc-switch
             v-model:checked="hiddenFilesShownModel"
             data-testid="files-switch-hidden-files"
             :label="$gettext('Show hidden files')"
             @update:checked="updateHiddenFilesShownModel"
           />
         </li>
-        <li class="files-view-options-list-item oc-my-m">
+        <li v-if="hasFileExtensions" class="files-view-options-list-item">
           <oc-switch
             v-model:checked="fileExtensionsShownModel"
             data-testid="files-switch-files-extensions-files"
             :label="$gettext('Show file extensions')"
             @update:checked="updateFileExtensionsShownModel"
           />
         </li>
-        <li class="files-view-options-list-item oc-mt-m">
+        <li v-if="hasPagination" class="files-view-options-list-item">
           <oc-page-size
             v-if="!queryParamsLoading"
             :selected="itemsPerPage"
@@ -63,8 +63,8 @@
           />
         </li>
         <li
-          v-if="viewModeCurrent === ViewModeConstants.tilesView.name"
-          class="files-view-options-list-item oc-mt-m oc-visible@s oc-flex oc-flex-between"
+          v-if="viewModes.includes(ViewModeConstants.tilesView)"
+          class="files-view-options-list-item oc-visible@s oc-flex oc-flex-between oc-flex-middle"
         >
           <label for="tiles-size-slider" v-text="resizeTilesLabel" />
           <input
@@ -74,6 +74,7 @@
             max="6"
             name="tiles-size-slider"
             class="oc-range"
+            data-testid="files-tiles-size-slider"
             @input="setTilesViewSize"
           />
         </li>
@@ -83,14 +84,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, watch } from 'vue'
+import { defineComponent, PropType, ref, unref, watch } from 'vue'
 import { mapMutations, mapState } from 'vuex'
 import { useRouteQueryPersisted } from 'web-pkg/src/composables'
 import { ViewMode } from 'web-pkg/src/ui/types'
 import { PaginationConstants, ViewModeConstants } from '../../composables'
 
 export default defineComponent({
   props: {
+    hasHiddenFiles: { type: Boolean, default: true },
+    hasFileExtensions: { type: Boolean, default: true },
+    hasPagination: { type: Boolean, default: true },
     viewModes: {
       type: Array as PropType<ViewMode[]>,
       default: () => []
@@ -106,11 +110,20 @@ export default defineComponent({
       name: ViewModeConstants.queryName,
       defaultValue: ViewModeConstants.defaultModeName
     })
-
     const viewSizeQuery = useRouteQueryPersisted({
       name: ViewModeConstants.tilesSizeQueryName,
       defaultValue: ViewModeConstants.tilesSizeDefault.toString()
     })
+
+    const setTilesViewSize = () => {
+      const rootStyle = (document.querySelector(':root') as HTMLElement).style
+      const currentSize = rootStyle.getPropertyValue('--oc-size-tiles-resize-step')
+      const newSize = `${(unref(viewSizeQuery) as any) * 12}rem`
+      if (!currentSize || currentSize !== newSize) {
+        rootStyle.setProperty(`--oc-size-tiles-resize-step`, newSize)
+      }
+    }
+
     watch(
       [perPageQuery, viewModeQuery, viewSizeQuery],
       (params) => {
@@ -119,17 +132,23 @@ export default defineComponent({
       { immediate: true, deep: true }
     )
 
+    watch(
+      viewSizeQuery,
+      (size) => {
+        if (size) {
+          setTilesViewSize()
+        }
+      },
+      { immediate: true }
+    )
+
     return {
       ViewModeConstants,
       viewModeCurrent: viewModeQuery,
       viewSizeCurrent: viewSizeQuery,
       itemsPerPage: perPageQuery,
-      queryParamsLoading
-    }
-  },
-  mounted() {
-    if (!this.queryParamsLoading) {
-      this.setTilesViewSize()
+      queryParamsLoading,
+      setTilesViewSize
     }
   },
   computed: {
@@ -166,12 +185,6 @@ export default defineComponent({
     setViewMode(mode) {
       this.viewModeCurrent = mode.name
     },
-    setTilesViewSize() {
-      ;(document.querySelector(':root') as HTMLElement).style.setProperty(
-        `--oc-size-tiles-resize-step`,
-        `${this.viewSizeCurrent * 12}rem`
-      )
-    },
     updateHiddenFilesShownModel(event) {
       this.hiddenFilesShownModel = event
     },
@@ -195,7 +208,12 @@ export default defineComponent({
     border-radius: 3px;
   }
 }
+
 .files-view-options-list-item {
+  &:not(:last-child) {
+    margin-bottom: var(--oc-space-medium);
+  }
+
   & > * {
     display: flex;
     justify-content: space-between;

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

@@ -42,6 +42,7 @@
           :resource-route="getRoute(resource)"
           :is-resource-selected="isResourceSelected(resource)"
           :is-extension-displayed="areFileExtensionsShown"
+          :resource-icon-size="resourceIconSize"
           @vue:mounted="
             $emit('rowMounted', resource, tileRefs.tiles[resource.id], ImageDimension.Tile)
           "
@@ -100,7 +101,7 @@ import ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/Contex
 // Alignment regarding naming would be an API-breaking change and can
 // Be done at a later point in time?
 import { useResourceRouteResolver } from '../../composables/filesList'
-import { SortDir, SortField } from 'web-app-files/src/composables'
+import { SortDir, SortField, ViewModeConstants } from 'web-app-files/src/composables'
 
 export default defineComponent({
   name: 'ResourceTiles',
@@ -149,6 +150,11 @@ export default defineComponent({
           value === undefined || [SortDir.Asc.toString(), SortDir.Desc.toString()].includes(value)
         )
       }
+    },
+    viewSize: {
+      type: Number,
+      required: false,
+      default: ViewModeConstants.tilesSizeDefault
     }
   },
   emits: ['fileClick', 'rowMounted', 'sort', 'update:selectedIds'],
@@ -265,6 +271,18 @@ export default defineComponent({
       return unref(currentSortField) === field
     }
 
+    const resourceIconSize = computed(() => {
+      const sizeMap = {
+        1: 'xlarge',
+        2: 'xlarge',
+        3: 'xxlarge',
+        4: 'xxlarge',
+        5: 'xxxlarge',
+        6: 'xxxlarge'
+      }
+      return sizeMap[props.viewSize] ?? 'xlarge'
+    })
+
     onBeforeUpdate(() => {
       tileRefs.value = {
         tiles: [],
@@ -284,7 +302,8 @@ export default defineComponent({
       getResourceCheckboxLabel,
       selectSorting,
       isSortFieldSelected,
-      currentSortField
+      currentSortField,
+      resourceIconSize
     }
   },
   data() {
@@ -299,12 +318,12 @@ export default defineComponent({
 .oc-tiles {
   column-gap: 1rem;
   display: grid;
-  grid-template-columns: repeat(auto-fill, var(--oc-size-tiles-default));
+  grid-template-columns: repeat(auto-fill, minmax(max-content, var(--oc-size-tiles-default)));
   justify-content: flex-start;
   row-gap: 1rem;
 
   &.resizableTiles {
-    grid-template-columns: repeat(auto-fill, var(--oc-size-tiles-resize-step));
+    grid-template-columns: repeat(auto-fill, minmax(max-content, var(--oc-size-tiles-resize-step)));
   }
 
   @media only screen and (max-width: 640px) {

packages/web-app-files/src/components/FilesViewWrapper.vue

@@ -16,6 +16,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .files-view-wrapper {
+  height: 100%;
   position: relative;
   overflow-y: auto;
   display: grid;

packages/web-app-files/src/views/Favorites.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="oc-flex">
     <files-view-wrapper>
-      <app-bar :display-view-mode-switch="true" :side-bar-open="sideBarOpen" />
+      <app-bar
+        :view-modes="[
+          ViewModeConstants.default,
+          ViewModeConstants.condensedTable,
+          ViewModeConstants.tilesView
+        ]"
+        :side-bar-open="sideBarOpen"
+      />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
         <no-content-message
@@ -81,7 +88,7 @@ import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
 import Pagination from '../components/FilesList/Pagination.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
-import { useResourcesViewDefaults } from '../composables'
+import { useResourcesViewDefaults, ViewModeConstants } from '../composables'
 import { defineComponent } from 'vue'
 import { Resource } from 'web-client'
 import SideBar from '../components/SideBar/SideBar.vue'
@@ -126,6 +133,7 @@ export default defineComponent({
     }
 
     return {
+      ViewModeConstants,
       ...useResourcesViewDefaults<Resource, any, any[]>(),
       getSpace
     }