Graphics API

From OLPC
Jump to navigation Jump to search

Colors

Black
palettes, popups
Toolbar Grey #262626
toolbars, expanded palette
Button Grey #808080
buttons
Selection Grey #A6A6A6
selection, expanded panels
Panel Grey #C0C0C0
panel, desktop
Text field Grey #E5E5E5
text field background
White
pressed states and multiline text areas

States

Default
gtk.STATE_NORMAL
Focused
gtk.STATE_SELECTED
Pressed
gtk.STATE_ACTIVE
Hover
gtk.STATE_PRELIGHT
Inactive
gtk.STATE_INSENSITIVE


Button

gtk.Button

  • The image should work the same of the image button
  • Need to write a theme to match the visual style
  • Cancel should never be default because you can always activate it with Esc
  • Radius should be 1/2 of the control height
  • Write a list of stock icons people should use and replace them in the theme to match our visual style

Icon

sugar.graphics.Icon

  • Used in canvas-like views so probably an Hippo item.
  • Svg Only.
  • It should support xo colors easily.
  • Rollovers with a focus mark.

IconButton

sugar.graphics.IconButton

  • Support for SVG and png.
  • Icons should be grey scale. But might be coloured with the XO colors (svg only)
  • Size of the button is 75 pixels, size of the icon canvas is 55 and suggested icon size is around 45.
  • States, defaults:
   Hover : Black
   Pressed : Rounded rectangle 61 pixels, 10 pixels of radius, filled in selection grey
   Focused : Rounded rectangle 61 pixels, 10 pixels of radius, stroked in white 2.25 points
   Inactive. Fallbacks if no inactive icon is specified.
       Svg: Remove the fill and render the stroke in button grey
       Png: just do some effect on the pixbuf, which also work for grey icons
  • You can set an icon for each states which replace the default except for the Hover state of buttons which has rollover.
  • "palette" boolean property. If true show an arrow active immediately on click (but also on hover)

ToolButton

sugar.graphics.ToolButton

  • Support for rollovers
  • Contains IconButton
  • There is no palette but a tooltip.
  • Normal: Button grey rounded filled rectangle
  • Inactive: Button grey rounded stroked rectangle

ToggleIconButton

sugar.graphics.ToggleIconButton

  • Toggled should be like Pressed
  • Inconsistent should be the same of Default (the action depend on the cases)
  • Pressed state and Toggled state is Selection grey

ToolIconButton

sugar.graphics.ToolIconButton

  • Contains a ToggleIconButton

CheckButton

gtk.CheckButton

  • Match the visual design, should be possible with just theme changes