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

Improved tray menu #877

Closed
jancborchardt opened this issue Nov 22, 2018 · 17 comments
Closed

Improved tray menu #877

jancborchardt opened this issue Nov 22, 2018 · 17 comments
Assignees
Labels
enhancement enhancement of a already implemented feature/code Prio: high
Milestone

Comments

@jancborchardt
Copy link
Member

We need to improve the archaic style of the tray menu. It has a lot of text entries and misses focus.

When you look at Dropbox and Google Drive, both show a list of last uploaded files with a quick option to share those files.

cc @camilasan @jpnurmi


Some early mockups on an improved tray menu:

The goal is to achieve a better information hierarchy than just with the flat menu as we have now. Obvious inspiration are the new Dropbox tray menu and CloudApp.

Nextcloud desktop tray menu

  • The menu should show regardless whether the tray icon is clicked with the left or right mouse button.
  • Sync status and account info is shown in the top bar on the left
    • On hovering the account info or status icon, a pause sync function is shown in place and sync is paused when clicked. (Hovering that will show »Resume« and resume on click.)
  • The other icons are for »Open local folder«, »Open in browser« and Settings
    • The settings gear exposes the rest of the actions: Showing the quota, Settings dialog, Help, and Quit Nextcloud
  • The list directly shows 4 and a half of the most recent activities, not only file syncs but also Calendar changes, Talk invitations etc (last should be half as a visual cue it can be scrolled)
    • List length could be ~15 most recent activities, after that an entry »Older activities …« which should open the Settings dialog with the Activity tab selected.
    • Ideally there are file type icon / previews if possible for quick identification. But if this is more work we can leave it out for now.
    • Errors could be shown on the top, with retry option (like in the mobile clients Transfers view)
  • Hovering over an entry exposes a »share link« button next to it.
    • Clicking on »share link« creates a read-only share link on the server and copies the link to the clipboard automatically, giving feedback that this happened.
  • Multiple accounts can easily be accommodated using tabs
    • The status of each account is quickly visible directly in the tab
    • The status bubbles up, so if one account is syncing, the sync icon should be shown
    • If there are more than ~3 accounts configured, we could have a »More« entry with a dropdown list
    • Instead of the full icon with the cloud, it would be better to only show the status part of the icon there
  • For Windows, or when the system tray is on the bottom, the balloon arrow should just be on the bottom. The bar with account info could also be at the bottom but it’s not that important.
  • Bonus (different issue): Moving a file onto the tray icon could directly put it into Nextcloud and sync it (similar to CloudApp, which actually directly shares it and copies the share link in the clipboard – that’s too specific and too much for us though)
@jancborchardt jancborchardt added design enhancement enhancement of a already implemented feature/code labels Nov 22, 2018
@jpnurmi
Copy link
Member

jpnurmi commented Nov 22, 2018

Nice! I have never actually tried customizing a tray icon menu like that, but it might be possible to implement it as a custom popup if Qt's menu is not flexible enough.

@tanghus
Copy link

tanghus commented Dec 5, 2018

  • The menu should show regardless whether the tray icon is clicked with the left or right mouse button.

Now LMB shows the application. How would you do that otherwise. Not in the menu, please ;)

@karlitschek
Copy link
Member

Nice. There should also be a place to show the shortcuts to the server apps. Same feature as exists at the moment already

@camilasan
Copy link
Member

For reference: https://techcrunch.com/2019/09/25/dropbox-will-start-rolling-out-the-new-dropbox-app-to-everyone-today/

@brainchild0

This comment has been minimized.

@alescdb

This comment has been minimized.

@brainchild0

This comment has been minimized.

@jancborchardt

This comment has been minimized.

@brainchild0

This comment has been minimized.

@jancborchardt

This comment has been minimized.

@DominiqueFuchs
Copy link
Contributor

Current (open) PR on the share dialog: #1429

@misch7
Copy link
Member

misch7 commented Oct 26, 2019

Updated mockup as of 2019-10-26:

tray-mockup-2019-10-26

@jancborchardt
Copy link
Member Author

Some explanation for the mockup:

  • The heading is account-specific: Shows the last selected account, keeps whatever it is switched to, shows header background color of the connected cloud (like in Android)
  • The avatar and sync state text has an indicator that it’s clickable and opens the multi account switcher. There is also an entry where you can add a new account.
  • The folder icon is to open the local Nextcloud folder.
  • Next is the Nextcloud Talk icon, as that is the biggest of our core apps which is not available integrated on desktop. We should check with the server if Talk is installed – if not do not show this icon.
  • Then an "Apps" icon which lists all the links to the online versions of the other apps. Files, Calendar, Contacts, Deck, etc. We need to check with the server which apps are installed – if it’s only Files, we can show that icon directly.
  • Last, a 3-dot-more menu with the remaining options:
    • Settings opens the current big dialog
    • Pause all sync: In case you are going to metered wifi or smth, to quickly pause
    • Pause current account: If there are multiple accounts, we need this additionally
    • Log out account: Log out only the current account
    • Help for the help link
    • Exit Nextcloud: Exits the Nextcloud app
  • Below this header in the content view is the activity stream also mocked up above, not much changed there.

@jancborchardt
Copy link
Member Author

Another update only regarding the heading as 3 dropdowns in the tray menu are a bit much, and the account switcher and the "Pause account sync" and "Log out" is also very related but at different places.

Tray menu

tray menu

Account switcher and settings

Combined this time. :)

  • Accounts have a menu with "Pause sync" and "Log out" as entries
  • The global "Pause all sync" is a toggle which changes to "Resume all sync", like now
    tray menu settings

App list

With links to browser versions:
tray menu apps

@camilasan
Copy link
Member

Current progress can be followed here #1565

@er-vin
Copy link
Member

er-vin commented Jun 11, 2020

Needs to be stabilized (see related PRs) but basically done.

@er-vin er-vin closed this as completed Jun 11, 2020
@jancborchardt
Copy link
Member Author

👏 Great work everyone! :) Special thanks to @DominiqueFuchs!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement enhancement of a already implemented feature/code Prio: high
Projects
None yet
Development

No branches or pull requests

10 participants