[Login and Lock screens] Improve UI elements' contrast a bit
ClosedPublic

Authored by ngraham on Nov 14 2018, 3:41 PM.

Details

Summary

As requested in D16031, tweak the login and lock screens in only fairly non-controversial ways:

  • Add a dark background behind the user avatar and a shadow behind the username
  • Tweak the clock shadow to make it a tiny bit stronger
  • Reduce clock shadow redundancy by moving it into the Clock item and out of the clients
  • Don't use hardcoded shadow colors anymore

With the existing UI, these are very subtle changes that should barely be visible.

This diff does NOT include the following changes from D16031:

  • Blur-less login screen
  • New icons for the buttons
  • Horizontal bar on the bottom to hold the buttons for the virtual keyboard, session chooser, and battery status
Test Plan

Login screen:

Lock screen:

Diff Detail

Repository
R120 Plasma Workspace
Branch
lock-and-login-screen-contrast-tweaks (branched from master)
Lint
No Linters Available
Unit
No Unit Test Coverage
Build Status
Buildable 5453
Build 5471: arc lint + arc unit
ngraham created this revision.Nov 14 2018, 3:41 PM
Restricted Application added a project: Plasma. · View Herald TranscriptNov 14 2018, 3:41 PM
Restricted Application added a subscriber: plasma-devel. · View Herald Transcript
ngraham requested review of this revision.Nov 14 2018, 3:41 PM
rooty added a subscriber: rooty.EditedNov 14 2018, 4:19 PM

nice! i've been tinkering with this some more over the past few days (it's been driving me a little nuts), and i've been using "spread: 0.1" on the clock shadow while keeping "spread: 0.35" on the username and action button shadows
i've been doing this because "0.35" provides a strong outline that seems to make the lettering stick out on a very bright/white/lit up background, which is perfect for the username/action buttons but might be a little too much for the clock to handle

nate/guys, what do you think?

with the clock shadow set to "spread: 0.35" (slightly rough around the edges... so to speak :D)
with the clock shadow set to "spread: 0.1" (too weak? above 0.1 the kinks/bends in the typeface get slightly distorted by the drop shadows, as in the 0.35 screenshot)
this is with spread set to 0.2 (the original setting)

verticalOffset: 2 makes spread: 0.1 look really nice on the clock

IMHO spread 0.1 doesn't provide enough contrast against the toughest backgrounds:

ngraham updated this revision to Diff 45833.Nov 19 2018, 8:15 PM
ngraham edited the test plan for this revision. (Show Details)

Tweak shadows

ngraham edited the summary of this revision. (Show Details)Nov 19 2018, 8:17 PM
ngraham edited the test plan for this revision. (Show Details)
ngraham updated this revision to Diff 45962.Nov 21 2018, 5:37 PM
ngraham edited the test plan for this revision. (Show Details)

Slightly reduce shadow strength

ngraham edited the test plan for this revision. (Show Details)Nov 21 2018, 5:40 PM
rooty added a comment.Nov 21 2018, 6:09 PM

IMHO spread 0.1 doesn't provide enough contrast against the toughest backgrounds:

ouch you're right that is bad

mart added a subscriber: mart.Nov 23 2018, 1:57 PM
mart added inline comments.
lookandfeel/contents/components/ActionButton.qml
41–49

those and the stronger shadows to the clock seems unrelated, as on this contrast is doing by darkening the background and not adding unneeded shadows.
this seems more the unrelated change to the login screen to not have the blurred background?

@mart This was all specifically requested by @davidedmundson in D16031, unless I misunderstood the request.

@davidedmundson, can you clarify whether or not that is what you wanted?

Two really minor comments, but in general all seems good from my POV.
+1

sddm-theme/Clock.qml
47

The mockup didn't change!

Just drop the comment.

50

why?

The fact that it's in just one of two labels makes it weirder.

ngraham added inline comments.Nov 27 2018, 11:46 PM
lookandfeel/contents/components/ActionButton.qml
41–49

The stronger clock shadows do show up on the login screen since before the UI shows up, you see the clock with its shadow.

I can move the button shadow change to the other patch though.

sddm-theme/Clock.qml
50

This was copied from the lookandfeel clock (the two had drifted out of sync). I can remove it from both places.

ngraham updated this revision to Diff 46364.Nov 28 2018, 12:05 AM

Harmonize the clocks

ngraham updated this revision to Diff 46365.Nov 28 2018, 12:07 AM

Revert unnecessary ActionButton shadows (will move into the other patch)

ngraham edited the summary of this revision. (Show Details)Nov 28 2018, 12:08 AM
ngraham marked 3 inline comments as done.

Thanks @davidedmundson. @mart, is this okay now?

davidedmundson accepted this revision.Nov 29 2018, 1:50 PM
This revision is now accepted and ready to land.Nov 29 2018, 1:50 PM
This revision was automatically updated to reflect the committed changes.