-
Notifications
You must be signed in to change notification settings - Fork 74
Feature Spec UI: Color Picker
-
If the color picker is open and the layer selection is changed via the canvas or layers panel, the color picker should remain open. Any change in layer selection should be reflected in the color picker inputs -- color swatch, rgba value, gradient color circle position, RGB value, HSB value, opacity value, and vertical color picker circle position.
-
If the color picker is closed and the layer selection changes, the color picker should remain closed and only the swatch should update color to the color of the currently selected layer.
-
If there is no layer selected at all, the color picker should close and disappear.
-
If the user changes the position of the circle on the gradient color picker or the vertical color picker, the corresponding property on the currently selected layer should update. e.g. If a rectangle layer is selected, if fill color picker is opened, and if the user changes the circle position on the gradient color picker from green to red, the fill of the rectangle should update from green to red.
-
If a shape layer has its fill or stroke toggled off, and a new color is picked via the color picker, the fill or stroke should update to the newly chosen color and the corresponding property should be toggled on to show the updated color selection.
-
If the color picker is open and no field has focus, hitting "Esc" will close the color picker but retain focus (blue highlight; Tab will tab to next attribute, Enter will re-open the color picker).
-
When any input field in the color picker is changed, "Enter" commits the value and updates the color value in all fields of the color picker in order to reflect the new rgba value.
-
When the color picker is open, "Tab" should tab through all the inputs in the picker in this order -- rgba, R, G, B, H, S, B, Opacity, and then back to rgba.
-
Arrow up/down will cycle through color modes (rgb(0,0,0), #000000, black, etc).
-
Clicking outside of the color picker when it is open should close it.
-
When a color swatch is clicked, the color picker dialog should open.
-
When the circle is moved around the color gradient map, the rgba, RBG, HSB, and color swatch all update with the it in real time. The final position of the circle is where all the other values should settle too. The circle on the vertical color slider should not move.
-
When the circle is moved around on the vertical color slider, the color swatch, rgba value, RGB, HSB, should all update in real time. The final position of the circle is where all the other values should settle too. The gradient color map should reflect the hue on which the circle in the vertical slider is on, but the circle on the gradient map should not move.
-
When the circle is moved on the opacity slider, the color swatch, the last value in the rgba set of numbers, and the opacity input should all change with it.
-
When the color picker is opened, the rgba input at the top of the picker should be highlighted.