mirror of
https://github.com/status-im/status-desktop.git
synced 2025-02-19 10:09:38 +00:00
ac7deb3af0
Sticker pack details retreived from contract: - pack data decoded from contract response - data contains contentHash which, once decoded, contains an IPFS identifier - futher pack data in EDN format is downloaded from IPFS - the EDN info is decoded in to a StickerPack List of available packs from contract are obtained separately from list of installed contracts (stored as a setting in Status-go). Sticker market contains dynamic list of sticker packs. The sticker button shown for each pack has all states defined (in the design) for all UI states (ie bought, free, installed, pending, etc) Add modal popup showing sticker pack details and list of stickers to be un/installed. Contains a "larger" version of the sticker pack button with many differnt UI states defined. Uninstallation of a sticker pack removes those sticker pack's stickers from the recent sticker list and persists the list Simplify the view model by including stickers, instead of setting an "activeStickerPackId" property. This allowed for display of sticker pack stickers to be displayed in the modal popup separately from the sticker packs shown in the market.
142 lines
4.3 KiB
QML
142 lines
4.3 KiB
QML
import QtQuick 2.13
|
|
import QtQuick.Controls 2.13
|
|
import QtQuick.Layouts 1.13
|
|
import QtGraphicalEffects 1.13
|
|
import "../imports"
|
|
|
|
Popup {
|
|
property string title
|
|
default property alias content: popupContent.children
|
|
property alias contentWrapper: popupContent
|
|
property alias header: headerContent.children
|
|
|
|
id: popup
|
|
modal: true
|
|
property alias footer: footerContent.children
|
|
|
|
Overlay.modal: Rectangle {
|
|
color: "#60000000"
|
|
}
|
|
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
|
|
parent: Overlay.overlay
|
|
x: Math.round((parent.width - width) / 2)
|
|
y: Math.round((parent.height - height) / 2)
|
|
width: 480
|
|
height: 510 // TODO find a way to make this dynamic
|
|
background: Rectangle {
|
|
color: Style.current.background
|
|
radius: 8
|
|
}
|
|
padding: 0
|
|
contentItem: Item {
|
|
|
|
Item {
|
|
id: headerContent
|
|
width: parent.width
|
|
height: {
|
|
var idx = !!title ? 0 : 1
|
|
return children[idx] && children[idx].height + Style.current.padding
|
|
}
|
|
anchors.top: parent.top
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.bottomMargin: Style.current.padding
|
|
anchors.rightMargin: Style.current.padding
|
|
anchors.leftMargin: Style.current.padding
|
|
|
|
StyledText {
|
|
text: title
|
|
anchors.top: parent.top
|
|
anchors.left: parent.left
|
|
font.bold: true
|
|
font.pixelSize: 17
|
|
anchors.leftMargin: 16
|
|
anchors.topMargin: Style.current.padding
|
|
anchors.bottomMargin: Style.current.padding
|
|
visible: !!title
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: closeButton
|
|
height: 32
|
|
width: 32
|
|
anchors.top: parent.top
|
|
anchors.topMargin: Style.current.padding
|
|
anchors.rightMargin: Style.current.padding
|
|
anchors.right: parent.right
|
|
radius: 8
|
|
color: Style.current.transparent
|
|
|
|
SVGImage {
|
|
id: closeModalImg
|
|
source: "./img/close.svg"
|
|
width: 25
|
|
height: 25
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
}
|
|
ColorOverlay {
|
|
anchors.fill: closeModalImg
|
|
source: closeModalImg
|
|
color: Style.current.textColor
|
|
}
|
|
|
|
MouseArea {
|
|
id: closeModalMouseArea
|
|
cursorShape: Qt.PointingHandCursor
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onExited: {
|
|
closeButton.color = Style.current.transparent
|
|
}
|
|
onEntered: {
|
|
closeButton.color = Style.current.border
|
|
}
|
|
onClicked: {
|
|
popup.close()
|
|
}
|
|
}
|
|
}
|
|
|
|
Separator {
|
|
id: separator
|
|
anchors.top: headerContent.bottom
|
|
}
|
|
|
|
Item {
|
|
id: popupContent
|
|
anchors.top: separator.bottom
|
|
anchors.topMargin: Style.current.padding
|
|
anchors.bottom: separator2.top
|
|
anchors.bottomMargin: Style.current.padding
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: Style.current.padding
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: Style.current.padding
|
|
}
|
|
|
|
Separator {
|
|
id: separator2
|
|
visible: !!footerContent.children[0]
|
|
anchors.bottom: parent.bottom
|
|
anchors.bottomMargin: 75
|
|
}
|
|
|
|
Item {
|
|
id: footerContent
|
|
visible: !!children[0]
|
|
height: children[0] && children[0].height
|
|
width: parent.width
|
|
anchors.top: separator2.bottom
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.bottom: parent.bottom
|
|
anchors.topMargin: Style.current.padding
|
|
anchors.bottomMargin: Style.current.padding
|
|
anchors.rightMargin: Style.current.padding
|
|
anchors.leftMargin: Style.current.padding
|
|
}
|
|
}
|
|
}
|