Improve the visuals of tray popups
Open, NormalPublic

Tokens
"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:


Redesign mockups

Media playback
4x

1x

Calendar (done) different images so the 4x one doesn't make your pc explode
light:
4x

1x

dark:
4x
1x

Status and notifications (done, just forgot to change this text)
4x

1x

Battery and brightness (done)
4x

1x

Audio Volume (done)
4x

1x

Clipboard
4x

1x

Networks
4x

1x

Info about padding, size, etc.
4x

1x

filipf created this task.Feb 13 2019, 12:59 AM
filipf triaged this task as Normal priority.
filipf updated the task description. (Show Details)
filipf added a subscriber: abetts.Feb 13 2019, 1:03 AM

Re-posting @abetts' useful examples from another diff:

I don't have a problem with the font as much as I have a problem with the spacing for the title labels. They seem to be super close to checkboxes, other labels and controls. There should be a clear separation. Adding a heavier font to the title label helps a lot but because of its weight and the closeness with the rest of the elements, it seems crammed.

Here are some good spacing examples for title labels

https://dribbble.com/shots/5774759-Photo-Album-Application

https://dribbble.com/shots/5779939-Qwick-Platform-Sneak-Peek

https://dribbble.com/shots/5774973-Chris-Jon-Podcast

And some good typographical advise

https://medium.com/@lukejones/3-typography-tips-for-a-more-comfortable-read-fed478affa8d

Also something that I noticed yesterday is that all the clock other than the digital clock use a different calendar view with less padding.

Please use KDE infrastructure for any new content so it can be discussed appropriately.

manueljlin added a comment.EditedTue, Oct 22, 5:31 PM

Mockups now up in the description

Great stuff. I'd be interested in seeing some mockups for the Audio Volume pop-up, too. In particular, we're trying to figure out the best way to surface the "make this the default audio device" and "raise the maximum volume level" features. Currently the former is in the form of buttons with icons and text which some have complained about. And the latter is exposed in two different places (the config window and hamburger menu) and each implementation interferes with the other.

I wonder if maybe we should have a checkbox at the bottom of the window saying "Raise maximum volume" similar to how you have a checkbox on the bottom for the Power applet.

fito added a subscriber: fito.Fri, Oct 25, 3:17 PM
manueljlin added a comment.EditedSun, Oct 27, 2:08 PM

Edit: audio volume now on main post

Audio volume

I love it!!!!

That's totally awesome IMO. I love the way you re-used the color hierarchy that we use in apps (darker window bg color + view bg color). Could we have mockups made in that style for all the other tray popups you already did?

On a related note, is it possible to also make the header/title font size smaller, matching the other text close to buttons? Right now, pretty much all the headers across Plasma/Breeze look very overbearing due to how big they are. It's like they want you to look at them more than the contents of the window.

manueljlin added a comment.EditedMon, Oct 28, 6:54 AM

the font size was already quite reduced, and if you compare it to the size of the ones right now (make it 4x smaller and put them side by side or go to the figma link and set it to 115%) it's pretty noticeable. Also, kirigami consistency

Left (this design) Right (old design, ignore the theme)

Left (this design) Right (old design, ignore the theme)

In this simple case you would not have any radio buttons. The radio buttons are used to switch between devices when there are multiple outputs/inputs. When there is only one output and only one input, those get used and there's no need to show radio buttons.

That's totally awesome IMO. I love the way you re-used the color hierarchy that we use in apps (darker window bg color + view bg color). Could we have mockups made in that style for all the other tray popups you already did?

Oh, I missed this reply, yeah I'll do it when I can

Very nice.

BTW you can edit the description of the task itself to add and update the currently approved/latest version of the mockups there. That way they won't get buried in the discussion.

manueljlin added a comment.EditedFri, Nov 1, 9:50 PM

On a related note, is it possible to also make the header/title font size smaller, matching the other text close to buttons? Right now, pretty much all the headers across Plasma/Breeze look very overbearing due to how big they are. It's like they want you to look at them more than the contents of the window.

Tweaked audio volume, battery and brightness, status and notifications. See if you like it more now.

Tweaked audio volume, battery and brightness, status and notifications. See if you like it more now.

Where are the tweaked versions? Can you put the latest versions in the top-level description for the task itself, not in a comment? Thanks!

The latest versions are there, the ones that have the 4x and 1x exports

The only image in the Description section of this task is this:

.

Please add the latest mockups there.

manueljlin updated the task description. (Show Details)Sat, Nov 2, 4:32 PM

Oh sorry, I'm new to this phab stuff hahaha

manueljlin updated the task description. (Show Details)Sun, Nov 3, 11:48 AM
manueljlin updated the task description. (Show Details)Sun, Nov 3, 11:51 AM
manueljlin updated the task description. (Show Details)Sun, Nov 3, 12:13 PM
manueljlin updated the task description. (Show Details)Sun, Nov 3, 12:50 PM
GB_2 awarded a token.Sun, Nov 3, 1:02 PM
manueljlin updated the task description. (Show Details)Sun, Nov 3, 1:10 PM

sorry for spamming updates

mthw added a subscriber: mthw.Sun, Nov 3, 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)Sun, Nov 3, 5:38 PM
PopeRigby added a subscriber: PopeRigby.
manueljlin updated the task description. (Show Details)Mon, Nov 4, 11:28 AM
pedrogomes1698 added a subscriber: pedrogomes1698.EditedMon, Nov 4, 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.EditedMon, Nov 4, 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.Mon, Nov 4, 2:50 PM
manueljlin updated the task description. (Show Details)Mon, Nov 4, 4:22 PM
manueljlin updated the task description. (Show Details)Sat, Nov 9, 7:10 PM
manueljlin updated the task description. (Show Details)Wed, Nov 13, 10:02 PM