[Panel Edit Mode] Change screen edge button hover cursor, add icons to screen edge button and panel size button, add tooltips
ClosedPublic

Authored by GB_2 on Dec 2 2018, 7:54 PM.

Details

Summary

Modifies the screen edge button and panel size button in the panel edit mode to make them easier to understand and look better (as suggested in this Phabricator task: https://phabricator.kde.org/T10047):

  • When you hover over the screen edge button it now shows a move cursor (SizeAllCursor)
  • The screen edge button now has an icon (transform-move)
  • The panel size button now has an icon (resizecol/resizerow)


It also adds a tooltip to the screen edge and panel size buttons:

Test Plan

Open the panel edit mode.

Diff Detail

Repository
R119 Plasma Desktop
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.
GB_2 created this revision.Dec 2 2018, 7:54 PM
Restricted Application added a subscriber: plasma-devel. · View Herald TranscriptDec 2 2018, 7:54 PM
GB_2 requested review of this revision.Dec 2 2018, 7:54 PM

This is awesome, thank you!

If this is not clear enough, would it be technically possible to display a tooltip explaining you have to drag the button and make that tooltip appear when the user clicks on the button without dragging it?

ngraham added a subscriber: ngraham.EditedDec 2 2018, 8:02 PM

Nice!

While we're at it, what do you think about adding a tooltip saying "Drag to the screen edge where you would like this panel to live" or something?

Edit: LOL we had the exact same idea!

GB_2 added a comment.EditedDec 2 2018, 8:03 PM

This is awesome, thank you!

If this is not clear enough, would it be technically possible to display a tooltip explaining you have to drag the button and make that tooltip appear when the user clicks on the button without dragging it?

Nice!

While we're at it, what do you think about adding a tooltip saying "Drag to the screen edge where you would like this panel to love" or something?

Ok, I will add that!

Feel free to come up with a better wording; mine is probably crap since I just randomly thought of it. :p

GB_2 added a comment.Dec 2 2018, 8:04 PM

Feel free to come up with a better wording; mine is probably crap since I just randomly thought of it. :p

Yeah :P

+1, but why aren't the buttons content centered?

GB_2 added a comment.Dec 2 2018, 8:13 PM

+1, but why aren't the buttons content centered?

They are, do you think that because of the screenshot?

GB_2 updated this revision to Diff 46749.Dec 2 2018, 8:33 PM
GB_2 edited the summary of this revision. (Show Details)

Update panel size button icons.

In D17323#370413, @GB_2 wrote:

+1, but why aren't the buttons content centered?

They are, do you think that because of the screenshot?

Looks like so...

GB_2 added a comment.Dec 2 2018, 9:02 PM

Oh, you mean the button content...
I will try to fix that!

GB_2 added a comment.Dec 2 2018, 9:47 PM

Hmm... when a button has an icon the content gets aligned on the left and I can't find a way to change it...

GB_2 added a comment.EditedDec 3 2018, 6:10 PM

I managed to fix it, but the Plasma QML Button code needs to be changed. Should I create a new Phabricator revision or add it here?

Another revision, please. Thanks for all the great fixes here!

GB_2 edited the summary of this revision. (Show Details)Dec 4 2018, 6:58 PM
This comment was removed by GB_2.

Did we decide not to move forward with the idea of a tooltip, or is that being done in another patch?

GB_2 added a comment.Dec 5 2018, 9:26 PM

Because https://phabricator.kde.org/D17355 is currently not working properly, we have two options:

  1. Small "Height/Width" button

  1. Align "Height/Width" button contents on the left side

And yes, I will still add the tooltip.

In D17323#371825, @GB_2 wrote:
  1. Align "Height/Width" button contents on the left side

This is the choice that basically just uses the button's default appearance rather than locally overriding anything, right? If so, I would prefer this approach. Local workarounds for toolkit bugs are almost never worth it when you own and control the toolkit IMHO.

GB_2 added a comment.Dec 5 2018, 9:38 PM

Ok, number two then.

Local workarounds for toolkit bugs are ..

I fully 100% agree on that principle, but in this specific case from my tech POV, option 1 is fine too.

Sizing items is typically in the jurisdiction of the app using the component rather than the component itself - as long as you stay above the minimum size hints from the component.
This patch would, it's akin to doing QWidget::setHorizontalSizePolicy(Minimum)

I don't have an opinion on which is better UI.

GB_2 updated this revision to Diff 46971.Dec 6 2018, 4:31 PM

Added the tooltip.


It is ready now!

Hmm, that tooltip doesn't match the style. Why not use the QQC2 tooltip?

GB_2 updated this revision to Diff 46972.EditedDec 6 2018, 4:56 PM

Use QQC2 tooltip.

GB_2 added a comment.Dec 6 2018, 4:58 PM

Oops, forgot the import...

GB_2 updated this revision to Diff 46973.Dec 6 2018, 4:59 PM

Add import.

trickyricky26 added a comment.EditedDec 6 2018, 7:47 PM

Will that tooltip be shown when just clicking on the button without dragging?

It would be very helpful to trigger the tooltip when the button is pressed, but not dragged.

Edit: @ngraham we had the same thought at the same time once again. Nice

We're getting there!

Right now, the tooltip appears if I click-and-hold for a moment, but not when I just click. Since that's the use case we're targeting, we should probably make it appear for click-and-quickly-release as well.

desktoppackage/contents/configuration/panelconfiguration/EdgeHandle.qml
36

Hardcoding heights and widths like this strikes me as likely to break for translated text, which could be much longer or shorter.

39

Like the widths and heights above, these magic numbers seem fragile. It's probably better to position using anchors rather than x and y values like this.

GB_2 updated this revision to Diff 47010.Dec 7 2018, 6:54 AM

Improve code and add tooltip timeout.

GB_2 marked 2 inline comments as done.Dec 7 2018, 6:55 AM
GB_2 updated this revision to Diff 47011.Dec 7 2018, 6:57 AM

Increase tooltip timeout.

GB_2 updated this revision to Diff 47033.Dec 7 2018, 1:59 PM

Add tooltip for the resize button, change tooltip text and increase tooltip timeout.

GB_2 retitled this revision from Panel edit mode: change screen edge button hover cursor, add icons to screen edge button and panel size button to [Panel Edit Mode] Change screen edge button hover cursor, add icons to screen edge button and panel size button, add tooltips.Dec 7 2018, 2:06 PM
GB_2 edited the summary of this revision. (Show Details)
ngraham accepted this revision.Dec 7 2018, 2:22 PM

This looks great to me now! Just one tiny little minor suggested wording change.

Let's see what the Plasma folks think too.

desktoppackage/contents/configuration/panelconfiguration/EdgeHandle.qml
39

Almost perfect text! One small suggestion! to move the panel. -> to move the panel there.

This revision is now accepted and ready to land.Dec 7 2018, 2:22 PM
GB_2 updated this revision to Diff 47038.Dec 7 2018, 2:48 PM

Improve wording.

GB_2 marked an inline comment as done.Dec 7 2018, 2:48 PM
ngraham accepted this revision.Dec 7 2018, 3:04 PM
GB_2 updated this revision to Diff 47041.Dec 7 2018, 3:18 PM
This comment was removed by GB_2.
GB_2 updated this revision to Diff 47045.Dec 7 2018, 4:05 PM

Fix tooltip text color (for real this time).

when resizing the panel can we show the width of it
48px ,36px etc
because now when I resize the panel I guess what better visually
but if I know the size exactly It will much better
like all other panels latte dock for example

GB_2 added a comment.Dec 7 2018, 6:04 PM

when resizing the panel can we show the width of it
48px ,36px etc
because now when I resize the panel I guess what better visually
but if I know the size exactly It will much better
like all other panels latte dock for example

It does that already:

In D17323#372754, @GB_2 wrote:

when resizing the panel can we show the width of it
48px ,36px etc
because now when I resize the panel I guess what better visually
but if I know the size exactly It will much better
like all other panels latte dock for example

It does that already:

sorry for that I don't recognize it
or maybe I was waiting for some kind of tooltip with big numbers

but this is ok
sorry again

GB_2 added a comment.Dec 7 2018, 6:06 PM

It's okay :-)

GB_2 updated this revision to Diff 47058.Dec 7 2018, 6:21 PM

Hide the tooltip if you click on it.

ngraham accepted this revision.Dec 8 2018, 12:35 AM
davidedmundson accepted this revision.Dec 14 2018, 10:21 PM
This revision was automatically updated to reflect the committed changes.
This comment was removed by Sweetchuck.