Design forward: Improved tray menu [$15]

[jancborchardt]

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.

Full size image (and source file for editing with Pencil)

• 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 ownCloud
• The list directly shows 4 and a half of the most recently changed files (last should be half as a visual cue it can be scrolled)
  • List length could be ~15 most recently changed files, after that an entry »Older files …« which should open the Settings dialog with the Activity tab selected.
  • Ideally there are file type icon / previews if possible for quick identification
  • 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 share link on the server and copies the link to the clipboard automatically.
• 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 ownCloud 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): See the issue at Simple drag&drop sharing bonus feature #1824

Already showed it to @dragotin in Nürnberg. What do you think @danimo @MTRichards @owncloud/designers?

--- There is a **[$15 open bounty](https://www.bountysource.com/issues/2057316-design-forward-improved-tray-menu?utm_campaign=plugin&utm_content=tracker%2F216457&utm_medium=issues&utm_source=github)** on this issue. Add to the bounty at [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F216457&utm_medium=issues&utm_source=github).

[jbtbnl]

I like it! Can we have a double click for the full window?

[MTRichards]

I like it. Works for multi-count, should also look good on Windows.

We should also be able to set popup notification settings.

[stefan-niedermann]

👍 from me too. i wonder where the button to open the full window is?

The other icons are for »Open local folder«, »Open in browser« and Settings

Open local folder - which local folder? For example I currently have configured one owncloud account with 5 Folders (i sync not all to /owncloud but some folders, e.g. Documents, Images,...)

[jancborchardt]

Open local folder - which local folder? For example I currently have configured one owncloud account with 5 Folders (i sync not all to /owncloud but some folders, e.g. Documents, Images,...)

@stefan-niedermann in that case, clicking the folder icon could show a dropdown with a list of the different folders.

i wonder where the button to open the full window is?

@stefan-niedermann click on the gearwheel icon, then on »Settings«.

We should also be able to set popup notification settings.

@MTRichards what do you exactly mean by that? Settings would be in the big settings dialog – which ideally should not need to be touched all the time.

[jancborchardt]

cc @jturcotte for info since we talked about this. (Also referencing the tray menu of CloudApp and Dropbox.

[martin-rueegg]

👍 looks great. only the tab-thing for accounts might be a bit strange if you have more accounts than space available.

how about a iPhone-like or WeatherPro-like design, having first listed all the accounts in one list (maybe including some major status info), and when clicking on it, it slides to the detail page showing the same header info at the top now and providing a "back" button?

[jancborchardt]

how about a iPhone-like or WeatherPro-like design, having first listed all the accounts in one list (maybe including some major status info), and when clicking on it, it slides to the detail page showing the same header info at the top now and providing a "back" button?

This is impractical for several reasons:

• it creates an additional step in an interface (tray menu) which is intended to get out of the way
• more than 3 accounts are quite unusual so the work needed to implement and maintain this edge-case it isn’t really justified

[martin-rueegg]

• i agree that having more than 3 accounts is an edge-case.
• however, the additional step is only when there are more than one accounts and one needs to access the second one. but yes, the interface would change in that case. so un-paractical.
  anyway: thanks for your consideration.