Xfce Wiki

Sub domains
 

Thunar: Redesign of the Shortcuts Pane

A project brought to you by the Xfce Design SIG.

Old ideas and discussions can be read in the page history.

Description

Thunar offers two different side panes, a directory tree and a side pane with shortcuts, called the shortcuts pane. The shortcuts pane was not updated in Thunar 1.2 despite the functionality added by GIO, such as the availability to mount archives or browse remote locations. A straight-forward way to extend the current shortcuts pane would be to simply add the new items into the flat list that is shown under Current Design. However, we felt that we can do better and we are looking for suggestions on how to improve the current design to a) integrate the new features and b) look more appealing.
Git repository for test-code

Current Design

Here are two screenshots of the current user interface of Thunar. The second shot is a good example of how cluttered the side pane looks as soon as more devices are attached to the computer:

Problems / Comments

  • Mounted items like archives, remote locations and Samba shares are not integrated or shown at all. If we simply add them to the flat list of items in the current shortcuts pane, it will be increasingly hard to tell what is a personal folder, what is a volume, what is an archive etc. So I think grouping items by category (whatever “category” means here) might be necessary. But that is just one possible approach of many, I guess. — Jannis Pohlmann 2011/05/26 17:20
  • Grouping and making the groups/categories collapsible surely helps, but I think keeping categories down not to produce a category-overflow is an important point. — Simon Steinbeiß 2011/05/27 01:13

New Design

Categories in the Shortcuts Pane

Here's our list of categories, we still have to settle on what comes first (“network” comes last):

  • Devices (shows internal partitions and external devices; internal partitions can be hidden)
  • Places (shows xdg-user-dirs and bookmarks)
  • Network (shows remote bookmarks and samba-shares)

Mockups

Quick Mockup of an Early Custom Button Idea

Comments
  • This would require a custom button class to be written but we could probably take most of the rendering and shading code from GTK+ and even re-use existing style properties so that themes are not broken (I am not 100% sure here but I think so). Downside: This button looks like it will pop up a menu. And it is not clear that there are actually two separate things you can click on. — Jannis Pohlmann 2011/05/29 00:47

Early Glade Mockup Using Buttons and Expanders

Comments
  • I like the position of the expander and the expander itself. The highlighting as a button should only happen when hovering the eject-icon, not the device-name since clicking doesn't really execute a button-like action.
    • I would vote for that too, it feels less cluttered on hover IMO. Instead, when hovering the label we could change the mouse cursor as when hovering a link, change the background color or font (make it bold?)… — Jérôme Guelfucci 2011/05/29 15:25
    • On second thought I'm really wondering whether we need highlighting for the nodes themselves, the eject button definitely needs something. But since the nodes aren't really like links (even though I agree you could argue the opposite here as well) I think the hand is misleading. To me they're more like folders and folders don't need/have much prelight. — Simon Steinbeiß 2011/05/30 01:35

Mockup After Initial Discussions

Comments

Implemented Mockup using Expanders and a Custom Row Widget

Comments
  • This is an implementation using three expanders and a custom container widget for rendering a single row. The row and the action button can be focused/activated independently (even with a keyboard they are easy to navigate). All custom drawing is done based on primitives provided by GTK+, so that theming should not be an issue. The action button can switch between an eject icon, an animated spinner as a progress indicator and a cancel icon when the progress indicator is hovered with the mouse. Compared to the tree view idea it works much better and is easier to implement. Code is here: http://git.xfce.org/special-interest-groups/design/tree/thunar/shortcuts-pane/demo-code/custom-viewJannis Pohlmann 2011/05/31 04:31

Summarized Requirements List and Implementation Status

The following criteria were identified as necessary and/or desirable for the new design of the shortcuts pane. The IDs are prefixed with A for Appearance, B for Behavior and I for Implementation. The discussions about these criteria can be read in the page history.

The status cells are color coded:

  • a white background means the feature is not implemented yet,
  • a green background means the feature is supported,
  • a orange background means the feature is being worked on,
  • a grey background means the feature is partially working but is not developed any further.
ID Description Mockup custom-view Thunar
A01 Categories have a down array and can be expanded Yes Yes
A02 Items are left-aligned with category titles – (only fixed indentation at the moment) Yes
A03 Items have an icon, an ellipsized title and an action area with a button Yes Yes
A04 Items have uniform size (height in particular) Yes Yes
A05 Items are highlighted on hover Yes Yes
A06 Items and action buttons are highlighted independently depending on the mouse position Yes Yes
A07 The padding of the view can be configured by the theme
A08 The background color of the view can be configured by the theme Yes Yes
B01 Categories can be expanded with mouse and keyboard Yes Yes
B02 Categories are not selected/focused when clicked/double-clicked with the mouse Yes Yes
B03 Categories can be cycled through with the keyboard Yes (tab key) Yes (tab key)
B04 Categories are expanded with a single click Yes Yes
B05 Items can be navigated with keyboard and mouse Yes (arrow keys) Yes (arrow keys)
B06 Items and action buttons can be focused/activated independently Yes Yes
B07 Items and action buttons are selected/focused/activated with a single click Yes Yes
B08 Activating an item replaces its action button icon with a spinner until it is mounted and loaded Yes
B09 Activating an action button replaces its icon with a spinner until the eject operation is finished Yes Yes
B10 Dragging a URI to empty area or a category title opens a free spot in the category it belongs to Partly
B11 Dragging a URI to an item works just like with dragging to folders in Thunar Yes
B12 Dropping a URI on empty area or a category title creates a bookmark in the correct category
B13 Dropping a URI on an item copies/moves/links the URI into the corresponding folder or mount point. The selection/focus is not changed Yes
B14 Categories/items remain selected when unfocusing the Thunar window Yes
B15 Right-clicking the empty area displays a context menu
B16 The empty area context menu has an item to edit the items in the shortcuts pane
B16 Right-clicking a category title displays a context menu Yes
B17 The category context menu has an item to hide the category
B18 The category context menu has an visibility check box item for each item available in the category Yes (not saved yet)
B19 Right-clicking an item displays a context menu Yes
B20 The item context menu has an item to mount the item if not mounted yet Yes
B21 The item context menu has an item to unmount the item if mounted Yes
B22 The item context menu has an item to safely remove (or disconnect) the corresponding device if there is one Yes
B23 If a new mount or volume becomes available and the corresponding category is collapsed, its header flashes a few times (e.g. by changing the background color) Yes
B24 Dragging a URI to the empty area or a category title with the right mouse button pops up a context menu where the user can choose between a temporary and permanent bookmark in the category
B25 Dragging an item to a different location reorders the items in a category Yes (not saved yet)
B26 The DEVICES category displays system volumes (hidden by default), removable volumes and mounted archives Yes (system volumes not hidden yet)
B27 The PLACES category displays the home, desktop and trash directories plus XDG user dirs plus local URIs from ~/.gtk-bookmarks Yes (XDG user dirs not included yet)
B28 The NETWORK category displays all remote URIs from ~/.gtk-bookmarks and all mounted remote locations Yes
B29 Items are selected whenever the corresponding folder is opened in folder view Yes
I01 Categories and items are stored in an implementation of GtkTreeModel Yes
I02 Expanders and a custom row widget are used instead of a GtkTreeView Yes Yes

Comments

  • B20: Firstly, this would pollute the context-menu. Secondly (and more importantly) this is not a very good option for a context-menu, because you can only hide the item, not unhide it from there. I think in terms of consistency for the user (meaning: “Where do I change this or that behavior?”) one place to hide and unhide is better (e.g. the thunar preferences-dialog). Other stuff like making an item non-/persistent makes more sense, simply because the item doesn't disappear as a result of setting that option. — Simon Steinbeiß 2011/06/06 16:53
    • True, I removed it from the list (so B20 now refers to something else). — Jannis Pohlmann 2011/09/07 02:01

Implementation Notes

  • We need to distinguish various types of files, mounts and volumes:
    • local (or regular) files that are not associated with a mount
    • remote files that are optionally associated with a mount (this is the case with remote bookmarks; as soon as they are mounted, a mount will be created and we need to attach it to the shortcut)
    • mounts that are not associated with a volume (this is the case with mounts of remote bookmarks, mounted archives and samba shares; mounts of remote bookmarks need to be attachd to remote bookmark shortcuts, others need to be displayed as a stand-alone shortcut either in the devices or network category)
    • mounts that are associated with a volume (these should be ignored)
    • volumes that have a mount and for which pressing eject should only unmount/eject that mount (these are USB sticks etc.)
    • volumes that have a mount and for which pressing eject should eject the entire device (these are CD drives etc.)

References

Nautilus: Mockup from 2008

Comments

  • The mockup looks very similar to the design of Finder. It's clean and different items are easy to distinguish. I can see two problems with this design: 1. it might not scale very well (e.g. imagine you had ~10 devices like in the old screenshot) and 2. it has no eject buttons (I would assume those to appear as sub-buttons once an item is hovered but other ways are possible). — Jannis Pohlmann 2011/05/26 19:05

Nautilus: Current Design (GNOME 3, 2011)

Comments

OS X Finder

Comments

  • I really like the editing feature. We should have that. — Jannis Pohlmann 2011/05/27 01:09
    • Maybe it'd be enough to be able to show/hide categories, not each individual node (otherwise thunar would have to remember e.g. external devices as well in order to hide them again next time). — Simon Steinbeiß 2011/05/27 23:17
  • Archives or iso-images make sense as part of the devices, if the feature lands in thunar, I guess this is how it should look/work — Simon Steinbeiß 2011/05/27 01:21

Marlin File Browser (mockup)

Comments