Bug 257094

Summary: Gradient editor UI is cumbersome for editing simple gradients
Product: [Applications] krita Reporter: elbarto
Component: UsabilityAssignee: Krita Bugs <krita-bugs-null>
Status: RESOLVED FIXED    
Severity: wishlist CC: halla, pentalis, valerie_vk
Priority: NOR    
Version First Reported In: 2.2   
Target Milestone: ---   
Platform: Unlisted Binaries   
OS: Linux   
Latest Commit: Version Fixed/Implemented In:
Sentry Crash Report:

Description elbarto 2010-11-16 21:48:24 UTC
Version:           2.2 (using KDE 4.5.2) 
OS:                Linux

The gradient editor is difficult to use for editing a simple two-segment gradient and could be made a lot easier to work with, without sacrificing functionality.  Here is what I suggest:

* At the moment, the actual gradient being displayed appears smaller than the segment indicators below it.  It should be significantly larger, so you can get a better picture of what the gradient looks like.

* The segment context menu that pops up when you right-click on a segment relates to the currently selected segment instead of the segment under the mouse cursor.  The context menu should relate to the segment under the cursor.

* You should be able to select endpoints as well as segments.  When an endpoint is selected, you should be able to set a single color for that endpoint, which would set the color for that endpoint on both of the segments it connects to.  As things currently stand, if you want a smooth gradient, you have to select each segment separately and set the same color twice.

* Double-clicking on an endpoint should pop up a color selection box that sets the color for that endpoint (as above)

* Double-clicking on a segment should split that segment at the point where you double clicked, then pop up a color selection box for the newly created endpoint.

* Right clicking on an endpoint should give you a context menu for that endpoint, which will allow you to set the color for that point on both segments, for either the left or the right segment, or to delete the endpoint and merge the adjoining segments.

* There should be a Gradients docker, as this would be consistent with having a docker to select brush color.  Also (and this isn't particularly related), the settings -> dockers menu could probably stand to be alphabetized. :)

Doing the above won't reduce the features already available in the gradient editor, but will make it a lot more accessible for users who want to quickly create a typical, continuous gradient.

Reproducible: Always


Actual Results:  
If I want to create a simple, 2-segment gradient, this is the process that I go through with the current interface:

* Create a custom gradient
* Click on the Left color box
* Select a color
* Click on the Right color box
* Select a color
* Right click the segment
* Select "split segment" from the context menu
* Left click the left segment
* Click the Right color box
* Select a color
* Copy the HTML from the color to my clipboard before closing the dialog
* Left click on the right segment
* Click the Left color box
* Paste the color into the HTML color box

(note that this behavior is the same in 2.3b2)


Expected Results:  
Here's what it should be:

* Create a custom gradient
* Double click the left endpoint
* Select a color
* Double click the right endpoint
* Select a color
* Double click the middle of the segment (which splits the segment and opens the color dialog box)
* Select a color (which applies the color to the left end of the right segment, and the right end of the left segment)

Note that the number of steps has been cut in half, with the same result.

If you want to get really crazy and replace the current interface instead of refining it, I built a javascript web-based gradient editor that's really quick to use and might be a good thing to model one on.  You can find it here:

http://oga2.opengameart.org/gradient/ (click on the gradient to add an endpoint, and select an endpoint by clicking on the corresponding slider.  You can adjust the color and delete it with single clicks.)

Note that my editor doesn't have feature parity with Krita's, but one thing I like about it is that the color selector is already in the editor, so when you select an endpoint, you can immediately change the color without making any additional clicks.  This speeds the workflow way up.  Support for different color spaces, different curves (linerar, etc), and endpoints with two colors would need to be worked into the design.  That being said, I *wish* there were an application out there with a gradient editor like mine. :)
Comment 1 Sven Langkamp 2011-07-20 23:47:47 UTC
*** Bug 273895 has been marked as a duplicate of this bug. ***
Comment 2 Halla Rempt 2012-02-29 12:39:55 UTC
Our gradient editor (and pattern editor...) is horribly unmaintained...
Comment 3 valerievk 2013-03-15 15:52:33 UTC
http://oga2.opengameart.org/gradient/ was a very interesting link. I made two mock-ups based on it:

Vertical version: http://i50.tinypic.com/kf3635.jpg
Horizontal version: http://i48.tinypic.com/2nkkww0.jpg

Although I'm more used to the horizontal version, after trying http://oga2.opengameart.org/gradient/  I think I like the vertical gradient version better. Compared to it, my proposals add several things:
- Opacity slider
- Multiple choices for color pickers (I arbitrarily used the ones in Inkscape, it can be a different list)
- Smaller arrows to control color transition speed. I'm guessing they appear automatically in the middle of the segment, and maintain the proportional distance between the two nodes when you move one of the nodes. What happens when you drag a node past several though? I'm not sure, they could get reset to the center of the new segments?
- Those two other drop-downs in the current gradient editor (transition mode and RGB/whatever)
Comment 4 Halla Rempt 2016-01-24 12:13:59 UTC
WISHGROUP: Stretchgoal


But not accepted in 2015.
Comment 5 Halla Rempt 2017-11-08 10:48:35 UTC
Sven implemented this in 2016. Clicking in the gradient now simply creates a new segment.
Comment 6 Halla Rempt 2017-11-08 10:48:52 UTC
Sven implemented this in 2016. Clicking in the gradient now simply creates a new segment.