Use an eyedropper for color-picker icons

Authored by ngraham on Sun, Nov 3, 7:35 PM.



The current icon is a black droplet which doesn't really communicate "pick a color from
the screen", though that's what this icon is used for. Other apps use an eyedropper for
this too.

This icon is a modification of one submitted in
I've cleaned it up to pixel-align everything, use the correct margins, and do the CSS stylesheet

BUG: 403924
FIXED-IN: 5.65

Test Plan


In Kolourpaint:

Diff Detail

R266 Breeze Icons
Automatic diff as part of commit; lint not applicable.
Automatic diff as part of commit; unit tests not applicable.
ngraham created this revision.Sun, Nov 3, 7:35 PM
Restricted Application added a project: Frameworks. · View Herald TranscriptSun, Nov 3, 7:35 PM
Restricted Application added a subscriber: kde-frameworks-devel. · View Herald Transcript
ngraham requested review of this revision.Sun, Nov 3, 7:35 PM
ngraham edited the summary of this revision. (Show Details)Sun, Nov 3, 7:37 PM
ndavis added a subscriber: ndavis.Sun, Nov 3, 10:31 PM

I think it needs to be a little more Breezy. Here are 2 of my attempts with the 16px version:

In order to make the lines crisper at small sizes: used the technique described here:

For the 1st attempt, I tried to make it more like your version. The round bubble at the end was tricky. If you want me to explain exactly how I did it, I can, but it's rather lengthy. There might be a faster way that I haven't discovered.

For the 2nd attempt, I tried to make it more like what I usually see when I see eyedroppers IRL. I just made a simple 3x3 circle, put it in the top right, cut it in half from top left to bottom right and drew a diagonal box from the ends of the semicircle to the main body of the shape.

ndavis added a comment.EditedSun, Nov 3, 10:34 PM

Here's another idea:

Makes it look like it has some kind of liquid inside of it.

I dunno, the alternative you've produced looks has a really chunky and unattractive tip to me, but I like some of the other elements. I could maybe square off the little protruding wings on the side though, and make the squeezey bit on the top part more straight. I also like the liquid level inside in yours.

Like this maybe?

The chunky look works well at 16px, but I can see it sticking out at larger sizes.

These ones have pointier tips:



partially filled:

Like this maybe?

Can you show it at 16px and 4x 16px?

ndavis added a comment.Mon, Nov 4, 8:50 PM

another set

ngraham updated this revision to Diff 69471.Fri, Nov 8, 5:14 PM

Update to be a bit more Breezey and address review comments

ngraham edited the summary of this revision. (Show Details)Fri, Nov 8, 5:15 PM
ngraham edited the test plan for this revision. (Show Details)
ndavis requested changes to this revision.EditedSat, Nov 9, 1:41 AM

I still think the lines on the side of the tube need to be a bit thicker. They're almost half a pixel thick, which is not in line with what we normally do and it makes them fuzzy or light gray. 1px diagonal strokes converted to paths should look right, but you'll have to change the shape of the body a bit to fit the new sides. The tip should also be exended to fill the bottom left pixel, otherwise it's kind of blurry.

You see the difference in clarity for the sides and tip?
top: original
left: modified with pointy tip, right: modified with thicker tip


This revision now requires changes to proceed.Sat, Nov 9, 1:41 AM
ngraham updated this revision to Diff 69699.Wed, Nov 13, 7:01 PM

Thicken side lines

ngraham edited the test plan for this revision. (Show Details)Wed, Nov 13, 7:02 PM
ndavis accepted this revision.Wed, Nov 13, 9:08 PM

LGTM, but I noticed that there is a 32px monochrome icon. Should we keep using 32px monochrome icons for now? It seems like we can't make up our minds on this issue and the amount of work required to complete a move in either direction leads to us not wanting to commit to either direction.

This revision is now accepted and ready to land.Wed, Nov 13, 9:08 PM
This revision was automatically updated to reflect the committed changes.