Adjust resource icon size depending on the tile size

owncloud · Feb 21, 2023 · e2bc1b8 · e2bc1b8
1 parent b5bb3a7
commit e2bc1b8
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 7 deletions.
diff --git a/packages/design-system/src/components/OcTile/OcTile.spec.ts b/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, {

diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/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']

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/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() {

diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -55,6 +55,7 @@
           :sort-fields="sortFields"
           :sort-by="sortBy"
           :sort-dir="sortDir"
+          :view-size="viewSize"
           @row-mounted="rowMounted"
           @file-click="$_fileActions_triggerDefaultAction"
           @sort="handleSort"

diff --git a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
@@ -71,6 +71,18 @@ describe('ResourceTiles component', () => {
     })
   })
 
+  it.each([
+    { viewSize: 1, expected: 'xlarge' },
+    { viewSize: 2, expected: 'xlarge' },
+    { viewSize: 3, expected: 'xxlarge' },
+    { viewSize: 4, expected: 'xxlarge' },
+    { viewSize: 5, expected: 'xxxlarge' },
+    { viewSize: 6, expected: 'xxxlarge' }
+  ])('passes the "viewSize" to the OcTile component', (data) => {
+    const { wrapper } = getWrapper({ data: spacesResources, viewSize: data.viewSize })
+    expect(wrapper.find('oc-tile').attributes()['resource-icon-size']).toEqual(data.expected)
+  })
+
   function getWrapper(props = {}, slots = {}) {
     const storeOptions = defaultStoreMockOptions
     const store = createStore(storeOptions)

diff --git a/...es/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/...es/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -13,10 +13,10 @@ exports[`ResourceTiles component renders an array of spaces correctly 1`] = `
   <!--v-if-->
   <oc-list class="oc-tiles oc-flex">
     <li class="oc-tiles-item">
-      <oc-tile is-resource-selected="false" resource="[object Object]" resource-route="[object Object]"></oc-tile>
+      <oc-tile is-resource-selected="false" resource="[object Object]" resource-icon-size="xlarge" resource-route="[object Object]"></oc-tile>
     </li>
     <li class="oc-tiles-item">
-      <oc-tile is-resource-selected="false" resource="[object Object]" resource-route="[object Object]"></oc-tile>
+      <oc-tile is-resource-selected="false" resource="[object Object]" resource-icon-size="xlarge" resource-route="[object Object]"></oc-tile>
     </li>
   </oc-list>
   <div class="oc-tiles-footer"></div>

diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -41,10 +41,10 @@ exports[`Projects view different files view states lists all available project s
           </div>
           <ul class="oc-list oc-my-rm oc-mx-rm oc-tiles oc-flex">
             <li class="oc-tiles-item">
-              <oc-tile-stub is-resource-selected="false" resource="[object Object]" resource-route="[object Object]"></oc-tile-stub>
+              <oc-tile-stub is-resource-selected="false" resource="[object Object]" resource-icon-size="xlarge" resource-route="[object Object]"></oc-tile-stub>
             </li>
             <li class="oc-tiles-item">
-              <oc-tile-stub is-resource-selected="false" resource="[object Object]" resource-route="[object Object]"></oc-tile-stub>
+              <oc-tile-stub is-resource-selected="false" resource="[object Object]" resource-icon-size="xlarge" resource-route="[object Object]"></oc-tile-stub>
             </li>
           </ul>
           <div class="oc-tiles-footer"></div>