Polish sidebar header appearance
ClosedPublic

Authored by ngraham on Mar 27 2018, 7:48 PM.

Details

Summary

Polish the category headers in response to user feedback and for aesthetic reasons.

  • Category page: Made the separator line always visible
  • Subcategory page: Removed the redundant border lines in the back button and made the separator always visible
  • Widescreen view: Made the header text bold to match other headers, and made the background gray match the search bar header that's right next to it

BUG: 392340

Test Plan

Diff Detail

Repository
R124 System Settings
Branch
polish-sidebar-header-appearance (branched from Plasma/5.12)
Lint
No Linters Available
Unit
No Unit Test Coverage
ngraham created this revision.Mar 27 2018, 7:48 PM
Restricted Application added a project: Plasma. · View Herald TranscriptMar 27 2018, 7:48 PM
Restricted Application added a subscriber: plasma-devel. · View Herald Transcript
ngraham requested review of this revision.Mar 27 2018, 7:48 PM
ngraham edited the test plan for this revision. (Show Details)Mar 27 2018, 7:52 PM
ngraham updated this revision to Diff 30753.Mar 27 2018, 7:59 PM

Also improve the widescreen case

ngraham edited the test plan for this revision. (Show Details)Mar 27 2018, 8:00 PM
ngraham added a reviewer: VDG.
ngraham edited the test plan for this revision. (Show Details)Mar 27 2018, 8:59 PM

I prefer the system settings as it currently is in 5.12, though the submenu heading could be a little bit darker.

As for the changes made, I think the person that made the main sidebar header color different from the sub-sidebar header color did so intentionally, in line with the menu heirarchy. The horizontal line you added separating the search section from the sidebar options is cool though. The back navigation as it is is pretty clear, no need to turn it into a button.

I prefer the system settings as it currently is in 5.12, though the submenu heading could be a little bit darker.

As for the changes made, I think the person that made the main sidebar header color different from the sub-sidebar header color did so intentionally, in line with the menu heirarchy.

That parson was @mart, which is why I added him as a reviewer. Previously, the light subcategory header text was visually consistent with the category headers on the main list--which were far too light due to a bug. I fixed that bug, and now the subcategory header text no longer matches with anything. It's also inconsistent with other column-based navigation headers, and is just too light in general. 30% opacity text is hard to read and doesn't make conceptual sense for a header.

The horizontal line you added separating the search section from the sidebar options is cool though.

Thanks!

The back navigation as it is is pretty clear, no need to turn it into a button.

It's not necessarily about clarity, it's about visual polish. Did you read the linked bug? It looks especially weird in HiDPI mode. If we're going to keep the present appearance, we should remove the button borders that show up on hover that are jammed up against the parent frame. But I kind of like bit big explicit button approach myself (obviously, or I wouldn't have proposed it! :-) )

Also, the subcategory header is already bold when not in widescreen mode, so the fact that it's still light in widescreen mode is likely a simple bug.

richardbowen added a comment.EditedMar 27 2018, 11:04 PM

Yea, the hover border isn't necessary. Maybe the back navigation should work like how it does with Kirigami or similar.

Yea, the hover border isn't necessary. Maybe the back navigation should work like how it does with Kirigami or similar.

A Kirigami-style small back button sacrifices the usability advantages of having the whole area clickable.

richardbowen added a comment.EditedMar 28 2018, 12:40 AM

The whole area of the Kirigami style back button is clickable. The back navigation in the sidebar I mean.

ngraham updated this revision to Diff 30794.Mar 28 2018, 1:27 PM

Use a more standards-compliant back button appearance, in response to feedback

ngraham edited the test plan for this revision. (Show Details)Mar 28 2018, 1:27 PM
abetts added a subscriber: abetts.Mar 28 2018, 2:02 PM

I am not sure that I am catching the difference between before and after. Can you please provide screenshots of that? Just for comparison.

looks sensible to me

I am not sure that I am catching the difference between before and after. Can you please provide screenshots of that? Just for comparison.

Here's how it looks right now, without this patch:

ngraham updated this revision to Diff 30797.Mar 28 2018, 2:54 PM

Use Kirigami.Units.largeSpacing instead of a hardcoded value

richardbowen added a comment.EditedMar 28 2018, 6:22 PM

The submenu heading on the gray background isn't consistent with the other main menu heading which have no border but otherwise, it looks good.

The greyborder around the submenu heading isn't consistent with the other main menu heading which have no border, and inconsistent with the Kirigami back button style but otherwise, it looks good.

Kirigami has multiple columnar navigation paradigms. The one whose visual style I'm emulating is the ToolbarApplicationHeader, which has gray toolbar-style backgrounds for the headers. System Settings previously had inconsistent approach: using the ToolbarApplicationHeader style for the main category list, but not the subcategory list. I think using the ToolbarApplicationHeader style for both looks better, and is a superior option to abandoning it for both, which presents issues for the header on the main category list given that it's always going to be scrollable.

ngraham edited the summary of this revision. (Show Details)Mar 28 2018, 7:26 PM
ngraham edited the test plan for this revision. (Show Details)
mart accepted this revision.Mar 30 2018, 11:19 AM
This revision is now accepted and ready to land.Mar 30 2018, 11:19 AM
ngraham closed this revision.Mar 30 2018, 1:04 PM