D16968: [Folder View] improve label contrast against challenging backgrounds

[Nathaniel Graham]

This revision was automatically updated to reflect the committed changes.
Closed by commit R119:10278e79f116: [Folder View] improve label contrast 
against challenging backgrounds (authored by ngraham).

REPOSITORY
  R119 Plasma Desktop

CHANGES SINCE LAST UPDATE
  https://phabricator.kde.org/D16968?vs=46123&id=46313

REVISION DETAIL
  https://phabricator.kde.org/D16968

AFFECTED FILES
  containments/desktop/package/contents/ui/FolderItemDelegate.qml

To: ngraham, #plasma, hein, #vdg
Cc: abetts, svenmauch, matheusm, filipf, emateli, mart, plasma-devel, ragreen, 
Pitel, ZrenBot, lesliezhai, ali-mohamed, jensreuterberg, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Andres Betts]

abetts added a comment.


  Looking good guys! +1

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: abetts, svenmauch, matheusm, filipf, emateli, mart, plasma-devel, ragreen, 
Pitel, ZrenBot, lesliezhai, ali-mohamed, jensreuterberg, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Nathaniel Graham]

ngraham added a comment.


  Ah never mind, I see it now.
  
  Still, that's not connected to this patch, so let's try to keep the 
conversation on-topic. :)

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: svenmauch, matheusm, filipf, emateli, mart, plasma-devel, ragreen, Pitel, 
ZrenBot, lesliezhai, ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Nathaniel Graham]

ngraham added a comment.


  Can't reproduce with Neon dev unstable / everything from git master. Then 
again I don't really see the problem in those screenshot in the first place.

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: svenmauch, matheusm, filipf, emateli, mart, plasma-devel, ragreen, Pitel, 
ZrenBot, lesliezhai, ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Filip Fila]

filipf added a comment.


  ^ Sorry to digress, but an update: bug does not happen if icons are in rows 
at the top (when the panel is at the bottom). We probably have bug with how the 
folder view widget adjusts the dimensions of its elements when it encounters 
panels or some other elements it has to adjust itself to.

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: svenmauch, matheusm, filipf, emateli, mart, plasma-devel, ragreen, Pitel, 
ZrenBot, lesliezhai, ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Filip Fila]

filipf added a comment.


  I've been testing this solution some more and I think I'm running into either 
a QML (using Qt 5.11.2) or widget bug, can someone else test to make sure it's 
not just my setup?
  
  Basically the text and the shadows can look hazy and unsharpened at times. 
The easiest way to reproduce this seems to be by changing icon sizes, e.g. from 
Large to Small Medium:
  
  F6439715: Screenshot_20181124_192928.png 

  
  Then to trigger proper rendering, I can simply sort the icons differently:
  
  F6439717: Screenshot_20181124_192953.png 


REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: svenmauch, matheusm, filipf, emateli, mart, plasma-devel, ragreen, Pitel, 
ZrenBot, lesliezhai, ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Sven Mauch]

svenmauch added a comment.


  Looks great! Not having to avoid certain wallpapers is a big win for 
usability. :)

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: svenmauch, matheusm, filipf, emateli, mart, plasma-devel, ragreen, Pitel, 
ZrenBot, lesliezhai, ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Matheus Marinho]

matheusm added a comment.


  Much better now! +1

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: matheusm, filipf, emateli, mart, plasma-devel, ragreen, Pitel, ZrenBot, 
lesliezhai, ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Nathaniel Graham]

ngraham added a comment.


  Thanks! I like this too. Let's see if #VDG 
 and/or #plasma 
 folks agree. :)

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: filipf, emateli, mart, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, 
ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Filip Fila]

filipf added a comment.


  Looks great to me with your values! The shadows don't draw much attention and 
the labels are finally not wimpy looking in certain situations.

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: filipf, emateli, mart, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, 
ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Nathaniel Graham]

ngraham updated this revision to Diff 46123.
ngraham added a comment.


  Use a much tighter shadow that kind of looks like a tasteful outline

REPOSITORY
  R119 Plasma Desktop

CHANGES SINCE LAST UPDATE
  https://phabricator.kde.org/D16968?vs=46099&id=46123

BRANCH
  arcpatch-D16968

REVISION DETAIL
  https://phabricator.kde.org/D16968

AFFECTED FILES
  containments/desktop/package/contents/ui/FolderItemDelegate.qml

To: ngraham, #plasma, hein, #vdg
Cc: filipf, emateli, mart, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, 
ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Nathaniel Graham]

ngraham added a comment.


  Hey, that looks pretty darn good!
  
  I'll tweak the values a bit (just a bit) from what you suggested and rejigger 
this patch to use them.

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: filipf, emateli, mart, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, 
ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Filip Fila]

filipf added a comment.


  Ultimately if the blurriness can be resolved I'd recommend:
  
  horizontalOffset: 1
  verticalOffset: 1
  
  radius: 3
  samples: 7
  spread: 0.3
  
  Before:
  F6439397: Screenshot_20181124_144817a.png 

  After:
  F6439399: Screenshot_20181124_144817.png 

  After (in a darker environment):
  F6439401: Screenshot_20181124_145143.png 


REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: filipf, emateli, mart, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, 
ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Filip Fila]

filipf added a comment.


  Here's my rough estimation of what Windows does, although maybe a bit more 
subtly:
  
  horizontalOffset: 1
  verticalOffset: 1
  
  radius: 4
  samples: 9
  spread: 0.5
  
  Before:
  F6439380: Screenshot_20181124_142255.png 

  
  After:
  F6439382: Screenshot_20181124_142648.png 

  
  After (with fixed kerning):
  F6439384: Screenshot_20181124_142950.png 

  
  There's a small problem, however. Compare e.g. the sharpness of the "winamp" 
label with "Star Wars Rebellion" label. Winamp got a bit blurry for some reason.

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: filipf, emateli, mart, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, 
ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Filip Fila]

filipf added a comment.


  The icon labels should be visible enough with pretty much any wallpaper used. 
Historically in other systems there's been some cheating involved by having 
default wallpapers deliberately be darker on the left side, but you'd think we 
could come up with something better over the years :)
  
  Windows always did this right in the post XP era. I just went to check how 
they do it and it's not an outline. They have a drop shadow horizontally offset 
to the right and vertically offset to the bottom, but both not but by much 
actually. What makes it work is the strength of the shadow. It's pretty dark 
and not too blurred/smudged. They don't have a problem with this:
  
  In D16968#364753 , @mart wrote:
  
  > tough now it looks a bit too much like a blur around the letters, rather 
than a shadow
  
  
  If it's possible to mimic their solution with QML, the end result could work 
well.

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: filipf, emateli, mart, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, 
ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Nathaniel Graham]

ngraham updated this revision to Diff 46099.
ngraham added a comment.


  Make the effect a bit more subtle

REPOSITORY
  R119 Plasma Desktop

CHANGES SINCE LAST UPDATE
  https://phabricator.kde.org/D16968?vs=45707&id=46099

BRANCH
  arcpatch-D16968

REVISION DETAIL
  https://phabricator.kde.org/D16968

AFFECTED FILES
  containments/desktop/package/contents/ui/FolderItemDelegate.qml

To: ngraham, #plasma, hein, #vdg
Cc: emateli, mart, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, 
ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Nathaniel Graham]

ngraham added a comment.


  That's a great point. In fact, now that I'm looking for it, I see that 
Windows uses a black outline on the white label text for their desktop icons.
  
  Unfortunately, the QML outline effect doesn't seem to look real good, at 
least not with the very small default font size used for the label:
  
  F6438922: Screenshot_20181123_215530.png 

  
  F6438923: Screenshot_20181123_215610.png 

  
  Not sure that'll work.

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: emateli, mart, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, 
ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Emirald Mateli]

emateli added a comment.


  The classical solution to these problems is always a white text with black 
outline. Works well for both light and dark backgrounds.
  
  Some image from the internet: https://i.imgur.com/pQjoQ.png

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: emateli, mart, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, 
ali-mohamed, jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Marco Martin]

mart added a comment.


  tough now it looks a bit too much like a blur around the letters, rather than 
a shadow

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: mart, plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, ali-mohamed, 
jensreuterberg, abetts, sebas, apol

D16968: [Folder View] improve label contrast against challenging backgrounds

[Nathaniel Graham]

ngraham added a comment.


  I can understand that.
  
  However, I think it's kind of a foul to change the UI such that the label 
becomes difficult to read with a lot of wallpapers, and then say, "just choose 
a better wallpaper." This isn't very respectful of our users, who I think 
should be free to put whatever they want on their desktops without it making 
their desktop icon labels illegible.
  
  Open to suggestions.

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, ali-mohamed, 
jensreuterberg, abetts, sebas, apol, mart

D16968: [Folder View] improve label contrast against challenging backgrounds

[Eike Hein]

hein added a comment.


  Looks ugly to me. Honestly, my stance is "use a better wallpaper". There's 
only so far you can compromise theme aesthetics for other people's bad taste.

REPOSITORY
  R119 Plasma Desktop

REVISION DETAIL
  https://phabricator.kde.org/D16968

To: ngraham, #plasma, hein, #vdg
Cc: plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, ali-mohamed, 
jensreuterberg, abetts, sebas, apol, mart

D16968: [Folder View] improve label contrast against challenging backgrounds

[Nathaniel Graham]

ngraham created this revision.
ngraham added reviewers: Plasma, hein, VDG.
Herald added a project: Plasma.
Herald added a subscriber: plasma-devel.
ngraham requested review of this revision.

REVISION SUMMARY
  Currently the shadow behind Folder View items' labels is very subtle. This 
leads to poor contrast against wallpapers that are light-colored, visually 
busy, or both.
  
  This patch attempts to improve the situation by increasing the shadow 
strength.
  
  BUG: 361228
  FIXED-IN: 5.12.8

TEST PLAN
  Folder View items against very challenging wallpapers:
  
  FOlder view items against the default wallpaper

REPOSITORY
  R119 Plasma Desktop

BRANCH
  better-folder-view-label-contrast (branched from Plasma/5.12)

REVISION DETAIL
  https://phabricator.kde.org/D16968

AFFECTED FILES
  containments/desktop/package/contents/ui/FolderItemDelegate.qml

To: ngraham, #plasma, hein, #vdg
Cc: plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, ali-mohamed, 
jensreuterberg, abetts, sebas, apol, mart