Allow scrolling to specific sections and order packs in sticker search by match quality

1 files changed, 48 insertions, 24 deletions

diff --git a/resources/qml/emoji/StickerPicker.qml b/resources/qml/emoji/StickerPicker.qml

index ce4d5200..2e1956b1 100644
--- a/resources/qml/emoji/StickerPicker.qml
+++ b/resources/qml/emoji/StickerPicker.qml
@@ -24,6 +24,7 @@ Menu {
     readonly property int stickerDim: 128
     readonly property int stickerDimPad: 128 + Nheko.paddingSmall
     readonly property int stickersPerRow: 3
+    readonly property int sidebarAvatarSize: 24
 
     function show(showAt, roomid_, callback) {
         console.debug("Showing sticker picker");
@@ -40,28 +41,31 @@ Menu {
     modal: true
     focus: true
     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-    width: stickersPerRow * stickerDimPad + 20
+    width: sidebarAvatarSize + Nheko.paddingSmall + stickersPerRow * stickerDimPad + 20
 
     Rectangle {
         color: Nheko.colors.window
         height: columnView.implicitHeight + Nheko.paddingSmall*2
-        width: stickersPerRow * stickerDimPad + 20
+        width: sidebarAvatarSize + Nheko.paddingSmall + stickersPerRow * stickerDimPad + 20
 
-        ColumnLayout {
+        GridLayout {
             id: columnView
 
-            spacing: Nheko.paddingSmall
             anchors.leftMargin: Nheko.paddingSmall
             anchors.rightMargin: Nheko.paddingSmall
             anchors.bottom: parent.bottom
             anchors.left: parent.left
             anchors.right: parent.right
+            columns: 2
+            rows: 2
 
             // Search field
             TextField {
                 id: emojiSearch
 
                 Layout.preferredWidth: stickersPerRow * stickerDimPad + 20 - Nheko.paddingSmall
+                Layout.row: 0
+                Layout.column: 1
                 palette: Nheko.colors
                 background: null
                 placeholderTextColor: Nheko.colors.buttonText
@@ -102,30 +106,13 @@ Menu {
                 }
             }
 
-            Component {
-                id: sectionHeading
-                Rectangle {
-                    width: gridView.width
-                    height: childrenRect.height
-                    color: Nheko.colors.alternateBase
-
-                    required property string section
-
-                    Text {
-                        anchors.left: parent.left
-                        anchors.right: parent.right
-                        text: parent.section
-                        color: Nheko.colors.text
-                        font.bold: true
-                    }
-                }
-            }
-
             // sticker grid
             ListView {
                 id: gridView
 
                 model: roomid ? TimelineManager.completerFor("stickergrid", roomid) : null
+                Layout.row: 1
+                Layout.column: 1
                 Layout.preferredHeight: cellHeight * 3.5
                 Layout.preferredWidth: stickersPerRow * stickerDimPad + 20 - Nheko.paddingSmall
                 property int cellHeight: stickerDimPad
@@ -135,7 +122,21 @@ Menu {
 
                 section.property: "packname"
                 section.criteria: ViewSection.FullString
-                section.delegate: sectionHeading
+                section.delegate: Rectangle {
+                    width: gridView.width
+                    height: childrenRect.height
+                    color: Nheko.colors.alternateBase
+
+                    required property string section
+
+                    Text {
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        text: parent.section
+                        color: Nheko.colors.text
+                        font.bold: true
+                    }
+                }
                 section.labelPositioning: ViewSection.InlineLabels | ViewSection.CurrentLabelAtStart
 
                 spacing: Nheko.paddingSmall
@@ -191,6 +192,29 @@ Menu {
 
             }
 
+            ListView {
+                Layout.row: 1
+                Layout.column: 0
+                Layout.preferredWidth: sidebarAvatarSize
+                Layout.fillHeight: true
+                Layout.rightMargin: Nheko.paddingSmall
+
+                model: gridView.model ? gridView.model.sections : null
+                spacing: Nheko.paddingSmall
+
+                delegate: Avatar {
+                    height: sidebarAvatarSize
+                    width: sidebarAvatarSize
+                    url: modelData.url.replace("mxc://", "image://MxcImage/")
+                    displayName: modelData.name
+                    roomid: modelData.name
+
+                    hoverEnabled: true
+                    ToolTip.visible: hovered
+                    ToolTip.text: modelData.name
+                    onClicked: gridView.positionViewAtIndex(modelData.firstRowWith, ListView.Beginning)
+                }
+            }
         }
 
     }