Add viewMode toggle for condensed resource table #7976

pascalwengerter · 2022-11-15T21:30:13Z

Description

Adds route-query based toggle between "normal" and "condensed" resource table

Related Issue

Fixes part of tiles-view switch #6380

Screenshots (if appropriate):

Types of changes

New feature (non-breaking change which adds functionality)

Open tasks:

Review/feedback/approval by @tbsbdr / @kulmann / @elizavetaRa

kulmann · 2022-11-21T16:30:05Z

~~I have merged #7940 today - could you rebase this PR and include all your design system changes directly in web?~~ nevermind, wanted to post this in #7991

pascalwengerter · 2022-11-21T18:32:00Z

~~I have merged #7940 today - could you rebase this PR and include all your design system changes directly in web?~~ nevermind, wanted to post this in #7991

Can't hurt though 😉

kulmann · 2022-11-22T09:09:06Z

Just checked it out, my impression is that the font size is already too small. But it might just be that I'm not "scientific enough" for the scientific mode. 😁

pascalwengerter · 2022-11-22T20:45:23Z

Just checked it out, my impression is that the font size is already too small. But it might just be that I'm not "scientific enough" for the scientific mode. 😁

What does the scientific corner say? @elizavetaRa 🤓

tbsbdr · 2022-11-23T11:36:16Z

decrease whitespace

Let's only decrease whitespace, to achieve the goal of showing more lines in the viewport.

Example how this looks in dropbox:

let's not decrease fonstsize, because:

this should be done ex. via browser (ctl+ "-") or in the future in the ocis user settings
only decreasing fontsize in the fileslist and not in the other ui elements messes up the overal design impression

tbsbdr · 2022-11-23T13:40:31Z

@pascalwengerter created a custom menu-line-condensed.svg

menu-line-condensed.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path d="M3 5H21V7H3V5ZM3 9H21V11H3V9ZM3 17H21V19H3V17Z" />
<path d="M21 13H3V15H21V13Z" />
</svg>

Preview:

pascalwengerter · 2022-11-28T23:02:38Z

@tbsbdr @kulmann please re-review

pascalwengerter · 2022-11-28T23:03:26Z

packages/design-system/changelog/unreleased/enhancement-condensed-menu-item

@@ -0,0 +1,5 @@
+Enhancement: Add condensed menu icon 


@kulmann not sure if the changelog in the design system still gets updated individually or if there's only one in the repo root from now on?

We need to maintain a separate changelog, because we want to be able to release independently with non aligned version numbers

Good, that's what I assumed (and hence the changelog entry^^)

elizavetaRa · 2022-11-29T16:43:12Z

Nice feature, indeed wished by our users. Looking forward to it!

dschmidt · 2022-11-29T22:01:12Z

packages/web-app-files/src/composables/viewMode/constants.ts

+export abstract class ViewModeConstants {
+  static readonly viewModeDefault: string = 'resource-table'
+  static readonly viewModeQueryName: string = 'view-mode'
+}


Not a huge fan of this use class as enum pattern, I'd rather use typescript types for this nowadays

I've followed what I found in another composable basically, idk if refactoring my/the other solution independently is within the scope of this PR?

I agree with both of you 😆 Would like to get rid of it, but also fine in a separate PR.

kulmann

UX feels good! 🥳

Could you please add unit tests for the view mode selection, as implemented in ViewOptions.vue? Added some comments.

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

kulmann · 2022-11-29T22:52:15Z

packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts

@@ -59,6 +61,10 @@ export const useResourcesViewDefaults = <T, TT, TU extends any[]>(
    fields
  })

+  const currentViewMode = useRouteQuery('view-mode', 'resource-table')


Suggested change

const currentViewMode = useRouteQuery('view-mode', 'resource-table')

const currentViewModeQuery = useRouteQuery('view-mode', 'resource-table')

kulmann · 2022-11-29T22:53:55Z

packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts

@@ -59,6 +61,10 @@ export const useResourcesViewDefaults = <T, TT, TU extends any[]>(
    fields
  })

+  const currentViewMode = useRouteQuery('view-mode', 'resource-table')
+  const someViewMode = computed((): string => String(currentViewMode.value))


Suggested change

const someViewMode = computed((): string => String(currentViewMode.value))

const currentViewMode = computed((): string => queryItemAsString(currentViewMode.value))

the import of queryItemAsString from web-pkg/src/composables

packages/web-app-files/src/composables/viewMode/useViewMode.ts

kulmann · 2022-11-29T22:59:54Z

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

+  <div class="oc-flex oc-flex-middle">
+    <div class="oc-button-group oc-visible@s oc-mr-s">
+      <oc-button
+        :appearance="viewModeCurrent === 'resource-table-condensed' ? 'filled' : 'outline'"


Please use your constants. ;-) You can just disclose them to the template by including them in the object returned by the setup function.

Done, good point. Took me way longer than necessary because I was wondering what const you were talking about exactly^^. Please take a look at e14e464 and let me know which of the two constant variants you prefer! (as in ViewModeConstants.viewModeDefault vis ViewModeConstants.default, e.g.)

kulmann · 2022-11-29T23:00:55Z

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

-    :class="hoverableQuickActions && 'hoverable-quick-actions'"
+    :class="[
+      hoverableQuickActions && 'hoverable-quick-actions',
+      { condensed: viewMode === 'resource-table-condensed' }


Use the const please

kulmann · 2022-11-29T23:01:02Z

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

@@ -318,6 +321,10 @@ export default defineComponent({
      required: false,
      default: false
    },
+    viewMode: {
+      type: String,
+      default: 'resource-table'


Use the const please

kulmann · 2022-11-29T23:01:33Z

packages/web-app-files/src/composables/viewMode/constants.ts

+export abstract class ViewModeConstants {
+  static readonly viewModeDefault: string = 'resource-table'
+  static readonly viewModeQueryName: string = 'view-mode'
+}


I agree with both of you 😆 Would like to get rid of it, but also fine in a separate PR.

kulmann · 2022-11-29T23:02:02Z

packages/web-app-files/src/composables/viewMode/useViewMode.ts

+    name: ViewModeConstants.viewModeQueryName,
+    defaultValue: ViewModeConstants.viewModeDefault
+  })
+  return computed(() => String(unref(perPageQuery)))


Suggested change

return computed(() => String(unref(perPageQuery)))

return computed(() => queryItemAsString(unref(perPageQuery)))

import from web-pkg/src/composables

pascalwengerter · 2022-12-05T23:29:13Z

UX feels good! 🥳

Could you please add unit tests for the view mode selection, as implemented in ViewOptions.vue? Added some comments.

Thanks for the review, I've addressed all points AFAIK and added a unit test for the button group, basically checking whether the correct button gets shown as outlined/filled after clicking the respective option - is that sufficient for now?

pascalwengerter · 2022-12-08T11:38:39Z

@kulmann could I get a re-review? :)

kulmann · 2022-12-08T11:50:01Z

@kulmann could I get a re-review? :)

Yes, but I'm still waiting for internal UX feedback from @tbsbdr 🙈

tbsbdr · 2022-12-08T15:35:07Z

awesome! (was blocked as I did not manage to start it locally. Benedikt helped me)
I would have used the menu-line icon for regular-view mode and the condensed icon for condensed-view:

Would love to see it like this

menu-line icon for regular-view mode

… table, fix unit tests

pascalwengerter · 2022-12-08T17:34:23Z

awesome! (was blocked as I did not manage to start it locally. Benedikt helped me) I would have used the menu-line icon for regular-view mode and the condensed icon for condensed-view:

Would love to see it like this

menu-line icon for regular-view mode

Done!

sonarcloud · 2022-12-08T17:44:00Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

77.1% Coverage
0.0% Duplication

kulmann · 2022-12-09T09:22:34Z

@tbsbdr found a kind of UX flaw: the views Favorites (oc10 only at the moment), Deleted files, Shared with others, Shared via link and Search results have a line below the folder name for displaying the parent folder name/link. For those views the condensed and regular list view mode are identical. I'm torn between (a) not showing the condensed view mode button at all on those pages, or (b) showing the view mode button, knowing that it will not have any effect in the default theme. What do you think @pascalwengerter ?

kulmann

UX feels good, code is also good now. One hint about tests (ok for later, see comment). My feeling is that we can handle my previous comment in a followup. Let's merge this as first iteration of the condensed view mode.

kulmann · 2022-12-09T10:00:57Z

packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js

@@ -95,4 +97,46 @@ describe('ViewOptions', () => {

    expect(mockedStore.modules.Files.mutations.SET_HIDDEN_FILES_VISIBILITY).toHaveBeenCalled()
  })
+
+  it('initially shows normal resource-table by default', () => {
+    const wrapper = shallowMount(ViewOptions, {


for future tests (not blocking this PR): we introduced a new way of handling mocks in unit tests. See for example

web/packages/web-app-files/tests/unit/views/spaces/DriveResolver.spec.ts

Line 56 in 5667b5f

function getMountedWrapper({

The functions creating the wrappers now return an object, containing mocks, storeOptions and the wrapper. That gives you the chance to manipulate mocks within the test code.

pascalwengerter force-pushed the feature/condensed-files-view branch 2 times, most recently from 6f21e60 to b0e257c Compare November 15, 2022 21:44

pascalwengerter force-pushed the feature/condensed-files-view branch from b0e257c to 80b16f3 Compare November 21, 2022 18:31

pascalwengerter force-pushed the feature/condensed-files-view branch from 80b16f3 to 2070677 Compare November 28, 2022 23:01

pascalwengerter marked this pull request as ready for review November 28, 2022 23:02

pascalwengerter commented Nov 28, 2022

View reviewed changes

dschmidt reviewed Nov 29, 2022

View reviewed changes

kulmann requested changes Nov 29, 2022

View reviewed changes

pascalwengerter force-pushed the feature/condensed-files-view branch from 2070677 to fda425e Compare December 5, 2022 23:25

pascalwengerter requested a review from kulmann December 5, 2022 23:29

pascalwengerter added 7 commits December 8, 2022 18:25

Add viewMode toggle for condensed resource table

33bfffd

Add condensed-menu icon

d7b83cb

Use condensed menu item, don't reduce font size in condensed resource…

8d419a9

… table, fix unit tests

Use small icons in viewMode switcher

f8aa5f5

Use queryItemAsString and ViewModeConstants

a42a10f

Rename ViewModeConstants const names for less duplication

4f10bd8

Add unit test for ViewOptions ViewMode button group

bb2e736

pascalwengerter force-pushed the feature/condensed-files-view branch from fda425e to 9efc6fd Compare December 8, 2022 17:34

Update default ViewMode button icon

9efc6fd

kulmann approved these changes Dec 9, 2022

View reviewed changes

kulmann merged commit e013d4b into owncloud:master Dec 9, 2022

pascalwengerter mentioned this pull request Dec 12, 2022

Make viewoption modes configurable via appBar || Extend OcResourceIcon for spaces #8105

Merged

1 task

pascalwengerter deleted the feature/condensed-files-view branch December 21, 2022 15:26

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

Add viewMode toggle for condensed resource table #7976

Add viewMode toggle for condensed resource table #7976

pascalwengerter commented Nov 15, 2022 •

edited

Loading

kulmann commented Nov 21, 2022 •

edited

Loading

pascalwengerter commented Nov 21, 2022

kulmann commented Nov 22, 2022

pascalwengerter commented Nov 22, 2022

tbsbdr commented Nov 23, 2022 •

edited

Loading

tbsbdr commented Nov 23, 2022 •

edited

Loading

pascalwengerter commented Nov 28, 2022

pascalwengerter Nov 28, 2022

dschmidt Nov 29, 2022

pascalwengerter Nov 29, 2022

elizavetaRa commented Nov 29, 2022 •

edited

Loading

dschmidt Nov 29, 2022

pascalwengerter Nov 29, 2022

kulmann Nov 29, 2022

kulmann left a comment

kulmann Nov 29, 2022

kulmann Nov 29, 2022

kulmann Nov 29, 2022

pascalwengerter Dec 5, 2022

kulmann Nov 29, 2022

kulmann Nov 29, 2022

kulmann Nov 29, 2022

kulmann Nov 29, 2022

pascalwengerter commented Dec 5, 2022

pascalwengerter commented Dec 8, 2022

kulmann commented Dec 8, 2022

tbsbdr commented Dec 8, 2022

pascalwengerter commented Dec 8, 2022

Would love to see it like this

menu-line icon for regular-view mode

sonarcloud bot commented Dec 8, 2022

kulmann commented Dec 9, 2022

kulmann left a comment

kulmann Dec 9, 2022

	const currentViewMode = useRouteQuery('view-mode', 'resource-table')
	const currentViewModeQuery = useRouteQuery('view-mode', 'resource-table')

	const someViewMode = computed((): string => String(currentViewMode.value))
	const currentViewMode = computed((): string => queryItemAsString(currentViewMode.value))

	return computed(() => String(unref(perPageQuery)))
	return computed(() => queryItemAsString(unref(perPageQuery)))

Add viewMode toggle for condensed resource table #7976

Add viewMode toggle for condensed resource table #7976

Conversation

pascalwengerter commented Nov 15, 2022 • edited Loading

Description

Related Issue

Screenshots (if appropriate):

Types of changes

Open tasks:

kulmann commented Nov 21, 2022 • edited Loading

pascalwengerter commented Nov 21, 2022

kulmann commented Nov 22, 2022

pascalwengerter commented Nov 22, 2022

tbsbdr commented Nov 23, 2022 • edited Loading

decrease whitespace

tbsbdr commented Nov 23, 2022 • edited Loading

pascalwengerter commented Nov 28, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elizavetaRa commented Nov 29, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kulmann left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pascalwengerter commented Dec 5, 2022

pascalwengerter commented Dec 8, 2022

kulmann commented Dec 8, 2022

tbsbdr commented Dec 8, 2022

Would love to see it like this

menu-line icon for regular-view mode

pascalwengerter commented Dec 8, 2022

Would love to see it like this

menu-line icon for regular-view mode

sonarcloud bot commented Dec 8, 2022

kulmann commented Dec 9, 2022

kulmann left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pascalwengerter commented Nov 15, 2022 •

edited

Loading

kulmann commented Nov 21, 2022 •

edited

Loading

tbsbdr commented Nov 23, 2022 •

edited

Loading

tbsbdr commented Nov 23, 2022 •

edited

Loading

elizavetaRa commented Nov 29, 2022 •

edited

Loading