Improve the visuals of tray popups
Open, NormalPublic

Tokens
"Love" token, awarded by alexde."Love" token, awarded by KonqiDragon."Love" token, awarded by ognarb."Love" token, awarded by pedrogomes1698."Love" token, awarded by PopeRigby."Love" token, awarded by GB_2.
Assigned To
None
Authored By
filipf, Feb 13 2019

Description

Our tray popups have apparently not been touched up since Plasma 5.1.

They could use better spacing, margins and fixing of visual inconsistencies.

Copy-pasting a good analysis from u/centenary on Reddit:

For example, looking at the "Battery and Brightness" here, in my opinion, the spacing of things could use work:

  • The "Battery and Brightness" title is way closer to the left border than the top border. In my opinion, the two margins should be closer to equal, though I'm sure it looks fine to many people.
  • The "Battery and Brightness" title is closer to the left than the top, while the pin icon on the right is closer to the top than the right. It actually makes the top look a little lopsided.
  • The "Enable Power Management" toggle has almost the same spacing as the other items, making it blend in and making it less obvious that it is an interactive item. It would be easier to understand if there was some separation from the other items (e.g. if it was placed on the bottom)
  • For each item in the list, the icon associated with each item is actually closer to the left border than the item itself. Given that the icons are meant to be associated with the items and not the left border, the icons should be moved closer to the items. The spacing should at least be equal if not closer to the items than the left border.
  • The items in the list have almost the same right margin as the pin icon on the top. I think the right margin for the items in the list should be made larger to make it more obvious that those items are subcontents of the widget header.

Example of a tray popup:


Mockups with headers

1x


2x F8113213

Mockups with footers

1x


2x F7832286
svg

There are a very large number of changes, so older changes are hidden. Show Older Changes
manueljlin updated the task description. (Show Details)Nov 3 2019, 11:51 AM
manueljlin updated the task description. (Show Details)Nov 3 2019, 12:13 PM
manueljlin updated the task description. (Show Details)Nov 3 2019, 12:50 PM
GB_2 awarded a token.Nov 3 2019, 1:02 PM
manueljlin updated the task description. (Show Details)Nov 3 2019, 1:10 PM

sorry for spamming updates

mthw added a subscriber: mthw.Nov 3 2019, 4:52 PM

Those mini versions look good, surely people with low resolution like me would apreciate not having a popup cover half their screen height and most of its content empty. If you are woried about seting the size to match the content maybe we could use some kind of whitelisting only for popups that are well tested?

manueljlin updated the task description. (Show Details)Nov 3 2019, 5:38 PM
PopeRigby added a subscriber: PopeRigby.
manueljlin updated the task description. (Show Details)Nov 4 2019, 11:28 AM
pedrogomes1698 added a subscriber: pedrogomes1698.EditedNov 4 2019, 2:07 PM

Nice job making the header in the music popup consistent with the rest of them and fixing the highlights in the calendar popup.
Your concepts are really consistent with the design that Breeze should be adopting from here on out.
Really hope the actual implementations are as good as these.

manueljlin added a comment.EditedNov 4 2019, 2:26 PM

:D now I only need to fix the audio volume tabs with the dark theme and a bit of the calendar (the alt part) that still uses bold header/title text

edit: done

ognarb awarded a token.Nov 4 2019, 2:50 PM
manueljlin updated the task description. (Show Details)Nov 4 2019, 4:22 PM
manueljlin updated the task description. (Show Details)Nov 9 2019, 7:10 PM
manueljlin updated the task description. (Show Details)Nov 13 2019, 10:02 PM
manueljlin updated the task description. (Show Details)Nov 27 2019, 10:15 PM
manueljlin updated the task description. (Show Details)Dec 23 2019, 11:59 AM

Thanks @manueljlin. I'm planning to work on implementing these mockups soon, probably a bit after the new year.

ngraham moved this task from Backlog/Planned to Sent to dev on the VDG board.Dec 28 2019, 8:50 PM
gvgeo added a subscriber: gvgeo.Dec 29 2019, 7:11 AM

Will the applications tab take any change?
Currently they have a nice big icon.

The only changes would be the "[ ] Raise maximum volume" checkmark at the bottom and the different tab and header style

gvgeo added a comment.Jan 17 2020, 3:40 PM

I 'm working on battery panel.
Almost there, but need an idea what to do with the suppression messages.


The brightness icons are unreadable now (keyboard icon has a sun, on the top right corner). Better use generic brightness icons?
Anything else you can see from this picture? And yes, I know, checkbox needs more space on top.

Is that supposed to be the new design?

gvgeo added a comment.Jan 18 2020, 8:29 AM

The new layout.

About the suppresion message, I feel like it'd be better if it was out of the bottom "toolbar".but I'll check what the rest of the vdg thinks in the chat later today. And about the icon, afaik there isn't any brightness icon for that size

gvgeo added a comment.Jan 21 2020, 7:42 AM

This is what I had in mind. Can't say that I like it, but better than alternatives.


I'd put it somewhere around there, wouldn't want to go against the design we have so far and take away the title bar.

gvgeo added a comment.EditedJan 22 2020, 4:44 AM

These photos were of the applet alone. Title is part of the system tray.

The reason I put it on top, is to be visible in the scroll area.
If it goes at the bottom, will need to make it always visible. And will decrease available scroll area.
Keep in mind that suppression messages can reach 6 lines including "Your notebook is configured not to suspend when closing the lid while an external monitor is connected" message. Although, can increase applet minimum size and lower the maximum lines to 4.

Should I make the change?

I'd say it's fine that way

Yeah when you put it that way it makes sense to have it on top to avoid it getting hidden by too many options.

gvgeo added a comment.Tue, Jan 28, 5:44 PM

Network manager doesn't really fit visually with the other applets. How about slim it down too?

When clicking an available wireless, should expand to display:
Security
Signal strength
Maybe MAC?

These get reused in plasma mobile too (as far as I know) so we have to be extra careful with changes like these, especially size and click/tap targets. Also don't know about hiding stuff behind another click w10-style.

The Networks Plasmoid in particular is not going to get used in Plasma Mobile, we have a different UI for that. You can put it on you home screen in theory, but that's a use case I won't loose sleep over

gvgeo added a comment.EditedThu, Jan 30, 6:13 AM

Click area is 32 pixel, double of the updated checkboxes (photo above, has the old ones), assuming that don't get overridden.

Only 2 options displayed now. IMO they add more to visual noise, than usability.

DetailsCurrentProposed
Last usedHide if "Never Used""Never Used" is shown for most connections
SecurityHideThere is a lock in the icon
SSIDHiddenNetwork Name is from SSID(only on discovery)
SignalHidden
MACHidden

edit: update on feedback

alexde added a subscriber: alexde.EditedThu, Jan 30, 9:33 AM

Network manager doesn't really fit visually with the other applets. How about slim it down too?

I would definitely miss the "active connections" and "available connections" headers as they structured it very clearly at the first glance.

DetailsCurrentProposed
Last usedRemove"Never Used" is shown for most connections
SSIDHiddenRemoveNetwork Name is from SSID

That's true on discovery, but afterwards you can change the connection's name (not SSID) in the connection's setting's dialog and thus they can differ.

About the "last used": It kind of makes sense to display it as you have two orderings here:

  1. known connections
  2. connection strengths

If you drop the "last used" entirely, it may look like the ordering were wrong. Possibly, instead of "last used", other sections seperators could be introduced:
"Active connections", "Known connections" and "Further connections".

gvgeo added a comment.Thu, Jan 30, 8:04 PM

Something like this?
Easy to differentiate connected vs available(with a bit more space around the line) , and communicates sort order.

SSID needs to stay with the current system.
But can show 'Last used' only when need.

mthw added a comment.Thu, Jan 30, 8:31 PM

How about a subtle background behind the active connection to make it even more visible?

Something like this?

Maybe we should also please @jgrulich to give his opinion about it as it seems Jan did the previous designs (Jan's youtube video list).
The link also leads you a little bit to the history of the applet's design. :)

niccolove added a subscriber: niccolove.EditedSun, Feb 2, 4:58 PM

Based on the mock-ups, the plasmoid + panel color should switch from the grayish window-background to the whiteish view-background. Is this correct?
Opaque:

(a bit of transparency:)

Here's a basic top area:

jgrulich added a comment.EditedMon, Feb 3, 7:39 AM

Something like this?
Easy to differentiate connected vs available(with a bit more space around the line) , and communicates sort order.

SSID needs to stay with the current system.
But can show 'Last used' only when need.

I like it. I would add "Last used xxx ..." for all known connections to distinguish between available access points and configured connections. Regarding SSID, it will be used for access point which have never been used before, otherwise connection name is used, which in most cases follows the SSID, unless user changes it. I would't personally change or trim down information shown when you expand a connection. Many users are using these to get some defails (like IP address, MAC address, signal strength and also many people use the graph with download and upload. This information is hidden so it won't bother others who don't need them and those who want them, can get them quite easily.

gvgeo added a comment.Mon, Feb 3, 12:47 PM

Here's a basic top area:

Not sure about that giant pin, but that looks nice. I 'd say better, flip down and the rest of applets headers, before applying this patch (or together).
May want to keep an eye on the other system tray's patches https://phabricator.kde.org/source/plasma-workspace/browse/master/applets/systemtray/package/contents/ui/ .

Thinking about it now, what's the reason to put the checkboxes in the plasma-nm applet at the bottom? In this case they overrule what it's visible below, e.g. you turn off WiFi and all wireless networks will disappear. Similar situation is with the notification applet, where the "Do not disturb" checkbox is at the top, because it overrules what's below. It makes more sense when this is placed at the top as it has bigger effect.

ndavis added a subscriber: ndavis.Thu, Feb 6, 1:43 AM

Thinking about it now, what's the reason to put the checkboxes in the plasma-nm applet at the bottom? In this case they overrule what it's visible below, e.g. you turn off WiFi and all wireless networks will disappear. Similar situation is with the notification applet, where the "Do not disturb" checkbox is at the top, because it overrules what's below. It makes more sense when this is placed at the top as it has bigger effect.

I agree, I'm not sure it makes sense to put everything at the bottom. I think this was triggered by the idea to put some controls in the audio widget at the bottom, but that's because the top was occupied by a tab bar.

ndavis added a comment.Thu, Feb 6, 1:57 AM

On the other hand, it's worth considering that controls we want to access quickly might be worth placing on the bottom . It's a little different for panel widgets than it is for applications because panel widgets are (by default) accessed by clicking on an icon below and aren't typically used very long. I don't really have strong opinions on this matter.

I believe @ahiemstra mentioned something about adding a way to put some kinds of actions in the widget header. It might be worth considering when that would be more desirable than putting all buttons at the bottom.

gvgeo added a comment.Thu, Feb 6, 7:17 AM

My opinion on the toolbar placement:
Based on the way we naturally look content, from the top to bottom, display most used content first. The notification message, controls for volume, brightness etc.
Placing at the bottom, also splits visually the content from the controls, making it less noisy thus easier to recognize and read.
I don't see the warning messages as a problem. Keep at the top, like in D26806, otherwise won't be noticed. The only thing I would change is, the background color to match the title (background margins of the system tray, need to be removed).

Notification button, can also change it's label to "Do not disturb, until XX:XX" (btw please drop the seconds from the message).
For wifi I can add a message, "Wireless is disabled" and "Airplane mode is enabled" messages. (Almost there, still working on that, it proved to be harder than I thought. Photos were fakes)

I don't have a strong opinion on the matter, so I'll just accept what you think is better - let's remember consistency, just that.

I believe @ahiemstra mentioned something about adding a way to put some kinds of actions in the widget header. It might be worth considering when that would be more desirable than putting all buttons at the bottom.

Yeah, it was in response to a mockup from aditosan. I have the proof of concept code, if people want I can turn it into a proper patch.

Reply from the VDG group about why it's changed to a footer:

<noahdvs> I noticed a lot of patches for putting controls on the bottom going up. Are we sure this is really the right thing to do?
<manueljlin> The main reason is that the mockups have to be consistent with each other, and since the calendar and notifications popup use a footer I also had to put footers on audio volume (which solved the raise audio volume issue), battery and brightness, networks and the rest of the popups. Also, UI wise it's not too different to notifications from Android or a normal bottom navbar, plus it has more reachability for plasma mobile users and also requires less mouse travel on the desktop.

ngraham added a comment.EditedSun, Feb 9, 6:32 PM

I have something to admit: I'm starting to wonder if it's wise to move the toolbars into footers.

The more I see it implemented, the less I feel that it's a big improvement. I'm not formally against it at this point, but let me state my concerns:

  • Feels like "change for the sake of change"
  • Since we have plans to make the top of the pop-up into a Plasma-style Tools Area, it feels most natural to keep what is essentially a toolbar there rather than making it a footer
  • Nothing else has the primary tools in a footer

I can understand that putting the tools in the footer theoretically balances the visual weighting by having a header and a footer rather than a very thick header and no footer. This is especially true of the Audio applet, which has a very thick header with the titlebar, toolbar, and tab bar. But for other applets, I dunno. It just doesn't really feel necessary at all to me, and the more I look at it, the less I feel that it really works.

Does anyone else share these concerns?

I have no problem changing the footers back to headers, if you want I can make another version with these and go with them instead

Thanks for your flexibility. :)

Okay, I'm almost done with the mockups. Currently, it looks like this:



However, I have a couple of issues:

  • The brand new hotspot button does not fit if the text label "Enable wireless networks" is added. If it isn't a problem, I can revert it to icons.
  • Placement of the raise maximum volume option when there are tabs in the popup.
gvgeo added a comment.Sat, Feb 15, 8:30 AM

The network applet can also have "Enable mobile network" (icon network-mobile-on/off). All these 3 buttons are only visible when an applicable device exist.

And as long you update the mockups, the kde-connect can have many devices, and there are up to 4 buttons.

Also worth mentioning this patch.
https://invent.kde.org/kde/kdeconnect-kde/commit/36bcade705dab8922a9cd106ede15c16f27b8176

plasmoid: move plasmoid buttons into a menu 

This way we get to see what they do together with the icon.
Removes some visual clutter as well.
manueljlin updated the task description. (Show Details)Wed, Feb 19, 6:13 PM
manueljlin updated the task description. (Show Details)