UI Framework-1: Ash Color Chooser

Ash Color Chooser

Overview

This document describes how to achieve <input type=”color”> UI in ChromeOS/Ash.

Motivation

<input type=”color”> is a new input type introduced in HTML5.  It enables users to pick a color and returns a value of #hhhhhh format.  WebKit forms team has decided to use platform’s default color picker rather than implementing a new one.  It means that we need to implement our own color picker view for ChromeOS/Ash.

First Goal

  • Implement simple color picker dialog working with <input type=”color>.
  • Implement with views, not HTML.
  • Features
    • Behave as Modal Dialog (see doc)
      • Appears in the topmost z-order
    • Pick up a color from HSV model
      • Has both a Hue bar and a Saturation-Value plane (see below mock).
    • Pick up a color from text
      • Allow copy/paste
      • Specify the color by …
        • rgb(xx ,yy, zz)
        • #RRGGBB
        • CSS well-known color name
        • … anything else?
    • Work on Chrome OS
  • first mock
    • Confirmed that the upper box isn’t necessary, since the color will be shown in the page.
  • Current screenshot:
     

Next plans (not confirmed yet)

  • Global Color Picker: Picking a color from any point on the desktop.
    • Even from other tab, window or desktop.
  • “Favorite Color” feature
    • Pick up the color easily from each user’s favorite color.
  • Works on Windows and Chrome OS
    • Currently, Windows has native OS Color PIcker Dialog. This new Color Picker will replace it.

Not Goal

  • Alpha value (transparency) support
    • HTML5 spec has not supported alpha value.

References

Input type=color spec: http://www.w3.org/TR/html-markup/input.color.html

posted on 2018-12-05 19:05  huangguanyuan  阅读(176)  评论(0编辑  收藏  举报

导航