fix: update profile ui
fixes #1269 - [x] New name font size: 20 Inter Bold - [x] Increase Name<->Address padding on 4px - [x] Create a hover state on QR - [x] QR Modal
This commit is contained in:
parent
2f0aab055a
commit
66d2534956
|
@ -9,7 +9,6 @@ Item {
|
||||||
property string identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAhklEQVR4nOzWwQ1AQBgFYUQvelKHMtShJ9VwFyvrsExe5jvKXiYv+WPoQhhCYwiNITSG0MSEjLUPt3097r7P09L/8f4qZhFDaAyhqboIT76+TiUxixhCYwhN9b/WW6Xr1ErMIobQGEJjCI0hNIbQGEJjCI0haiRmEUNoDKExhMYQmjMAAP//B2kXcP2uDV8AAAAASUVORK5CYII="
|
property string identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAhklEQVR4nOzWwQ1AQBgFYUQvelKHMtShJ9VwFyvrsExe5jvKXiYv+WPoQhhCYwiNITSG0MSEjLUPt3097r7P09L/8f4qZhFDaAyhqboIT76+TiUxixhCYwhN9b/WW6Xr1ErMIobQGEJjCI0hNIbQGEJjCI0haiRmEUNoDKExhMYQmjMAAP//B2kXcP2uDV8AAAAASUVORK5CYII="
|
||||||
property string pubkey: "0x04d8c07dd137bd1b73a6f51df148b4f77ddaa11209d36e43d8344c0a7d6db1cad6085f27cfb75dd3ae21d86ceffebe4cf8a35b9ce8d26baa19dc264efe6d8f221b"
|
property string pubkey: "0x04d8c07dd137bd1b73a6f51df148b4f77ddaa11209d36e43d8344c0a7d6db1cad6085f27cfb75dd3ae21d86ceffebe4cf8a35b9ce8d26baa19dc264efe6d8f221b"
|
||||||
property string ensName: "joestar.eth"
|
property string ensName: "joestar.eth"
|
||||||
property bool showQR: false
|
|
||||||
|
|
||||||
id: profileHeaderContent
|
id: profileHeaderContent
|
||||||
height: parent.height
|
height: parent.height
|
||||||
|
@ -37,8 +36,8 @@ Item {
|
||||||
|
|
||||||
Image {
|
Image {
|
||||||
id: identiconImage
|
id: identiconImage
|
||||||
width: 44
|
width: 60
|
||||||
height: 44
|
height: 60
|
||||||
fillMode: Image.PreserveAspectFit
|
fillMode: Image.PreserveAspectFit
|
||||||
source: identicon
|
source: identicon
|
||||||
mipmap: true
|
mipmap: true
|
||||||
|
@ -53,8 +52,10 @@ Item {
|
||||||
anchors.left: profileImg.right
|
anchors.left: profileImg.right
|
||||||
anchors.leftMargin: 8
|
anchors.leftMargin: 8
|
||||||
anchors.top: profileImg.top
|
anchors.top: profileImg.top
|
||||||
font.weight: Font.Medium
|
anchors.topMargin: 4
|
||||||
font.pixelSize: 15
|
font.family: "Inter"
|
||||||
|
font.weight: Font.Bold
|
||||||
|
font.pixelSize: 20
|
||||||
}
|
}
|
||||||
|
|
||||||
Address {
|
Address {
|
||||||
|
@ -62,67 +63,78 @@ Item {
|
||||||
text: ensName !== "" ? username : pubkey
|
text: ensName !== "" ? username : pubkey
|
||||||
anchors.bottom: profileImg.bottom
|
anchors.bottom: profileImg.bottom
|
||||||
anchors.left: profileName.left
|
anchors.left: profileName.left
|
||||||
|
anchors.bottomMargin: 4
|
||||||
width: 200
|
width: 200
|
||||||
font.pixelSize: 15
|
font.pixelSize: 15
|
||||||
}
|
}
|
||||||
|
|
||||||
SVGImage {
|
Rectangle {
|
||||||
id: qrCodeImage
|
id: qrCodeButton
|
||||||
source: "../../../img/qr-code-icon.svg"
|
|
||||||
width: 18
|
|
||||||
height: 18
|
|
||||||
anchors.right: parent.right
|
|
||||||
property bool hovered: false
|
property bool hovered: false
|
||||||
|
color: hovered ? Style.current.backgroundHover : Style.current.transparent
|
||||||
|
anchors.right: parent.right
|
||||||
|
height: 32
|
||||||
|
width: 32
|
||||||
|
radius: 8
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
|
||||||
|
SVGImage {
|
||||||
|
id: qrCodeImage
|
||||||
|
source: "../../../img/qr-code-icon.svg"
|
||||||
|
width: 18
|
||||||
|
height: 18
|
||||||
|
property bool hovered: false
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
cursorShape: Qt.PointingHandCursor
|
cursorShape: Qt.PointingHandCursor
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
onExited: {
|
onExited: {
|
||||||
parent.hovered = false
|
qrCodeButton.hovered = false
|
||||||
}
|
}
|
||||||
onEntered: {
|
onEntered: {
|
||||||
parent.hovered = true
|
qrCodeButton.hovered = true
|
||||||
}
|
}
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showQR = !showQR
|
qrCodePopup.open()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
ColorOverlay {
|
ColorOverlay {
|
||||||
id: qrCodeOverlay
|
id: qrCodeOverlay
|
||||||
anchors.fill: qrCodeImage
|
anchors.fill: qrCodeImage
|
||||||
source: qrCodeImage
|
source: qrCodeImage
|
||||||
color: qrCodeImage.hovered ? Style.current.buttonForegroundColor : Style.current.textColor
|
color: qrCodeButton.hovered ? Style.current.buttonForegroundColor : Style.current.textColor
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Separator {
|
Separator {
|
||||||
id: lineSeparator
|
id: lineSeparator
|
||||||
anchors.top: profileImg.bottom
|
anchors.top: profileImg.bottom
|
||||||
anchors.topMargin: 36
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
ModalPopup {
|
||||||
anchors.fill: parent
|
id: qrCodePopup
|
||||||
visible: showQR
|
width: 420
|
||||||
|
height: 420
|
||||||
Image {
|
Image {
|
||||||
asynchronous: true
|
asynchronous: true
|
||||||
fillMode: Image.PreserveAspectFit
|
fillMode: Image.PreserveAspectFit
|
||||||
source: profileModel.qrCode(pubkey)
|
source: profileModel.qrCode(pubkey)
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter + 20
|
||||||
height: 424
|
height: 312
|
||||||
width: 424
|
width: 312
|
||||||
mipmap: true
|
mipmap: true
|
||||||
smooth: false
|
smooth: false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Column {
|
Column {
|
||||||
visible: !showQR
|
|
||||||
anchors.right: profileImgNameContainer.right
|
anchors.right: profileImgNameContainer.right
|
||||||
anchors.left: profileImgNameContainer.left
|
anchors.left: profileImgNameContainer.left
|
||||||
spacing: Style.current.bigPadding
|
spacing: Style.current.bigPadding
|
||||||
|
|
Loading…
Reference in New Issue