[full-ci] Display resources in GenericSpace as tiles (#7991)

owncloud · Feb 1, 2023 · 4ad8116 · 4ad8116
1 parent 0ef04c3
commit 4ad8116
Show file tree

Hide file tree

Showing 30 changed files with 585 additions and 265 deletions.
diff --git a/changelog/unreleased/enhancement-condensed-files-view b/changelog/unreleased/enhancement-condensed-files-view
@@ -1,7 +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 folder 
+The change gets saved to the url and persisted across folder 
 navigation in all files, spaces and favorites views.
 
 https://github.com/owncloud/web/pull/7976

diff --git a/changelog/unreleased/enhancement-resources-tiles-view b/changelog/unreleased/enhancement-resources-tiles-view
@@ -0,0 +1,9 @@
+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 url and persisted across resource navigation.
+
+https://github.com/owncloud/web/pull/7991
+https://github.com/owncloud/web/issues/6378
+https://github.com/owncloud/web/issues/6379
+https://github.com/owncloud/web/issues/6380
diff --git a/packages/design-system/changelog/unreleased/enhancement-oc-resource-optional-icon b/packages/design-system/changelog/unreleased/enhancement-oc-resource-optional-icon
@@ -0,0 +1,5 @@
+Enhancement: Add option to hide icon/thumbnail OcResource
+
+We added a property to the OcResource component so it can be displayed without icon/thumbnail.
+
+https://github.com/owncloud/web/pull/7991
diff --git a/packages/design-system/src/components/OcResource/OcResource.spec.ts b/packages/design-system/src/components/OcResource/OcResource.spec.ts
@@ -128,4 +128,20 @@ describe('OcResource', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('can be used without icon/thumbnail', () => {
+    const wrapper = mount(Resource, {
+      props: {
+        resource: fileResourceWithoutParentFoldername,
+        isIconDisplayed: false,
+        parentFolderNameDefault: 'Example parent folder name'
+      },
+      global: {
+        stubs
+      }
+    })
+
+    expect(wrapper.find('oc-resource-thumbnail').exists()).toBeFalsy()
+    expect(wrapper.find('oc-resource-icon').exists()).toBeFalsy()
+  })
 })
diff --git a/packages/design-system/src/components/OcResource/OcResource.vue b/packages/design-system/src/components/OcResource/OcResource.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="oc-resource oc-text-overflow">
     <oc-resource-link
+      v-if="isIconDisplayed"
       :resource="resource"
       :is-resource-clickable="isResourceClickable"
       :folder-link="folderLink"
@@ -16,7 +17,7 @@
       />
       <oc-resource-icon v-else :resource="resource" />
     </oc-resource-link>
-    <div class="oc-resource-details oc-text-overflow">
+    <div class="oc-resource-details oc-text-overflow" :class="{ 'oc-pl-s': isIconDisplayed }">
       <oc-resource-link
         v-slot="{ opensInNewWindowDescriptionId }"
         :resource="resource"
@@ -139,6 +140,14 @@ export default defineComponent({
       required: false,
       default: true
     },
+    /**
+     * Asserts whether the resource thumbnail should be displayed
+     */
+    isIconDisplayed: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     /**
      * Asserts whether clicking on the resource name triggers any action
      */
@@ -206,7 +215,6 @@ export default defineComponent({
 
   &-details {
     display: block;
-    padding-left: var(--oc-space-small);
 
     a {
       text-decoration: none;

diff --git a/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap b/packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`OcResource displays parent folder name default if calculated name is em
       <!---->
     </span>
   </button>
-  <div class="oc-resource-details oc-text-overflow">
+  <div class="oc-resource-details oc-text-overflow oc-pl-s">
     <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw oc-text-overflow" draggable="false" type="button">
       <!-- @slot Content of the button -->
       <!--v-if-->

diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
@@ -9,7 +9,7 @@
       class="oc-card-media-top oc-border-b oc-flex oc-flex-center oc-flex-middle"
       :resource="resource"
       :folder-link="resourceRoute"
-      @click="$emit('click', $event)"
+      @click="$emit('click')"
     >
       <oc-tag
         v-if="resource.disabled"
@@ -20,27 +20,34 @@
       </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" :src="resource.thumbnail" />
+        <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-p-m"
+          class="tile-default-image oc-pt-s"
         />
       </slot>
     </oc-resource-link>
     <div class="oc-card-body oc-p-s">
       <div class="oc-flex oc-flex-between oc-flex-middle">
-        <div class="oc-flex oc-flex-middle oc-text-truncate">
+        <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
           <oc-resource
             :resource="resource"
+            :is-icon-displayed="false"
             :folder-link="resourceRoute"
-            @click="$emit('click', $event)"
+            @click="$emit('click')"
           />
         </div>
         <div class="oc-flex oc-flex-middle">
           <!-- Slot for individual actions -->
           <slot name="actions" :item="resource" />
+          <!-- Slot for contextmenu -->
+          <slot name="contextMenu" :item="resource" />
         </div>
       </div>
       <p
@@ -93,9 +100,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .oc-tile-card {
-  box-shadow: none !important;
   background-color: var(--oc-color-background-highlight) !important;
+  box-shadow: none !important;
   height: 100%;
+  outline: 1px solid var(--oc-color-border);
 
   &.state-trashed {
     cursor: pointer;
@@ -121,16 +129,17 @@ export default defineComponent({
     }
 
     .tile-preview {
-      min-width: 252px;
-      height: auto;
       aspect-ratio: 16/9;
+      height: auto;
       object-fit: cover;
+      width: 100%;
     }
   }
 
-  .resource-name {
-    overflow: hidden;
+  .resource-name-wrapper {
     color: var(--oc-color-text-default);
+    max-width: 70%;
+    overflow: hidden;
   }
 }
 </style>
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
@@ -5,15 +5,16 @@ exports[`OcTile component renders default space correctly 1`] = `
   <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]">
     <!--v-if-->
     <!-- Slot for resource image, renders resource type icon by default -->
-    <oc-resource-icon-stub class="tile-default-image oc-p-m" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
+    <oc-resource-icon-stub class="tile-default-image oc-pt-s" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
   </oc-resource-link-stub>
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
-      <div class="oc-flex oc-flex-middle oc-text-truncate">
-        <oc-resource-stub isextensiondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
+      <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
+        <oc-resource-stub isextensiondisplayed="true" isicondisplayed="false" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
       </div>
       <div class="oc-flex oc-flex-middle">
         <!-- Slot for individual actions -->
+        <!-- Slot for contextmenu -->
       </div>
     </div>
     <!--v-if-->
@@ -27,15 +28,16 @@ exports[`OcTile component renders disabled space correctly 1`] = `
     <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-p-m" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
+    <oc-resource-icon-stub class="tile-default-image oc-pt-s" resource="[object Object]" size="xxlarge"></oc-resource-icon-stub>
   </oc-resource-link-stub>
   <div class="oc-card-body oc-p-s">
     <div class="oc-flex oc-flex-between oc-flex-middle">
-      <div class="oc-flex oc-flex-middle oc-text-truncate">
-        <oc-resource-stub isextensiondisplayed="true" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
+      <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
+        <oc-resource-stub isextensiondisplayed="true" isicondisplayed="false" ispathdisplayed="false" isresourceclickable="true" isthumbnaildisplayed="true" parentfoldernamedefault="" resource="[object Object]"></oc-resource-stub>
       </div>
       <div class="oc-flex oc-flex-middle">
         <!-- Slot for individual actions -->
+        <!-- Slot for contextmenu -->
       </div>
     </div>
     <!--v-if-->

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.condensedTable,
+        ViewModeConstants.default,
+        ViewModeConstants.tilesView
+      ]
     }
   },
   mounted() {

diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -2,15 +2,15 @@
   <div class="oc-flex oc-flex-middle">
     <div
       v-if="viewModes.length"
-      data-testid="viewmode-switch-buttons"
-      class="oc-button-group oc-visible@s oc-mr-s"
+      class="viewmode-switch-buttons oc-button-group oc-visible@s oc-mr-s"
     >
       <oc-button
         v-for="viewMode in viewModes"
         :key="viewMode.name"
         v-oc-tooltip="$gettext(viewMode.label)"
+        :class="viewMode.name"
         :appearance="viewModeCurrent === viewMode.name ? 'filled' : 'outline'"
-        :label="$gettext(viewMode.label)"
+        :aria-label="$gettext(viewMode.label)"
         @click="setViewMode(viewMode)"
       >
         <oc-icon :name="viewMode.icon.name" :fill-type="viewMode.icon.fillType" size="small" />
@@ -148,6 +148,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.viewmode-switch-buttons {
+  flex-flow: initial;
+}
+
 #files-view-options-btn {
   vertical-align: middle;
   border: 3px solid transparent;