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.
This commit is contained in:
Marco Allegretti 2026-04-09 11:09:15 +02:00
parent ba0df4328a
commit d2cfa5497f
3 changed files with 49 additions and 10 deletions

View file

@ -99,6 +99,10 @@ Item {
Layout.preferredHeight: Kirigami.Units.iconSizes.medium Layout.preferredHeight: Kirigami.Units.iconSizes.medium
onClicked: folio.HomeScreenState.closeAppDrawer() 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.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.Complementary Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
} }

View file

@ -50,19 +50,29 @@ MouseArea {
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
width: root.navButtonWidth 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 { Kirigami.Icon {
anchors.centerIn: parent anchors.centerIn: parent
width: Math.min(parent.width, parent.height) * 0.75 width: Math.min(parent.width, parent.height) * 0.75
height: width height: width
source: "start-here-kde" source: "start-here-kde"
active: homeMouseArea.containsMouse
} }
MouseArea { MouseArea {
id: homeMouseArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true
onClicked: MobileShellState.ShellDBusClient.openHomeScreen() 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) // Overview button (convergence mode, right end)
@ -73,19 +83,29 @@ MouseArea {
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
width: root.navButtonWidth 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 { Kirigami.Icon {
anchors.centerIn: parent anchors.centerIn: parent
width: Math.min(parent.width, parent.height) * 0.75 width: Math.min(parent.width, parent.height) * 0.75
height: width height: width
source: "view-grid-symbolic" source: "view-grid-symbolic"
active: overviewMouseArea.containsMouse
} }
MouseArea { MouseArea {
id: overviewMouseArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true
onClicked: root.folio.triggerOverview() onClicked: root.folio.triggerOverview()
} }
Controls.ToolTip.text: i18n("Overview")
Controls.ToolTip.visible: overviewMouseArea.containsMouse
Controls.ToolTip.delay: Kirigami.Units.toolTipDelay
} }
TaskManager.VirtualDesktopInfo { TaskManager.VirtualDesktopInfo {
@ -443,12 +463,22 @@ MouseArea {
width: root.dockCellWidth width: root.dockCellWidth
height: root.dockCellHeight 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 // Task icon
Kirigami.Icon { Kirigami.Icon {
anchors.centerIn: parent anchors.centerIn: parent
width: Math.min(parent.width, parent.height) * 0.6 width: Math.min(parent.width, parent.height) * 0.6
height: width height: width
source: taskDelegate.model.decoration source: taskDelegate.model.decoration
active: taskMouseArea.containsMouse
} }
// Active-window indicator dot // Active-window indicator dot
@ -465,7 +495,9 @@ MouseArea {
// Click to activate // Click to activate
MouseArea { MouseArea {
id: taskMouseArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton | Qt.RightButton acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: (mouse) => { onClicked: (mouse) => {
if (mouse.button === Qt.RightButton) { 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 { Controls.Menu {
id: taskContextMenu id: taskContextMenu
Controls.MenuItem { Controls.MenuItem {

View file

@ -122,14 +122,13 @@ Folio.DelegateTouchArea {
Layout.minimumHeight: folio.FolioSettings.delegateIconSize Layout.minimumHeight: folio.FolioSettings.delegateIconSize
Layout.preferredHeight: Layout.minimumHeight Layout.preferredHeight: Layout.minimumHeight
// darken effect when hovered // Hover highlight in convergence mode (disabled for touch to avoid overlap with press)
// TODO: removed for now, since hovered property seems to overlap with the touch pressed event Rectangle {
// layer { anchors.fill: parent
// enabled: root.hovered radius: Kirigami.Units.cornerRadius
// effect: ColorOverlay { color: Qt.rgba(255, 255, 255, 0.1)
// color: Qt.rgba(0, 0, 0, 0.3) visible: ShellSettings.Settings.convergenceModeEnabled && root.hovered
// } }
// }
} }
DelegateLabel { DelegateLabel {