Web: Increase density of the UI

[labkode]

The current UI shows less items than the OC10 one.
In my Mac: 12 items (OC10) vs 9 (OCIS).
A higher density needs to be configured.

[pascalwengerter]

@labkode can you give us an idea of
a) how this should be achieved
b) how the results should look like
from your perspective?

My first naive suggestion would be to tackle it a) by reducing the row height as shown in the screenshot below by b) moving the configuration of the row height from the component to the theming so every web theme can define the "denseness" of their UI themselves

@tbsbdr @elizavetaRa perhaps can also can give opinions?

[tbsbdr]

suggestion: lets make the corresponding variables themable so you can adjust it to your needs.

[pascalwengerter]

Update for the ODS is in progress: https://github.com/owncloud/owncloud-design-system/pull/1291

[kulmann]

Update for the ODS is in progress: owncloud/owncloud-design-system#1291

Note on that: web is currently using ODS 6.0.1, while the PR is directed to the ODS master. We must either backport it to 6.0.1 and make a 6.0.2 from it (breaks semver of ODS) or merge the a11y-swarming branch as soon as possible to be on the latest ODS again.

[pascalwengerter]

Update for the ODS is in progress: owncloud/owncloud-design-system#1291

Note on that: web is currently using ODS 6.0.1, while the PR is directed to the ODS master. We must either backport it to 6.0.1 and make a 6.0.2 from it (breaks semver of ODS) or merge the a11y-swarming branch as soon as possible to be on the latest ODS again.

Prepared the 6.0.2 as discussed with Benedikt, let's see if we can include some more minor stuff for CERN there and release it this week?

Edit: We've thrown the lazy loading of Avatar images in there, too

[labkode]

Hi, I gave it a try with row height but the folder icon was not resized. I'm not a front-end guru, but as a suggestion I'd say take a look at OC10 UI and see what makes it more dense (row height, top menu, ...)

@elizavetaRa

[pascalwengerter]

Hi, I gave it a try with row height but the folder icon was not resized. I'm not a front-end guru, but as a suggestion I'd say take a look at OC10 UI and see what makes it more dense (row height, top menu, ...)

@elizavetaRa

@labkode how do you suggest we proceed with this issue/ticket?

A couple of thoughts from my side:

• we're developing the new web frontend dedicatedly to not look like the OC10 UI, so looking at the old UI for inspiration feels wrong
• while you're looking for a more dense UI at the CERN, there's only a small chance those requirements and the resulting changes will make it upstream into the main repo. This is why we've invested a lot of time and energy into making theming work, and are more than happy to iterate on that if you need more configurability or find spots that don't quite work yet for you
• we're a frontend development and not design team, so please provide us with an idea of what we should implement. The smaller table row height was my first guess at what you're looking for, and it will be released with the web v3.1.0/oCIS release in the upcoming days. I'm reluctant to now invest further energy into working on this ticket if it's not clear what you want
• For us to efficiently and pragmatically being able to deliver on your needs, we need clearer requirements to act upon - as stated above I suspect those change requests to come in form of more theme-ability, and am more than happy to discuss this with you and help make it happen quickly

[tbsbdr]

@pascalwengerter @labkode thanks for trying to solve this issue "ad hoc". let @elizavetaRa and me try to find a solution on 20.5.2021 in our meeting.
fyi @pmaier1 @diocas

[tbsbdr]

• short term / quickfix: Reduce the row height to the possible minimum of 49px (https://github.com/owncloud/owncloud-design-system/pull/1319)
• longterm: maybe move the sharing indicators out of the 2nd row (below the filename) to a dedicated column. needs scribbles and more concepting in the future. maybe also groundwork for a special condensed view-switch.

---

Short term solution (see PR)

[pascalwengerter]

@elizavetaRa we've reduced the default table row height in the design system to 49px, however it won't be included in the v3.2.0 web release but only in the next version. If you want it you can of course easily change it via your theme.json :)

[diocas]

@pascalwengerter we are using our fork of ODS and web when building our oCIS, so we can deploy everything from the tip of the master branch. But @elizavetaRa told me there were some incompatibilities with the latest ODS. Can I use latest everything or is there some "stable" branch I should use instead?

[pascalwengerter]

@pascalwengerter we are using our fork of ODS and web when building our oCIS, so we can deploy everything from the tip of the master branch. But @elizavetaRa told me there were some incompatibilities with the latest ODS. Can I use latest everything or is there some "stable" branch I should use instead?

Hey, yeah the latest ODS release that works with web master is v6.0.3. The current state of the ODS master will get released as v7.0.0 later today and needs some more work until we can merge it into web...changes are reflected in the a11y-swarming branch in web

[diocas]

Ok, so I'll wait for everything to be fixed to use the latests (with the fix for the density). Can you ping me when this process finishes? thanks

[pascalwengerter]

Ok, so I'll wait for everything to be fixed to use the latests (with the fix for the density). Can you ping me when this process finishes? thanks

The themable row height was part of v6.0.3 so you should already be able to set the height-table-row property via the theme.json (we did this release for you at CERN to reduce the wait time after all, cangelog for the release: https://github.com/owncloud/owncloud-design-system/releases/tag/v6.0.3). Theming docs are here if you want to check (and work for web master)

[diocas]

Ah sorry, didn't realize that! Will try then.