Page MenuHomePhabricator

UI: Create specifications for sticky notification bar
Closed, ResolvedPublic

Description


Version: unspecified
Severity: normal
Whiteboard: u=dev c=frontend p=5 s=2014-11-11

Details

Reference
bz72614

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 3:56 AM
bzimport set Reference to bz72614.
bzimport added a subscriber: Unknown Object (MLST).

Specifications how sticky notification should work with the current UI. Can be extended by some mockups.

Technical specification

Intention:
The notification bar is supposed to display "section-wide" notifications. At the moment, these may be the copyright information and error messages. Later on, the notification system may also be used "globally", e.g. in the scope of the entityview informing about why editing the entity is blocked or more locally (for example, for displaying errors right next to the individual input causing the error).

Behaviour:
The notification bar wipes out below and attaches to the section header row inheriting any stickyness of the header row. The bar stretches across the width of the header row and acquires the height necessary to fully display its content. For a smooth integration, it is vital to not hide components the user may just have interacted with. Consequently, the section needs to be shifted by the height of the notification bar when the bar gets displayed or hidden.
Whenever the height of the bar is changed (for example, by unfolding initially hidden content within the bar), the section needs to be shifted accordingly.
The way to close/hide the bar should be standardized by using some "close" icon ("x"). If the notification bar features some interactive content, the "close" icon represents cancelling.

Integration:
The notification bar is wiped out programmatically, e.g. when starting a section's edit mode or when an error occurs while trying to save a section's content. The bar may be dismissed programmatically (e.g. an error is resolved or the edit mode is closed) or by direct user interaction (e.g. hitting the "close" button or as a result of an interaction with the bar's content).

Created attachment 17147
Basic technical concept visualization

Attached:

Sticky_Notification_Bar.png (368×625 px, 22 KB)