Header / List Actions

Header is a predefined area at the top of each Panel.

 

The Header contains several text areas: a panel number, panel name, and optional sub header and and optional secondary sub header. It also contains an optional Action Bar containing Action Buttons.

 

An optional List Action Menu appears in the Header when an Action Button is pressed. The Menu can perform actions on an associated list of content in the Panel below.

Behaviours & States

Behavior

Header

The Header is comprised of the following: 

  • Panel Title - application defined
  • Panel Number - automatically calculated
  • Subheader - optional
  • Subsubheader - optional
  • Action Bar - in large Headers spans the full width, in small Headers spans half width
  • Background Image - optional, that may or may not repeat throughout the application

 

The Header's main purpose is to reflect the number of the Panel that the user is currently in. The Panel Number is automatically generated and dependent on the number of Panels the user has navigated. Buttons, which may be in the Action Bar within the Header, should behave as outlined in the Button control. These can either be left or right aligned and may use Tool Tips to provide more context.

Action Bar

The Action Bar is an optional button area that provides a consistent location for actions that are contextual to the current panel or state of the panel. Common actions include filter, sort, search, edit, move, delete, view switcher, share to, add to, favorite, download, buy, rent, etc.

 

By default all actions align to the right. When an action is selected that enables a mode such as multi-slect or edit, all actions in the action bar can be replaced with confirmation actions such as OK/Cancel.

List Actions (Optional)

List Actions is an optional menu that is invoked from a button in the headers action bar. 

This menu is only used when the selected action bar button has a list of related actions such as:

  • Sort (by date, by alpha, etc.)
  • Filter (genre, release date, tv shows, movies, etc.)
  • Share to (facebook, twitter, email, etc)
  • Add to (queue, playlist, album, etc)

 

The List Actions menu can be used as described above. Do not use List Actions menu for any other purpose such as navigation, shopping carts, or any other complicated UI.

 

The List Actions menu can be comprised of any control used in lists, such as Checkbox Items or Toggle Items. These lists can be stacked, or arranged side by side in columns. When arranged in columns, they cannot exceed the width of the menu. Even though the List Actions Menu can scroll, when possible lists should not be stacked in a way that hides them from the user. See patterns for more examples of the types of controls used in the List Actions menu.

 

The List Actions menu can either be automatically closed after selection or manually closed by selecting the "X" in the upper right corner. Autoclose should be reserved for using a single list that only allows single selection. Any changes made will be reflected when the List Actions menu is closed.

States

The Header has only one state. When the Action Menu is open, the list control has its usual states and behaviours.

Sizing

The Header occupies the full width of a Panel at a fixed height. If the Panel's title is longer than the Panel width, the text is truncated with an elipsis and marquees (scrolls) when hovered.

 

There are two sizes of the Header, large and small. In a large Header, the Action Bar spans the full width of the Header. In a small Header, the Action Bar shares the Header width with the subheader and subsubheader. Either size may be used throughout an application.  Optionally the large Header can automatically collapse into the small header when a list is scrolled. See patterns for examples of using the large and small Header.

 

The Action Menu opens on top of the Header and is the same size. If the number of controls in a list extends beyond the height of the Action Menu, the list should scroll to reveal those items.

 

Lists within an Action Menu automatically expand to occupy the full width of the Action Menu. It is possible for a single list to be stretched to fill a wide Action Menu.

Illustration

Header with List Actions Button

HEADER_LIST_ACTIONS.png

 

List Actions Menu Open

HEADER_LIST_ACTIONS_2.png

 

Different variation of Header

HEADER_LIST_ACTIONS_Empty01.png

Navigation