Redesign intro page
ClosedPublic

Authored by tienisto on Sep 16 2019, 8:11 AM.

Details

Reviewers
GB_2
ngraham
Group Reviewers
VDG
Commits
R124:9af5acd5aaa7: Redesign intro page
Summary

Hello guys,

the intro page of the system settings bothered me because it looks kind of outdated.
So I've desided to redesign it. Because this is my first contribution containing a little bit more than just "adding icons", there will be probably some issues with my code / design

Old:

New:

Dark Theme:

Other Language:

Update "less rounded corners":

Update "with plasma logo and without light rectangle":

Test Plan

Open systemsettings and see

Diff Detail

Repository
R124 System Settings
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.
tienisto created this revision.Sep 16 2019, 8:11 AM
Restricted Application added a project: Plasma. · View Herald TranscriptSep 16 2019, 8:11 AM
Restricted Application added a subscriber: plasma-devel. · View Herald Transcript
tienisto requested review of this revision.Sep 16 2019, 8:11 AM
tienisto retitled this revision from redesign intro page to [System Settings] redesign intro page.Sep 16 2019, 8:12 AM
tienisto edited the summary of this revision. (Show Details)
tienisto edited the summary of this revision. (Show Details)Sep 16 2019, 8:15 AM
tienisto added reviewers: GB_2, ngraham.
tienisto added a project: VDG.

What about removing the big settings icon
And make 2 row of recently used
center them vertically and horizontally
Or put some tooltips or shortcuts guided instead

mart added a subscriber: mart.Sep 16 2019, 10:29 AM
mart added inline comments.
sidebar/package/contents/ui/introPage.qml
98

add in a comment a link to https://en.wikipedia.org/wiki/Relative_luminance to explain the numbers

davidedmundson added inline comments.
sidebar/package/contents/ui/introPage.qml
65

Hardcoding sizes is generally frowned upon.

Partly because things are user-configurable, partly because if every dev hardcodes their own sizes we'll have an inconsistent mess everywhere.

This patch has quite a few. Try and see what you can get rid of

98
103

It's best to infer this from the child.

anthonyfieroni added inline comments.
sidebar/package/contents/ui/introPage.qml
60

Use i18n also only Plasma about me.

61
mart added a comment.Sep 16 2019, 11:11 AM

overall to me looks a bit less balanced, but if VDG as a whole says it's ok, i'm fine with it. however there are some small things in the code to fix

sidebar/package/contents/ui/introPage.qml
65

if it's a kirigami.heading, it should use the automatic sizes from there.
All headings having the same size across everywhere is much more important than a perfect pixel alignment on a single place
(which won't really work anyways, because we are dealing with fonts and pojn ts there)

98

right, since you are using brightness only to have a darker color, you should use Qt.darker()

tienisto updated this revision to Diff 66201.Sep 16 2019, 11:42 AM

simplify brighter background

tienisto marked 3 inline comments as done.Sep 16 2019, 11:45 AM

Thanks for your feedback. I was actually lighten the background instead of darken it :)
But still, Qt.darker/Qt.lighter is much simpler!

filipf added a subscriber: filipf.Sep 16 2019, 11:53 AM

+1 for redesigning the page a bit. What I really dislike about it right now is that there is no hover effect for the icons.

Regarding the changes here, I'm unsure about the rounded rectangle. Doesn't seem like it fits with design everywhere else.

Will comment more extensively once I test the patch though.

And yeah hardcoding should be avoided, check out the HIG pages on units.smallSpacing/units.largeSpacing and units.gridUnit.

tienisto updated this revision to Diff 66205.Sep 16 2019, 12:04 PM

less rounded corners and decrease use of hard coded numbers

tienisto marked 4 inline comments as done.EditedSep 16 2019, 12:08 PM

Okay. I am using more Kirigami units now. About "KDE Plasma" vs "Plasma" I am not sure because Plasma is less known than KDE.
Regarding the round corners, I have decreased the radius a little bit. Hope it is better now? :)

tienisto edited the summary of this revision. (Show Details)Sep 16 2019, 12:13 PM

+1, nice visual improvement. Needs a bit of code polishing first before it can land though. See inline comments:

sidebar/package/contents/ui/introPage.qml
29

Don't hardcode values here; instead use multiples of Kirigami.Units.gridUnit (or some other defined unit)

55

Comment not really necessary; it's obvious that this is a spacer

61

Just use level 1, it's big enough IMO (or make the icon next to the text smaller to compensate for the smaller text size)

GB_2 added a comment.Sep 16 2019, 4:29 PM

What about a design like this?

Always good to add the plasma logo in more Plasma places, so I do like that part.

GB_2 added a comment.Sep 16 2019, 4:41 PM

As you can see in my design, I'd not add a rectangle in the backround, it looks weird to me and less clean than before.

tienisto updated this revision to Diff 66244.Sep 16 2019, 5:21 PM

Remove light rectangle; add Plasma icon; more Kirigami units

ngraham added inline comments.Sep 16 2019, 5:24 PM
sidebar/package/contents/ui/introPage.qml
77–78

Why move this heading out of the ColumnLayout?

tienisto added a comment.EditedSep 16 2019, 5:28 PM
In D23984#532719, @GB_2 wrote:

What about a design like this?

I actually like the light rectangle more because it increase the connection between the icons. However if you think so ^^
What I don't like about your version is that there is so much empty space around the content...
The Plasma logo is a good idea tho!
Here is my new version, what do you think?

TBH I kind of liked the rectangle too.

tienisto updated this revision to Diff 66245.Sep 16 2019, 5:30 PM

move Kirigami.Heading inside ColumnLayout

ngraham added inline comments.Sep 16 2019, 5:32 PM
sidebar/package/contents/ui/introPage.qml
85–86

Why change this? Rounding generally fixes the problem of blurriness with fractional scaling due to non-integer pixels.

88

No need to add an id since nothing references it

tienisto updated this revision to Diff 66246.Sep 16 2019, 5:35 PM

use rounding again and delete unused id

tienisto edited the summary of this revision. (Show Details)Sep 16 2019, 5:36 PM
ngraham accepted this revision.Sep 16 2019, 5:37 PM

LGTM. Everyone else fine with this?

This revision is now accepted and ready to land.Sep 16 2019, 5:37 PM

What do other people think about the light rectangle around the "frequently used" icons?
Because I am in favor of this :)

GB_2 accepted this revision.Sep 16 2019, 5:57 PM
GB_2 added inline comments.Sep 16 2019, 5:59 PM
sidebar/package/contents/ui/introPage.qml
92

Maybe change to "Frequently Used", so it's a header?

tienisto updated this revision to Diff 66250.Sep 16 2019, 6:02 PM

change "Frequently used:" to "Frequently Used"

ngraham added inline comments.Sep 16 2019, 6:12 PM
sidebar/package/contents/ui/introPage.qml
28

How about Kirigami.Units.gridUnit * 3 instead?

tienisto updated this revision to Diff 66251.Sep 16 2019, 6:14 PM

use Kirigami units for vertical margin

ngraham accepted this revision.Sep 16 2019, 6:15 PM
ngraham retitled this revision from [System Settings] redesign intro page to Redesign intro page.
This revision was automatically updated to reflect the committed changes.