Show a vertical menu for the panel widget options pop-up
ClosedPublic

Authored by ngraham on Jul 15 2018, 9:06 PM.

Details

Summary

This patch replaces the UI for the panel widget options pop-up with a vertical menu, replating the current horizontal bar with icons on either side of a label. This yields the following improvements:

  • Bigger hit areas; easier to click and much more touch-friendly
  • Buttons have text labels; easier to tell what they do
  • Fewer changes of direction required when mousing; it's possible to access all actions with only vertical motions
Test Plan

All buttons still work.

Before:

After:

Diff Detail

Repository
R119 Plasma Desktop
Branch
more-user-friendly-panel-widget-options-popup (branched from master)
Lint
No Linters Available
Unit
No Unit Test Coverage
Build Status
Buildable 1015
Build 1028: arc lint + arc unit
ngraham created this revision.Jul 15 2018, 9:06 PM
Restricted Application added a project: Plasma. · View Herald TranscriptJul 15 2018, 9:06 PM
Restricted Application added a subscriber: plasma-devel. · View Herald Transcript
ngraham requested review of this revision.Jul 15 2018, 9:06 PM
ngraham edited the test plan for this revision. (Show Details)Jul 15 2018, 9:06 PM
ngraham edited the test plan for this revision. (Show Details)Jul 15 2018, 9:14 PM

+1000

this flyout has annoyed me forever

containments/panel/contents/ui/ConfigOverlay.qml
365–366

I think if you used ColumnLayout you could let it figure out the width on its own rather than having to do manual calculations for every item

ColumnLayout {
    Heading { Layout.fillWidth: true; ... }
    ToolButton { Layout.fillWidth: true; ... }
}
373

I think Heading never wraps on its own

381

Doesn't this need an ellipsis, i18n("Configure...")

+1; great to have also text on the Configure button (as a new Plasma user I thought this was just a non-clickable icon)

ngraham updated this revision to Diff 37919.Jul 17 2018, 2:32 AM
ngraham marked 3 inline comments as done.
  • Address review comments
  • Make it a level 3 label to match other Headings used for panel adjustment
  • Make the buttons span the full width of the menu
ngraham edited the test plan for this revision. (Show Details)Jul 17 2018, 2:32 AM

Minor nitpicks but otherwise looking good

containments/panel/contents/ui/ConfigOverlay.qml
360–361

The label is *inside* the ColumnLayout so just doing handleButtons.width should suffice.

366–367

Could be removed now that the dialog has the exact size of the column, previously it added 2 * spacing

371

Can be removed once you addressed the width above

374

This doesn't seem to do anything? (You might want to use leftPadding and the like but I recall that messing up the width calculation of the label/column)

ngraham updated this revision to Diff 38095.Jul 19 2018, 2:18 PM
ngraham marked 2 inline comments as done.

Address review comments and adjust side padding

ngraham added inline comments.Jul 19 2018, 2:19 PM
containments/panel/contents/ui/ConfigOverlay.qml
371

This is still needed because it's referred to on line 354 (label.text = currentApplet.applet.title;)

374

This adds a bit of padding on the left and right sides of the label so it's vertically aligned with the icons below it and also so the whole menu doesn't seem so cramped.

broulik accepted this revision.Jul 20 2018, 1:44 PM
This revision is now accepted and ready to land.Jul 20 2018, 1:44 PM
This revision was automatically updated to reflect the committed changes.