Ticket #2822 (closed enhancement: fixed)
Alert bar control specification
| Reported by: | Eben | Owned by: | erikos |
|---|---|---|---|
| Priority: | high | Milestone: | |
| Component: | sugar | Version: | |
| Keywords: | Cc: | marco, morgs, Eben, tomeu | |
| Action Needed: | Verified: | no | |
| Blocked By: | Blocking: |
Description
We want to add a standard control for providing in-activity alerts.
The design is going to be a black bar that runs the full width of its container, with the guiding assumption that this control will generally be placed at the top (or perhaps bottom?) of the activity content area, and be the full width of the screen.
We'll support 2 sizes: 75px and 45px tall. Their appearance and API will be similar to primary rollovers, and having the following parameters:
Size: a constant which identifies the alert as LARGE (75px) or SMALL (45px). Could be a boolean, too, I don't care.
Icon: An icon to be embedded in the left of the alert (just like a primary rollover) We should have some alert icons that they can choose from easily, but could also specify their own. The icon will be 55px or 30px (with appropriate padding) depending on alert size. It's optional.
Title text: a string identifying the title of the alert (eg. "Import error") The alert text should be limited to one line, cropped off with an ellipsis or something if it overflows. Only large alerts will display a title; it will be ignored if it is small. This too, could be optional (see message text below.)
Message text: a string describing the alert (eg. "The file appears to be corrupt") If the message text is too long, I suppose we'll have to extend the alert vertically, though we'll note in the guidelines that we strongly urge single lines of text. Obviously, the number and size of the buttons may also affect this. We could also support a large alert that leaves the title blank, thus using 2 lines for the message text instead of one.
Buttons: an array of buttons with some API for hooking them up to the appropriate handlers. The API should also support declaration of "default" and "cancel" buttons, which will automatically receive the check and cancel icons, and the default button will also have the special rendering with the bold ring around it. The buttons will be right aligned within the alert. The default button should always go at the far right, and the cancel button should be the leftmost one. They should be adjacent to the title/message text, but should be bottom aligned (15px from bottom and from right) when the alert expands vertically.
Timeout: a number of seconds to display the alert for before it goes away on its own. The timeout should only work when a default button is specified, such that the default option is the one that is "selected" when the timer runs out. The guidelines will recommend that timeouts only be used when there is a single "OK" or "dismiss" option, and never when a choice is offered. We could make that a hard requirement, if we want. This is of course an optional parameter.
Modal: a boolean parameter that determines if the alert is modal or not. I mention this as an option, really, so that we could implement both types of dialogs with one API, but use a completely different design (probably fullscreen) for modal dialogs. We should leave the door open for this but start with non-modal only for now, probably not exposing the option in the API at this point.
I'll attach some mockups when I get around to it. Let me know if anything here isn't clear.
