From ba48b266a9e8fade9abc44a4910463f99579b21e Mon Sep 17 00:00:00 2001 From: emizzle Date: Mon, 14 Dec 2020 18:01:09 +1100 Subject: [PATCH] chore: re-add sticker loading UI The sticker loading UI was removed when the StatusChatInput and friends were added in. This PR re-adds the sticker loading UI introduced in PR# 955 (https://github.com/status-im/nim-status-client/pull/955). --- src/app/chat/views/stickers.nim | 6 +- ui/shared/status/StatusChatInput.qml | 1 - ui/shared/status/StatusStickerList.qml | 13 +---- ui/shared/status/StatusStickersPopup.qml | 74 +++++++++++++++++++----- 4 files changed, 66 insertions(+), 28 deletions(-) diff --git a/src/app/chat/views/stickers.nim b/src/app/chat/views/stickers.nim index 9823144cb3..36956f24f4 100644 --- a/src/app/chat/views/stickers.nim +++ b/src/app/chat/views/stickers.nim @@ -100,10 +100,10 @@ QtObject: self.stickerPacksLoaded() self.installedStickerPacksUpdated() - proc getNumInstalledStickerPacks(self: StickersView): QVariant {.slot.} = - newQVariant(self.status.stickers.installedStickerPacks.len) + proc getNumInstalledStickerPacks(self: StickersView): int {.slot.} = + self.status.stickers.installedStickerPacks.len - QtProperty[QVariant] numInstalledStickerPacks: + QtProperty[int] numInstalledStickerPacks: read = getNumInstalledStickerPacks notify = installedStickerPacksUpdated diff --git a/ui/shared/status/StatusChatInput.qml b/ui/shared/status/StatusChatInput.qml index 09892f48c3..79434d46b4 100644 --- a/ui/shared/status/StatusChatInput.qml +++ b/ui/shared/status/StatusChatInput.qml @@ -488,7 +488,6 @@ Rectangle { onStickerSelected: { control.stickerSelected(hashId, packId) messageInputField.forceActiveFocus(); - stickersPopup.close() } onClosed: { stickersBtn.highlighted = false diff --git a/ui/shared/status/StatusStickerList.qml b/ui/shared/status/StatusStickerList.qml index 7538e95772..70e1cd6797 100644 --- a/ui/shared/status/StatusStickerList.qml +++ b/ui/shared/status/StatusStickerList.qml @@ -22,19 +22,12 @@ GridView { anchors.fill: parent anchors.topMargin: 4 anchors.leftMargin: 4 - Image { + ImageLoader { width: 80 height: 80 - sourceSize.width: width - sourceSize.height: height - fillMode: Image.PreserveAspectFit source: "https://ipfs.infura.io/ipfs/" + url - MouseArea { - cursorShape: Qt.PointingHandCursor - anchors.fill: parent - onClicked: { - root.stickerClicked(hash, packId) - } + onClicked: { + root.stickerClicked(hash, packId) } } } diff --git a/ui/shared/status/StatusStickersPopup.qml b/ui/shared/status/StatusStickersPopup.qml index 94b692c243..6fd7c0328b 100644 --- a/ui/shared/status/StatusStickersPopup.qml +++ b/ui/shared/status/StatusStickersPopup.qml @@ -8,10 +8,12 @@ import "../../shared/status" import "../../app/AppLayouts/Chat/ChatColumn/samples" Popup { - id: popup + id: root property var recentStickers: StickerData {} property var stickerPackList: StickerPackData {} signal stickerSelected(string hashId, string packId) + property int installedPacksCount: chatsModel.stickers.numInstalledStickerPacks + property bool stickerPacksLoaded: false width: 360 height: 440 modal: false @@ -75,10 +77,11 @@ Popup { Item { id: noStickerPacks anchors.fill: parent - visible: stickerGrid.count <= 0 || stickerPackListView.count <= 0 + visible: false Image { id: imgNoStickers + visible: lblNoStickersYet.visible || lblNoRecentStickers.visible width: 56 height: 56 anchors.horizontalCenter: parent.horizontalCenter @@ -96,7 +99,7 @@ Popup { StyledText { id: lblNoStickersYet - visible: stickerPackListView.count <= 0 + visible: root.installedPacksCount === 0 anchors.fill: parent font.pixelSize: 15 //% "You don't have any stickers yet" @@ -107,7 +110,7 @@ Popup { StyledText { id: lblNoRecentStickers - visible: stickerPackListView.count > 0 && stickerGrid.count <= 0 + visible: stickerPackListView.selectedPackId === -1 && chatsModel.stickers.recent.rowCount() === 0 && !lblNoStickersYet.visible anchors.fill: parent font.pixelSize: 15 //% "Recently used stickers will appear here" @@ -118,7 +121,7 @@ Popup { } StyledButton { - visible: stickerPackListView.count <= 0 + visible: lblNoStickersYet.visible //% "Get Stickers" label: qsTrId("get-stickers") anchors.top: noStickersContainer.bottom @@ -135,7 +138,29 @@ Popup { id: stickerGrid model: recentStickers onStickerClicked: { - popup.stickerSelected(hash, packId) + root.stickerSelected(hash, packId) + root.close() + } + } + StatusStickerList { + id: loadingGrid + visible: chatsModel.stickers.recent.rowCount() === 0 + interactive: false + model: new Array(20) + delegate: Item { + width: stickerGrid.cellWidth + height: stickerGrid.cellHeight + Column { + anchors.fill: parent + anchors.topMargin: 4 + anchors.leftMargin: 4 + Rectangle { + width: 80 + height: 80 + radius: width / 2 + color: Style.current.backgroundHover + } + } } } } @@ -150,15 +175,13 @@ Popup { Layout.bottomMargin: 8 Layout.alignment: Qt.AlignTop | Qt.AlignLeft - RoundedIcon { + StatusRoundButton { id: btnAddStickerPack - anchors.left: parent.left - anchors.top: parent.top - width: 24 - height: 24 - iconWidth: 13.5 - iconHeight: 13.5 - source: "../../app/img/plusSign.svg" + size: "medium" + icon.name: "plusSign" + implicitWidth: 24 + implicitHeight: 24 + state: root.stickerPacksLoaded ? "default" : "pending" onClicked: { stickersContainer.visible = false stickerMarket.visible = true @@ -215,9 +238,32 @@ Popup { } } } + Repeater { + id: loadingStickerPackListView + model: new Array(7) + + delegate: Rectangle { + width: 24 + height: 24 + Layout.preferredHeight: height + Layout.preferredWidth: width + radius: width / 2 + color: Style.current.backgroundHover + } + } } } } } + Connections { + target: chatsModel.stickers + onStickerPacksLoaded: { + root.stickerPacksLoaded = true + stickerPackListView.visible = true + loadingGrid.visible = false + loadingStickerPackListView.model = [] + noStickerPacks.visible = installedPacksCount === 0 || chatsModel.stickers.recent.rowCount() === 0 + } + } }