Graphics API

From OLPC
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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.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.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.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.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

sugar.ToolIconButton

  • Contains a ToggleIconButton

CheckButton

gtk.CheckButton

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