Gui Discussion

Hierarchy and activity

This page describes the function of the panels in the Tribler GUI design for Tribler 4.0.

Panels

In the GUI we distinguish the following panels:

• The buttonPanel: This is the top panel that shows buttons for the main functionalities of Tribler. The buttonPanel can be in the following modes: [contentMode, personsMode, profileMode, libraryMode, friendsMode, messageMode, indefinedMode]. These modes only mean that the related button is selected/highlighted.
• The overviewPanel: This is the left hand panel, which shows an overview of items. The overviewPanel can be in the following modes: [contentMode, personsMode, libraryMode, profileMode, messageMode].
• The detailPanel: This is the smaller right hand panel, which shows details of one of the items selected on the left. The detailPanel can be in the following modes: [contentMode, personsMode, messageMode?].
• Other panels: There are some other less important panels (current downloads, messages) that are out of scope of this document.

Panel link functionality

On each panel, there are some buttons/text with button functionality, which (when clicked) result in activity in this same panel and/or in other panels. We will refer to this as emph{panel link functionality}. The general idea is that the buttonPanel has superfunctionality over the other two panels. Furthermore, links/buttons in the detailPanel and overviewPanel always only change the appearance of one of them (either the detailPanel or the overviewPanel). The following lists define for each panel all link functionality.

buttonPanel

• Content button. Shows overviewPanel[contentMode, all content], detailPanel[first item of overview].
• Persons button. Shows overviewPanel[personsMode, all persons], detailPanel[first person of overview].
• Library button. Shows overviewPanel[libraryMode, all downloaded content+in progress downloads], detailPanel[first downloaded item of overview]
• Friends button. Shows overviewPanel[personsMode, all friends], detailPanel[first person of overview].
• Messages button. Shows overviewPanel[messageMode, all messages], detailPanel[newest message]. ??
• Profile button. Shows overviewPanel[profileMode, my profile], detailPanel[ ???? ].
• back button (not a main button, but placed on the buttonPanel). Shows previous state. This effects either overviewPanel or detailPanel.

overviewPanel

• item clicked. overviewPanel does not change, detailPanel[selected item] in same mode as overviewPanel.
• page button. Shows overviewPanel[current mode, content on new page], detailPanel does not change.

If overviewPanel is in contentMode or personsMode:

• filter button. Shows overviewPanel[current mode, filtered content/persons], detailPanel does not change.
• category button. Shows overviewPanel[current mode, filtered content/persons from category], detailPanel does not change.
• search action. Shows overviewPanel[current mode, content/persons found], detailPanel does not change.

For all these buttons/links counts that the button in the buttonPanel that was last clicked keeps a selection.

If overviewPanel is in libraryMode:

• filter button?
• category button?
• search action?
• Possibly the links: related/injected content, direct items, related persons, friend are also in the profile and result in the same action as these links in other panels/modes.

detailPanel

• download button. The download is started in the library which may or may not be currently visible.
• play button (video on demand). The video is directly played while downloading in an external/embedded video-player.

If detailPanel is in contentMode:

• injected by/related persons link. Shows overviewPanel[personsMode, related persons], detailPanel[personMode, first person], buttonPanel loses selection of the content button (if still enabled).
• injected by/related persons-click certain person. Idem, but detailPanel[personMode, certain person], buttonPanel loses selection of the content button (if still enabled).
• tags links. Shows overviewPanel[contentMode, content with this tag], detailPanel[contentMode, first content].
• people who liked this also like/related content. Shows overviewPanel[contentMode, related content], detailPanel[contentMode, first content]

If detailPanel is in personsMode:

• latest downloads/related content link. Shows overviewPanel[contentMode, related content], detailPanel[contentMode, first content], buttonPanel loses selection of the persons button (if still enabled).
• latest downloads/related content-click certain content item. Idem, but detailPanel[contentMode, certain content], buttonPanel loses selection of the persons button (if still enabled).
• friends link. Shows overviewPanel[personsMode, friends], detailPanel[personsMode, first friend].
• favorite tags link. Shows overviewPanel[contentMode, content with this tag], detailPanel[contentMode, first content], buttonPanel loses selection of the persons button (if still enabled).

My profile

The profile of the user is supposed to be too extensive to be shown only in the detail panel. Therefore, this is the only single item that is shown in the overviewPanel (although it does not use the overview panel for an overview of items).

Back button: canceling panel actions

As described above, clicking buttons/text in the overviewPanel or detailPanel results in a change of view/mode of one of the panels. After a user action a panel can change from showing a certain group of persons to showing a rather different group of content. These changes of views call for a functionality with which a user can revert its action by clicking a emph{back} button. User actions will be stored in a way similar to the actions listed above, a user action table can for instance look like Table ef{actionTable}:

Tribler user action table.

The action table stores user actions for a certain number of rows (maximum possible revertible steps). The final row represents the current panel state. The back button will delete this row and revert the state of the panels to the one stated in the row before that.

Summary

• Click in detail panel results in update of Overview panel AND Detail panel itself (either by first item in overview or specific item selected in detail Panel)
• Minimum information below thumbnail. Extra information on top of thumbnail on roll over.
• Filter area is used only for search bar in Basic state. A small button allow for advanced filtering with extra filter options.
• When 'profile', 'library' or 'friends' of a person is selected, small icons are available in title bar of overview Panel. These give access to 'profile', 'library' and 'friends' of this selected person.

Not yet decided

• Tag button for tag cloud in overview Panel
• Subscription functionality integration or not?
• What information in orange header bar of overview Panel.