Improve the visuals of tray popups
Closed, ResolvedPublic

Tokens
"Love" token, awarded by alexde."Love" token, awarded by ghost34."Love" token, awarded by ognarb."Love" token, awarded by pedrogomes1698."Love" token, awarded by PopeRigby."Love" token, awarded by GB_2.
Assigned To
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

Details

Differential Revisions
D29474: Add inHistory bool and hide heading on inHistory
D29315: [applets/batterymonitor] Port inhibition message to Layouts and match notifications applet
D29142: Add footer support to systray
D29137: Added plasmoidHeading to clipboard and ported to Page
D29132: [applet] Show toolbar unless Bluetooth hardware is absent
D29117: [applet] Put the toolbar in the header area
D29116: [applets/batterymonitor] Put the toolbar in the header area
D28996: Converted to page and added heading
D28467: Converted to Page with a PlasmoidHeading in the heading
D28466: Added Page element
D28576: Converted to page and added Heading
D28575: Make headings of systray and applet merge
D28211: Make Pin buttons consistently sized in System Tray and Clock pop-ups
D27695: WIP: Create a new TopArea element using widgets/toparea svg
D27444: Added plasmoid heading svg
D27903: [applet/digital-clock] Show time zones in expanded representation too
D27453: [Applet]Update toolbar's checkbox spacing
D27391: [Applet]Fix dimensions of traffic Monitor
D27393: [Applet]Fix details layout.
D27257: [Applet]Move toolbar to the bottom
D27199: [Applet]Update layout based on T10470
D27189: Created a top area based on widgets/toparea.svg
D27160: [applets/mediacontroller] Visually refresh media controller plasmoid
D27159: Moved the header to the bottom
D27144: Moved toggles to the bottom according to T10470
D27143: moved do not disturb to the bottom
D26806: [Applets/Power Manager] Update layout based on T10470
D26271: [Applet]Update layout based on T10470

Related Objects

There are a very large number of changes, so older changes are hidden. Show Older Changes

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.Jan 28 2020, 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.EditedJan 30 2020, 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.EditedJan 30 2020, 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.Jan 30 2020, 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.Jan 30 2020, 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.EditedFeb 2 2020, 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.EditedFeb 3 2020, 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.Feb 3 2020, 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.Feb 6 2020, 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.Feb 6 2020, 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.Feb 6 2020, 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.EditedFeb 9 2020, 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.Feb 15 2020, 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)Feb 19 2020, 6:13 PM
manueljlin updated the task description. (Show Details)
ngraham assigned this task to niccolove.Apr 20 2020, 2:06 PM

Assigning to @niccolove as he's the one working on it most, but we're all plugging away at this and things are looking quite good for 5.19.

ngraham closed this task as Resolved.Jun 22 2020, 9:53 PM

This is essentially done now with the applets shipped in Plasma 5.19, with the remaining tasks just being incremental polish as needed. Great work, everyone!

ngraham moved this task from Sent to dev to Done on the VDG board.Jun 22 2020, 9:53 PM
ghost61 removed a subscriber: ghost61.
mikeljohnson added a subscriber: mikeljohnson.EditedDec 22 2020, 4:24 PM

can we have a follow up task regarding list hover style? (and hover in general)

https://invent.kde.org/frameworks/plasma-framework/-/merge_requests/163