Improve activity list highlighting/keyboard item selection

Signed-off-by: Claudio Cambra <claudio.cambra@gmail.com>
nextcloud · Aug 2, 2022 · b2c1ebc · b2c1ebc
1 parent fe0a26f
commit b2c1ebc
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 deletions.
diff --git a/src/gui/tray/ActivityItem.qml b/src/gui/tray/ActivityItem.qml
@@ -34,12 +34,6 @@ MouseArea {
         isTalkReplyOptionVisible = !isTalkReplyOptionVisible
     }
 
-    Rectangle {
-        id: activityHover
-        anchors.fill: parent
-        color: (parent.containsMouse ? Style.lightHover : "transparent")
-    }
-
     ToolTip {
         id: activityMouseAreaTooltip
         visible: containsMouse && !activityContent.childHovered && model.displayLocation !== ""

diff --git a/src/gui/tray/ActivityList.qml b/src/gui/tray/ActivityList.qml
@@ -2,6 +2,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 
 import com.nextcloud.desktopclient 1.0 as NC
+import Style 1.0
 
 ScrollView {
     id: controlRoot
@@ -14,6 +15,7 @@ ScrollView {
 
     contentWidth: availableWidth
     padding: 1
+    focus: false
 
     ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
@@ -24,19 +26,51 @@ ScrollView {
     ListView {
         id: activityList
 
-        keyNavigationEnabled: true
-
         Accessible.role: Accessible.List
         Accessible.name: qsTr("Activity list")
 
         clip: true
-
         spacing: 0
+        currentIndex: -1
+        interactive: true
+
+        highlight: Rectangle {
+            id: activityHover
+            width: activityList.currentItem.width
+            height: activityList.currentItem.height
+            color: activityList.currentItem.enabled ? Style.lightHover : "transparent"
+            border.color: Style.menuBorder
+            border.width: activityList.currentItem.enabled ? 0 : 2
+            visible: activityList.activeFocus
+        }
+        highlightFollowsCurrentItem: true
+        highlightMoveDuration: 0
+        highlightResizeDuration: 0
+        highlightRangeMode: ListView.ApplyRange
+        preferredHighlightBegin: 0
+        preferredHighlightEnd: controlRoot.height
 
         delegate: ActivityItem {
             isFileActivityList: controlRoot.isFileActivityList
             width: activityList.contentWidth
             flickable: activityList
+            onEntered: {
+                // When we set the currentIndex the list view will scroll...
+                // unless we tamper with the preferred highlight points to stop this.
+                const cachedPreferredHighlightBegin = activityList.preferredHighlightBegin;
+                const cachedPreferredHighlightEnd = activityList.preferredHighlightEnd;
+                // Set overkill values to make sure no scroll happens when we hover with mouse
+                activityList.preferredHighlightBegin = -controlRoot.height;
+                activityList.preferredHighlightEnd = controlRoot.height * 2;
+
+                activityList.currentIndex = index
+
+                // Reset original values so keyboard navigation makes list view scroll
+                activityList.preferredHighlightBegin = cachedPreferredHighlightBegin;
+                activityList.preferredHighlightEnd = cachedPreferredHighlightEnd;
+
+                forceActiveFocus();
+            }
             onClicked: {
                 if (model.isCurrentUserFileActivity) {
                     showFileActivity(model.objectName, model.objectId)