Speed up Sticker Picker

This commit is contained in:
jngibbon 2021-05-22 21:19:59 +02:00
parent cefa87767a
commit 9fded3d3a8

View file

@ -44,6 +44,30 @@ Item {
installedStickerSets = stickerManager.getInstalledStickerSets(); installedStickerSets = stickerManager.getInstalledStickerSets();
} }
} }
Component {
id: stickerComponent
BackgroundItem {
id: stickerSetItem
width: Theme.itemSizeExtraLarge
height: Theme.itemSizeExtraLarge
onClicked: stickerPickerOverlayItem.stickerPicked(modelData.sticker.remote.id)
TDLibThumbnail {
thumbnail: modelData.thumbnail
anchors.fill: parent
highlighted: stickerSetItem.highlighted
}
Label {
font.pixelSize: Theme.fontSizeSmall
anchors.right: parent.right
anchors.bottom: parent.bottom
text: Emoji.emojify(modelData.emoji, font.pixelSize)
}
}
}
signal stickerPicked(var stickerId) signal stickerPicked(var stickerId)
@ -54,31 +78,28 @@ Item {
color: Theme.overlayBackgroundColor color: Theme.overlayBackgroundColor
opacity: 0.7 opacity: 0.7
} }
SilicaListView {
Flickable { id: stickerPickerListView
id: stickerPickerFlickable
anchors.fill: parent anchors.fill: parent
anchors.margins: Theme.paddingMedium
contentHeight: stickerPickerColumn.height
clip: true clip: true
Column { model: stickerPickerOverlayItem.installedStickerSets
id: stickerPickerColumn
spacing: Theme.paddingMedium header: Column {
width: stickerPickerFlickable.width width: stickerPickerListView.width
height: childrenRect.height
Label { Label {
font.pixelSize: Theme.fontSizeLarge font.pixelSize: Theme.fontSizeLarge
font.bold: true font.bold: true
width: parent.width width: recentStickersGridView.width
leftPadding: Theme.paddingMedium
maximumLineCount: 1 maximumLineCount: 1
truncationMode: TruncationMode.Fade truncationMode: TruncationMode.Fade
text: qsTr("Recently used") text: qsTr("Recently used")
} }
SilicaGridView { SilicaGridView {
id: recentStickersGridView id: recentStickersGridView
width: parent.width width: stickerPickerListView.width
height: Theme.itemSizeExtraLarge height: Theme.itemSizeExtraLarge
cellWidth: Theme.itemSizeExtraLarge; cellWidth: Theme.itemSizeExtraLarge;
cellHeight: Theme.itemSizeExtraLarge; cellHeight: Theme.itemSizeExtraLarge;
@ -87,164 +108,133 @@ Item {
flow: GridView.FlowTopToBottom flow: GridView.FlowTopToBottom
model: stickerPickerOverlayItem.recentStickers model: stickerPickerOverlayItem.recentStickers
delegate: stickerComponent
delegate: Item {
width: recentStickersGridView.cellWidth
height: recentStickersGridView.cellHeight
TDLibThumbnail {
thumbnail: modelData.thumbnail
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 {}
} }
}
delegate: Column {
id: stickerSetColumn
Repeater { property bool isExpanded: false
model: stickerPickerOverlayItem.installedStickerSets function toggleDisplaySet() {
width: stickerPickerFlickable.width stickerSetColumn.isExpanded = !stickerSetColumn.isExpanded;
Column { if (stickerSetColumn.isExpanded) {
id: stickerSetColumn stickerSetLoader.myStickerSet = modelData.stickers;
}
}
property bool isExpanded: false spacing: Theme.paddingMedium
function toggleDisplaySet() { width: parent.width
stickerSetColumn.isExpanded = !stickerSetColumn.isExpanded;
stickerSetLoader.active = stickerSetColumn.isExpanded; Row {
if (stickerSetLoader.active) { id: stickerSetTitleRow
stickerSetLoader.myStickerSet = modelData.stickers; width: parent.width
} else { height: Theme.itemSizeMedium + ( 2 * Theme.paddingSmall )
stickerSetLoader.myStickerSet = ({}); spacing: Theme.paddingMedium
BackgroundItem {
id: stickerSetToggle
width: parent.width - removeSetButton.width - Theme.paddingMedium * 2
height: parent.height
onClicked: {
toggleDisplaySet();
}
TDLibThumbnail {
id: stickerSetThumbnail
thumbnail: modelData.thumbnail ? modelData.thumbnail : modelData.stickers[0].thumbnail
anchors {
left: parent.left
verticalCenter: parent.verticalCenter
leftMargin: Theme.paddingMedium
}
width: Theme.itemSizeMedium
height: Theme.itemSizeMedium
highlighted: stickerSetToggle.down
}
Label {
id: setTitleText
font.pixelSize: Theme.fontSizeLarge
font.bold: true
anchors {
left: stickerSetThumbnail.right
right: expandSetButton.left
verticalCenter: parent.verticalCenter
margins: Theme.paddingSmall
}
maximumLineCount: 1
truncationMode: TruncationMode.Fade
text: modelData.title
}
Icon {
id: expandSetButton
source: stickerSetColumn.isExpanded ? "image://theme/icon-m-up" : "image://theme/icon-m-down"
anchors {
right: parent.right
verticalCenter: parent.verticalCenter
rightMargin: Theme.paddingMedium
} }
} }
spacing: Theme.paddingMedium
width: parent.width
Row {
id: stickerSetTitleRow
width: parent.width
height: stickerSetThumbnail.height + ( 2 * Theme.paddingSmall )
spacing: Theme.paddingMedium
TDLibThumbnail { }
id: stickerSetThumbnail
thumbnail: modelData.thumbnail ? modelData.thumbnail : modelData.stickers[0].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 - 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 {
id: removeSetButton
icon.source: "image://theme/icon-m-remove"
anchors.verticalCenter: parent.verticalCenter
onClicked: {
var stickerSetId = modelData.id;
Remorse.popupAction(chatPage, qsTr("Removing sticker set"), function() {
tdLibWrapper.changeStickerSet(stickerSetId, false);
});
}
}
IconButton {
id: removeSetButton
icon.source: "image://theme/icon-m-remove"
anchors.verticalCenter: parent.verticalCenter
onClicked: {
var stickerSetId = modelData.id;
Remorse.popupAction(chatPage, qsTr("Removing sticker set"), function() {
tdLibWrapper.changeStickerSet(stickerSetId, false);
});
} }
}
Loader { }
id: stickerSetLoader
width: parent.width
active: false
height: active ? Theme.itemSizeExtraLarge : 0
property var myStickerSet Loader {
id: stickerSetLoader
width: parent.width
active: stickerSetColumn.isExpanded || height > 0
height: stickerSetColumn.isExpanded ? Theme.itemSizeExtraLarge : 0
opacity: stickerSetColumn.isExpanded ? 1.0 : 0.0
sourceComponent: Component { Behavior on height {
SilicaGridView { NumberAnimation { duration: 200 }
id: installedStickerSetGridView }
width: parent.width Behavior on opacity {
height: parent.height NumberAnimation { duration: 200 }
cellWidth: Theme.itemSizeExtraLarge; }
cellHeight: Theme.itemSizeExtraLarge;
visible: count > 0
clip: true
flow: GridView.FlowTopToBottom
model: stickerSetLoader.myStickerSet property var myStickerSet
delegate: Item { onActiveChanged: {
width: installedStickerSetGridView.cellWidth if(!active) {
height: installedStickerSetGridView.cellHeight myStickerSet = ({});
TDLibThumbnail {
thumbnail: modelData.thumbnail
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 {}
}
}
} }
}
sourceComponent: Component {
SilicaListView {
id: installedStickerSetGridView
width: stickerSetLoader.width
height: stickerSetLoader.height
y: (height - Theme.itemSizeExtraLarge)/2
orientation: Qt.Horizontal
visible: count > 0
model: stickerSetLoader.myStickerSet
delegate: stickerComponent
HorizontalScrollDecorator {}
}
} }
} }
} }
} }
} }