Bug 398742

Summary: Add opaque round background behind power-related icons in system.svgz
Product: [Plasma] plasmashell Reporter: Nate Graham <nate>
Component: Theme - BreezeAssignee: visual-design
Status: RESOLVED INTENTIONAL    
Severity: normal CC: anditosan1000, filipfila.kde, kainz.a, plasma-bugs
Priority: NOR    
Version First Reported In: master   
Target Milestone: 1.0   
Platform: Other   
OS: Linux   
See Also: https://bugs.kde.org/show_bug.cgi?id=398741
https://bugs.kde.org/show_bug.cgi?id=398743
Latest Commit: Version Fixed In:
Sentry Crash Report:
Attachments: Generally what we want
Version with a border around the opaque background circle
Circle Background
CircleBackground2

Description Nate Graham 2018-09-17 04:44:26 UTC
Created attachment 115027 [details]
Generally what we want

This bug tracks action item #1 from https://phabricator.kde.org/T9444#160267.

The problem: The Plasma Breeze theme icons used on the SDDM login screen don't have a solid background of any sort, so their contrast can be poor when put on top of certain images and colors when there is no blur. For example, a white icon on top a light-colored image can be almost invisible. Affected icons are:

- system-shutdown
- system-reboot
- system-suspend
- system-hibernate
- system-lock-screen
- system-log-out
- system-switch-user (for this icon, we would also like additional changes - see Bug 398741)

These icons live in system.svgz in the Breeze Plasma theme.

We'd like *for the large versions only* of these icons to have a solid-colored circle as their background. I am attaching an exceptionally crude before-and-after mockup of the kind of thing we're looking for

The Breeze light version should use the colors #FCFCFC for the background circle, and #232629 for the icon. The Breeze dark version should use #232629 for the background and #FCFCFC for the icon.
Comment 1 Nate Graham 2018-09-17 05:31:58 UTC
Created attachment 115028 [details]
Version with a border around the opaque background circle

Here's a proposed version that gives the opaque background circle a border. Maybe that would be better.

Note: I am not an icon designer, so if these are all terrible mockups, please feel free to interpret them in the broadest possible way and make something that actually looks good. :)
Comment 2 Andres Betts 2018-09-18 14:42:40 UTC
I can help with the circle as well
Comment 3 Andres Betts 2018-09-20 04:28:13 UTC
Created attachment 115102 [details]
Circle Background

Circle Background
Comment 4 Andres Betts 2018-09-20 04:29:15 UTC
Created attachment 115103 [details]
CircleBackground2

Circle background against different wallpapers
Comment 5 Nate Graham 2018-09-20 14:37:09 UTC
Those are not exactly opaque. :)

If we can't avoid transparency for these, I think they need to be much less transparent. The third example shows why: even with that transparent circular background, the black version is hard to see against that dark image. Try using a starfield or a snowy landscape as the image and you'll see what I mean.
Comment 6 Andres Betts 2018-09-20 14:39:35 UTC
Will do but help me understand, are we looking to not use transparency at all and turn the current icons into circular shapes? Or are we looking to make the current line art icons more visible?
Comment 7 Nate Graham 2018-09-20 15:03:28 UTC
I don't want to dictate visual styles too much since I'm not an icon designer, but the goal is to improve the icon's own visibility no matter what image is below it, and to prevent each app from having to draw its own frame or background to ensure visiblity.

This would seem to require one of the following:
- Give it a contrasting outline (black line-art, white outline or shadow, etc)
- Put the whole thing on a contrasting background (black line-art, white background, etc)
Comment 8 Andres Betts 2018-09-20 15:05:34 UTC
I see what you mean. One reason I included a transparent background was because of that. However, I get your point that it is not as defined. I will try a different effect and post it here.
Comment 9 andreas 2018-09-20 15:24:27 UTC
isn't is possible to add the text effect to the icons.

on desktop in kde4 there was a opaque rectangular at the text in plasma 5 there was an text effect (outline effect, I don't know) which guaranty that you can ready the filename on the desktop and it doesn't matter which background.
Comment 10 andreas 2018-09-20 15:25:28 UTC
when the text effect isn't possible I would test to make an outline of the power-icons.
Comment 11 Nate Graham 2018-09-20 15:30:59 UTC
I think a contrasting outline would be fine. However I think this would need to be done in the icon itself; we don't want every single user of these icons to be required to add their own contrasting element to ensure visibility.
Comment 12 Andres Betts 2018-09-20 15:32:15 UTC
They wouldn't have to if this is only for the icons in the lock screen. The addition is only so that the icons there are more visible. The rest of the icon set can remain the same IMHO.
Comment 13 Nate Graham 2018-09-20 15:35:13 UTC
(In reply to Andres Betts from comment #12)
> They wouldn't have to if this is only for the icons in the lock screen. The
> addition is only so that the icons there are more visible. The rest of the
> icon set can remain the same IMHO.

*Login screen, not lock screen. The lock screen has blur, so visibility is assured.

But we can also have the same issue on the logout screen where these icons are also present.
Comment 14 Andres Betts 2018-09-20 15:38:01 UTC
Sorry, I keep forgetting about where the icons are located. In the login screen, since we don't have blur, we can turn the background of these icons, the circle we are working on, into a blurred background. If we want to keep consistency, we can apply the same effect on the icons in the lock screen. Stay put and I can send you more iterations.
Comment 15 Nate Graham 2018-09-20 15:40:12 UTC
We currently do have blur on the Login screen, but nobody likes it since it obscures the pretty picture used as a background. This proposal is to allow us to *remove* the login screen blur without impact usability.
Comment 16 Filip Fila 2019-03-09 20:21:57 UTC
We've moved away from this idea and implemented QML circles instead.