Bug 399665

Summary: Breeze drawing tool tool icons need improvement
Product: [Plasma] Breeze Reporter: Jason W <mypubliclistaddress>
Component: IconsAssignee: Nate Graham <nate>
Status: RESOLVED FIXED    
Severity: normal CC: jensreu, kainz.a, nate
Priority: NOR Keywords: usability
Version: unspecified   
Target Milestone: ---   
Platform: unspecified   
OS: All   
See Also: https://bugs.kde.org/show_bug.cgi?id=403924
Latest Commit: Version Fixed In: 5.64
Sentry Crash Report:
Attachments: old icons vs new icons

Description Jason W 2018-10-11 15:10:19 UTC
Created attachment 115569 [details]
old icons vs new icons

SUMMARY
The breeze tool icons in kolourpaint are a mess to navigate


STEPS TO REPRODUCE
1. be using the breeze icon theme
2. start kolourpaint
3. try to figure out what each tool does

OBSERVED RESULT
it is much harder to tell what the tools do at a glance than it was with oxygen or crystal

EXPECTED RESULT
the icons should be better thought out

SOFTWARE VERSIONS
KDE Plasma Version:  N/A
KDE Frameworks Version: 5.50
Qt Version: 5.11.2

ADDITIONAL INFORMATION
annotated screenshot (including comparison with old icon set) attached
Comment 1 Nate Graham 2018-10-11 15:32:04 UTC
Yeah, this isn't ideal.
Comment 2 Jens Reuterberg 2018-10-12 07:17:41 UTC
I think improving the icons as is for Kolorpaint might be a good thing, removing an entire icon language (with clear and well known benefits) would be bad (for a wealth of other applications).

Perhaps check out how apps like Inkscape work with Breeze (which it does expertly) and mimic that for Kolorpaint would be a way forward? Just adding colour in this scenario would be taking the easiest path forward and instead of improving something - wrecking it. So I suggest looking at improvements for those icons - and if that is impossible - accept that we will destroy a complete icon language for one app.
Comment 3 Jens Reuterberg 2018-10-12 08:02:45 UTC
So looking around this bug using Cuttlefish there are some really easy fixes 

Textfield:
replacing the tool-text icon with the draw-text icon would fix for example the "text" symbol in Kolourpaint as it actually as a large T in it or better yet something like xml-text-new, the icon Kolourpaint uses is inherited from document editors which isn't ideal for a drawing app since there you don't really automatically assume its going to be "text" there)

To moderately complex ones

Selection Symbols:
Improving sizeing of the lassoo symbol in tool_free_form_selection with its too narrow dots that blend together. bigger dots to emphasize it COMBINED with adding dots to the selections fields in tool_elliptical_selection and select-rectangular icons would make it more clear that, yes this is selection - the dotted border is basically shorthand for it anyway so might be worth while in general.
(select-rectangular should be looked into a bit more, the added complexity with the pen is not useful in most scenarios and could be replaced with a dotted rectangle and the handles (like tool_elliptical_selection))

Polygon:
The polygon symbol is filled in, the circle, the square and the rounder corners square (which should be slightly more square in my eyes to be readable) are not making them look unrelated. Swapping the polygon one for the "connected lines one" would make them look related and make more sense over all

Connected Lines:
This needs a completely new icon, preferrably based off of "Curve" - something like lines-connector might work but with more "zigzag" to it.

'
The the damn fiddly things...

Zoom:
We need a better zoom symbol language or at least some kind of fallback for simpler applications - the current ones we have are made for professional apps and often miss the mark even if they are relevant and critical in those apps. A simple "search" symbol with a plus connected as per icon specs would fit nicely.

(this is a bigger issue as the dotted lines appear in many zoom icons which makes sense based on what apps they where made for but as those icons are often fairly wide in range they tend to be used badly and looking at replacing zoom might be worth while)

I think color selector (the drop) should stay as that is used in a lot of different apps and work as intended there. It's a skip and a jump for new users who use Kolourpaint perhaps but not that complex
Comment 4 Nate Graham 2019-10-30 18:43:27 UTC
I'll do this.
Comment 5 Nate Graham 2019-10-30 23:45:33 UTC
Tracking the eyedropper change in Bug 403924.

Will use this bug to track the rest of the necessary changes.
Comment 6 Nate Graham 2019-10-31 18:10:04 UTC
Git commit 96642fc58f98f89fbea0ea7525ca45e0e807cc6d by Nate Graham.
Committed on 31/10/2019 at 18:09.
Pushed by ngraham into branch 'master'.

Improve draw icons
- Shape-drawing icons all have a consistent filled appearance
- Selection icons all have a consistent marquee appearance
- Line-drawing icons all have a consistent point-by-point appearance
- Fixed the perspective on the draw-cuboid icon
FIXED-IN: 5.64

M  +7    -11   icons-dark/actions/16/draw-circle.svg
M  +7    -11   icons-dark/actions/16/draw-cross.svg
M  +11   -21   icons-dark/actions/16/draw-cuboid.svg
M  +7    -11   icons-dark/actions/16/draw-donut.svg
M  +9    -17   icons-dark/actions/16/draw-ellipse-arc.svg
M  +7    -15   icons-dark/actions/16/draw-ellipse-segment.svg
T  +1    -17   icons-dark/actions/16/draw-ellipse-whole.svg
M  +7    -11   icons-dark/actions/16/draw-ellipse.svg
M  +7    -11   icons-dark/actions/16/draw-halfcircle1.svg
M  +7    -11   icons-dark/actions/16/draw-halfcircle2.svg
M  +7    -11   icons-dark/actions/16/draw-halfcircle3.svg
M  +7    -11   icons-dark/actions/16/draw-halfcircle4.svg
M  +11   -11   icons-dark/actions/16/draw-polygon-star.svg
M  +7    -11   icons-dark/actions/16/draw-polygon.svg
M  +6    -11   icons-dark/actions/16/draw-polyline.svg
A  +9    -0    icons-dark/actions/16/draw-rectangle-rounded.svg
M  +7    -11   icons-dark/actions/16/draw-rectangle.svg
M  +6    -11   icons-dark/actions/16/draw-spiral.svg
M  +7    -11   icons-dark/actions/16/draw-square-inverted-corners.svg
M  +7    -11   icons-dark/actions/16/draw-star.svg
M  +7    -11   icons-dark/actions/16/draw-triangle.svg
M  +7    -11   icons-dark/actions/16/draw-triangle1.svg
M  +7    -11   icons-dark/actions/16/draw-triangle2.svg
M  +7    -11   icons-dark/actions/16/draw-triangle3.svg
M  +7    -11   icons-dark/actions/16/draw-triangle4.svg
M  +6    -11   icons-dark/actions/16/select-rectangular.svg
A  +8    -0    icons-dark/actions/16/tool_elliptical_selection.svg
A  +1    -0    icons-dark/actions/16/tool_rounded_rectangle.svg
M  +9    -14   icons-dark/actions/22/draw-circle.svg
M  +9    -14   icons-dark/actions/22/draw-cross.svg
M  +11   -27   icons-dark/actions/22/draw-cuboid.svg
M  +9    -14   icons-dark/actions/22/draw-donut.svg
M  +9    -14   icons-dark/actions/22/draw-ellipse.svg
M  +9    -14   icons-dark/actions/22/draw-halfcircle1.svg
M  +9    -14   icons-dark/actions/22/draw-halfcircle2.svg
M  +9    -14   icons-dark/actions/22/draw-halfcircle3.svg
M  +9    -14   icons-dark/actions/22/draw-halfcircle4.svg
M  +10   -14   icons-dark/actions/22/draw-polygon-star.svg
M  +9    -14   icons-dark/actions/22/draw-polygon.svg
M  +8    -14   icons-dark/actions/22/draw-polyline.svg
A  +9    -0    icons-dark/actions/22/draw-rectangle-rounded.svg
M  +9    -14   icons-dark/actions/22/draw-rectangle.svg
M  +6    -12   icons-dark/actions/22/draw-spiral.svg
M  +9    -14   icons-dark/actions/22/draw-square-inverted-corners.svg
M  +9    -14   icons-dark/actions/22/draw-star.svg
M  +9    -14   icons-dark/actions/22/draw-triangle.svg
M  +9    -14   icons-dark/actions/22/draw-triangle1.svg
M  +9    -14   icons-dark/actions/22/draw-triangle2.svg
M  +9    -14   icons-dark/actions/22/draw-triangle3.svg
M  +9    -14   icons-dark/actions/22/draw-triangle4.svg
M  +8    -14   icons-dark/actions/22/edit-select-lasso.svg
M  +6    -12   icons-dark/actions/22/select-rectangular.svg
M  +5    -13   icons-dark/actions/22/tool_elliptical_selection.svg
T  +1    -14   icons-dark/actions/22/tool_rounded_rectangle.svg
M  +7    -11   icons-dark/actions/24/draw-circle.svg
M  +7    -11   icons-dark/actions/24/draw-cross.svg
M  +11   -27   icons-dark/actions/24/draw-cuboid.svg
M  +7    -11   icons-dark/actions/24/draw-donut.svg
M  +7    -11   icons-dark/actions/24/draw-ellipse.svg
M  +8    -11   icons-dark/actions/24/draw-halfcircle1.svg
M  +7    -11   icons-dark/actions/24/draw-halfcircle2.svg
M  +7    -11   icons-dark/actions/24/draw-halfcircle3.svg
M  +7    -11   icons-dark/actions/24/draw-halfcircle4.svg
M  +8    -11   icons-dark/actions/24/draw-polygon-star.svg
M  +7    -11   icons-dark/actions/24/draw-polygon.svg
M  +6    -11   icons-dark/actions/24/draw-polyline.svg
M  +7    -11   icons-dark/actions/24/draw-rectangle.svg
M  +6    -11   icons-dark/actions/24/draw-spiral.svg
M  +7    -11   icons-dark/actions/24/draw-square-inverted-corners.svg
M  +7    -11   icons-dark/actions/24/draw-star.svg
M  +7    -11   icons-dark/actions/24/draw-triangle.svg
M  +7    -11   icons-dark/actions/24/draw-triangle1.svg
M  +7    -11   icons-dark/actions/24/draw-triangle2.svg
M  +7    -11   icons-dark/actions/24/draw-triangle3.svg
M  +7    -11   icons-dark/actions/24/draw-triangle4.svg
M  +6    -11   icons-dark/actions/24/edit-select-lasso.svg
M  +7    -11   icons/actions/16/draw-circle.svg
M  +7    -11   icons/actions/16/draw-cross.svg
M  +11   -21   icons/actions/16/draw-cuboid.svg
M  +7    -11   icons/actions/16/draw-donut.svg
M  +9    -17   icons/actions/16/draw-ellipse-arc.svg
M  +7    -15   icons/actions/16/draw-ellipse-segment.svg
T  +1    -17   icons/actions/16/draw-ellipse-whole.svg
M  +7    -11   icons/actions/16/draw-ellipse.svg
M  +7    -11   icons/actions/16/draw-halfcircle1.svg
M  +7    -11   icons/actions/16/draw-halfcircle2.svg
M  +7    -11   icons/actions/16/draw-halfcircle3.svg
M  +7    -11   icons/actions/16/draw-halfcircle4.svg
M  +11   -11   icons/actions/16/draw-polygon-star.svg
M  +7    -11   icons/actions/16/draw-polygon.svg
M  +6    -11   icons/actions/16/draw-polyline.svg
A  +9    -0    icons/actions/16/draw-rectangle-rounded.svg
M  +7    -11   icons/actions/16/draw-rectangle.svg
M  +6    -11   icons/actions/16/draw-spiral.svg
M  +7    -11   icons/actions/16/draw-square-inverted-corners.svg
M  +7    -11   icons/actions/16/draw-star.svg
M  +7    -11   icons/actions/16/draw-triangle.svg
M  +7    -11   icons/actions/16/draw-triangle1.svg
M  +7    -11   icons/actions/16/draw-triangle2.svg
M  +7    -11   icons/actions/16/draw-triangle3.svg
M  +7    -11   icons/actions/16/draw-triangle4.svg
M  +6    -11   icons/actions/16/select-rectangular.svg
A  +8    -0    icons/actions/16/tool_elliptical_selection.svg
A  +1    -0    icons/actions/16/tool_rounded_rectangle.svg
M  +9    -14   icons/actions/22/draw-circle.svg
M  +9    -14   icons/actions/22/draw-cross.svg
M  +11   -27   icons/actions/22/draw-cuboid.svg
M  +9    -14   icons/actions/22/draw-donut.svg
M  +9    -14   icons/actions/22/draw-ellipse.svg
M  +9    -14   icons/actions/22/draw-halfcircle1.svg
M  +9    -14   icons/actions/22/draw-halfcircle2.svg
M  +9    -14   icons/actions/22/draw-halfcircle3.svg
M  +9    -14   icons/actions/22/draw-halfcircle4.svg
M  +10   -14   icons/actions/22/draw-polygon-star.svg
M  +9    -14   icons/actions/22/draw-polygon.svg
M  +8    -14   icons/actions/22/draw-polyline.svg
A  +9    -0    icons/actions/22/draw-rectangle-rounded.svg
M  +9    -14   icons/actions/22/draw-rectangle.svg
M  +6    -12   icons/actions/22/draw-spiral.svg
M  +9    -14   icons/actions/22/draw-square-inverted-corners.svg
M  +9    -14   icons/actions/22/draw-star.svg
M  +9    -14   icons/actions/22/draw-triangle.svg
M  +9    -14   icons/actions/22/draw-triangle1.svg
M  +9    -14   icons/actions/22/draw-triangle2.svg
M  +9    -14   icons/actions/22/draw-triangle3.svg
M  +9    -14   icons/actions/22/draw-triangle4.svg
M  +8    -14   icons/actions/22/edit-select-lasso.svg
M  +6    -12   icons/actions/22/select-rectangular.svg
M  +5    -13   icons/actions/22/tool_elliptical_selection.svg
T  +1    -14   icons/actions/22/tool_rounded_rectangle.svg
M  +7    -11   icons/actions/24/draw-circle.svg
M  +7    -11   icons/actions/24/draw-cross.svg
M  +11   -27   icons/actions/24/draw-cuboid.svg
M  +7    -11   icons/actions/24/draw-donut.svg
M  +7    -11   icons/actions/24/draw-ellipse.svg
M  +8    -11   icons/actions/24/draw-halfcircle1.svg
M  +7    -11   icons/actions/24/draw-halfcircle2.svg
M  +7    -11   icons/actions/24/draw-halfcircle3.svg
M  +7    -11   icons/actions/24/draw-halfcircle4.svg
M  +8    -11   icons/actions/24/draw-polygon-star.svg
M  +7    -11   icons/actions/24/draw-polygon.svg
M  +6    -11   icons/actions/24/draw-polyline.svg
M  +7    -11   icons/actions/24/draw-rectangle.svg
M  +6    -11   icons/actions/24/draw-spiral.svg
M  +7    -11   icons/actions/24/draw-square-inverted-corners.svg
M  +7    -11   icons/actions/24/draw-star.svg
M  +7    -11   icons/actions/24/draw-triangle.svg
M  +7    -11   icons/actions/24/draw-triangle1.svg
M  +7    -11   icons/actions/24/draw-triangle2.svg
M  +7    -11   icons/actions/24/draw-triangle3.svg
M  +7    -11   icons/actions/24/draw-triangle4.svg
M  +6    -11   icons/actions/24/edit-select-lasso.svg

https://commits.kde.org/breeze-icons/96642fc58f98f89fbea0ea7525ca45e0e807cc6d