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

pascalwengerter · 2022-11-17T21:09:09Z

Related Issue

Fixes Display simple files preview as grid #6378

Screenshots (if appropriate):

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

Code changes
Unit tests added
Acceptance tests added
Documentation ticket raised:

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

kulmann · 2022-11-21T16:33:12Z

I have merged #7940 today - could you rebase this PR and include all your design system changes directly in web? 😁

pascalwengerter · 2022-11-21T19:25:54Z

I have merged #7940 today - could you rebase this PR and include all your design system changes directly in web? 😁

Done! 🐎

kulmann · 2022-11-23T08:39:02Z

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

+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: 15px;
+  justify-content: flex-start;


Suggested change

justify-content: flex-start;

justify-content: space-around;

is much more pleasant for the eye regarding spacing, but any time the last row is incomplete (i.e. not the same number of tiles as in the other rows) the tiles in the last row are centered, which doesn't look good... maybe we need some magic dummy tiles.

The horizontal spacing is nice, but then the vertical spacing doesn't match with this change alone

kulmann

Could you re-render with the updated tile size during modification of the slider value? The URL query param changes immediately when you reach the next tick on the slider, but the tiles only update after you finished sliding the slider.

The main concern I have with your proposal of calculating the tile sizes based on the viewport size is that it stops to work good as soon as the viewport width becomes VERY large. E.g. @dschmidt with his ultra wide screen would have quite large tiles in the smallest scale. That's the reason why we wanted to have tile sizes based on multiples of a certain REM value, not based on the viewport size. I still think that it's a good idea... (edit: that means that I'd root for your "option 1", which is the default in this PR. "option 2" doesn't work for large screens in my opinion)

dschmidt · 2022-11-23T09:19:48Z

with rem option in ViewOptions.vue:

with percent option:

I agree with @kulmann that the latter is waaay to big for the smallest setting

tbsbdr · 2022-11-23T19:05:56Z

Refined proposal I discussed with @kulmann

Size of tiles: Adjust via slider
Number of tiles: depends on viewport size
Spacing: use "space-aroundish"-behavior to achieve same effect as in windows explorer or MacOS finder
Spacing vertical spacing between resources does not vary in relation to the viewport, but should be in similar range to the horizontal spacing 🪄 vertical spacing increases if tiles size gets increased (c.f. video attached & screenshot or play around with Win explorer / finder tiles view to get the intended experience)

space-aroundish"-behavior

screenshot_000014-converted.mp4

vertical space increases ~ tiles size

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

dschmidt · 2023-01-09T23:39:45Z

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

+    createFileAction,
+    createFolderLink
+  }
+}


Just a nitpick, we usually just re-rexport from index.ts and put composables in their own files.

Good point thx, I will split it up (and also add tests etc) when it's time ;P

dschmidt · 2023-01-09T23:40:50Z

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

+              :size="totalFilesSize"
+            />
+          </template>
+        </resource-tiles>


Is the plan to use component :is='...' in the long run?

Not 100% sure yet tbh, I faced some problems of the GenericSpace not handling events being thrown by the switched-out component. Up for discussion I suppose, I can see another possible strategy that's pretty lean code-wise evolve :)

pascalwengerter · 2023-01-10T14:58:59Z

@kulmann could I get a cursory review here (mostly about UI/UX aspects, the code changes will receive some what-goes-where refactoring and are not yet final)?
Not sure what is in scope of the linked ticket

Known issues as of now:

Navigation in none-root space has some hickups, seems like the fileId gets added to the route at some point and brakes the router?

pascalwengerter · 2023-01-11T12:33:27Z

@kulmann could I get a cursory review here (mostly about UI/UX aspects, the code changes will receive some what-goes-where refactoring and are not yet final)? Not sure what is in scope of the linked ticket

Known issues as of now:
* [ ]  Navigation in none-root space has some hickups, seems like the fileId gets added to the route at some point and brakes the router?

Update - I investigated some more and navigation inside folder in a space does work, but is horribly inefficient (browser freezes, and navigation takes place ~40s after clicking). My suspectis the dynamic ref implementation which is needed for the Contextmenu logic

pascalwengerter · 2023-01-11T21:50:31Z

@kulmann could I get a cursory review here (mostly about UI/UX aspects, the code changes will receive some what-goes-where refactoring and are not yet final)? Not sure what is in scope of the linked ticket
Known issues as of now:
* [ ]  Navigation in none-root space has some hickups, seems like the fileId gets added to the route at some point and brakes the router?
Update - I investigated some more and navigation inside folder in a space does work, but is horribly inefficient (browser freezes, and navigation takes place ~40s after clicking). My suspectis the dynamic ref implementation which is needed for the Contextmenu logic

Update - starting it with pnpm build:w (production build) as pointed out by @dschmidt does the trick, apparently all the deprecation warnings just wrangle the thing down...

kulmann

Awesome state / progress! Some tiny nitpicks, see comments. And I have two issues that you might decide to solve in a followup (also see screenshot):

text truncation happens too early, there is a lot of horizontal white space left.
preview size is sometimes shrinked / stretched. That's weird. object-fit and aspect-ratio don't seem to have an effect, I can disable the props and nothing changes (I wanted to try out if contain looks better, but didn't happen).

kulmann · 2023-01-13T15:19:44Z

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

  background-color: var(--oc-color-background-highlight) !important;
+  box-shadow: 3px 0 10px rgb(0 0 0 / 15%);


Please keep the box-shadow as none like before, but add outline: 1px solid var(--oc-color-border); instead. Discussed it with @tbsbdr that's how we want to start. Already had too much harsh feedback with shadows in other places of oC Web. 😅

kulmann · 2023-01-13T15:20:34Z

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

+      return [
+        ViewModeConstants.tilesView,
+        ViewModeConstants.condensedTable,
+        ViewModeConstants.default


Please change order to

condensed

default

tiles

kulmann · 2023-01-13T15:22:41Z

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

-            @click="$emit('click', $event)"
-          />
+        <div class="oc-flex oc-flex-middle oc-text-truncate resource-name-wrapper">
+          <oc-resource :resource="resource" :folder-link="resourceRoute" @click="$emit('click')" />


Suggested change

<oc-resource :resource="resource" :folder-link="resourceRoute" @click="$emit('click')" />

<oc-resource :resource="resource" :folder-link="resourceRoute" :is-thumbnail-displayed="false" @click="$emit('click')" />

Thumbnails must be disabled here. Otherwise you might have glitchy situations where the OcTile has a large preview at the top and a small thumbnail in the bottom area. Managed to create that situation, don't have a formula to reproduce it, sorry. 👀

tbsbdr · 2023-01-13T20:57:33Z

Played around with gap- and tiles sizes. The easiest way to avoid too much unbalanced gaps is to reduce the tiles size.

Tilesize 250px -> big gaps ❌

screenshot_000192.mp4

Tilesize 160px -> small gaps ✅

screenshot_000194.mp4

.oc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, 160px);
  row-gap: 32px;
  column-gap: 8px;
  justify-content: space-between;

  .oc-tiles-item {
    width: 160px;

    @media (max-width: $oc-breakpoint-xsmall-max) {
      width: 100%;
    }
  }
}

I also removed the leading file-icon from the small tiles. @kulmann @pascalwengerter I'm in favour of small tiles as long as we don't have the slider. Do you agree?

ownclouders · 2023-01-16T22:48:52Z

Results for acceptance oC10 https://drone.owncloud.com/owncloud/web/32303/20/1

💥 The acceptance tests failed on retry. Please find the screenshots inside ...

webUIPreview-mediaPreview_feature-L138.png

webUIPreview-mediaPreview_feature-L139.png

webUIPreview-mediaPreview_feature-L140.png

webUIPreview-mediaPreview_feature-L77.png

webUIPreview-mediaPreview_feature-L84.png

WIP

…styling updates

…set tile Imagedimension to available size

…n work for ResourceTable/ResourceTiles

pascalwengerter · 2023-02-01T19:48:04Z

Thanks @JammingBen for a second pair of eyes! @kulmann ready for final review and please squash-merge this!

sonarcloud · 2023-02-01T19:53:04Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
3 Code Smells

66.5% Coverage
0.0% Duplication

kulmann

😍

pascalwengerter mentioned this pull request Nov 17, 2022

Tiles view for file list #6126

Closed

pascalwengerter commented Nov 17, 2022

View reviewed changes

packages/web-app-files/src/components/FilesList/ResourceTable.vue Outdated Show resolved Hide resolved

kulmann mentioned this pull request Nov 21, 2022

Add viewMode toggle for condensed resource table #7976

Merged

2 tasks

pascalwengerter force-pushed the feature/tiles-view branch from 228c132 to 1cac617 Compare November 21, 2022 19:24

pascalwengerter mentioned this pull request Nov 21, 2022

Proof-of-concept: tiles-view components owncloud/owncloud-design-system#2368

Closed

pascalwengerter force-pushed the feature/tiles-view branch from 1cac617 to 7ab84df Compare November 21, 2022 19:27

kulmann reviewed Nov 23, 2022

View reviewed changes

kulmann requested changes Nov 23, 2022

View reviewed changes

pascalwengerter force-pushed the feature/tiles-view branch from 7ab84df to 203ef20 Compare November 28, 2022 22:45

pascalwengerter mentioned this pull request Dec 11, 2022

Idea: Provide ownCloud-web specific type interfaces #8089

Closed

pascalwengerter force-pushed the feature/tiles-view branch from 203ef20 to f25e7af Compare December 28, 2022 20:32

pascalwengerter force-pushed the feature/tiles-view branch 2 times, most recently from 725db18 to d8ccbbd Compare January 9, 2023 19:41

dschmidt reviewed Jan 9, 2023

View reviewed changes

pascalwengerter force-pushed the feature/tiles-view branch from aa809c1 to efce827 Compare January 10, 2023 14:47

pascalwengerter changed the title ~~Proof-of-concept: tiles-view~~ Display resources in GenericSpace as tiles Jan 10, 2023

pascalwengerter marked this pull request as ready for review January 10, 2023 14:59

pascalwengerter force-pushed the feature/tiles-view branch from 027af34 to f3c3bd9 Compare January 12, 2023 18:54

kulmann requested changes Jan 13, 2023

View reviewed changes

pascalwengerter force-pushed the feature/tiles-view branch 2 times, most recently from 2779902 to e4f086d Compare January 16, 2023 20:59

pascalwengerter added 19 commits February 1, 2023 18:36

Add initial box-shadow to OcTile

0c93dd6

WIP

Make icon/thumbnail optional in OcResource

924d91e

Move tilesView to end of viewMode switcher options

8d604b8

Make ImageDimension constant smaller, use it in Spaces-Projects view

93b0df8

Hide icon/thumbnail in OcTile, replace box-shadow with outline, more …

b603e0d

…styling updates

Add more related issues to tiles changelog item

80bec7a

Make tiles on non-projects views smaller by default

1aa2b64

Fix unit tests

851635e

Rebase & update tile sizing/display

114a7ff

Rebase, refactor useResourceRouteResolver composable file structure, …

3d04cea

…set tile Imagedimension to available size

Rebase & update snapshot tests

62ef059

Rebase, change wording in changelog, update snapshot tests

13987f6

Reintroduce resourceTargetRouteCallback to make public link navigatio…

be50811

…n work for ResourceTable/ResourceTiles

Make ResourceTile thumbnail preview work again after vue3 update

7191e04

Increase Tile ImageDimension

9ef257e

Fix resourceRouteResolver usage in ResourceTable

9b014e3

Add basic E2E test for tiles viewMode

8eab9dc

Respect public/private context for loading thumbnails in GenericSpace

bdd4dc2

Fix tiles E2E test

a883c88

Fix resourceResolve for fileclick by passing current space to component

93e9d76

kulmann approved these changes Feb 1, 2023

View reviewed changes

kulmann merged commit 4ad8116 into owncloud:master Feb 1, 2023

This was referenced Feb 1, 2023

tiles-view switch #6380

Closed

activate tiles view (simple) #6379

Closed

[Tiles view] Resize tiles #8368

Closed

pascalwengerter deleted the feature/tiles-view branch February 5, 2023 08:36

micbar mentioned this pull request May 3, 2023

Release 3.0.0 RC1 owncloud/ocis#6105

Closed

89 tasks

ScharfViktor mentioned this pull request May 4, 2023

Release 3.0.0 RC4, RC5 and final owncloud/ocis#6230

Closed

86 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

pascalwengerter commented Nov 17, 2022 •

edited

Loading

kulmann commented Nov 21, 2022

pascalwengerter commented Nov 21, 2022

kulmann Nov 23, 2022 •

edited

Loading

dschmidt Nov 23, 2022 •

edited

Loading

kulmann left a comment •

edited

Loading

dschmidt commented Nov 23, 2022

tbsbdr commented Nov 23, 2022 •

edited

Loading

dschmidt Jan 9, 2023

pascalwengerter Jan 10, 2023

dschmidt Jan 9, 2023

pascalwengerter Jan 10, 2023

pascalwengerter commented Jan 10, 2023

pascalwengerter commented Jan 11, 2023

pascalwengerter commented Jan 11, 2023

kulmann left a comment

kulmann Jan 13, 2023

kulmann Jan 13, 2023

kulmann Jan 13, 2023

tbsbdr commented Jan 13, 2023 •

edited

Loading

ownclouders commented Jan 16, 2023 •

edited

Loading

webUIPreview-mediaPreview_feature-L138.png

webUIPreview-mediaPreview_feature-L139.png

webUIPreview-mediaPreview_feature-L140.png

webUIPreview-mediaPreview_feature-L77.png

webUIPreview-mediaPreview_feature-L84.png

pascalwengerter commented Feb 1, 2023

sonarcloud bot commented Feb 1, 2023

kulmann left a comment

		background-color: var(--oc-color-background-highlight) !important;
		box-shadow: 3px 0 10px rgb(0 0 0 / 15%);

	<oc-resource :resource="resource" :folder-link="resourceRoute" @click="$emit('click')" />
	<oc-resource :resource="resource" :folder-link="resourceRoute" :is-thumbnail-displayed="false" @click="$emit('click')" />

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

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

Conversation

pascalwengerter commented Nov 17, 2022 • edited Loading

Related Issue

Screenshots (if appropriate):

Types of changes

Checklist:

kulmann commented Nov 21, 2022

pascalwengerter commented Nov 21, 2022

kulmann Nov 23, 2022 • edited Loading

Choose a reason for hiding this comment

dschmidt Nov 23, 2022 • edited Loading

Choose a reason for hiding this comment

kulmann left a comment • edited Loading

Choose a reason for hiding this comment

dschmidt commented Nov 23, 2022

tbsbdr commented Nov 23, 2022 • edited Loading

space-aroundish"-behavior

vertical space increases ~ tiles size

dschmidt Jan 9, 2023

Choose a reason for hiding this comment

pascalwengerter Jan 10, 2023

Choose a reason for hiding this comment

dschmidt Jan 9, 2023

Choose a reason for hiding this comment

pascalwengerter Jan 10, 2023

Choose a reason for hiding this comment

pascalwengerter commented Jan 10, 2023

pascalwengerter commented Jan 11, 2023

pascalwengerter commented Jan 11, 2023

kulmann left a comment

Choose a reason for hiding this comment

kulmann Jan 13, 2023

Choose a reason for hiding this comment

kulmann Jan 13, 2023

Choose a reason for hiding this comment

kulmann Jan 13, 2023

Choose a reason for hiding this comment

tbsbdr commented Jan 13, 2023 • edited Loading

Tilesize 250px -> big gaps ❌

Tilesize 160px -> small gaps ✅

ownclouders commented Jan 16, 2023 • edited Loading

webUIPreview-mediaPreview_feature-L138.png

webUIPreview-mediaPreview_feature-L139.png

webUIPreview-mediaPreview_feature-L140.png

webUIPreview-mediaPreview_feature-L77.png

webUIPreview-mediaPreview_feature-L84.png

pascalwengerter commented Feb 1, 2023

sonarcloud bot commented Feb 1, 2023

kulmann left a comment

Choose a reason for hiding this comment

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

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

pascalwengerter commented Nov 17, 2022 •

edited

Loading

kulmann Nov 23, 2022 •

edited

Loading

dschmidt Nov 23, 2022 •

edited

Loading

kulmann left a comment •

edited

Loading

tbsbdr commented Nov 23, 2022 •

edited

Loading

tbsbdr commented Jan 13, 2023 •

edited

Loading

ownclouders commented Jan 16, 2023 •

edited

Loading