status-desktop/ui/imports/shared/status/StatusStickersPopup.qml

282 lines
9.7 KiB
QML
Raw Normal View History

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import utils 1.0
import shared.panels 1.0
import StatusQ.Controls 0.1 as StatusQControls
import StatusQ.Components 0.1
//TODO improve this!
import "../../../app/AppLayouts/Chat/stores"
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
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
background: Rectangle {
radius: Style.current.radius
color: Style.current.background
border.color: Style.current.border
layer.enabled: true
layer.effect: DropShadow {
verticalOffset: 3
radius: 8
samples: 15
fast: true
cached: true
color: "#22000000"
}
}
onClosed: {
stickerMarket.visible = false
footerContent.visible = true
stickersContainer.visible = true
}
feat: load installed stickers while offline When the network connection is changed, the sticker packs are cleared and then re-loaded (either loading the offline (installed) sticker packs, or all the sticker packs from the network). Stickers can be sent while offline, though the sticker images do not load once offline (this is likely a side effect of the bug described below). There is a known bug in QNetworkAccessManager (https://bugreports.qt.io/browse/QTBUG-55180) that was re-introduced in 5.14.1 that does not allow us to download resources if we go offline then come back online. The workaround employed in this PR manually sets the NetworkAccessible property of QNetworkAccessManager once we have been connected back online. The NetworkAccessible property is marked as obsolete and will be removed in Qt6, so it is something that we need to be aware of when we upgrade. However the hope is that the bug has been fixed. Close StickersPopup when disconnected from network (so that re-loading of sticker packs doesn't look out of place). fix: set network status correctly at load feat: stickers gas estimate async feat: When network re-connected, any http images that were not properly loaded in an ImageLoader component will automatically be reloaded. fix: Sticker button loading icon chore: Bump nimqml and dotherside NOTE: This PR uses an updated nimqml and dotherside. The respective changes should be merged first, and the commit hash should be bumped in this PR prior to merging. Relevant PRs: [https://github.com/status-im/dotherside/pull/20](https://github.com/status-im/dotherside/pull/20) [https://github.com/status-im/nimqml/pull/17](https://github.com/status-im/nimqml/pull/17)
2020-12-14 05:50:47 +00:00
Connections {
target: chatsModel
onOnlineStatusChanged: {
root.close()
}
}
contentItem: ColumnLayout {
anchors.fill: parent
spacing: 0
StatusStickerMarket {
id: stickerMarket
visible: false
Layout.fillWidth: true
Layout.fillHeight: true
stickerPacks: stickerPackList
onInstallClicked: {
chatsModel.stickers.install(packId)
stickerGrid.model = stickers
stickerPackListView.itemAt(index).clicked()
}
onUninstallClicked: {
chatsModel.stickers.uninstall(packId)
stickerGrid.model = recentStickers
btnHistory.clicked()
}
onBackClicked: {
stickerMarket.visible = false
footerContent.visible = true
stickersContainer.visible = true
}
Loader {
id: marketLoader
active: !root.stickerPacksLoaded
sourceComponent: loadingImageComponent
anchors.centerIn: parent
}
}
Item {
id: stickersContainer
Layout.fillWidth: true
Layout.leftMargin: 4
Layout.rightMargin: 4
Layout.topMargin: 4
Layout.bottomMargin: 0
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
Layout.preferredHeight: 400 - 4
Item {
id: noStickerPacks
anchors.fill: parent
visible: installedPacksCount == 0
Image {
id: imgNoStickers
visible: lblNoStickersYet.visible || lblNoRecentStickers.visible
width: 56
height: 56
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 134
source: Style.svg("stickers_sad_icon")
}
Item {
id: noStickersContainer
width: parent.width
height: 22
anchors.top: imgNoStickers.bottom
anchors.topMargin: 8
StyledText {
id: lblNoStickersYet
visible: root.installedPacksCount === 0
anchors.fill: parent
font.pixelSize: 15
//% "You don't have any stickers yet"
text: qsTrId("you-don't-have-any-stickers-yet")
lineHeight: 22
horizontalAlignment: Text.AlignHCenter
}
StyledText {
id: lblNoRecentStickers
visible: stickerPackListView.selectedPackId === -1 && chatsModel.stickers.recent.rowCount() === 0 && !lblNoStickersYet.visible
anchors.fill: parent
font.pixelSize: 15
//% "Recently used stickers will appear here"
text: qsTrId("recently-used-stickers")
lineHeight: 22
horizontalAlignment: Text.AlignHCenter
}
}
StatusQControls.StatusButton {
visible: lblNoStickersYet.visible
//% "Get Stickers"
text: qsTrId("get-stickers")
anchors.top: noStickersContainer.bottom
anchors.topMargin: Style.current.padding
anchors.horizontalCenter: parent.horizontalCenter
onClicked: {
stickersContainer.visible = false
stickerMarket.visible = true
footerContent.visible = false
}
}
}
StatusStickerList {
id: stickerGrid
model: recentStickers
onStickerClicked: {
root.stickerSelected(hash, packId)
root.close()
}
}
Component {
id: loadingImageComponent
StatusLoadingIndicator {
width: 50
height: 50
}
}
Loader {
id: loadingGrid
active: chatsModel.stickers.recent.rowCount() === 0
sourceComponent: loadingImageComponent
anchors.centerIn: parent
}
}
Item {
id: footerContent
Layout.leftMargin: 8
Layout.fillWidth: true
Layout.preferredHeight: 40 - 8 * 2
Layout.topMargin: 8
Layout.rightMargin: 8
Layout.bottomMargin: 8
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
StatusQControls.StatusFlatRoundButton {
id: btnAddStickerPack
implicitWidth: 24
implicitHeight: 24
type: StatusQControls.StatusRoundButton.Type.Secondary
icon.name: "add"
state: root.stickerPacksLoaded ? "default" : "pending"
onClicked: {
stickersContainer.visible = false
stickerMarket.visible = true
footerContent.visible = false
}
}
StatusStickerPackIconWithIndicator {
id: btnHistory
width: 24
height: 24
selected: true
useIconInsteadOfImage: true
source: Style.svg("history_icon")
anchors.left: btnAddStickerPack.right
anchors.leftMargin: Style.current.padding
onClicked: {
btnHistory.selected = true
stickerPackListView.selectedPackId = -1
stickerGrid.model = recentStickers
}
}
ScrollView {
anchors.top: parent.top
anchors.left: btnHistory.right
anchors.leftMargin: Style.current.padding
anchors.right: parent.right
height: 32
clip: true
id: installedStickersSV
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
RowLayout {
id: stickersRowLayout
spacing: Style.current.padding
Repeater {
id: stickerPackListView
property int selectedPackId: -1
model: stickerPackList
delegate: StatusStickerPackIconWithIndicator {
id: packIconWithIndicator
visible: installed
width: 24
height: 24
selected: stickerPackListView.selectedPackId === packId
source: "https://ipfs.infura.io/ipfs/" + thumbnail
Layout.preferredHeight: height
Layout.preferredWidth: width
onClicked: {
btnHistory.selected = false
stickerPackListView.selectedPackId = packId
stickerGrid.model = stickers
}
}
}
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
2021-02-09 17:30:48 +00:00
loadingGrid.active = false
loadingStickerPackListView.model = []
noStickerPacks.visible = installedPacksCount === 0 || chatsModel.stickers.recent.rowCount() === 0
}
}
}