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();
}
}
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)
@ -54,31 +78,28 @@ Item {
color: Theme.overlayBackgroundColor
opacity: 0.7
}
Flickable {
id: stickerPickerFlickable
SilicaListView {
id: stickerPickerListView
anchors.fill: parent
anchors.margins: Theme.paddingMedium
contentHeight: stickerPickerColumn.height
clip: true
Column {
id: stickerPickerColumn
spacing: Theme.paddingMedium
width: stickerPickerFlickable.width
model: stickerPickerOverlayItem.installedStickerSets
header: Column {
width: stickerPickerListView.width
height: childrenRect.height
Label {
font.pixelSize: Theme.fontSizeLarge
font.bold: true
width: parent.width
width: recentStickersGridView.width
leftPadding: Theme.paddingMedium
maximumLineCount: 1
truncationMode: TruncationMode.Fade
text: qsTr("Recently used")
}
SilicaGridView {
id: recentStickersGridView
width: parent.width
width: stickerPickerListView.width
height: Theme.itemSizeExtraLarge
cellWidth: Theme.itemSizeExtraLarge;
cellHeight: Theme.itemSizeExtraLarge;
@ -87,164 +108,133 @@ Item {
flow: GridView.FlowTopToBottom
model: stickerPickerOverlayItem.recentStickers
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)
}
}
delegate: stickerComponent
HorizontalScrollDecorator {}
}
}
delegate: Column {
id: stickerSetColumn
Repeater {
model: stickerPickerOverlayItem.installedStickerSets
width: stickerPickerFlickable.width
Column {
id: stickerSetColumn
property bool isExpanded: false
function toggleDisplaySet() {
stickerSetColumn.isExpanded = !stickerSetColumn.isExpanded;
if (stickerSetColumn.isExpanded) {
stickerSetLoader.myStickerSet = modelData.stickers;
}
}
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: Theme.itemSizeMedium + ( 2 * Theme.paddingSmall )
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 {
SilicaGridView {
id: installedStickerSetGridView
width: parent.width
height: parent.height
cellWidth: Theme.itemSizeExtraLarge;
cellHeight: Theme.itemSizeExtraLarge;
visible: count > 0
clip: true
flow: GridView.FlowTopToBottom
Behavior on height {
NumberAnimation { duration: 200 }
}
Behavior on opacity {
NumberAnimation { duration: 200 }
}
model: stickerSetLoader.myStickerSet
delegate: Item {
width: installedStickerSetGridView.cellWidth
height: installedStickerSetGridView.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 {}
}
}
property var myStickerSet
onActiveChanged: {
if(!active) {
myStickerSet = ({});
}
}
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 {}
}
}
}
}
}
}