Desktop: Improved tray menu

[jancborchardt]

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.

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

[jpnurmi]

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]

• 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]

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

[camilasan]

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

[brainchild0]

It could definitely be extremely appealing to have an elegant tray menu, but for me the single most helpful change to the tray interface would be the ability to open the main window merely by double clicking, rather than selecting Settings, which is located at bottom of the drop-down menu, and which is really status and settings combined.

I also note a change in the e0b32c1 release, compared to the ef9315c, in which the tray icon is colored, rather than being grayscale, as it had been on my system before, which I had assumed was a selection made to respect my desktop theme.

As I am sure also has been considered, an icon ideally indicates the function or branding of an application, rather than being simply a check or cross to indicate status, as they might apply equally to any function.

Returning to the actual intent of this issue, a nicer menu might be very handy, but I would only caution against a design in which a menu expands to arbitrary size because of long file names. These scenarios impair usability and in many cases evade the notice of testers.

[alescdb]

Double clicking on tray icon to open the main/first folder is pretty simple to achieve and should be implemented as an option if user don't like this behavior.
This is the default behavior for Dropbox (Windows/Linux) and Drive (Windows).

c.f. : #1184

[brainchild0]

Double clicking on tray icon to open the main/first folder

For me, it would be preferred to be able to open what is currently called the Settings window by double clicking.

Running under Linux Cinnamon desktop, I find that double clicking simply drops down, then pulls up the menu, each of the actions corresponding to one of the clicks. The double click is not given any special recognition, which is a waste.

Users may vary in preference for which action to map to a double click, but it definitely seems that some action should be possible. For me, again, opening the Settings window is the most natural choice since the folders reside in the file tree and are accessible independent of NC client.

[jancborchardt]

As mentioned there is an issue open for that already at https://github.com/nextcloud/desktop/issues/1184 and it’s separate from the topic of this here, so let’s not clutter up the comments. Thanks :)

[brainchild0]

I can open a new issue if you want, but #1184 does not cover my comment. The author of the other issue states (emphasis added):

Single click could still be left as opening the app status/settings, but the double click captured to open the folder.

On my system double clicking causes no specific or helpful action. I observe that single clicking opens (or closes) the drop down menu, and double clicking is processed as two single clicks. Opening the settings window is impossible except through using the menu entry, which is inconvenient as it is by far the most common action.

Perhaps it is a platform issue.

Would you like me to open a new issue?

[jancborchardt]

@brainchild0 please add your concern in that issue, but not here. :) Thanks

[DominiqueFuchs]

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

[misch7]

Updated mockup as of 2019-10-26:

[jancborchardt]

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]

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

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
  

App list

With links to browser versions:

[camilasan]

Current progress can be followed here https://github.com/nextcloud/desktop/pull/1565

[er-vin]

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

[jancborchardt]

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