Sidebar standardization

[MorrisJobke]

@skjnldsv @rullzer @jancborchardt and me had today some discussions about how to move the current sidebar forward and improve the layout to be consistent across apps and reusable.

Ref #8374

Apps that use the sidebar

• apps management
• bookmarks
• calendar
• deck
• files
• talk
• tasks
• (not yet) public share page - basically for comments

Problems

• not reusable by apps and other views (like public share page)
• apps can only register separate tabs
  • activity, versions, comments are all separate tabs
• no standard in design yet

Overview of all existing sidebars (files, app mangement, talk, calendar, deck, bookmarks, tasks)

Proposal

• having a standardized way to build a sidebar
  • common elements to use
  • hints on how elements should look like
  • given structure

Specification

• image (optional): preview, group image, events image based on title (like a generic one for haircutter, dentist,...)
• close button: x icon-close in top right
• title
• subtitle (optional): modified date, size, tags, authors, license
• icon left of title/subtitle: favorite, app icon, calendar switcher, task status/checkbox
• 3-dot menu (optional, right of title/subtitle): additional actions like rename, copy file link, delete
• call to action button (optional): start/join call, enable app
• tabs (optional): activity/chronology, sharing/participants, details
  • activity: comments, versions, chat, attachments, ratings
  • sharing: shares, participants, links, permissions, groups
  • details: description text, metadata like EXIF, map, reminders, repetition

Additionally we thought about showing the tabs as sections with a limited height that can be expanded. iOS and Android app store do this for descriptions, updates, ratings, etc. Benefit of this is having all recent/important information at a glance and the chance to dive deeper.

Example of how files and talk could work with this spec and minimal modifications:

iOS appstore:

@nextcloud/designers @karlitschek and app developers @georgehrke @stefan-niedermann @marcelklehr @juliushaertl @tcitworld @nickvergessen @Ivansss What do you think?

[karlitschek]

Good proposal. 👍

[juliusknorr]

Additionally we thought about showing the tabs as sections with a limited height that can be expanded. iOS and Android app store do this for descriptions, updates, ratings, etc. Benefit of this is having all recent/important information at a glance and the chance to dive deeper.

That rather depends on the content. It makes sense for the app store for example, where we could show the start of the description and changelog, but it feels wrong for showing a excerpt of a timeline, settings or basically anything that is not a descriptive text.

tabs (optional): activity/chronology, sharing/participants, details
activity: comments, versions, chat, attachments, ratings
sharing: shares, participants, links, permissions, groups
details: description text, metadata like EXIF, map, reminders, repetition

That separation makes a lot of sense. 👍 For merging all the chronological stuff into one.

[jancborchardt]

@juliushaertl yes, that’s why we only "thought about it". But we will for sure do it with tabs first.

For the timeline/chronological merge also ref Sidebar: combine file Activity, Comments and Versions into unified »Activity« timeline tab #658 where there’s a mockup about how that section specifically could look.

[sehucke]

Sounds great! I think there are many use cases where tabs fit well with additional expandable subelements together (like shortening long lists of elements). Feels like it should not be a "xor decision".

[danxuliu]

As requested by @skjnldsv here are the differences between tabs in Talk and in the server (Files app):

• Padding (larger in Talk, 12px instead of 5px)
• Underline of inactive tab (shown in Talk, and explicitly mentioned as a fix in the pull request for Talk, while not shown in server)
• Opacity of active tab (stronger in Talk, 1.0 instead of 0.7)
• Opacity of inactive tab (in Talk is lower than the active tab, in server is the same)
• Highlight of hovered tab (in Talk the whole tab header is highlighted, in the server only the underline is highlighted)

Talk (faked to have the same tabs as the Files app):

Files app:

Some static screenshots too, as the colour palette of the GIFs makes difficult to see some details in the opacity:
Talk:

Files:

[skjnldsv]

@jancborchardt any opinion?

[jancborchardt]

@skjnldsv the icons should always be labeled. People are not living inside Nextcloud and need icon labels. :)

@danxuliu thanks for the comparison! Basically the Talk app implementation is a tiny bit better, only 2 things:

• The padding is enough as it is in Files
• We have to check that the opacity value of inactive tabs is still enough for proper minimum contrast

[MorrisJobke]

@skjnldsv Any news here?

[skjnldsv]

@MorrisJobke this one will be delayed

[skjnldsv]

Standardisation is minimal but looks very nice and allow quite a few specificity that looks really great!

1	2