Introduction

The Sorting Bar is a compact header displayed above the list of the Favorites section. It tells how many items are saved, and it shows the sort in use, with a button that opens a menu to change it.

The Sorting Bar can be turned off in the back office. Without it, the list keeps its default order, and the user has no way to change it.

Anatomy

The count and the button

On the left, the item count is a Text that says how many items are saved, such as "4 saved bookmarks". It follows the filter in use, and reads "2 saved locations" when the list shows only places. On the right, the sort button is a small Button with an icon and a label that always match the sort applied to the list, Newest, Oldest, A to Z or Z to A.

Spacing

The bar follows the gutter of the app. It has 1G of padding above and on the sides on phones and tablets, no padding on the sides on computers, and 1G between the count and the button. Below, the bar has 1G of padding only when it has a background of its own. Without a background, the bar adds no space below the button.

Properties

Background and colors

The bar can have a background of its own. By default it is transparent, and the background of the app shows through. The back office sets the color of the count, the color of the sort button and of its text, and, for the menu, its background and the color of its items.

Layout

Placement

The Sorting Bar belongs to the Favorites section. It sits under the Filter Bar of the section, when there is one, and above the list, whatever its layout. When the list is empty, the bar is not displayed.

Behavior

The sort menu

A tap on the button opens the sort menu right under it, aligned with it. The menu lists four orders, Most recently added, Least recently added, A to Z and Z to A, with a check on the one in use. Its items are written in the system font in 14px and follow the gutter, with 1G of padding on the sides, ½G above and below each item, ½G between the check and the label, and 4px between two items. The menu follows the Shape of the app.

Remembering the choice

The default order is set in the back office and is the same for every type of content. When the user picks another order, the app keeps it for that filter, from one session to the next.