[InlineMessage] Do not draw shadows around the message
ClosedPublic

Authored by filipf on Feb 15 2019, 5:07 PM.

Details

Summary

This patch removes InlineMessage's DropShadow for the following reasons:

  1. consistency - there are no shadows in QWidgets' inline messages
  2. visual hierarchy - shadows add depth, making the message seem like it is floating over the window's content and thereby also making the message seem fairly prominent
  3. aesthetics - no shadows means a cleaner look
Test Plan

Before:


After:

Diff Detail

Repository
R169 Kirigami
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.
filipf created this revision.Feb 15 2019, 5:07 PM
Restricted Application added a project: Kirigami. · View Herald TranscriptFeb 15 2019, 5:07 PM
Restricted Application added a subscriber: plasma-devel. · View Herald Transcript
filipf requested review of this revision.Feb 15 2019, 5:07 PM
ngraham added a reviewer: VDG.Feb 15 2019, 5:09 PM
filipf edited the summary of this revision. (Show Details)Feb 15 2019, 5:09 PM
filipf edited the test plan for this revision. (Show Details)
filipf added reviewers: Kirigami, ngraham.
ngraham accepted this revision as: VDG, ngraham.Feb 15 2019, 5:10 PM

+1 for all the reasons you gave!

This revision is now accepted and ready to land.Feb 15 2019, 5:10 PM
abetts added a subscriber: abetts.Feb 15 2019, 5:15 PM

In fact, long ago, when we first launched the current version, I also suggested making them flatter and all the way across the window. That way it didn't seem like it was floating.

What do we think about also changing the text color for each message to be shade of the color from the message?

Like this:

https://dribbble.com/shots/1536910-Alert-Error-Messages?utm_source=Clipboard_Shot&utm_campaign=MikeBusby&utm_content=Alert%20%2F%20Error%20Messages&utm_medium=Social_Share

mart requested changes to this revision.Feb 18 2019, 1:25 PM
mart added a subscriber: mart.

-1
this has to be done at most for the desktop style and the desktop style only

This revision now requires changes to proceed.Feb 18 2019, 1:25 PM
In D19044#414479, @mart wrote:

-1
this has to be done at most for the desktop style and the desktop style only

Can you explain a bit more? I don't understand the technical reason for why you think we should do this in the QQC2 style only. If anything, wouldn't it make sense to not have the shadow here and only add it in the QQC2 style if we did want it there (which we don't)?

ndavis added a subscriber: ndavis.Feb 18 2019, 10:26 PM

TBH, I like the shadow. Breeze as a widget theme tends to be a bit too flat. Here's how it looks with Breeze Dark.

mart added a comment.EditedFeb 19 2019, 1:20 PM
In D19044#414479, @mart wrote:

-1
this has to be done at most for the desktop style and the desktop style only

Can you explain a bit more? I don't understand the technical reason for why you think we should do this in the QQC2 style only. If anything, wouldn't it make sense to not have the shadow here and only add it in the QQC2 style if we did want it there (which we don't)?

nope, not in the qqc2 style, but in the kirigami style (yes, kirigami has styles, which must have the same name as the corresponding qqc2 styles)

I would like to maintain the shadow at least with material.
this means splitting inlinemessage in a copy in templates/ and a copy in controls/ which just instantiates the one in templates and implements its background item.

then in styles/ the desktop one will have a different background with no shadow (or the base version may not have a shadow then there would be a copy in material which it would, don't care)

rooty added a subscriber: rooty.Feb 19 2019, 8:21 PM

In fact, long ago, when we first launched the current version, I also suggested making them flatter and all the way across the window. That way it didn't seem like it was floating.

What do we think about also changing the text color for each message to be shade of the color from the message?

Like this:

https://dribbble.com/shots/1536910-Alert-Error-Messages?utm_source=Clipboard_Shot&utm_campaign=MikeBusby&utm_content=Alert%20%2F%20Error%20Messages&utm_medium=Social_Share

The color thing looks really nice! +1

Don't fully understand the next course of action yet so if anyone wants to commandeer the revision for a speedier resolution, go ahead!

mart added a comment.EditedFeb 21 2019, 11:40 AM
  • whole InlineMessage should be moved into templates
  • background: item should be deleted such that it doesn't have any background at all (lines from 123 to 173)
  • in controls, an InlineMessage.qml is still present, and will be

import "templates" as T
T.InlineMessage {

background: the original background item

}

that one won't have a shadow, in styles/Material another similar one, but with the original shadow

Another important thing is to update all resource files accordingly

mart added a comment.Feb 26 2019, 10:26 AM

do you still need further explanations on the steps to do?

In D19044#416559, @mart wrote:
  • whole InlineMessage should be moved into templates

Im not home right now but I ran into an issuse with this step because that file I should move to templates already imports templates and starts off with "T.InlineMessage".

mart added a comment.Feb 28 2019, 10:29 AM
In D19044#416559, @mart wrote:
  • whole InlineMessage should be moved into templates

Im not home right now but I ran into an issuse with this step because that file I should move to templates already imports templates and starts off with "T.InlineMessage".

right, it had a template already..
so hmm, some of the code in there should just go in the template to make that file simpler... then copy it

filipf added a comment.EditedMar 1 2019, 8:29 PM
In D19044#416559, @mart wrote:
  • whole InlineMessage should be moved into templates

I've been trying to do this but there's several properties such as padding and contentItem (with a big ColumnLayout attached) that depend on T.InlineMessage and I can't import that in templates. Seems I can move very little into templates so that only leaves me with adding another InlineMessage.qml for Material.

EDIT: wait, I might be onto something

filipf updated this revision to Diff 52922.Mar 1 2019, 8:48 PM

move most of InlineMessage into templates, use shadow in /controls, don't use a
shadow in /styles/Material

filipf updated this revision to Diff 52923.Mar 1 2019, 8:52 PM

don't track the .directory file

can we make this massages full width borderless total flat
how can I try this in home
sorry I am new in this things

how can I try this in home

https://community.kde.org/Infrastructure/Phabricator#How_to_review_someone_else.27s_patch

If you need further assistance, please ask in the #kde-devel channel on IRC or Matrix.

mart added a comment.Mar 17 2019, 4:39 PM

uuh, no, this duplicates more, i meant moving things from the control to the template

In D19044#432853, @mart wrote:

uuh, no, this duplicates more, i meant moving things from the control to the template

But I moved most of things from src/controls/InlineMessage.qml to src/controls/templates/InlineMessage.qml?

mart accepted this revision.Mar 17 2019, 4:47 PM
In D19044#432853, @mart wrote:

uuh, no, this duplicates more, i meant moving things from the control to the template

But I moved most of things from src/controls/InlineMessage.qml to src/controls/templates/InlineMessage.qml?

i was put off by phabricator being stupid and telling src/controls/templates/InlineMessage.qml (173 lines)
Copied to src/styles/Material/InlineMessage.qml

however yeah, it seems alright, sorry, go for it =)

This revision is now accepted and ready to land.Mar 17 2019, 4:47 PM
This revision was automatically updated to reflect the committed changes.
In D19044#432878, @mart wrote:
In D19044#432853, @mart wrote:

uuh, no, this duplicates more, i meant moving things from the control to the template

But I moved most of things from src/controls/InlineMessage.qml to src/controls/templates/InlineMessage.qml?

i was put off by phabricator being stupid and telling src/controls/templates/InlineMessage.qml (173 lines)
Copied to src/styles/Material/InlineMessage.qml

however yeah, it seems alright, sorry, go for it =)

No problem, thanks :)