sprainbrains/harbour-fernschreiber
1
0
Fork 0
forked from medvedych/harbour-fernschreiber
Code Pull requests Activity

Merge pull request #419 from Wunderfitz/feature/stickerpicker-listview

Browse source 
Speed up Sticker Picker
This commit is contained in:
Sebastian Wolf 2021-05-24 21:47:14 +02:00 committed by GitHub
commit 9339a2cdf5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 142 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

200
qml/components/StickerPicker.qml
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)
@ -55,31 +79,31 @@ Item {
opacity: 0.7 opacity: 0.7
} }
Flickable { SilicaListView {
id: stickerPickerFlickable id: stickerPickerListView
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 spacing: Theme.paddingSmall
width: stickerPickerListView.width
height: recentStickersGridView.count > 0 ? ( Theme.fontSizeLarge + Theme.itemSizeExtraLarge + 4 * Theme.paddingSmall ) : 0
topPadding: Theme.paddingSmall
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 + Theme.paddingSmall
cellWidth: Theme.itemSizeExtraLarge; cellWidth: Theme.itemSizeExtraLarge;
cellHeight: Theme.itemSizeExtraLarge; cellHeight: Theme.itemSizeExtraLarge;
visible: count > 0 visible: count > 0
@ -87,99 +111,81 @@ 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 {}
} }
}
Repeater { delegate: Column {
model: stickerPickerOverlayItem.installedStickerSets
width: stickerPickerFlickable.width
Column {
id: stickerSetColumn id: stickerSetColumn
property bool isExpanded: false property bool isExpanded: false
function toggleDisplaySet() { function toggleDisplaySet() {
stickerSetColumn.isExpanded = !stickerSetColumn.isExpanded; stickerSetColumn.isExpanded = !stickerSetColumn.isExpanded;
stickerSetLoader.active = stickerSetColumn.isExpanded; if (stickerSetColumn.isExpanded) {
if (stickerSetLoader.active) {
stickerSetLoader.myStickerSet = modelData.stickers; stickerSetLoader.myStickerSet = modelData.stickers;
} else {
stickerSetLoader.myStickerSet = ({});
} }
} }
spacing: Theme.paddingMedium spacing: Theme.paddingSmall
width: parent.width width: parent.width
Row { Row {
id: stickerSetTitleRow id: stickerSetTitleRow
width: parent.width width: parent.width
height: stickerSetThumbnail.height + ( 2 * Theme.paddingSmall ) height: Theme.itemSizeMedium + ( 2 * Theme.paddingSmall )
spacing: Theme.paddingMedium spacing: Theme.paddingMedium
BackgroundItem {
id: stickerSetToggle
width: parent.width - removeSetButton.width - Theme.paddingMedium * 2
height: parent.height
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: { onClicked: {
toggleDisplaySet(); 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 { Label {
id: setTitleText id: setTitleText
font.pixelSize: Theme.fontSizeLarge font.pixelSize: Theme.fontSizeLarge
font.bold: true font.bold: true
width: parent.width - removeSetButton.width - expandSetButton.width - stickerSetThumbnail.width - ( 3 * Theme.paddingMedium )
anchors.verticalCenter: parent.verticalCenter anchors {
maximumLineCount: 1 left: stickerSetThumbnail.right
right: expandSetButton.left
verticalCenter: parent.verticalCenter
margins: Theme.paddingSmall
}
truncationMode: TruncationMode.Fade truncationMode: TruncationMode.Fade
text: modelData.title text: modelData.title
MouseArea {
anchors.fill: parent
onClicked: {
toggleDisplaySet();
} }
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
} }
} }
IconButton {
id: expandSetButton
icon.source: stickerSetColumn.isExpanded ? "image://theme/icon-m-up" : "image://theme/icon-m-down"
anchors.verticalCenter: parent.verticalCenter
onClicked: {
toggleDisplaySet();
}
} }
IconButton { IconButton {
id: removeSetButton id: removeSetButton
icon.source: "image://theme/icon-m-remove" icon.source: "image://theme/icon-m-remove"
@ -197,54 +203,40 @@ Item {
Loader { Loader {
id: stickerSetLoader id: stickerSetLoader
width: parent.width width: parent.width
active: false active: stickerSetColumn.isExpanded || height > 0
height: active ? Theme.itemSizeExtraLarge : 0 height: stickerSetColumn.isExpanded ? Theme.itemSizeExtraLarge + Theme.paddingSmall : 0
opacity: stickerSetColumn.isExpanded ? 1.0 : 0.0
Behavior on height {
NumberAnimation { duration: 200 }
}
Behavior on opacity {
NumberAnimation { duration: 200 }
}
property var myStickerSet property var myStickerSet
onActiveChanged: {
if(!active) {
myStickerSet = ({});
}
}
sourceComponent: Component { sourceComponent: Component {
SilicaGridView { SilicaListView {
id: installedStickerSetGridView id: installedStickerSetGridView
width: parent.width width: stickerSetLoader.width
height: parent.height height: stickerSetLoader.height
cellWidth: Theme.itemSizeExtraLarge;
cellHeight: Theme.itemSizeExtraLarge; orientation: Qt.Horizontal
visible: count > 0 visible: count > 0
clip: true
flow: GridView.FlowTopToBottom
model: stickerSetLoader.myStickerSet model: stickerSetLoader.myStickerSet
delegate: Item { delegate: stickerComponent
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 {} HorizontalScrollDecorator {}
} }
} }
} }
} }
} }
} }
}
}