mirror of
https://github.com/status-im/status-desktop.git
synced 2025-02-25 13:06:08 +00:00
fix: fix sticker popups to have the right colors and right size
This commit is contained in:
Jonathan Rainville
Iuri Matias
parent
fdf9d0b5ec
commit
c460206c58
@ -27,7 +27,7 @@ Item {
|
||||
})
|
||||
//% "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 textColor: style === StatusStickerButton.StyleType.Default ? Style.current.roundedButtonSecondaryForegroundColor : Style.current.buttonForegroundColor
|
||||
property color bgColor: style === StatusStickerButton.StyleType.Default ? Style.current.blue : Style.current.secondaryBackground
|
||||
signal uninstallClicked()
|
||||
signal installClicked()
|
||||
@ -44,7 +44,7 @@ Item {
|
||||
target: root;
|
||||
//% "Uninstall"
|
||||
text: root.style === StatusStickerButton.StyleType.Default ? "" : qsTrId("uninstall");
|
||||
textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.red;
|
||||
textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.roundedButtonSecondaryForegroundColor : Style.current.red;
|
||||
bgColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.green : Style.current.lightRed;
|
||||
icon: new Object({
|
||||
path: "../../app/img/check.svg",
|
||||
@ -83,7 +83,7 @@ Item {
|
||||
PropertyChanges {
|
||||
target: root;
|
||||
text: root.style === StatusStickerButton.StyleType.Default ? packPrice : packPrice + " SNT";
|
||||
textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.darkGrey
|
||||
textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.roundedButtonSecondaryForegroundColor : Style.current.darkGrey
|
||||
bgColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.buttonDisabledBackgroundColor;
|
||||
enabled: false;
|
||||
}
|
||||
@ -95,7 +95,7 @@ Item {
|
||||
target: root;
|
||||
//% "Pending..."
|
||||
text: qsTrId("pending---");
|
||||
textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.darkGrey
|
||||
textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.roundedButtonSecondaryForegroundColor : Style.current.darkGrey
|
||||
bgColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.darkGrey : Style.current.grey;
|
||||
enabled: false;
|
||||
icon: new Object({
|
||||
@ -113,7 +113,7 @@ Item {
|
||||
target: root;
|
||||
//% "Cancel"
|
||||
text: qsTrId("browsing-cancel");
|
||||
textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTextColor : Style.current.red;
|
||||
textColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.pillButtonTexroundedButtonSecondaryForegroundColortColor : Style.current.red;
|
||||
bgColor: root.style === StatusStickerButton.StyleType.Default ? Style.current.red : Style.current.lightRed;
|
||||
}
|
||||
},
|
||||
@ -141,7 +141,7 @@ Item {
|
||||
id: pill
|
||||
anchors.right: parent.right
|
||||
width: textMetrics.width + roundedIconImage.width + (Style.current.smallPadding * 2) + 6.7
|
||||
height: 26
|
||||
height: 44
|
||||
color: root.bgColor
|
||||
radius: root.style === StatusStickerButton.StyleType.Default ? (width / 2) : 8
|
||||
|
||||
@ -187,7 +187,7 @@ Item {
|
||||
ColorOverlay {
|
||||
anchors.fill: roundedIconImage
|
||||
source: roundedIconImage
|
||||
color: Style.current.pillButtonTextColor
|
||||
color: Style.current.roundedButtonSecondaryForegroundColor
|
||||
antialiasing: true
|
||||
}
|
||||
states: [
|
||||
|
||||
@ -48,23 +48,29 @@ Item {
|
||||
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
|
||||
}
|
||||
|
||||
contentWrapper.anchors.topMargin: 0
|
||||
contentWrapper.anchors.bottomMargin: 0
|
||||
StatusStickerList {
|
||||
id: stickerGridInPopup
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: Style.current.padding
|
||||
model: stickers
|
||||
}
|
||||
|
||||
footer: StatusStickerButton {
|
||||
height: 76
|
||||
height: 44
|
||||
anchors.right: parent.right
|
||||
style: StatusStickerButton.StyleType.LargeNoIcon
|
||||
packPrice: price
|
||||
@ -80,13 +86,6 @@ Item {
|
||||
root.buyClicked(packId)
|
||||
}
|
||||
}
|
||||
contentWrapper.anchors.topMargin: 0
|
||||
contentWrapper.anchors.bottomMargin: 0
|
||||
StatusStickerList {
|
||||
id: stickerGridInPopup
|
||||
model: stickers
|
||||
height: 350
|
||||
}
|
||||
}
|
||||
Component {
|
||||
id: stickerPackPurchaseModal
|
||||
@ -150,7 +149,7 @@ Item {
|
||||
height: 28
|
||||
iconWidth: 17.5
|
||||
iconHeight: 13.5
|
||||
iconColor: Style.current.pillButtonTextColor
|
||||
iconColor: Style.current.roundedButtonSecondaryForegroundColor
|
||||
source: "../../app/img/arrowUp.svg"
|
||||
rotation: 270
|
||||
onClicked: {
|
||||
|
||||
@ -37,19 +37,37 @@ ModalPopup {
|
||||
height: 472
|
||||
header: StatusStickerPackDetails {
|
||||
id: stickerGrid
|
||||
height: 76
|
||||
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
|
||||
}
|
||||
|
||||
contentWrapper.anchors.topMargin: 0
|
||||
contentWrapper.anchors.bottomMargin: 0
|
||||
StatusStickerList {
|
||||
id: stickerGridInPopup
|
||||
model: stickers
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: Style.current.padding
|
||||
Component {
|
||||
id: stickerPackPurchaseModal
|
||||
StatusStickerPackPurchaseModal {
|
||||
onClosed: {
|
||||
destroy()
|
||||
}
|
||||
stickerPackId: packId
|
||||
packPrice: price
|
||||
width: stickerPackDetailsPopup.width
|
||||
height: stickerPackDetailsPopup.height
|
||||
showBackBtn: stickerPackDetailsPopup.opened
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer: StatusStickerButton {
|
||||
height: 76
|
||||
height: 44
|
||||
anchors.right: parent.right
|
||||
style: StatusStickerButton.StyleType.LargeNoIcon
|
||||
packPrice: price
|
||||
@ -71,24 +89,4 @@ ModalPopup {
|
||||
root.buyClicked(packId)
|
||||
}
|
||||
}
|
||||
contentWrapper.anchors.topMargin: 0
|
||||
contentWrapper.anchors.bottomMargin: 0
|
||||
StatusStickerList {
|
||||
id: stickerGridInPopup
|
||||
model: stickers
|
||||
height: 350
|
||||
Component {
|
||||
id: stickerPackPurchaseModal
|
||||
StatusStickerPackPurchaseModal {
|
||||
onClosed: {
|
||||
destroy()
|
||||
}
|
||||
stickerPackId: packId
|
||||
packPrice: price
|
||||
width: stickerPackDetailsPopup.width
|
||||
height: stickerPackDetailsPopup.height
|
||||
showBackBtn: stickerPackDetailsPopup.opened
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,42 +6,47 @@ 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
|
||||
|
||||
height: childrenRect.height
|
||||
width: parent.width
|
||||
|
||||
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 {
|
||||
StyledText {
|
||||
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
|
||||
StyledText {
|
||||
color: Style.current.secondaryText
|
||||
text: packAuthor
|
||||
font.family: Style.current.fontRegular.name
|
||||
font.pixelSize: 15
|
||||
}
|
||||
}
|
||||
Item {
|
||||
|
||||
Separator {
|
||||
anchors.top: imgThumb.bottom
|
||||
anchors.topMargin: Style.current.padding
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: -Style.current.padding
|
||||
anchors.right: parent.right
|
||||
id: rest
|
||||
anchors.rightMargin: -Style.current.padding
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user