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

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:
hydrogen 2020-12-04 20:19:52 +02:00 committed by Iuri Matias
parent 2f0aab055a
commit 66d2534956
1 changed files with 41 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml
View File

@ -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