276 lines
9.7 KiB
QML
276 lines
9.7 KiB
QML
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: 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
|
|
}
|
|
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
|
|
}
|
|
}
|
|
|
|
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: false
|
|
|
|
Image {
|
|
id: imgNoStickers
|
|
visible: lblNoStickersYet.visible || lblNoRecentStickers.visible
|
|
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: 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
|
|
}
|
|
}
|
|
|
|
StyledButton {
|
|
visible: lblNoStickersYet.visible
|
|
//% "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: {
|
|
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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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
|
|
|
|
StatusRoundButton {
|
|
id: btnAddStickerPack
|
|
size: "medium"
|
|
icon.name: "plusSign"
|
|
implicitWidth: 24
|
|
implicitHeight: 24
|
|
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: "../../app/img/history_icon.svg"
|
|
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
|
|
loadingGrid.visible = false
|
|
loadingStickerPackListView.model = []
|
|
noStickerPacks.visible = installedPacksCount === 0 || chatsModel.stickers.recent.rowCount() === 0
|
|
}
|
|
}
|
|
}
|
|
|