[Notes] Fix icons being almost invisible with light backgrounds when using dark themes
ClosedPublic

Authored by filipf on May 4 2019, 8:59 PM.

Details

Summary

Old code had no way to adapt icon colors based on background so this patch uses different components to color the icons black with light backgrounds, and white with dark backgrounds.

Because Plasma Components 2.0 ToolButton doesn't support icon colors and because with 3.0 the code doesn't work, we have to port the affected buttons to QQC2 ToolButton.

BUG: 353819
FIXED-IN: 5.17

Test Plan

Before:

After:

NOTE: The buttons stay highlighted after being pressed, but I'm trying to solve that in D21026

Diff Detail

Repository
R114 Plasma Addons
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.
filipf created this revision.May 4 2019, 8:59 PM
Restricted Application added a project: Plasma. · View Herald TranscriptMay 4 2019, 8:59 PM
Restricted Application added a subscriber: plasma-devel. · View Herald Transcript
filipf requested review of this revision.May 4 2019, 8:59 PM
filipf edited the test plan for this revision. (Show Details)May 4 2019, 9:02 PM
filipf added reviewers: Plasma, VDG, ngraham.
filipf edited the test plan for this revision. (Show Details)May 4 2019, 9:04 PM

Plasma has this "ColorScope" thing. Does this work as a solution? Will fix the frame

filipf added a comment.May 4 2019, 9:12 PM

Plasma has this "ColorScope" thing. Does this work as a solution? Will fix the frame

Seems like that could be one of the solutions: https://bugs.kde.org/show_bug.cgi?id=353819#c2

But might also be less precise; the icon color values are grabbed from textColor so this way we know they'll match text color.

filipf updated this revision to Diff 57577.May 4 2019, 9:36 PM

move accessibleName into tooltip and refer to the tooltip's text

filipf updated this revision to Diff 57578.May 4 2019, 9:43 PM

move accessibleName back into ToolButton, but still refer to the Tooltip's text

I don't like hardcoding the things we're comparing against. If we ever add more colors besides "black" or "translucent-light", or of the actual color values of those change (unlikely, but possible), all these buttons will need their code to be adjusted and that'll be easy to forget. I feel like we should be programmatically sampling the background color itself.

Also, if you're ever tempted to duplicate the same logic several times, that's a sure sign it should be in a function. Then each button can just call that function.

Finally porting from PlasmaComponents to QQC2 seems unrelated (or at least the relationship isn't clear from the description). Maybe we should first do that separately.

filipf added a subscriber: broulik.May 5 2019, 7:35 AM

I get what you're saying but that's just how the applet is designed. It's preconfigured SVG backgrounds (you can find them in /usr/share/plasma/desktoptheme/default/widgets/notes.svgz). I'm not really introducing any hardcoding that isn't already there. See the hardcoding of text color:

style: PlasmaStyle.TextAreaStyle {
    //this is deliberately _NOT_ the theme color as we are over a known bright background
    //an unknown colour over a known colour is a bad move as you end up with white on yellow
    textColor: (plasmoid.configuration.color === "black" || plasmoid.configuration.color === "translucent-light") ? "#dfdfdf" : "#202020"
}

So one thing is if we'd want to rewrite the whole thing to be a rectangle and then you could select a huge amount of colors as the background I guess, as well as have a spinbox for opacity. Also tagging @broulik as he might know better why it's not like that in the first place.

The other thing about components is that Plasma Components doesn't support icon.color. I'd have kept using it, but PC2 spews out an error, while with PC3 it didn't complain but didn't work anyway.

I get what you're saying but that's just how the applet is designed. It's preconfigured SVG backgrounds (you can find them in /usr/share/plasma/desktoptheme/default/widgets/notes.svgz). I'm not really introducing any hardcoding that isn't already there. See the hardcoding of text color:

style: PlasmaStyle.TextAreaStyle {
    //this is deliberately _NOT_ the theme color as we are over a known bright background
    //an unknown colour over a known colour is a bad move as you end up with white on yellow
    textColor: (plasmoid.configuration.color === "black" || plasmoid.configuration.color === "translucent-light") ? "#dfdfdf" : "#202020"
}

So one thing is if we'd want to rewrite the whole thing to be a rectangle and then you could select a huge amount of colors as the background I guess, as well as have a spinbox for opacity. Also tagging @broulik as he might know better why it's not like that in the first place.

Gotcha. At least use a function instead of duplicating the same code in each button.

The other thing about components is that Plasma Components doesn't support icon.color. I'd have kept using it, but PC2 spews out an error, while with PC3 it didn't complain but didn't work anyway.

OK, that makes sense. Can you make it a bit more clear in the Description?

filipf planned changes to this revision.May 5 2019, 6:58 PM

Gotcha. At least use a function instead of duplicating the same code in each button.

Ah yeah, rereading your original comment I now see that bit went over my head, that would be much better so I will make those changes.

The other thing about components is that Plasma Components doesn't support icon.color. I'd have kept using it, but PC2 spews out an error, while with PC3 it didn't complain but didn't work anyway.

OK, that makes sense. Can you make it a bit more clear in the Description?

Yep!

filipf edited the summary of this revision. (Show Details)May 5 2019, 7:00 PM
filipf updated this revision to Diff 57775.May 8 2019, 8:15 PM

write a function for text and icon colors so as to not duplicate code everywhere

filipf updated this revision to Diff 57776.May 8 2019, 8:16 PM

remove some hack I was working on for scrollbar color

ngraham added inline comments.May 8 2019, 8:45 PM
applets/notes/package/contents/ui/main.qml
60

Add a space between the slashes and the text. Also since each line is a sentence here, some punctuation might make that more clear!

filipf updated this revision to Diff 57785.May 8 2019, 8:55 PM
  • add space after comment slashes
  • add punctuation in the comments for the added function
filipf marked an inline comment as done.May 8 2019, 8:55 PM
ngraham accepted this revision.May 8 2019, 8:56 PM
This revision is now accepted and ready to land.May 8 2019, 8:56 PM
davidedmundson accepted this revision.May 8 2019, 9:02 PM
broulik added inline comments.May 9 2019, 6:53 PM
applets/notes/package/contents/ui/main.qml
63

Make that

readonly property color textIconColor: {
    if (plasmoid....) {
        ...
    }
    ...
}
261–265

Not too happy of using desktop buttons here instead of plasma components but custom color stuff doesn't work in Plasma.
However, given it's a tool button and this solves a genuine usability problem I think this is fine.

Can you make the button follow the size of a normal Plasma ToolButton or the units.iconSizes or something at least? They are a bit tiny here because they rely on Qt scaling which Plasma doesn't do

filipf added inline comments.May 11 2019, 4:43 PM
applets/notes/package/contents/ui/main.qml
261–265

I see what you mean, they really are tiny. The problem is the button itself can be made bigger, but the icons remain the same. I tried to set icon.width and icon.height but it doesn't do anything.

I then tried patching the PC3 ToolButton and it was only a matter of replacing the PlasmaCore.IconItem with Kirigami.Icon and adding color: control.icon.color. Then we get a working icon.color property in PC3, although since it picks up on the Plasma this might happen:

Thoughts on how to proceed?

I tried to set icon.width and icon.height but it doesn't do anything.

In desktop style that should work since D20418

I tried to set icon.width and icon.height but it doesn't do anything.

In desktop style that should work since D20418

Tried it in Neon unstable as well but the icons always remained the same. Does it work for you if you modify this patch?

filipf added a comment.Jun 1 2019, 8:47 PM

@broulik I tried again in master and icon.width and icon.height aren't working for me with this patch.

filipf updated this revision to Diff 59286.Jun 6 2019, 6:55 PM
  • use readonly property instead of function
  • make icon sizes scalable
filipf marked 3 inline comments as done.

Should work fairly well now with the 2 dependencies.

filipf retitled this revision from [Notes] Fix icons being almost invisible with light backgrounds to [Notes] Fix icons being almost invisible with light backgrounds when using dark themes.Jun 6 2019, 6:58 PM
filipf edited the summary of this revision. (Show Details)Jun 7 2019, 2:46 PM
This revision was automatically updated to reflect the committed changes.