Redesign sticker picker, fix one sticker reload bug

qml/components/StickerPicker.qml

@@ -25,14 +25,8 @@ Item {
     id: stickerPickerOverlayItem
     anchors.fill: parent
 
-    property var recentStickers
+    property var recentStickers: stickerManager.getRecentStickers();
-    property var installedStickerSets
+    property var installedStickerSets: stickerManager.getInstalledStickerSets();
-    property int setInRemoval: -1
-
-    Component.onCompleted: {
-        recentStickers = stickerManager.getRecentStickers();
-        installedStickerSets = stickerManager.getInstalledStickerSets();
-    }
 
     Connections {
         target: tdLibWrapper
@@ -40,15 +34,17 @@ Item {
             if (request === "removeStickerSet") {
                 appNotification.show(qsTr("Sticker set successfully removed!"));
                 tdLibWrapper.getInstalledStickerSets();
-                console.log("Set in removal: " + setInRemoval);
-                if (setInRemoval > -1) {
-                    installedStickerSets.splice(setInRemoval, 1);
-                    setInRemoval = -1;
-                }
             }
         }
     }
 
+    Connections {
+        target: stickerManager
+        onStickerSetsReceived: {
+            installedStickerSets = stickerManager.getInstalledStickerSets();
+        }
+    }
+
     signal stickerPicked(var stickerId)
 
     Rectangle {
@@ -123,20 +119,65 @@ Item {
                 model: stickerPickerOverlayItem.installedStickerSets
                 width: stickerPickerFlickable.width
                 Column {
+                    id: stickerSetColumn
+
+                    property bool isExpanded: false
+                    function toggleDisplaySet() {
+                        stickerSetColumn.isExpanded = !stickerSetColumn.isExpanded;
+                        stickerSetLoader.active = stickerSetColumn.isExpanded;
+                        if (stickerSetLoader.active) {
+                            stickerSetLoader.myStickerSet = modelData.stickers;
+                        } else {
+                            stickerSetLoader.myStickerSet = ({});
+                        }
+                    }
+
                     spacing: Theme.paddingMedium
                     width: parent.width
                     Row {
+                        id: stickerSetTitleRow
                         width: parent.width
-                        height: Math.max(removeSetButton.height, setTitleText.height) + ( 2 * Theme.paddingSmall )
+                        height: stickerSetThumbnail.height + ( 2 * Theme.paddingSmall )
+                        spacing: Theme.paddingMedium
+
+                        TDLibThumbnail {
+                            id: stickerSetThumbnail
+                            thumbnail: modelData.thumbnail
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: Theme.itemSizeMedium
+                            height: Theme.itemSizeMedium
+                            MouseArea {
+                                anchors.fill: parent
+                                onClicked: {
+                                    toggleDisplaySet();
+                                }
+                            }
+                        }
+
                         Label {
                             id: setTitleText
                             font.pixelSize: Theme.fontSizeLarge
                             font.bold: true
-                            width: parent.width - removeSetButton.width
+                            width: parent.width - removeSetButton.width - expandSetButton.width - stickerSetThumbnail.width - ( 3 * Theme.paddingMedium )
                             anchors.verticalCenter: parent.verticalCenter
                             maximumLineCount: 1
                             truncationMode: TruncationMode.Fade
                             text: modelData.title
+                            MouseArea {
+                                anchors.fill: parent
+                                onClicked: {
+                                    toggleDisplaySet();
+                                }
+                            }
+                        }
+
+                        IconButton {
+                            id: expandSetButton
+                            icon.source: stickerSetColumn.isExpanded ? "image://theme/icon-m-up" : "image://theme/icon-m-down"
+                            anchors.verticalCenter: parent.verticalCenter
+                            onClicked: {
+                                toggleDisplaySet();
+                            }
                         }
 
                         IconButton {
@@ -145,48 +186,59 @@ Item {
                             anchors.verticalCenter: parent.verticalCenter
                             onClicked: {
                                 var stickerSetId = modelData.id;
-                                setInRemoval = index;
                                 Remorse.popupAction(chatPage, qsTr("Removing sticker set"), function() {
                                     tdLibWrapper.changeStickerSet(stickerSetId, false);
                                 });
                             }
                         }
+
                     }
 
-                    SilicaGridView {
+                    Loader {
-                        id: installedStickerSetGridView
+                        id: stickerSetLoader
                         width: parent.width
-                        height: Theme.itemSizeExtraLarge
+                        active: false
-                        cellWidth: Theme.itemSizeExtraLarge;
+                        height: active ? Theme.itemSizeExtraLarge : 0
-                        cellHeight: Theme.itemSizeExtraLarge;
-                        visible: count > 0
-                        clip: true
-                        flow: GridView.FlowTopToBottom
 
-                        model: modelData.stickers
+                        property var myStickerSet
-                        delegate: Item {
-                            width: installedStickerSetGridView.cellWidth
-                            height: installedStickerSetGridView.cellHeight
 
-                            TDLibThumbnail {
+                        sourceComponent: Component {
-                                thumbnail: modelData.thumbnail
+                            SilicaGridView {
-                                anchors.fill: parent
+                                id: installedStickerSetGridView
-                            }
+                                width: parent.width
+                                height: parent.height
+                                cellWidth: Theme.itemSizeExtraLarge;
+                                cellHeight: Theme.itemSizeExtraLarge;
+                                visible: count > 0
+                                clip: true
+                                flow: GridView.FlowTopToBottom
 
-                            Label {
+                                model: stickerSetLoader.myStickerSet
-                                font.pixelSize: Theme.fontSizeSmall
+                                delegate: Item {
-                                anchors.right: parent.right
+                                    width: installedStickerSetGridView.cellWidth
-                                anchors.bottom: parent.bottom
+                                    height: installedStickerSetGridView.cellHeight
-                                text: Emoji.emojify(modelData.emoji, font.pixelSize)
-                            }
 
-                            MouseArea {
+                                    TDLibThumbnail {
-                                anchors.fill: parent
+                                        thumbnail: modelData.thumbnail
-                                onClicked: stickerPickerOverlayItem.stickerPicked(modelData.sticker.remote.id)
+                                        anchors.fill: parent
+                                    }
+
+                                    Label {
+                                        font.pixelSize: Theme.fontSizeSmall
+                                        anchors.right: parent.right
+                                        anchors.bottom: parent.bottom
+                                        text: Emoji.emojify(modelData.emoji, font.pixelSize)
+                                    }
+
+                                    MouseArea {
+                                        anchors.fill: parent
+                                        onClicked: stickerPickerOverlayItem.stickerPicked(modelData.sticker.remote.id)
+                                    }
+                                }
+
+                                HorizontalScrollDecorator {}
                             }
                         }
-
-                        HorizontalScrollDecorator {}
                     }
 
                 }

src/stickermanager.cpp

@@ -118,7 +118,9 @@ void StickerManager::handleStickerSetsReceived(const QVariantList &stickerSets)
         if (!isInstalled && this->installedStickerSetIds.contains(newSetId)) {
             this->installedStickerSetIds.removeAll(newSetId);
         }
-        this->stickerSets.insert(newSetId, newStickerSet);
+        if (!this->stickerSets.contains(newSetId)) {
+            this->stickerSets.insert(newSetId, newStickerSet);
+        }
     }
 
     this->installedStickerSets.clear();
@@ -133,6 +135,7 @@ void StickerManager::handleStickerSetsReceived(const QVariantList &stickerSets)
             i++;
         }
     }
+    emit stickerSetsReceived();
 }
 
 void StickerManager::handleStickerSetReceived(const QVariantMap &stickerSet)

src/stickermanager.h

@@ -42,6 +42,7 @@ public:
     Q_INVOKABLE void setNeedsReload(const bool &reloadNeeded);
 
 signals:
+    void stickerSetsReceived();
 
 private slots: