captainbrosset / linear-gradient Goto Github PK

Dragging the gradient-line edges would be a good way to do this.
Maybe also dragging from the angle arc could work.

Clicking inside color stops should show a color picker.

Try entering an angle using rad, grad or turn.

Very stoked I creeped your github projects lol. This is amazing fodder for the gradient type component 👍🏻

For now the script is loaded with:
<script type="application/javascript;version=1.8" src="script.js"></script>
but that only works in Firefox.

It would be nice to be able to tab/shift-tab between color stops.
With a color stop focused, the arrow keys could be used to move the stop back and forth on the gradient line. The alt and shift modifiers could be used to move slow and fast.
Enter could add a new color stop.
Delete could remove the focused stop.
The angle should also be focusable.
It should be easy to tab through the whole app, from the input field to the angle, to the stops, back to the input field.

Right now, the tool assumes the gradient-box to be the border-box, but of course this should depend on the background-size and background-position properties.

Because it's definitely not straightforward, and correcting one edge case almost always regresses another one.

Perhaps we need a "selection" mechanism. Once a color stop is selected, pressing delete would remove it (additionally, selecting stops would be nice for keyboard support).

Clicking somewhere on the gradient-line should add a new color stop at that position.

Right now, the tool assumes the css string to only contain one gradient.

There are still some cases where the algorithm that places color stops differs from the browser implementation.

linear-gradient(red 30%, orange, yellow, black 10%) is one example.

All stops should be at 30%.

The code relies on the way the computed-style is formatted, but that unfortunately is platform-specific.
So instead of relying on the computed-style, we should tokenize and parse the css string. See https://twitter.com/mirceadesign/status/588439624961232896

Dragging a color stop along the gradient line.