From c91d258c0f54c02a3f91be74e99ae0b630638bd4 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 8 Feb 2023 09:03:08 +0100
Subject: [PATCH 1/9] Add selection model to tiles view

---
 .../src/components/OcCheckbox/OcCheckbox.vue  |   9 +-
 .../src/components/OcTile/OcTile.spec.ts      |   4 +-
 .../src/components/OcTile/OcTile.vue          | 105 ++++++++++++----
 .../OcTile/__snapshots__/OcTile.spec.ts.snap  |  19 ++-
 .../components/FilesList/ResourceTable.vue    |   8 +-
 .../components/FilesList/ResourceTiles.vue    | 114 ++++++++++--------
 .../src/views/spaces/GenericSpace.vue         |   5 +-
 .../src/views/spaces/Projects.vue             |  36 +++---
 .../__snapshots__/ResourceTiles.spec.ts.snap  |   4 +-
 .../__snapshots__/Projects.spec.ts.snap       |   4 +-
 .../ContextActions/ContextMenuQuickAction.vue |   1 +
 11 files changed, 192 insertions(+), 117 deletions(-)

diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index eeaac85ecbc..fb3739f6f2a 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -115,7 +115,8 @@ export default defineComponent({
         'oc-checkbox',
         'oc-rounded',
         'oc-checkbox-' + getSizeClass(this.size),
-        { 'oc-checkbox-outline': this.outline }
+        { 'oc-checkbox-outline': this.outline },
+        { 'oc-checkbox-checked': this.modelValue }
       ]
     },
     labelClasses() {
@@ -180,12 +181,14 @@ export default defineComponent({
     cursor: pointer;
   }
 
-  &:checked,
+  &-checked,
+  :checked,
   &:indeterminate {
     background-color: var(--oc-color-swatch-inverse-default);
   }
 
-  &:checked {
+  &-checked,
+  :checked {
     @include svg-fill($internal-form-checkbox-image, '#000', $form-radio-checked-icon-color);
   }
 
diff --git a/packages/design-system/src/components/OcTile/OcTile.spec.ts b/packages/design-system/src/components/OcTile/OcTile.spec.ts
index 2f7fe55075a..abf76233109 100644
--- a/packages/design-system/src/components/OcTile/OcTile.spec.ts
+++ b/packages/design-system/src/components/OcTile/OcTile.spec.ts
@@ -1,4 +1,4 @@
-import { shallowMount } from 'web-test-helpers'
+import { defaultPlugins, shallowMount } from 'web-test-helpers'
 import OcTile from './OcTile.vue'
 
 const defaultSpace = {
@@ -32,7 +32,7 @@ describe('OcTile component', () => {
       props: {
         ...props
       },
-      global: { renderStubDefaultSlot: true }
+      global: { plugins: [...defaultPlugins()], renderStubDefaultSlot: true }
     })
   }
 })
diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
index 169eb5cff1d..338fea1428d 100644
--- a/packages/design-system/src/components/OcTile/OcTile.vue
+++ b/packages/design-system/src/components/OcTile/OcTile.vue
@@ -6,32 +6,36 @@
     @contextmenu="$emit('contextmenu', $event)"
   >
     <oc-resource-link
-      class="oc-card-media-top oc-border-b oc-flex oc-flex-center oc-flex-middle"
+      class="oc-card-media-top oc-flex oc-flex-center oc-flex-middle oc-m-rm"
       :resource="resource"
       :folder-link="resourceRoute"
       @click="$emit('click')"
     >
+      <div class="oc-tile-card-selection">
+        <slot name="selection" :item="resource" />
+      </div>
       <oc-tag
         v-if="resource.disabled"
         class="resource-disabled-indicator oc-position-absolute"
         type="span"
       >
-        <span v-translate>Disabled</span>
+        <span v-text="$gettext('Disabled')" />
       </oc-tag>
-      <!-- Slot for resource image, renders resource type icon by default -->
-      <slot name="imageField" :item="resource">
-        <oc-img
-          v-if="resource.thumbnail"
-          class="tile-preview oc-rounded-top"
-          :src="resource.thumbnail"
-        />
-        <oc-resource-icon
-          v-else
-          :resource="resource"
-          size="xxlarge"
-          class="tile-default-image oc-pt-s"
-        />
-      </slot>
+      <div
+        class="oc-tile-card-preview oc-flex oc-flex-middle oc-flex-center"
+        :class="{ 'oc-tile-card-preview-selected': selectedIds.includes(resource.id) }"
+      >
+        <div class="oc-tile-card-hover"></div>
+        <slot name="imageField" :item="resource">
+          <oc-img v-if="resource.thumbnail" class="tile-preview" :src="resource.thumbnail" />
+          <oc-resource-icon
+            v-else
+            :resource="resource"
+            size="xlarge"
+            class="tile-default-image oc-pt-xs"
+          />
+        </slot>
+      </div>
     </oc-resource-link>
     <div class="oc-card-body oc-p-s">
       <div class="oc-flex oc-flex-between oc-flex-middle">
@@ -50,10 +54,7 @@
           <slot name="contextMenu" :item="resource" />
         </div>
       </div>
-      <p
-        v-if="resource.description"
-        class="oc-text-left oc-ml-xs oc-mt-xs oc-mb-rm oc-text-truncate"
-      >
+      <p v-if="resource.description" class="oc-text-left oc-my-rm oc-text-truncate">
         <small v-text="resource.description" />
       </p>
     </div>
@@ -92,17 +93,23 @@ export default defineComponent({
     resourceRoute: {
       type: Object,
       default: () => {}
+    },
+    selectedIds: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ['click', 'contextmenu']
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .oc-tile-card {
   background-color: var(--oc-color-background-highlight) !important;
   box-shadow: none !important;
   height: 100%;
+  display: flex;
+  flex-flow: column;
   outline: 1px solid var(--oc-color-border);
 
   &.state-trashed {
@@ -116,6 +123,7 @@ export default defineComponent({
   }
 
   .oc-card-media-top {
+    position: relative;
     aspect-ratio: 16/9;
     justify-content: center;
     width: 100%;
@@ -130,10 +138,63 @@ export default defineComponent({
 
     .tile-preview {
       aspect-ratio: 16/9;
-      height: auto;
+      height: 100%;
       object-fit: cover;
       width: 100%;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+    }
+
+    &:hover {
+      .oc-tile-card-hover {
+        opacity: 10%;
+      }
+    }
+  }
+
+  &-selection {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    input {
+      background-color: var(--oc-color-background-muted);
     }
+    input.oc-checkbox-checked {
+      background-color: var(--oc-color-swatch-inverse-default);
+    }
+  }
+
+  &-preview {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    text-align: center;
+
+    &-selected {
+      width: calc(100% - var(--oc-space-medium));
+      height: calc(100% - var(--oc-space-medium));
+
+      .tile-preview,
+      .oc-tile-card-hover {
+        border-radius: 5px !important;
+      }
+
+      .oc-tile-card-hover {
+        opacity: 8%;
+      }
+    }
+  }
+
+  &-hover {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
   }
 
   .resource-name-wrapper {
diff --git a/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap b/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
index c4feaf6e057..2796fbf3f81 100644
--- a/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
+++ b/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
@@ -2,10 +2,13 @@
 
 exports[`OcTile component renders default space correctly 1`] = `
 <div class="oc-tile-card oc-card oc-card-default oc-rounded">
-  <oc-resource-link-stub class="oc-card-media-top oc-border-b oc-flex oc-flex-center oc-flex-middle" isresourceclickable="true" resource="[object Object]">
+  <oc-resource-link-stub class="oc-card-media-top oc-flex oc-flex-center oc-flex-middle oc-m-rm" isresourceclickable="true" resource="[object Object]">
+    <div class="oc-tile-card-selection"></div>
     <!--v-if-->
-    <!-- Slot for resource image, renders resource type icon by default -->
-    <oc-resource-icon-stub class="tile-default-image oc-pt-s" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
+    <div class="oc-tile-card-preview oc-flex oc-flex-middle oc-flex-center">
+      <div class="oc-tile-card-hover"></div>
+      <oc-resource-icon-stub class="tile-default-image oc-pt-xs" resource="[object Object]" size="xlarge"></oc-resource-icon-stub>
+    </div>
   </oc-resource-link-stub>
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
@@ -24,11 +27,15 @@ exports[`OcTile component renders default space correctly 1`] = `
 
 exports[`OcTile component renders disabled space correctly 1`] = `
 <div class="oc-tile-card oc-card oc-card-default oc-rounded state-trashed">
-  <oc-resource-link-stub class="oc-card-media-top oc-border-b oc-flex oc-flex-center oc-flex-middle" isresourceclickable="true" resource="[object Object]">
+  <oc-resource-link-stub class="oc-card-media-top oc-flex oc-flex-center oc-flex-middle oc-m-rm" isresourceclickable="true" resource="[object Object]">
+    <div class="oc-tile-card-selection"></div>
     <oc-tag-stub class="resource-disabled-indicator oc-position-absolute" rounded="false" size="medium" type="span">
       <span>Disabled</span>
-    </oc-tag-stub> <!-- Slot for resource image, renders resource type icon by default -->
-    <oc-resource-icon-stub class="tile-default-image oc-pt-s" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
+    </oc-tag-stub>
+    <div class="oc-tile-card-preview oc-flex oc-flex-middle oc-flex-center">
+      <div class="oc-tile-card-hover"></div>
+      <oc-resource-icon-stub class="tile-default-image oc-pt-xs" resource="[object Object]" size="xlarge"></oc-resource-icon-stub>
+    </div>
   </oc-resource-link-stub>
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index af40165daf2..cc9add5d719 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -41,7 +41,7 @@
     <template #select="{ item }">
       <oc-checkbox
         :id="`resource-table-select-${resourceDomSelector(item)}`"
-        :label="getResourceCheckboxLabel(item)"
+        :label="$gettext('Select %{ type }', { type: item.type })"
         :hide-label="true"
         size="large"
         :model-value="isResourceSelected(item)"
@@ -771,12 +771,6 @@ export default defineComponent({
         ? !this.disabled.includes(resourceId)
         : this.disabled !== resourceId
     },
-    getResourceCheckboxLabel(resource) {
-      if (resource.type === 'folder') {
-        return this.$gettext('Select folder')
-      }
-      return this.$gettext('Select file')
-    },
     getSharedWithAvatarDescription(resource) {
       const resourceType =
         resource.type === 'folder' ? this.$gettext('folder') : this.$gettext('file')
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index ab49da21272..c68bcb71149 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -6,12 +6,23 @@
           :ref="(el) => (tileRefs.tiles[resource.id] = el)"
           :resource="resource"
           :resource-route="getRoute(resource)"
+          :selected-ids="selectedIds"
           @vue:mounted="
             $emit('rowMounted', resource, tileRefs.tiles[resource.id], ImageDimension.Tile)
           "
           @contextmenu="showContextMenu($event, resource.id, tileRefs.tiles[resource.id])"
           @click="emitTileClick(resource)"
         >
+          <template #selection>
+            <oc-checkbox
+              :label="$gettext('Select %{ type }', { type: resource.type })"
+              :hide-label="true"
+              size="large"
+              class="oc-flex-inline oc-p-s"
+              :model-value="isResourceSelected(resource)"
+              @click.stop.prevent="setSelection(resource)"
+            />
+          </template>
           <template #imageField>
             <slot name="image" :resource="resource" />
           </template>
@@ -19,47 +30,28 @@
             <slot name="actions" :resource="resource" />
           </template>
           <template #contextMenu>
-            <div>
-              <oc-button
-                :id="`space-context-btn-${resource.getDomSelector()}`"
-                :ref="
-                  (el) => {
-                    tileRefs.dropBtns[resource.id] = el
-                  }
-                "
-                v-oc-tooltip="contextMenuLabel"
-                :aria-label="contextMenuLabel"
-                appearance="raw"
-                @click="resetDropPosition($event, resource.id, tileRefs.dropBtns[resource.id])"
-              >
-                <oc-icon name="more-2" />
-              </oc-button>
-              <oc-drop
-                :ref="
-                  (el) => {
-                    tileRefs.dropEls[resource.id] = el
-                  }
-                "
-                :drop-id="`space-context-drop-${resource.getDomSelector()}`"
-                close-on-click
-                mode="manual"
-                :options="{ delayHide: 0 }"
-                padding-size="small"
-              >
+            <context-menu-quick-action
+              :ref="(el) => (tileRefs.dropBtns[resource.id] = el)"
+              :item="resource"
+              class="resource-tiles-btn-action-dropdown"
+              @quick-action-clicked="showContextMenuOnBtnClick($event, resource, resource.id)"
+            >
+              <template #contextMenu>
                 <slot name="contextMenuActions" :resource="resource" />
-              </oc-drop>
-            </div>
+              </template>
+            </context-menu-quick-action>
           </template>
         </oc-tile>
       </li>
     </oc-list>
-    <!-- @slot Footer of the tiles list -->
-    <slot name="footer" />
+    <div class="oc-tiles-footer">
+      <slot name="footer" />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { onBeforeUpdate, defineComponent, PropType, computed, ref } from 'vue'
+import { onBeforeUpdate, defineComponent, PropType, computed, ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Resource, SpaceResource } from 'web-client'
 import { useStore } from 'web-pkg/src/composables'
@@ -72,9 +64,11 @@ import { createLocationSpaces } from 'web-app-files/src/router'
 // 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 ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
 
 export default defineComponent({
   name: 'ResourceTiles',
+  components: { ContextMenuQuickAction },
   props: {
     /**
      * Array of resources (spaces, folders, files) to be displayed as tiles
@@ -87,6 +81,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    selectedIds: {
+      type: Array,
+      default: () => []
+    },
     targetRouteCallback: {
       type: Function,
       required: false,
@@ -98,15 +96,14 @@ export default defineComponent({
       default: null
     }
   },
-  emits: ['fileClick', 'rowMounted'],
+  emits: ['fileClick', 'rowMounted', 'update:selectedIds'],
   setup(props, context) {
     const store = useStore()
     const { $gettext } = useGettext()
 
     const tileRefs = ref({
       tiles: [],
-      dropBtns: [],
-      dropEls: []
+      dropBtns: []
     })
 
     const spaces = computed(() => {
@@ -156,44 +153,52 @@ export default defineComponent({
       }
     }
 
-    const contextMenuLabel = computed(() => {
-      return $gettext('Show context menu')
-    })
-
-    const resetDropPosition = (event, index, reference) => {
-      const drop = tileRefs.value.dropEls[index].tippy
-
-      if (drop === undefined) {
+    const showContextMenuOnBtnClick = (data, item, index) => {
+      const { dropdown, event } = data
+      if (dropdown?.tippy === undefined) {
         return
       }
-      displayPositionedDropdown(drop, event, reference)
+      displayPositionedDropdown(dropdown.tippy, event, unref(tileRefs).dropBtns[index])
     }
 
     const showContextMenu = (event, index, reference) => {
       event.preventDefault()
-      const drop = tileRefs.value.dropEls[index]
+      const drop = unref(tileRefs).tiles[index]?.$el.getElementsByClassName(
+        'resource-tiles-btn-action-dropdown'
+      )[0]
 
       if (drop === undefined) {
         return
       }
-      displayPositionedDropdown(drop.tippy, event, reference)
+      displayPositionedDropdown(drop._tippy, event, reference)
+    }
+
+    const isResourceSelected = (resource) => {
+      return props.selectedIds.includes(resource.id)
+    }
+
+    const setSelection = (resource) => {
+      const selectedIds = !isResourceSelected(resource)
+        ? [...props.selectedIds, resource.id]
+        : props.selectedIds.filter((id) => id !== resource.id)
+      context.emit('update:selectedIds', selectedIds)
     }
 
     onBeforeUpdate(() => {
       tileRefs.value = {
         tiles: [],
-        dropBtns: [],
-        dropEls: []
+        dropBtns: []
       }
     })
 
     return {
-      contextMenuLabel,
       emitTileClick,
       getRoute,
-      resetDropPosition,
+      showContextMenuOnBtnClick,
       showContextMenu,
-      tileRefs
+      tileRefs,
+      isResourceSelected,
+      setSelection
     }
   },
   data() {
@@ -225,5 +230,12 @@ export default defineComponent({
       grid-template-columns: 80%;
     }
   }
+
+  &-footer {
+    color: var(--oc-color-text-muted);
+    font-size: 0.875rem;
+    line-height: 1.4;
+    padding: var(--oc-space-xsmall);
+  }
 }
 </style>
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 9c629ece438..e9ede64cd9a 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -46,13 +46,14 @@
         </no-content-message>
         <resource-tiles
           v-else-if="viewMode === ViewModeConstants.tilesView.name"
+          v-model:selectedIds="selectedResourcesIds"
           :data="paginatedResources"
           class="oc-px-m oc-pt-l"
           :resizable="true"
           :target-route-callback="resourceTargetRouteCallback"
           :space="space"
-          @rowMounted="rowMounted"
-          @fileClick="$_fileActions_triggerDefaultAction"
+          @row-mounted="rowMounted"
+          @file-click="$_fileActions_triggerDefaultAction"
         >
           <!-- Share quickactions targets current folder, not resource... -->
           <!-- <template #actions="{ resource }">
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 9db59d4566f..af91f7d3e7a 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -25,26 +25,24 @@
           </template>
         </no-content-message>
         <div v-else class="spaces-list oc-px-m oc-mt-l">
-          <resource-tiles :data="spaces">
+          <resource-tiles v-model:selectedIds="selectedResourcesIds" :data="spaces">
             <template #image="{ resource }">
               <img
                 v-if="imageContentObject[resource.id]"
-                class="space-image tile-image oc-rounded-top"
+                class="tile-preview"
                 :src="imageContentObject[resource.id]['data']"
                 alt=""
               />
             </template>
             <template #actions="{ resource }">
-              <div>
-                <oc-button
-                  v-oc-tooltip="showSpaceMemberLabel"
-                  :aria-label="showSpaceMemberLabel"
-                  appearance="raw"
-                  @click="openSidebarSharePanel(resource)"
-                >
-                  <oc-icon name="group" fill-type="line" />
-                </oc-button>
-              </div>
+              <oc-button
+                v-oc-tooltip="showSpaceMemberLabel"
+                :aria-label="showSpaceMemberLabel"
+                appearance="raw"
+                @click="openSidebarSharePanel(resource)"
+              >
+                <oc-icon name="group" fill-type="line" />
+              </oc-button>
             </template>
             <template #contextMenuActions="{ resource }">
               <space-context-actions :space="resource" :items="[resource]" />
@@ -80,6 +78,7 @@ import { eventBus } from 'web-pkg/src/services/eventBus'
 import { SideBarEventTopics, useSideBar } from 'web-pkg/src/composables/sideBar'
 import { WebDAV } from 'web-client/src/webdav'
 import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
+import { useSelectedResources } from 'web-app-files/src/composables'
 
 export default defineComponent({
   components: {
@@ -94,6 +93,8 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
+    const { selectedResourcesIds } = useSelectedResources({ store })
+
     const spaces = computed(
       () =>
         store.getters['runtime/spaces/spaces']
@@ -123,7 +124,8 @@ export default defineComponent({
       graphClient,
       loadResourcesTask,
       areResourcesLoading,
-      accessToken
+      accessToken,
+      selectedResourcesIds
     }
   },
   data: function () {
@@ -215,16 +217,10 @@ export default defineComponent({
 }
 
 .state-trashed {
-  .tile-image,
+  .tile-preview,
   .tile-default-image > svg {
     filter: grayscale(100%);
     opacity: 80%;
   }
 }
-
-.space-image {
-  width: 100%;
-  aspect-ratio: 16/9;
-  object-fit: cover;
-}
 </style>
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index d5fdae990fd..15835c3407b 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -10,10 +10,10 @@ exports[`ResourceTiles component renders an array of spaces correctly 1`] = `
 <div>
   <oc-list class="oc-tiles oc-flex">
     <li class="oc-tiles-item">
-      <oc-tile resource="[object Object]" resource-route="[object Object]"></oc-tile>
+      <oc-tile resource="[object Object]" resource-route="[object Object]" selected-ids=""></oc-tile>
     </li>
     <li class="oc-tiles-item">
-      <oc-tile resource="[object Object]" resource-route="[object Object]"></oc-tile>
+      <oc-tile resource="[object Object]" resource-route="[object Object]" selected-ids=""></oc-tile>
     </li>
   </oc-list> <!-- @slot Footer of the tiles list -->
 </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
index 7a29a8d9648..3b827c17521 100644
--- 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
@@ -9,10 +9,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 resource="[object Object]" resource-route="[object Object]"></oc-tile-stub>
+              <oc-tile-stub resource="[object Object]" resource-route="[object Object]" selected-ids=""></oc-tile-stub>
             </li>
             <li class="oc-tiles-item">
-              <oc-tile-stub resource="[object Object]" resource-route="[object Object]"></oc-tile-stub>
+              <oc-tile-stub resource="[object Object]" resource-route="[object Object]" selected-ids=""></oc-tile-stub>
             </li>
           </ul> <!-- @slot Footer of the tiles list -->
         </div>
diff --git a/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue b/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue
index 476996f6b9d..14e7446f1eb 100644
--- a/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue
+++ b/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue
@@ -17,6 +17,7 @@
       :drop-id="`context-menu-drop-${resourceDomSelector(item)}`"
       :toggle="`#context-menu-trigger-${resourceDomSelector(item)}`"
       :popper-options="popperOptions"
+      class="oc-overflow-hidden"
       mode="click"
       close-on-click
       padding-size="small"

From 5123a754f37f150e30be7d558deaa0e7e9998fe2 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 8 Feb 2023 10:13:15 +0100
Subject: [PATCH 2/9] Add outline to selected tiles

---
 .../enhancement-resources-tiles-view          |  2 +
 .../src/components/OcTile/OcTile.vue          | 50 ++++++++++---------
 .../components/FilesList/ResourceTiles.vue    |  2 +-
 .../__snapshots__/ResourceTiles.spec.ts.snap  | 10 ++--
 .../__snapshots__/Projects.spec.ts.snap       |  7 +--
 5 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/changelog/unreleased/enhancement-resources-tiles-view b/changelog/unreleased/enhancement-resources-tiles-view
index 3ca966aa8aa..a040dba0696 100644
--- a/changelog/unreleased/enhancement-resources-tiles-view
+++ b/changelog/unreleased/enhancement-resources-tiles-view
@@ -6,8 +6,10 @@ Tiles can be dynamically resized on screens bigger than mobile, using the "displ
 
 https://github.com/owncloud/web/pull/7991
 https://github.com/owncloud/web/pull/8372
+https://github.com/owncloud/web/pull/8392
 https://github.com/owncloud/web/issues/6378
 https://github.com/owncloud/web/issues/6379
 https://github.com/owncloud/web/issues/6380
 https://github.com/owncloud/web/issues/8367
 https://github.com/owncloud/web/issues/8368
+https://github.com/owncloud/web/issues/8365
diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
index 338fea1428d..01d40e77188 100644
--- a/packages/design-system/src/components/OcTile/OcTile.vue
+++ b/packages/design-system/src/components/OcTile/OcTile.vue
@@ -2,7 +2,10 @@
   <div
     class="oc-tile-card oc-card oc-card-default oc-rounded"
     :data-item-id="resource.id"
-    :class="resource.disabled ? 'state-trashed' : ''"
+    :class="{
+      'oc-tile-card-selected': isResourceSelected,
+      'state-trashed': resource.disabled
+    }"
     @contextmenu="$emit('contextmenu', $event)"
   >
     <oc-resource-link
@@ -21,10 +24,7 @@
       >
         <span v-text="$gettext('Disabled')" />
       </oc-tag>
-      <div
-        class="oc-tile-card-preview oc-flex oc-flex-middle oc-flex-center"
-        :class="{ 'oc-tile-card-preview-selected': selectedIds.includes(resource.id) }"
-      >
+      <div class="oc-tile-card-preview oc-flex oc-flex-middle oc-flex-center">
         <div class="oc-tile-card-hover"></div>
         <slot name="imageField" :item="resource">
           <oc-img v-if="resource.thumbnail" class="tile-preview" :src="resource.thumbnail" />
@@ -94,9 +94,10 @@ export default defineComponent({
       type: Object,
       default: () => {}
     },
-    selectedIds: {
-      type: Array,
-      default: () => []
+    isResourceSelected: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ['click', 'contextmenu']
@@ -106,7 +107,7 @@ export default defineComponent({
 <style lang="scss">
 .oc-tile-card {
   background-color: var(--oc-color-background-highlight) !important;
-  box-shadow: none !important;
+  box-shadow: none;
   height: 100%;
   display: flex;
   flex-flow: column;
@@ -146,6 +147,23 @@ export default defineComponent({
     }
 
     &:hover {
+      .oc-tile-card-hover {
+        opacity: 15%;
+      }
+    }
+  }
+
+  &-selected {
+    outline: 2px solid var(--oc-color-swatch-primary-hover);
+
+    .oc-tile-card-preview {
+      width: calc(100% - var(--oc-space-medium));
+      height: calc(100% - var(--oc-space-medium));
+
+      .tile-preview,
+      .oc-tile-card-hover {
+        border-radius: 5px !important;
+      }
       .oc-tile-card-hover {
         opacity: 10%;
       }
@@ -171,20 +189,6 @@ export default defineComponent({
     height: 100%;
     width: 100%;
     text-align: center;
-
-    &-selected {
-      width: calc(100% - var(--oc-space-medium));
-      height: calc(100% - var(--oc-space-medium));
-
-      .tile-preview,
-      .oc-tile-card-hover {
-        border-radius: 5px !important;
-      }
-
-      .oc-tile-card-hover {
-        opacity: 8%;
-      }
-    }
   }
 
   &-hover {
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index c68bcb71149..faf403db766 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -6,7 +6,7 @@
           :ref="(el) => (tileRefs.tiles[resource.id] = el)"
           :resource="resource"
           :resource-route="getRoute(resource)"
-          :selected-ids="selectedIds"
+          :is-resource-selected="isResourceSelected(resource)"
           @vue:mounted="
             $emit('rowMounted', resource, tileRefs.tiles[resource.id], ImageDimension.Tile)
           "
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index 15835c3407b..688ac1de091 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -2,7 +2,8 @@
 
 exports[`ResourceTiles component renders a footer slot 1`] = `
 <div>
-  <oc-list class="oc-tiles oc-flex"></oc-list> <!-- @slot Footer of the tiles list --> Hello, ResourceTiles footer!
+  <oc-list class="oc-tiles oc-flex"></oc-list>
+  <div class="oc-tiles-footer">Hello, ResourceTiles footer!</div>
 </div>
 `;
 
@@ -10,11 +11,12 @@ exports[`ResourceTiles component renders an array of spaces correctly 1`] = `
 <div>
   <oc-list class="oc-tiles oc-flex">
     <li class="oc-tiles-item">
-      <oc-tile resource="[object Object]" resource-route="[object Object]" selected-ids=""></oc-tile>
+      <oc-tile is-resource-selected="false" resource="[object Object]" resource-route="[object Object]"></oc-tile>
     </li>
     <li class="oc-tiles-item">
-      <oc-tile resource="[object Object]" resource-route="[object Object]" selected-ids=""></oc-tile>
+      <oc-tile is-resource-selected="false" resource="[object Object]" resource-route="[object Object]"></oc-tile>
     </li>
-  </oc-list> <!-- @slot Footer of the tiles list -->
+  </oc-list>
+  <div class="oc-tiles-footer"></div>
 </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
index 3b827c17521..f3c4f1dc1da 100644
--- 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
@@ -9,12 +9,13 @@ 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 resource="[object Object]" resource-route="[object Object]" selected-ids=""></oc-tile-stub>
+              <oc-tile-stub is-resource-selected="false" resource="[object Object]" resource-route="[object Object]"></oc-tile-stub>
             </li>
             <li class="oc-tiles-item">
-              <oc-tile-stub resource="[object Object]" resource-route="[object Object]" selected-ids=""></oc-tile-stub>
+              <oc-tile-stub is-resource-selected="false" resource="[object Object]" resource-route="[object Object]"></oc-tile-stub>
             </li>
-          </ul> <!-- @slot Footer of the tiles list -->
+          </ul>
+          <div class="oc-tiles-footer"></div>
         </div>
       </div>
     </div>

From 5bf160dda0392306cb6cd39b66841b00a689d6e0 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 8 Feb 2023 11:02:04 +0100
Subject: [PATCH 3/9] Add unit tests, fix snapshots

---
 .../src/components/OcTile/OcTile.spec.ts      | 27 ++++++++-----------
 .../__snapshots__/SpacesList.spec.ts.snap     |  2 +-
 .../components/FilesList/ResourceTiles.vue    |  2 +-
 .../FilesList/ResourceTiles.spec.ts           | 11 +++++++-
 .../ContextMenuQuickAction.spec.ts.snap       |  2 +-
 5 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/packages/design-system/src/components/OcTile/OcTile.spec.ts b/packages/design-system/src/components/OcTile/OcTile.spec.ts
index abf76233109..547a5a41654 100644
--- a/packages/design-system/src/components/OcTile/OcTile.spec.ts
+++ b/packages/design-system/src/components/OcTile/OcTile.spec.ts
@@ -1,37 +1,32 @@
 import { defaultPlugins, shallowMount } from 'web-test-helpers'
 import OcTile from './OcTile.vue'
 
-const defaultSpace = {
+const getSpaceMock = (disabled = false) => ({
   name: 'Space 1',
   path: '',
   type: 'space',
   isFolder: true,
+  disabled,
   getDriveAliasAndItem: () => '1'
-}
-const disabledSpace = {
-  name: 'Space 1',
-  path: '',
-  type: 'space',
-  isFolder: true,
-  disabled: true,
-  getDriveAliasAndItem: () => '1'
-}
+})
 
 describe('OcTile component', () => {
   it('renders default space correctly', () => {
-    const wrapper = getWrapper({ resource: defaultSpace })
+    const wrapper = getWrapper({ resource: getSpaceMock() })
     expect(wrapper.html()).toMatchSnapshot()
   })
   it('renders disabled space correctly', () => {
-    const wrapper = getWrapper({ resource: disabledSpace })
+    const wrapper = getWrapper({ resource: getSpaceMock(true) })
     expect(wrapper.html()).toMatchSnapshot()
   })
+  it('renders selected resource correctly', () => {
+    const wrapper = getWrapper({ resource: getSpaceMock(), isResourceSelected: true })
+    expect(wrapper.find('.oc-tile-card-selected').exists()).toBeTruthy()
+  })
 
-  function getWrapper(props = {}, slots = {}) {
+  function getWrapper(props = {}) {
     return shallowMount(OcTile, {
-      props: {
-        ...props
-      },
+      props,
       global: { plugins: [...defaultPlugins()], renderStubDefaultSlot: true }
     })
   }
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
index 3a4b7ad2574..aa1bece3082 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -138,7 +138,7 @@ exports[`SpacesList should render all spaces in a table 1`] = `
               <span class="oc-icon oc-icon-m oc-icon-passive">
                 <!---->
               </span>
-              <div class="oc-drop oc-box-shadow-medium oc-rounded" id="context-menu-drop-1">
+              <div class="oc-drop oc-box-shadow-medium oc-rounded oc-overflow-hidden" id="context-menu-drop-1">
                 <div class="oc-card oc-card-body oc-background-secondary oc-p-s"></div>
               </div>
             </button>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index faf403db766..c61908886fc 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -59,12 +59,12 @@ import { ImageDimension } from 'web-pkg/src/constants'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { displayPositionedDropdown } from 'web-pkg/src/helpers/contextMenuDropdown'
 import { createLocationSpaces } from 'web-app-files/src/router'
+import ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
 
 // Constants should match what is being used in OcTable/ResourceTable
 // 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 ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
 
 export default defineComponent({
   name: 'ResourceTiles',
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
index 4543e19b275..2a0d0906751 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
@@ -3,6 +3,7 @@ import ResourceTiles from '../../../../src/components/FilesList/ResourceTiles.vu
 
 const spacesResources = [
   {
+    id: '1',
     name: 'Space 1',
     path: '',
     type: 'space',
@@ -10,6 +11,7 @@ const spacesResources = [
     getDriveAliasAndItem: () => '1'
   },
   {
+    id: '2',
     name: 'Space 2',
     path: '',
     type: 'space',
@@ -32,7 +34,14 @@ describe('ResourceTiles component', () => {
   it('emits fileClick event upon click on tile', async () => {
     const wrapper = getWrapper({ data: spacesResources })
     await wrapper.find('oc-tile').trigger('click')
-    expect(wrapper.emitted().click).toBeTruthy()
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
+
+  it('emits update:selectedIds event on resource selection and sets the selection', () => {
+    const wrapper = getWrapper({ data: spacesResources, selectedIds: [spacesResources[0].id] })
+    wrapper.vm.setSelection(spacesResources[0])
+    expect(wrapper.find('oc-tile').attributes()['is-resource-selected']).toEqual('true')
+    expect(wrapper.emitted('update:selectedIds')).toBeTruthy()
   })
 
   function getWrapper(props = {}, slots = {}) {
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
index d75e8572f7c..d77edf96a89 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`ContextMenuQuickAction component renders component 1`] = `
   <span class="oc-icon oc-icon-m oc-icon-passive">
     <!---->
   </span>
-  <div class="oc-drop oc-box-shadow-medium oc-rounded" id="context-menu-drop-1">
+  <div class="oc-drop oc-box-shadow-medium oc-rounded oc-overflow-hidden" id="context-menu-drop-1">
     <div class="oc-card oc-card-body oc-background-secondary oc-p-s"></div>
   </div>
 </button>

From 85d38ea4de5940fc27486eb3f93190de0532d278 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 8 Feb 2023 11:32:58 +0100
Subject: [PATCH 4/9] Fix checkbox label translation

---
 .../src/components/FilesList/ResourceTable.vue   |  8 +++++++-
 .../src/components/FilesList/ResourceTiles.vue   | 16 ++++++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index cc9add5d719..af40165daf2 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -41,7 +41,7 @@
     <template #select="{ item }">
       <oc-checkbox
         :id="`resource-table-select-${resourceDomSelector(item)}`"
-        :label="$gettext('Select %{ type }', { type: item.type })"
+        :label="getResourceCheckboxLabel(item)"
         :hide-label="true"
         size="large"
         :model-value="isResourceSelected(item)"
@@ -771,6 +771,12 @@ export default defineComponent({
         ? !this.disabled.includes(resourceId)
         : this.disabled !== resourceId
     },
+    getResourceCheckboxLabel(resource) {
+      if (resource.type === 'folder') {
+        return this.$gettext('Select folder')
+      }
+      return this.$gettext('Select file')
+    },
     getSharedWithAvatarDescription(resource) {
       const resourceType =
         resource.type === 'folder' ? this.$gettext('folder') : this.$gettext('file')
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index c61908886fc..3f93c99851a 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -15,7 +15,7 @@
         >
           <template #selection>
             <oc-checkbox
-              :label="$gettext('Select %{ type }', { type: resource.type })"
+              :label="getResourceCheckboxLabel(resource)"
               :hide-label="true"
               size="large"
               class="oc-flex-inline oc-p-s"
@@ -184,6 +184,17 @@ export default defineComponent({
       context.emit('update:selectedIds', selectedIds)
     }
 
+    const getResourceCheckboxLabel = (resource) => {
+      switch (resource.type) {
+        case 'folder':
+          return $gettext('Select folder')
+        case 'space':
+          return $gettext('Select space')
+        default:
+          return $gettext('Select file')
+      }
+    }
+
     onBeforeUpdate(() => {
       tileRefs.value = {
         tiles: [],
@@ -198,7 +209,8 @@ export default defineComponent({
       showContextMenu,
       tileRefs,
       isResourceSelected,
-      setSelection
+      setSelection,
+      getResourceCheckboxLabel
     }
   },
   data() {

From e16e191171919a3918b3ab55d6a58cb54decc94e Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 8 Feb 2023 11:33:19 +0100
Subject: [PATCH 5/9] Exclude spec-files from SonarCloud coverage

---
 sonar-project.properties | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sonar-project.properties b/sonar-project.properties
index 4893c4a27af..ec77b18cece 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -32,4 +32,4 @@ sonar.pullrequest.key=${env.SONAR_PULL_REQUEST_KEY}
 sonar.javascript.lcov.reportPaths=coverage/lcov.info
 
 # Exclude files
-sonar.exclusions=docs/**,node_modules/**,deployments/**,**/tests/**,__mocks__/**,__fixtures__/**,dist/**,changelog/**,config/**,docker/**,release/**,**/package.json,package.json,rollup.config.js,nightwatch.conf.js,Makefile,Makefile.release,CHANGELOG.md,README.md,packages/web-client/src/generated/**,packages/web-integration-oc10/**
+sonar.exclusions=docs/**,node_modules/**,deployments/**,**/tests/**,**/*.spec.ts,__mocks__/**,__fixtures__/**,dist/**,changelog/**,config/**,docker/**,release/**,**/package.json,package.json,rollup.config.js,nightwatch.conf.js,Makefile,Makefile.release,CHANGELOG.md,README.md,packages/web-client/src/generated/**,packages/web-integration-oc10/**

From 798427d5549b4aa062ee6d82adde4f0a279a0515 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 8 Feb 2023 11:40:24 +0100
Subject: [PATCH 6/9] Rename setSelection to toggleSelection

---
 .../src/components/FilesList/ResourceTiles.vue              | 6 +++---
 .../tests/unit/components/FilesList/ResourceTiles.spec.ts   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 3f93c99851a..1c2712d83b5 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -20,7 +20,7 @@
               size="large"
               class="oc-flex-inline oc-p-s"
               :model-value="isResourceSelected(resource)"
-              @click.stop.prevent="setSelection(resource)"
+              @click.stop.prevent="toggleSelection(resource)"
             />
           </template>
           <template #imageField>
@@ -177,7 +177,7 @@ export default defineComponent({
       return props.selectedIds.includes(resource.id)
     }
 
-    const setSelection = (resource) => {
+    const toggleSelection = (resource) => {
       const selectedIds = !isResourceSelected(resource)
         ? [...props.selectedIds, resource.id]
         : props.selectedIds.filter((id) => id !== resource.id)
@@ -209,7 +209,7 @@ export default defineComponent({
       showContextMenu,
       tileRefs,
       isResourceSelected,
-      setSelection,
+      toggleSelection,
       getResourceCheckboxLabel
     }
   },
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
index 2a0d0906751..d63065a0fd0 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
@@ -39,7 +39,7 @@ describe('ResourceTiles component', () => {
 
   it('emits update:selectedIds event on resource selection and sets the selection', () => {
     const wrapper = getWrapper({ data: spacesResources, selectedIds: [spacesResources[0].id] })
-    wrapper.vm.setSelection(spacesResources[0])
+    wrapper.vm.toggleSelection(spacesResources[0])
     expect(wrapper.find('oc-tile').attributes()['is-resource-selected']).toEqual('true')
     expect(wrapper.emitted('update:selectedIds')).toBeTruthy()
   })

From 1ef0c6b88f3f193a4d9ea17ef1d632f65b2b4ef5 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 9 Feb 2023 10:04:31 +0100
Subject: [PATCH 7/9] Fix initial tile size loading

---
 .../web-app-files/src/components/AppBar/ViewOptions.vue   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
index 8248ee31ac7..2146c579375 100644
--- a/packages/web-app-files/src/components/AppBar/ViewOptions.vue
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -106,12 +106,13 @@ export default defineComponent({
       name: ViewModeConstants.queryName,
       defaultValue: ViewModeConstants.defaultModeName
     })
+
     const viewSizeQuery = useRouteQueryPersisted({
       name: ViewModeConstants.tilesSizeQueryName,
       defaultValue: ViewModeConstants.tilesSizeDefault.toString()
     })
     watch(
-      [perPageQuery, viewModeQuery],
+      [perPageQuery, viewModeQuery, viewSizeQuery],
       (params) => {
         queryParamsLoading.value = params.some((p) => !p)
       },
@@ -126,6 +127,11 @@ export default defineComponent({
       queryParamsLoading
     }
   },
+  mounted() {
+    if (!this.queryParamsLoading) {
+      this.setTilesViewSize()
+    }
+  },
   computed: {
     ...mapState('Files', ['areHiddenFilesShown', 'areFileExtensionsShown']),
 

From 8d2eada4d7590fa590a534b0b8c5db7256d10d19 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 9 Feb 2023 10:13:44 +0100
Subject: [PATCH 8/9] Improve tile size slider background in dark mode

---
 .../web-app-files/src/components/AppBar/ViewOptions.vue  | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
index 2146c579375..0bfd6462bbb 100644
--- a/packages/web-app-files/src/components/AppBar/ViewOptions.vue
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -167,9 +167,10 @@ export default defineComponent({
       this.viewModeCurrent = mode.name
     },
     setTilesViewSize() {
-      document
-        .querySelector(':root')
-        .style.setProperty(`--oc-size-tiles-resize-step`, `${this.viewSizeCurrent * 12}rem`)
+      ;(document.querySelector(':root') as HTMLElement).style.setProperty(
+        `--oc-size-tiles-resize-step`,
+        `${this.viewSizeCurrent * 12}rem`
+      )
     },
     updateHiddenFilesShownModel(event) {
       this.hiddenFilesShownModel = event
@@ -209,7 +210,7 @@ export default defineComponent({
   -webkit-appearance: none;
   -webkit-transition: 0.2s;
   border-radius: 0.3rem;
-  background: var(--oc-color-input-border);
+  background: var(--oc-color-border);
   height: 0.5rem;
   opacity: 0.7;
   outline: none;

From 3d50dab4da010454f4ce9ad504d16ff781f4a829 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 9 Feb 2023 11:46:01 +0100
Subject: [PATCH 9/9] Use oc-font-size-default instead of rem

---
 .../web-app-files/src/components/FilesList/ResourceTiles.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 1c2712d83b5..c894e2812e5 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -245,7 +245,7 @@ export default defineComponent({
 
   &-footer {
     color: var(--oc-color-text-muted);
-    font-size: 0.875rem;
+    font-size: var(--oc-font-size-default);
     line-height: 1.4;
     padding: var(--oc-space-xsmall);
   }