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

uiux: introduce stickermarket components to status library

This commit is contained in:
Pascal Precht 2020-09-29 10:41:27 +02:00 committed by Iuri Matias
parent 961a370002
commit e3c195dc22
8 changed files with 1058 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
ui/shared/status/StatusStickerButton.qml Normal file
View File

@ -0,0 +1,269 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import "../../imports"
import "../../shared"
Item {
id: root
enum StyleType {
Default,
LargeNoIcon
}
property int style: StatusStickerButton.StyleType.Default
property int packPrice: 0
property bool isBought: false
property bool isPending: false
property bool isInstalled: false
property bool hasUpdate: false
property bool isTimedOut: false
property bool hasInsufficientFunds: false
property bool enabled: true
property var icon: new Object({
path: "../../app/img/status-logo-no-bg",
rotation: 0,
runAnimation: false
})
//% "Buy for %1 SNT"
property string text: root.style === StatusStickerButton.StyleType.Default ? packPrice : qsTrId("buy-for--1-snt").arg(packPrice )
property color textColor: style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.buttonForegroundColor
property color bgColor: style === StatusStickerButton.StyleType.Default ? Style.current.blue : Style.current.secondaryBackground
signal uninstallClicked()
signal installClicked()
signal cancelClicked()
signal updateClicked()
signal buyClicked()
width: pill.width
states: [
State {
name: "installed"
when: root.isInstalled
PropertyChanges {
target: root;
//% "Uninstall"
text: root.style === StatusStickerButton.StyleType.Default ? "" : qsTrId("uninstall");
textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.red;
bgColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.green : Style.current.lightRed;
icon: new Object({
path: "../../app/img/check.svg",
rotation: 0,
runAnimation: false
})
}
},
State {
name: "bought"
when: root.isBought;
PropertyChanges {
target: root;
//% "Install"
text: qsTrId("install");
icon: new Object({
path: "../../app/img/arrowUp.svg",
rotation: 180,
runAnimation: false
})
}
},
State {
name: "free"
when: root.packPrice === 0;
extend: "bought"
PropertyChanges {
target: root;
//% "Free"
text: qsTrId("free");
}
},
State {
name: "insufficientFunds"
when: root.hasInsufficientFunds
PropertyChanges {
target: root;
text: root.style === StatusStickerButton.StyleType.Default ? packPrice : packPrice + " SNT";
textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.darkGrey
bgColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.buttonDisabledBackgroundColor;
enabled: false;
}
},
State {
name: "pending"
when: root.isPending
PropertyChanges {
target: root;
//% "Pending..."
text: qsTrId("pending---");
textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.darkGrey
bgColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.grey;
enabled: false;
icon: new Object({
path: "../../../img/loading.png",
rotation: 0,
runAnimation: true
})
}
},
State {
name: "timedOut"
when: root.isTimedOut
extend: "pending"
PropertyChanges {
target: root;
//% "Cancel"
text: qsTrId("browsing-cancel");
textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.red;
bgColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.red : Style.current.lightRed;
}
},
State {
name: "hasUpdate"
when: root.hasUpdate
extend: "bought"
PropertyChanges {
target: root;
//% "Update"
text: qsTrId("update");
}
}
]
TextMetrics {
id: textMetrics
font.weight: Font.Medium
font.family: Style.current.fontBold.name
font.pixelSize: 15
text: root.text
}
Rectangle {
id: pill
anchors.right: parent.right
width: textMetrics.width + roundedIconImage.width + (Style.current.smallPadding * 2) + 6.7
height: 26
color: root.bgColor
radius: root.style === StatusStickerButton.StyleType.Default ? (width / 2) : 8
states: [
State {
name: "installed"
when: root.isInstalled && root.style === StatusStickerButton.StyleType.Default
PropertyChanges {
target: pill;
width: 28;
height: 28
}
},
State {
name: "large"
when: root.style === StatusStickerButton.StyleType.LargeNoIcon
PropertyChanges {
target: pill;
width: textMetrics.width + (Style.current.padding * 4);
height: 44
}
}
]
SVGImage {
id: roundedIconImage
width: 12
height: 12
anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: icon.path
rotation: icon.rotation
RotationAnimator {
target: roundedIconImage;
from: 0;
to: 360;
duration: 1200
running: root.icon.runAnimation
loops: Animation.Infinite
}
ColorOverlay {
anchors.fill: roundedIconImage
source: roundedIconImage
color: Style.current.pillButtonTextColor
antialiasing: true
}
states: [
State {
name: "installed"
when: root.isInstalled && root.style === StatusStickerButton.StyleType.Default
PropertyChanges {
target: roundedIconImage;
anchors.leftMargin: 9
width: 11;
height: 8
}
},
State {
name: "large"
when: root.style === StatusStickerButton.StyleType.LargeNoIcon
PropertyChanges {
target: roundedIconImage;
visible: false;
}
}
]
}
Text {
id: content
color: root.textColor
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
anchors.verticalCenter: parent.verticalCenter
text: root.text
font.weight: Font.Medium
font.family: Style.current.fontBold.name
font.pixelSize: 15
states: [
State {
name: "installed"
when: root.isInstalled && root.style === StatusStickerButton.StyleType.Default
PropertyChanges {
target: content;
anchors.rightMargin: 9;
}
},
State {
name: "large"
when: root.style === StatusStickerButton.StyleType.LargeNoIcon
PropertyChanges {
target: content;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.leftMargin: Style.current.padding * 2
anchors.rightMargin: Style.current.padding * 2
}
}
]
}
MouseArea {
id: mouseArea
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
enabled: !root.isPending
cursorShape: Qt.PointingHandCursor
onClicked: {
if (root.isPending) return;
if (root.isInstalled) return root.uninstallClicked();
if (root.packPrice === 0 || root.isBought) return root.installClicked()
if (root.isTimedOut) return root.cancelClicked()
if (root.hasUpdate) return root.updateClicked()
return root.buyClicked()
}
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/

42
ui/shared/status/StatusStickerList.qml Normal file
View File

@ -0,0 +1,42 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import "../../imports"
import "../../shared"
GridView {
id: root
visible: count > 0
anchors.fill: parent
cellWidth: 88
cellHeight: 88
model: stickerList
focus: true
clip: true
signal stickerClicked(string hash, int packId)
delegate: Item {
width: stickerGrid.cellWidth
height: stickerGrid.cellHeight
Column {
anchors.fill: parent
anchors.topMargin: 4
anchors.leftMargin: 4
Image {
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)
}
}
}
}
}
}

165
ui/shared/status/StatusStickerMarket.qml Normal file
View File

@ -0,0 +1,165 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import "../../imports"
import "../../shared"
import "../../shared/status"
import "../../app/AppLayouts/Chat/ChatColumn/samples"
Item {
id: root
property var stickerPacks: StickerPackData {}
signal backClicked
signal uninstallClicked(int packId)
signal installClicked(var stickers, int packId, int index)
signal cancelClicked(int packId)
signal updateClicked(int packId)
signal buyClicked(int packId)
Component.onCompleted: {
walletModel.getGasPricePredictions()
}
GridView {
id: availableStickerPacks
width: parent.width
height: 380
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
anchors.top: parent.top
anchors.topMargin: Style.current.padding
cellWidth: parent.width - (Style.current.padding * 2)
cellHeight: height - 72
model: stickerPacks
focus: true
clip: true
delegate: Item {
width: availableStickerPacks.cellWidth
height: availableStickerPacks.cellHeight
RoundedImage {
id: imgPreview
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 220
width: parent.width
radius: 12
source: "https://ipfs.infura.io/ipfs/" + preview
onClicked: {
stickerPackDetailsPopup.open()
}
}
ModalPopup {
id: stickerPackDetailsPopup
height: 472
header: StatusStickerPackDetails {
height: 46
anchors.top: parent.top
anchors.left: parent.left
anchors.topMargin: Style.current.padding
width: parent.width - (Style.current.padding * 2)
packThumb: thumbnail
packName: name
packAuthor: author
packNameFontSize: 17
spacing: Style.current.padding / 2
}
footer: StatusStickerButton {
height: 76
anchors.right: parent.right
style: StatusStickerButton.StyleType.LargeNoIcon
packPrice: price
isInstalled: installed
isBought: bought
isPending: pending
onInstallClicked: root.installClicked(stickers, packId, index)
onUninstallClicked: root.uninstallClicked(packId)
onCancelClicked: root.cancelClicked(packId)
onUpdateClicked: root.updateClicked(packId)
onBuyClicked: {
stickerPackPurchaseModal.open()
root.buyClicked(packId)
}
}
contentWrapper.anchors.topMargin: 0
contentWrapper.anchors.bottomMargin: 0
StatusStickerList {
id: stickerGridInPopup
model: stickers
height: 350
}
}
StatusStickerPackPurchaseModal {
id: stickerPackPurchaseModal
stickerPackId: packId
packPrice: price
width: stickerPackDetailsPopup.width
height: stickerPackDetailsPopup.height
showBackBtn: stickerPackDetailsPopup.opened
}
StatusStickerPackDetails {
id: stickerPackDetails
height: 64 - (Style.current.smallPadding * 2)
width: parent.width - (Style.current.padding * 2)
anchors.top: imgPreview.bottom
anchors.topMargin: Style.current.smallPadding
anchors.bottomMargin: Style.current.smallPadding
anchors.left: parent.left
anchors.right: parent.right
packThumb: thumbnail
packName: name
packAuthor: author
StatusStickerButton {
anchors.right: parent.right
packPrice: price
width: 75 // only needed for Qt Creator
isInstalled: installed
isBought: bought
isPending: pending
onInstallClicked: root.installClicked(stickers, packId, index)
onUninstallClicked: root.uninstallClicked(packId)
onCancelClicked: root.cancelClicked(packId)
onUpdateClicked: root.updateClicked(packId)
onBuyClicked: {
stickerPackPurchaseModal.open()
root.buyClicked(packId)
}
}
}
}
}
Item {
id: footer
height: 44 - Style.current.padding
anchors.top: availableStickerPacks.bottom
RoundedIcon {
id: btnBack
anchors.top: parent.top
anchors.topMargin: Style.current.padding / 2
anchors.left: parent.left
anchors.leftMargin: Style.current.padding / 2
width: 28
height: 28
iconWidth: 17.5
iconHeight: 13.5
iconColor: Style.current.pillButtonTextColor
source: "../../app/img/arrowUp.svg"
rotation: 270
onClicked: {
root.backClicked()
}
}
}
}
/*##^##
Designer {
D{i:0;height:440;width:360}
}
##^##*/

47
ui/shared/status/StatusStickerPackDetails.qml Normal file
View File

@ -0,0 +1,47 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
import "../../imports"
import "../../shared"
Item {
id: root
default property alias content: rest.children
property string packThumb: "QmfZrHmLR5VvkXSDbArDR3TX6j4FgpDcrvNz2fHSJk1VvG"
property string packName: "Status Cat"
property string packAuthor: "cryptoworld1373"
property int packNameFontSize: 15
property int spacing: Style.current.padding
RoundedImage {
id: imgThumb
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
width: 40
height: 40
source: "https://ipfs.infura.io/ipfs/" + packThumb
}
Column {
anchors.left: imgThumb.right
anchors.leftMargin: root.spacing
anchors.verticalCenter: parent.verticalCenter
Text {
id: txtPackName
text: packName
color: Style.current.textColor
font.family: Style.current.fontBold.name
font.weight: Font.Bold
font.pixelSize: packNameFontSize
}
Text {
color: Style.current.darkGrey
text: packAuthor
font.family: Style.current.fontRegular.name
font.pixelSize: 15
}
}
Item {
anchors.right: parent.right
id: rest
}
}

47
ui/shared/status/StatusStickerPackIconWithIndicator.qml Normal file
View File

@ -0,0 +1,47 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import "../../imports"
import "../../shared"
Item {
id: root
property bool selected: false
property bool useIconInsteadOfImage: false
property url source: "../../app/img/history_icon.svg"
signal clicked
height: 24
width: 24
RoundedImage {
visible: !useIconInsteadOfImage
id: iconImage
width: parent.width
height: parent.height
source: root.source
onClicked: {
root.clicked()
}
}
RoundedIcon {
id: iconIcon
visible: useIconInsteadOfImage
width: parent.width
height: parent.height
iconWidth: 6
color: Style.current.darkGrey
source: root.source
onClicked: {
root.clicked()
}
}
Rectangle {
id: packIndicator
visible: root.selected
border.color: Style.current.blue
border.width: 1
height: 2
width: 16
x: 4
y: root.y + root.height + 6
}
}

268
ui/shared/status/StatusStickerPackPurchaseModal.qml Normal file
View File

@ -0,0 +1,268 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3
import "../../imports"
import "../../shared"
import "../../shared/status"
ModalPopup {
id: root
readonly property var asset: JSON.parse(walletModel.getStatusToken())
property int stickerPackId: -1
property string packPrice
property bool showBackBtn: false
//% "Authorize %1 %2"
title: qsTrId("authorize--1--2").arg(Utils.stripTrailingZeros(packPrice)).arg(asset.symbol)
property MessageDialog sendingError: MessageDialog {
id: sendingError
//% "Error sending the transaction"
title: qsTrId("error-sending-the-transaction")
icon: StandardIcon.Critical
standardButtons: StandardButton.Ok
}
onClosed: {
stack.reset()
}
function sendTransaction() {
let responseStr = chatsModel.buyStickerPack(root.stickerPackId,
selectFromAccount.selectedAccount.address,
root.packPrice,
gasSelector.selectedGasLimit,
gasSelector.selectedGasPrice,
transactionSigner.enteredPassword)
let response = JSON.parse(responseStr)
if (!response.success) {
if (response.result.includes("could not decrypt key with given password")){
//% "Wrong password"
transactionSigner.validationError = qsTrId("wrong-password")
return
}
sendingError.text = response.result
return sendingError.open()
}
root.close()
}
TransactionStackView {
id: stack
height: parent.height
anchors.fill: parent
anchors.leftMargin: Style.current.padding
anchors.rightMargin: Style.current.padding
onGroupActivated: {
root.title = group.headerText
btnNext.text = group.footerText
}
TransactionFormGroup {
id: group1
//% "Authorize %1 %2"
headerText: qsTrId("authorize--1--2").arg(Utils.stripTrailingZeros(root.packPrice)).arg(root.asset.symbol)
//% "Continue"
footerText: qsTrId("continue")
StackView.onActivated: {
btnBack.visible = root.showBackBtn
}
AccountSelector {
id: selectFromAccount
accounts: walletModel.accounts
selectedAccount: walletModel.currentAccount
currency: walletModel.defaultCurrency
width: stack.width
//% "Choose account"
label: qsTrId("choose-account")
showBalanceForAssetSymbol: root.asset.symbol
minRequiredAssetBalance: root.packPrice
reset: function() {
accounts = Qt.binding(function() { return walletModel.accounts })
selectedAccount = Qt.binding(function() { return walletModel.currentAccount })
showBalanceForAssetSymbol = Qt.binding(function() { return root.asset.symbol })
minRequiredAssetBalance = Qt.binding(function() { return root.packPrice })
}
onSelectedAccountChanged: gasSelector.estimateGas()
}
RecipientSelector {
id: selectRecipient
visible: false
accounts: walletModel.accounts
contacts: profileModel.addedContacts
selectedRecipient: { "address": chatsModel.stickerMarketAddress, "type": RecipientSelector.Type.Address }
readOnly: true
onSelectedRecipientChanged: gasSelector.estimateGas()
}
GasSelector {
id: gasSelector
visible: false
slowestGasPrice: parseFloat(walletModel.safeLowGasPrice)
fastestGasPrice: parseFloat(walletModel.fastestGasPrice)
getGasEthValue: walletModel.getGasEthValue
getFiatValue: walletModel.getFiatValue
defaultCurrency: walletModel.defaultCurrency
reset: function() {
slowestGasPrice = Qt.binding(function(){ return parseFloat(walletModel.safeLowGasPrice) })
fastestGasPrice = Qt.binding(function(){ return parseFloat(walletModel.fastestGasPrice) })
}
property var estimateGas: Backpressure.debounce(gasSelector, 600, function() {
if (!(root.stickerPackId > -1 && selectFromAccount.selectedAccount && root.packPrice && parseFloat(root.packPrice) > 0)) {
selectedGasLimit = 325000
return
}
selectedGasLimit = chatsModel.buyPackGasEstimate(root.stickerPackId, selectFromAccount.selectedAccount.address, root.packPrice)
})
}
GasValidator {
id: gasValidator
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
selectedAccount: selectFromAccount.selectedAccount
selectedAsset: root.asset
selectedAmount: parseFloat(packPrice)
selectedGasEthValue: gasSelector.selectedGasEthValue
reset: function() {
selectedAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
selectedAsset = Qt.binding(function() { return root.asset })
selectedAmount = Qt.binding(function() { return parseFloat(packPrice) })
selectedGasEthValue = Qt.binding(function() { return gasSelector.selectedGasEthValue })
}
}
}
TransactionFormGroup {
id: group3
//% "Authorize %1 %2"
headerText: qsTrId("authorize--1--2").arg(Utils.stripTrailingZeros(root.packPrice)).arg(root.asset.symbol)
//% "Sign with password"
footerText: qsTrId("sign-with-password")
StackView.onActivated: {
btnBack.visible = true
}
TransactionPreview {
id: pvwTransaction
width: stack.width
fromAccount: selectFromAccount.selectedAccount
gas: {
"value": gasSelector.selectedGasEthValue,
"symbol": "ETH",
"fiatValue": gasSelector.selectedGasFiatValue
}
toAccount: selectRecipient.selectedRecipient
asset: root.asset
currency: walletModel.defaultCurrency
amount: {
const fiatValue = walletModel.getFiatValue(root.packPrice || 0, root.asset.symbol, currency)
return { "value": root.packPrice, "fiatValue": fiatValue }
}
reset: function() {
fromAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
toAccount = Qt.binding(function() { return selectRecipient.selectedRecipient })
asset = Qt.binding(function() { return root.asset })
amount = Qt.binding(function() { return { "value": root.packPrice, "fiatValue": walletModel.getFiatValue(root.packPrice, root.asset.symbol, currency) } })
gas = Qt.binding(function() {
return {
"value": gasSelector.selectedGasEthValue,
"symbol": "ETH",
"fiatValue": gasSelector.selectedGasFiatValue
}
})
}
}
}
TransactionFormGroup {
id: group4
//% "Send %1 %2"
headerText: qsTrId("send--1--2").arg(Utils.stripTrailingZeros(root.packPrice)).arg(root.asset.symbol)
//% "Sign with password"
footerText: qsTrId("sign-with-password")
TransactionSigner {
id: transactionSigner
width: stack.width
signingPhrase: walletModel.signingPhrase
reset: function() {
signingPhrase = Qt.binding(function() { return walletModel.signingPhrase })
}
}
}
}
footer: Item {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
StyledButton {
id: btnBack
anchors.left: parent.left
//% "Back"
label: qsTrId("back")
onClicked: {
if (stack.isFirstGroup) {
return root.close()
}
stack.back()
}
}
StatusButton {
id: btnNext
anchors.right: parent.right
//% "Next"
text: qsTrId("next")
enabled: stack.currentGroup.isValid && !stack.currentGroup.isPending
state: stack.currentGroup.isPending ? "pending" : "default"
onClicked: {
const isValid = stack.currentGroup.validate()
if (stack.currentGroup.validate()) {
if (stack.isLastGroup) {
return root.sendTransaction()
}
stack.next()
}
}
}
Connections {
target: chatsModel
onTransactionWasSent: {
//% "Transaction pending..."
toastMessage.title = qsTrId("ens-transaction-pending")
toastMessage.source = "../../../img/loading.svg"
toastMessage.iconColor = Style.current.primary
toastMessage.iconRotates = true
toastMessage.link = `${walletModel.etherscanLink}/${txResult}`
toastMessage.open()
}
onTransactionCompleted: {
toastMessage.title = !success ?
//% "Could not buy Stickerpack"
qsTrId("could-not-buy-stickerpack")
:
//% "Stickerpack bought successfully"
qsTrId("stickerpack-bought-successfully");
if (success) {
toastMessage.source = "../../../img/check-circle.svg"
toastMessage.iconColor = Style.current.success
} else {
toastMessage.source = "../../../img/block-icon.svg"
toastMessage.iconColor = Style.current.danger
}
toastMessage.link = `${walletModel.etherscanLink}/${txHash}`
toastMessage.open()
}
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/

214
ui/shared/status/StatusStickersPopup.qml Normal file
View File

@ -0,0 +1,214 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import "../../imports"
import "../../shared"
import "../../shared/status"
import "../../app/AppLayouts/Chat/ChatColumn/samples"
Popup {
id: popup
property var recentStickers: StickerData {}
property var stickerPackList: StickerPackData {}
signal stickerSelected(string hashId, string packId)
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
}
contentItem: ColumnLayout {
anchors.fill: parent
spacing: 0
StatusStickerMarket {
id: stickerMarket
visible: false
Layout.fillWidth: true
Layout.fillHeight: true
stickerPacks: stickerPackList
onInstallClicked: {
chatsModel.installStickerPack(packId)
stickerGrid.model = stickers
stickerPackListView.itemAt(index).clicked()
}
onUninstallClicked: {
chatsModel.uninstallStickerPack(packId)
stickerGrid.model = recentStickers
btnHistory.clicked()
}
onBackClicked: {
stickerMarket.visible = false
footerContent.visible = true
stickersContainer.visible = true
}
}
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: stickerGrid.count <= 0 || stickerPackListView.count <= 0
Image {
id: imgNoStickers
width: 56
height: 56
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 134
source: "../../app/img/stickers_sad_icon.svg"
}
Item {
id: noStickersContainer
width: parent.width
height: 22
anchors.top: imgNoStickers.bottom
anchors.topMargin: 8
StyledText {
id: lblNoStickersYet
visible: stickerPackListView.count <= 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.count > 0 && stickerGrid.count <= 0
anchors.fill: parent
font.pixelSize: 15
//% "Recently used stickers will appear here"
text: qsTrId("recently-used-stickers")
lineHeight: 22
horizontalAlignment: Text.AlignHCenter
}
}
StyledButton {
visible: stickerPackListView.count <= 0
//% "Get Stickers"
label: 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: {
popup.stickerSelected(hash, packId)
}
}
}
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
RoundedIcon {
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"
onClicked: {
stickersContainer.visible = false
stickerMarket.visible = true
footerContent.visible = false
}
}
StatusStickerPackIconWithIndicator {
id: btnHistory
width: 24
height: 24
selected: true
useIconInsteadOfImage: true
source: "../../app/img/history_icon.svg"
anchors.left: btnAddStickerPack.right
anchors.leftMargin: Style.current.padding
onClicked: {
btnHistory.selected = true
stickerPackListView.selectedPackId = -1
stickerGrid.model = recentStickers
}
}
RowLayout {
spacing: Style.current.padding
anchors.top: parent.top
anchors.left: btnHistory.right
anchors.leftMargin: 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
}
}
}
}
}
}
}

6
ui/shared/status/qmldir
View File

@ -14,4 +14,10 @@ StatusRoundButton 1.0 StatusRoundButton.qml
StatusSectionHeadline 1.0 StatusSectionHeadline.qml
StatusSectionMenuItem 1.0 StatusSectionMenuItem.qml
StatusSlider 1.0 StatusSlider.qml
StatusStickerButton 1.0 StatusStickerButton.qml
StatusStickerList 1.0 StatusStickerList.qml
StatusStickerMarket 1.0 StatusStickerMarket.qml
StatusStickerPackDetails 1.0 StatusStickerPackDetails.qml
StatusStickerPackPurchaseModal 1.0 StatusStickerPackPurchaseModal.qml
StatusStickersPopup 1.0 StatusStickerPopup.qml
StatusToolTip 1.0 StatusToolTip.qml