status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(StatusStickersPopup): do general popup refactor 

- remove imperative state assignments, rely on bidings
- move private stuff to QtObject{id: d}
- restructure object attributes to follow QML Coding Conventions
This commit is contained in:
Patryk Osmaczko 2022-11-23 14:40:03 +01:00 committed by osmaczko
parent 4917f46785
commit 56fc768d6f
1 changed files with 41 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
ui/imports/shared/status/StatusStickersPopup.qml
View File

@ -7,20 +7,36 @@ import utils 1.0
import shared.panels 1.0 import shared.panels 1.0
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Controls 0.1 as StatusQControls import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1 import StatusQ.Components 0.1
//TODO improve this! //TODO improve this!
import AppLayouts.Chat.stores 1.0 import AppLayouts.Chat.stores 1.0
Popup { Popup {
id: root id: root
property var store property var store
property var recentStickers: store.stickersModuleInst.recent
property var stickerPackList: store.stickersModuleInst.stickerPacks
signal stickerSelected(string hashId, string packId, string url) signal stickerSelected(string hashId, string packId, string url)
property int installedPacksCount: stickersModule.numInstalledStickerPacks
property bool stickerPacksLoaded: false QtObject {
enabled: !!recentStickers && !!stickerPackList id: d
// FIXME: move me to store
readonly property int installedPacksCount: root.store.stickersModuleInst.numInstalledStickerPacks
readonly property var recentStickers: root.store.stickersModuleInst.recent
readonly property var stickerPackList: store.stickersModuleInst.stickerPacks
readonly property bool stickerPacksLoaded: store.stickersModuleInst.packsLoaded
readonly property bool stickerPacksLoadFailed: store.stickersModuleInst.packsLoadFailed
readonly property bool stickerPacksLoading: !stickerPacksLoaded && !stickerPacksLoadFailed
function loadStickers() {
store.stickersModuleInst.loadStickers()
}
}
enabled: !!d.recentStickers && !!d.stickerPackList
width: 360 width: 360
height: 440 height: 440
modal: false modal: false
@ -39,11 +55,13 @@ Popup {
color: "#22000000" color: "#22000000"
} }
} }
onClosed: { onClosed: {
stickerMarket.visible = false stickerMarket.visible = false
footerContent.visible = true footerContent.visible = true
stickersContainer.visible = true stickersContainer.visible = true
} }
Connections { Connections {
target: mainModule target: mainModule
function onOnlineStatusChanged() { function onOnlineStatusChanged() {
@ -51,20 +69,6 @@ Popup {
} }
} }
Component.onCompleted: {
if (stickersModule.packsLoaded) {
root.setStickersReady()
}
}
function setStickersReady() {
root.stickerPacksLoaded = true
stickerPackListView.visible = true
loadingGrid.active = false
loadingStickerPackListView.model = []
noStickerPacks.visible = installedPacksCount === 0 || stickersModule.recent.rowCount() === 0
}
contentItem: ColumnLayout { contentItem: ColumnLayout {
anchors.fill: parent anchors.fill: parent
spacing: 0 spacing: 0
@ -75,7 +79,7 @@ Popup {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
store: root.store store: root.store
stickerPacks: stickerPackList stickerPacks: d.stickerPackList
packId: stickerPackListView.selectedPackId packId: stickerPackListView.selectedPackId
onInstallClicked: { onInstallClicked: {
stickersModule.install(packId) stickersModule.install(packId)
@ -84,7 +88,7 @@ Popup {
} }
onUninstallClicked: { onUninstallClicked: {
stickersModule.uninstall(packId) stickersModule.uninstall(packId)
stickerGrid.model = recentStickers stickerGrid.model = d.recentStickers
btnHistory.clicked() btnHistory.clicked()
} }
onBackClicked: { onBackClicked: {
@ -95,9 +99,9 @@ Popup {
Loader { Loader {
id: marketLoader id: marketLoader
active: !root.stickerPacksLoaded
sourceComponent: loadingImageComponent
anchors.centerIn: parent anchors.centerIn: parent
active: d.stickerPacksLoading
sourceComponent: loadingImageComponent
} }
} }
@ -114,7 +118,7 @@ Popup {
Item { Item {
id: noStickerPacks id: noStickerPacks
anchors.fill: parent anchors.fill: parent
visible: installedPacksCount == 0 visible: d.installedPacksCount == 0 || stickersModule.recent.rowCount() === 0
Image { Image {
id: imgNoStickers id: imgNoStickers
@ -136,7 +140,7 @@ Popup {
StyledText { StyledText {
id: lblNoStickersYet id: lblNoStickersYet
visible: root.installedPacksCount === 0 visible: d.installedPacksCount === 0
anchors.fill: parent anchors.fill: parent
font.pixelSize: 15 font.pixelSize: 15
text: qsTr("You don't have any stickers yet") text: qsTr("You don't have any stickers yet")
@ -155,7 +159,7 @@ Popup {
} }
} }
StatusQControls.StatusButton { StatusButton {
objectName: "stickersPopupGetStickersButton" objectName: "stickersPopupGetStickersButton"
visible: lblNoStickersYet.visible visible: lblNoStickersYet.visible
text: qsTr("Get Stickers") text: qsTr("Get Stickers")
@ -172,7 +176,7 @@ Popup {
StatusStickerList { StatusStickerList {
id: stickerGrid id: stickerGrid
objectName: "statusStickerPopupStickerGrid" objectName: "statusStickerPopupStickerGrid"
model: recentStickers model: d.recentStickers
packId: stickerPackListView.selectedPackId packId: stickerPackListView.selectedPackId
onStickerClicked: { onStickerClicked: {
root.stickerSelected(hash, packId, url) root.stickerSelected(hash, packId, url)
@ -180,7 +184,6 @@ Popup {
} }
} }
Component { Component {
id: loadingImageComponent id: loadingImageComponent
StatusLoadingIndicator { StatusLoadingIndicator {
@ -191,7 +194,7 @@ Popup {
Loader { Loader {
id: loadingGrid id: loadingGrid
active: stickersModule.recent.rowCount() === 0 active: d.stickerPacksLoading
sourceComponent: loadingImageComponent sourceComponent: loadingImageComponent
anchors.centerIn: parent anchors.centerIn: parent
} }
@ -204,14 +207,14 @@ Popup {
rightPadding: Style.current.padding / 2 rightPadding: Style.current.padding / 2
spacing: Style.current.padding / 2 spacing: Style.current.padding / 2
StatusQControls.StatusFlatRoundButton { StatusFlatRoundButton {
id: btnAddStickerPack id: btnAddStickerPack
implicitHeight: 40 implicitHeight: 40
implicitWidth: 24 implicitWidth: 24
icon.name: "add" icon.name: "add"
type: StatusQControls.StatusFlatRoundButton.Type.Tertiary type: StatusFlatRoundButton.Type.Tertiary
color: "transparent" color: "transparent"
state: root.stickerPacksLoaded ? "default" : "pending" state: d.stickerPacksLoading ? "default" : "pending"
onClicked: { onClicked: {
stickersContainer.visible = false stickersContainer.visible = false
stickerMarket.visible = true stickerMarket.visible = true
@ -219,14 +222,14 @@ Popup {
} }
} }
StatusQControls.StatusTabBarIconButton { StatusTabBarIconButton {
id: btnHistory id: btnHistory
icon.name: "time" icon.name: "time"
highlighted: true highlighted: true
onClicked: { onClicked: {
highlighted = true highlighted = true
stickerPackListView.selectedPackId = -1 stickerPackListView.selectedPackId = -1
stickerGrid.model = recentStickers stickerGrid.model = d.recentStickers
} }
} }
@ -242,7 +245,8 @@ Popup {
Repeater { Repeater {
id: stickerPackListView id: stickerPackListView
property int selectedPackId: -1 property int selectedPackId: -1
model: stickerPackList model: d.stickerPackList
visible: d.stickerPacksLoaded
delegate: StatusStickerPackIconWithIndicator { delegate: StatusStickerPackIconWithIndicator {
id: packIconWithIndicator id: packIconWithIndicator
@ -262,7 +266,7 @@ Popup {
} }
Repeater { Repeater {
id: loadingStickerPackListView id: loadingStickerPackListView
model: new Array(7) model: d.stickerPacksLoading ? 7 : 0
delegate: Rectangle { delegate: Rectangle {
width: 24 width: 24
@ -280,13 +284,5 @@ Popup {
} }
} }
} }
Connections {
id: loadedConnection
target: stickersModule
onStickerPacksLoaded: {
root.setStickersReady()
loadedConnection.enabled = false
}
}
} }