Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sidebar standardization #10289

Closed
MorrisJobke opened this issue Jul 18, 2018 · 12 comments · Fixed by nextcloud-libraries/nextcloud-vue#340
Closed

Sidebar standardization #10289

MorrisJobke opened this issue Jul 18, 2018 · 12 comments · Fixed by nextcloud-libraries/nextcloud-vue#340

Comments

@MorrisJobke
Copy link
Member

MorrisJobke commented Jul 18, 2018

@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)

out

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:

img_3169-2

iOS appstore:

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

@nextcloud-bot

This comment has been minimized.

@karlitschek
Copy link
Member

Good proposal. 👍

@juliusknorr
Copy link
Member

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
Copy link
Member

@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
Copy link

sehucke commented Sep 24, 2018

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
Copy link
Member

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):
tab-header-talk

Files app:
tab-header-files

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

Files:
tab-header-files

@skjnldsv
Copy link
Member

@jancborchardt any opinion?
1_ub9nyamooksgwhxx5ysqsa

@jancborchardt
Copy link
Member

@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
Copy link
Member Author

@skjnldsv Any news here?

@skjnldsv
Copy link
Member

@MorrisJobke this one will be delayed

@hitam4450

This comment has been minimized.

@skjnldsv
Copy link
Member

skjnldsv commented Apr 8, 2019

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

1 2
dev skjnldsv com_apps_vueexample_ dev skjnldsv com_apps_vueexample_ (2)
dev skjnldsv com_apps_vueexample_ (3)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants