#2822 NORM Untriag: Alert bar control specification

[Zarro Boogs per Child]

#2822: Alert bar control specification
--------------------+-------------------------------------------------------
 Reporter:  Eben    |       Owner:  edsiper  
     Type:  task    |      Status:  new      
 Priority:  normal  |   Milestone:  Untriaged
Component:  sugar   |     Version:           
 Keywords:          |    Verified:  0        
--------------------+-------------------------------------------------------
 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.

-- 
Ticket URL: <http://dev.laptop.org/ticket/2822>
One Laptop Per Child <http://laptop.org/>