[Tiled Menu] Design ideas and help request to implement them

[ryu-ketsueki]

Okay, so... It's both a suggestion and proof of concept. I was thinking about giving Tiled Menu an alternative design, based on Windows RT 8.1 Update 3 and Windows Build 9860 Start Menus. Here's what I'm talking about:

But then I decided to try make it myself, using Tiled Menu. So what was originally this:

Has became this. And It's not an edited screenshot:

But here's some issues I'm having here. It's the first time I'm editing QML and I'm still new in Plasmoid development:

• The User Menu button displays a menu at the right side of the button, with all the options over themselves. Same for the Power button, which doesn't even appear because they're going through the right margin.
• The Username disappears after clicking on it or the Profile Picture and doesn't come back, even after closing the menu
• Some other minor bugs that does not affect the usability but makes the plasmoid look ugly:
  
  

And here's the code, if someone wants to try fix the bugs I'm running into. If it work, I'm thinking about forking Tiled Menu into this version I'm trying to make.

com.github.zren.tiledmenu.tar.gz

[Zren]

The widget was moved to it's own repo: https://github.com/Zren/plasma-applet-tiledmenu

I'll check this out tonight.

[Zren]

Oh this isn't a typical feature request I see, you forked the widget! Awesome!

I'll toss your code into a git branch to compare the changes.

Your changes:

• Zren/plasma-applet-tiledmenu@ed802ed

Here's a few modifications I did:

• Zren/plasma-applet-tiledmenu@ed802ed...win8

The User Menu button displays a menu at the right side of the button, with all the options over themselves. Same for the Power button, which doesn't even appear because they're going through the right margin.

In SidebarContextMenu.qml, anchor the popup to the bottom-left instead of the top-right.

diff --git a/package/contents/ui/SidebarContextMenu.qml b/package/contents/ui/SidebarContextMenu.qml
index 7231d251..dbd32308 100644
--- a/package/contents/ui/SidebarContextMenu.qml
+++ b/package/contents/ui/SidebarContextMenu.qml
@@ -10,8 +10,8 @@ SidebarMenu {
 	id: sidebarContextMenu
 	visible: open
 	open: false
-	anchors.left: parent.right
-	anchors.bottom: parent.bottom
+	anchors.left: parent.left
+	anchors.top: parent.bottom
 	width: config.sidebarOpenWidth
 	height: childrenRect.height
 	z: 2

The Username disappears after clicking on it or the Profile Picture and doesn't come back, even after closing the menu

This is because the SidebarMenu.open starts as true when the widget is started, but the property is set to false when a SidebarItem is activated or the context menu loses focus and closes. The sidebar in Win10 hides the label.

Instead of:

• SidebarMenu
  • SidebarItem "username"
    • SidebarContextMenu userMenu
  • SidebarItem "power icon"
    • SidebarContextMenu powerMenu

We should use

• RowLayout
  • SidebarItem "username"
    • Layout.fillWidth: true
    • SidebarContextMenu userMenu
  • SidebarItem "power icon"
    • Layout.preferredWidth: 30
    • SidebarContextMenu powerMenu

The code wasn't really designed or tested to do that though, so I'll fix that up for you. I'm actually in the middle of refactoring the sidebar code to support longer labels in the context menu which is needed for certain translations. Zren/plasma-applet-tiledmenu#37

Some other minor bugs that does not affect the usability but makes the plasmoid look ugly:

• So, the filters icon drop down icon overlays the text?
• The tile editor reset + close buttons overlap the "edit tile" text.

[ryu-ketsueki]

Pretty much, yeah! I need to test further to see if I find any more bugs.

[ryu-ketsueki]

Okay, so... The User and Power Menus has no background. The text appear over the categories. This and the Username disappeared totally here for me. I'll see what I can do.

[Zren]

the Username disappeared totally here for me

Oh right. I forgot to make it always "expanded" / "labelVisible" after refactoring that code.

Zren/plasma-applet-tiledmenu@7b8bf8d

Not sure about the backgrounds. I'll have to outline a few of the items to figure out why it's not showing but the text is.

Rectangle { anchors.fill: parent; border.color: "#f00"; border.width: 1; color: "transparent"; }

[ryu-ketsueki]

Now I'm looking into changing the Launcher Icon width to remove the spacer I inserted at the left of the Launcher. But I want to set it customizable so whoever installs the Tiled Menu can do this Fine Tuning on their own. Same would be for the Icon size. But I have no idea of how do that.

Here's some progress on what I'm trying to do. The Tiled Menu has an important role on it

Of course it is for bright wallpapers too

[Zren]

Does clicking the bottom-left corner of the screen open the menu? Or do you need to move the cursor right a little bit to open the menu?

To see the boundaries of the icon in the panel, add a Rectangle that's transparent but with a red outline like so:

// LauncherIcon.qml
MouseArea {
	id: launcherIcon
	// ...
	Rectangle { anchors.fill: parent; border.color: "#f00"; border.width: 1; color: "transparent"; }
}

[ryu-ketsueki]

That's an actual spacer for the panel. Doesn't have anything with the button. The actual clickable area is darker in that screenshot. My idea was to increase the width of the clickable area, so I can remove the spacer on the left.

[Zren]

Huh, apparently I had some rectangles there already for debugging:

https://github.com/Zren/plasma-applet-tiledmenu/blob/master/package/contents/ui/LauncherIcon.qml#L65-L67

In a panel, the Layout.maximumWidth: size is what controls the maximum width it grows to. The Layout.minimumWidth is equal to the height in a horizontal panel.

You might need to set Layout.preferredWidth: Layout.maximumWidth in case it's not growing to the maximum width. Layout.maximumWidth: size * 1.5 should make it 50% wider than it is tall.