From d2cfa5497f8e3578ed48bfeaae43675277241fc1 Mon Sep 17 00:00:00 2001 From: Marco Allegretti Date: Thu, 9 Apr 2026 11:09:15 +0200 Subject: [PATCH] Add hover highlights and tooltips to convergence UI Dock buttons, running-app icons, and favourite delegates had no mouse-over feedback. Add 3-state highlight backgrounds (hover and press), Kirigami.Icon active state, and tooltips following existing Plasma patterns. Favourite delegate hover is gated on convergence mode to avoid overlap with touch press events. --- .../homescreens/folio/qml/AppDrawerHeader.qml | 4 ++ .../homescreens/folio/qml/FavouritesBar.qml | 40 ++++++++++++++++++- .../folio/qml/delegate/AbstractDelegate.qml | 15 ++++--- 3 files changed, 49 insertions(+), 10 deletions(-) diff --git a/containments/homescreens/folio/qml/AppDrawerHeader.qml b/containments/homescreens/folio/qml/AppDrawerHeader.qml index aa981fe7..688d968e 100644 --- a/containments/homescreens/folio/qml/AppDrawerHeader.qml +++ b/containments/homescreens/folio/qml/AppDrawerHeader.qml @@ -99,6 +99,10 @@ Item { Layout.preferredHeight: Kirigami.Units.iconSizes.medium onClicked: folio.HomeScreenState.closeAppDrawer() + QQC2.ToolTip.text: i18n("Close") + QQC2.ToolTip.visible: hovered + QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay + Kirigami.Theme.inherit: false Kirigami.Theme.colorSet: Kirigami.Theme.Complementary } diff --git a/containments/homescreens/folio/qml/FavouritesBar.qml b/containments/homescreens/folio/qml/FavouritesBar.qml index 3f2e5eac..283f2c85 100644 --- a/containments/homescreens/folio/qml/FavouritesBar.qml +++ b/containments/homescreens/folio/qml/FavouritesBar.qml @@ -50,19 +50,29 @@ MouseArea { anchors.top: parent.top anchors.bottom: parent.bottom width: root.navButtonWidth - color: "transparent" + color: homeMouseArea.containsPress + ? Qt.rgba(255, 255, 255, 0.2) + : (homeMouseArea.containsMouse ? Qt.rgba(255, 255, 255, 0.1) : "transparent") + radius: Kirigami.Units.cornerRadius Kirigami.Icon { anchors.centerIn: parent width: Math.min(parent.width, parent.height) * 0.75 height: width source: "start-here-kde" + active: homeMouseArea.containsMouse } MouseArea { + id: homeMouseArea anchors.fill: parent + hoverEnabled: true onClicked: MobileShellState.ShellDBusClient.openHomeScreen() } + + Controls.ToolTip.text: i18n("Home") + Controls.ToolTip.visible: homeMouseArea.containsMouse + Controls.ToolTip.delay: Kirigami.Units.toolTipDelay } // Overview button (convergence mode, right end) @@ -73,19 +83,29 @@ MouseArea { anchors.top: parent.top anchors.bottom: parent.bottom width: root.navButtonWidth - color: "transparent" + color: overviewMouseArea.containsPress + ? Qt.rgba(255, 255, 255, 0.2) + : (overviewMouseArea.containsMouse ? Qt.rgba(255, 255, 255, 0.1) : "transparent") + radius: Kirigami.Units.cornerRadius Kirigami.Icon { anchors.centerIn: parent width: Math.min(parent.width, parent.height) * 0.75 height: width source: "view-grid-symbolic" + active: overviewMouseArea.containsMouse } MouseArea { + id: overviewMouseArea anchors.fill: parent + hoverEnabled: true onClicked: root.folio.triggerOverview() } + + Controls.ToolTip.text: i18n("Overview") + Controls.ToolTip.visible: overviewMouseArea.containsMouse + Controls.ToolTip.delay: Kirigami.Units.toolTipDelay } TaskManager.VirtualDesktopInfo { @@ -443,12 +463,22 @@ MouseArea { width: root.dockCellWidth height: root.dockCellHeight + // Hover highlight background + Rectangle { + anchors.fill: parent + radius: Kirigami.Units.cornerRadius + color: taskMouseArea.containsPress + ? Qt.rgba(255, 255, 255, 0.2) + : (taskMouseArea.containsMouse ? Qt.rgba(255, 255, 255, 0.1) : "transparent") + } + // Task icon Kirigami.Icon { anchors.centerIn: parent width: Math.min(parent.width, parent.height) * 0.6 height: width source: taskDelegate.model.decoration + active: taskMouseArea.containsMouse } // Active-window indicator dot @@ -465,7 +495,9 @@ MouseArea { // Click to activate MouseArea { + id: taskMouseArea anchors.fill: parent + hoverEnabled: true acceptedButtons: Qt.LeftButton | Qt.RightButton onClicked: (mouse) => { if (mouse.button === Qt.RightButton) { @@ -476,6 +508,10 @@ MouseArea { } } + Controls.ToolTip.text: taskDelegate.model.display || "" + Controls.ToolTip.visible: taskMouseArea.containsMouse && (taskDelegate.model.display || "") !== "" + Controls.ToolTip.delay: Kirigami.Units.toolTipDelay + Controls.Menu { id: taskContextMenu Controls.MenuItem { diff --git a/containments/homescreens/folio/qml/delegate/AbstractDelegate.qml b/containments/homescreens/folio/qml/delegate/AbstractDelegate.qml index 01f23af3..d6b93bd8 100644 --- a/containments/homescreens/folio/qml/delegate/AbstractDelegate.qml +++ b/containments/homescreens/folio/qml/delegate/AbstractDelegate.qml @@ -122,14 +122,13 @@ Folio.DelegateTouchArea { Layout.minimumHeight: folio.FolioSettings.delegateIconSize Layout.preferredHeight: Layout.minimumHeight - // darken effect when hovered - // TODO: removed for now, since hovered property seems to overlap with the touch pressed event - // layer { - // enabled: root.hovered - // effect: ColorOverlay { - // color: Qt.rgba(0, 0, 0, 0.3) - // } - // } + // Hover highlight in convergence mode (disabled for touch to avoid overlap with press) + Rectangle { + anchors.fill: parent + radius: Kirigami.Units.cornerRadius + color: Qt.rgba(255, 255, 255, 0.1) + visible: ShellSettings.Settings.convergenceModeEnabled && root.hovered + } } DelegateLabel {