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

ens section fixes 

use the available dark image for ens section

add the image, ensure 624 widths and fix button

move common strings to constants and use number consts
This commit is contained in:
rinzlxr 2021-03-23 18:34:52 +02:00 committed by Iuri Matias
parent 5091e258d3
commit 47ae3a4c16
7 changed files with 185 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

320
ui/app/AppLayouts/Profile/Sections/Ens/Search.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Layouts 1.3
import QtQuick.Controls 2.14 import QtQuick.Controls 2.14
import "../../../../../imports" import "../../../../../imports"
import "../../../../../shared" import "../../../../../shared"
import "../../../../../shared/status"
Item { Item {
id: searchENS id: searchENS
@ -65,207 +66,198 @@ Item {
} }
} }
StyledText { Item {
id: sectionTitle id: ensContainer
//% "Your username"
text: qsTrId("ens-your-username")
anchors.left: parent.left
anchors.leftMargin: 24
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 24 width: 624
font.weight: Font.Bold
font.pixelSize: 20
}
Rectangle {
id: circleAt
anchors.top: sectionTitle.bottom
anchors.topMargin: 24
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
width: 60
height: 60
radius: 120
color: Style.current.blue
SVGImage {
id: imgIcon
visible: ensStatus === "taken"
fillMode: Image.PreserveAspectFit
source: "../../../../img/block-icon-white.svg"
width: 20
height: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
StyledText { StyledText {
visible: ensStatus !== "taken" id: sectionTitle
text: { text: ""
if((ensStatus === "available" || ensStatus === "connected" || ensStatus === "connected-different-key")){ anchors.left: parent.left
return "✓" anchors.leftMargin: Style.current.bigPadding
} else { anchors.top: parent.top
return "@" anchors.topMargin: Style.current.bigPadding
}
}
opacity: 0.7
font.weight: Font.Bold font.weight: Font.Bold
font.pixelSize: 18 font.pixelSize: 20
color: Style.current.white }
Rectangle {
id: circleAt
anchors.top: sectionTitle.bottom
anchors.topMargin: Style.current.bigPadding
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter width: 60
} height: 60
} radius: 120
color: Style.current.blue
Input { SVGImage {
id: ensUsername id: imgIcon
placeholderText: !isStatus ? "vitalik94.domain.eth" : "vitalik94" visible: ensStatus === Constants.ens_taken
anchors.top: circleAt.bottom fillMode: Image.PreserveAspectFit
anchors.topMargin: 24 source: "../../../../img/block-icon-white.svg"
anchors.right: btnContinue.left width: 20
anchors.rightMargin: 24 height: 20
Keys.onReleased: { anchors.horizontalCenter: parent.horizontalCenter
onKeyReleased(ensUsername.text); anchors.verticalCenter: parent.verticalCenter
}
StyledText {
visible: ensStatus !== Constants.ens_taken
text: {
if((ensStatus === Constants.ens_available ||
ensStatus === Constants.ens_connected ||
ensStatus === Constants.ens_connected_dkey)) {
return "✓"
} else {
return "@"
}
}
opacity: 0.7
font.weight: Font.Bold
font.pixelSize: 18
color: Style.current.white
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
} }
Connections { Input {
target: profileModel.ens id: ensUsername
onEnsWasResolved: { placeholderText: !isStatus ? "vitalik94.domain.eth" : "vitalik94"
if(!validate(ensUsername.text)) return; anchors.top: circleAt.bottom
valid = false; anchors.topMargin: Style.current.bigPadding
loading = false; anchors.right: btnContinue.left
ensStatus = ensResult; anchors.rightMargin: Style.current.bigPadding
switch(ensResult){ Keys.onReleased: {
case "available": onKeyReleased(ensUsername.text);
valid = true; }
//% "✓ Username available!"
validationMessage = qsTrId("ens-username-available"); Connections {
break; target: profileModel.ens
case "owned": onEnsWasResolved: {
valid = true; if(!validate(ensUsername.text)) return;
//% "Continuing will connect this username with your chat key." valid = false;
validationMessage = qsTrId("ens-username-owned-continue"); loading = false;
break; ensStatus = ensResult;
case "taken": switch(ensResult){
validationMessage = !isStatus ? case Constants.ens_available:
//% "Username doesn’t belong to you :(" case Constants.ens_owned:
qsTrId("ens-custom-username-taken") case Constants.ens_connected:
: case Constants.ens_connected_dkey:
//% "Username already taken :(" valid = true;
qsTrId("ens-username-taken"); validationMessage = Constants.ensState[ensResult]
break; break;
case "already-connected": case Constants.ens_taken:
//% "Username is already connected with your chat key and can be used inside Status." validationMessage = !isStatus ? Constants.ensState['taken_custom'] : Constants.ensState['taken'];
validationMessage = qsTrId("ens-username-already-added"); break;
break; case Constants.already_connected:
case "connected": validationMessage = Constants.ensState[ensResult]
valid = true; break;
//% "This user name is owned by you and connected with your chat key. Continue to set `Show my ENS username in chats`." }
validationMessage = qsTrId("this-user-name-is-owned-by-you-and-connected-with-your-chat-key--continue-to-set--show-my-ens-username-in-chats--");
break;
case "connected-different-key":
valid = true;
//% "Continuing will require a transaction to connect the username with your current chat key."
validationMessage = qsTrId("ens-username-connected-with-different-key");
break;
} }
} }
} }
}
Button { StatusRoundButton {
id: btnContinue id: btnContinue
width: 44 width: 44
height: 44 height: 44
anchors.top: circleAt.bottom anchors.top: circleAt.bottom
anchors.topMargin: 24 anchors.topMargin: Style.current.bigPadding
anchors.right: parent.right anchors.right: parent.right
SVGImage { size: "medium"
source: !valid ? "../../../../img/arrow-button-inactive.svg" : "../../../../img/arrow-btn-active.svg" type: "secondary"
width: 50 icon.name: "arrow-right"
height: 50 icon.width: 18
} icon.height: 14
background: Rectangle { visible: valid
color: "transparent" onClicked: {
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked : {
if(!valid) return; if(!valid) return;
if(ensStatus === "connected"){ if(ensStatus === Constants.ens_connected){
profileModel.ens.connectOwnedUsername(ensUsername.text, isStatus); profileModel.ens.connectOwnedUsername(ensUsername.text, isStatus);
continueClicked(ensStatus, ensUsername.text) continueClicked(ensStatus, ensUsername.text)
return; return;
} }
if(ensStatus === "available"){ if(ensStatus === Constants.ens_available){
continueClicked(ensStatus, ensUsername.text); continueClicked(ensStatus, ensUsername.text);
return; return;
} }
if(ensStatus === "connected-different-key" || ensStatus === "owned"){ if(ensStatus === Constants.ens_connected_dkey || ensStatus === Constants.ens_owned){
transactionDialog.open(); transactionDialog.open();
return; return;
} }
} }
} }
}
Rectangle {
id: ensTypeRect
anchors.top: ensUsername.bottom
anchors.topMargin: Style.current.bigPadding
border.width: 1
border.color: Style.current.border
color: Style.current.background
radius: 50
height: 30
width: 350
Rectangle { Item {
id: ensTypeRect anchors.left: parent.left
anchors.top: ensUsername.bottom anchors.right: parent.right
anchors.topMargin: 24 anchors.top: parent.top
border.width: 1 anchors.topMargin: Style.current.halfPadding
border.color: Style.current.border anchors.leftMargin: Style.current.padding
color: Style.current.background height: 20
radius: 50
height: 20
width: 350
StyledText { StyledText {
text: !isStatus ? text: !isStatus ?
//% "Custom domain" //% "Custom domain"
qsTrId("ens-custom-domain") qsTrId("ens-custom-domain")
: :
".stateofus.eth" ".stateofus.eth"
font.weight: Font.Bold font.weight: Font.Bold
font.pixelSize: 12 font.pixelSize: 12
anchors.leftMargin: Style.current.padding anchors.leftMargin: Style.current.padding
color: Style.current.textColor color: Style.current.textColor
} }
StyledText { StyledText {
text: !isStatus ? text: !isStatus ?
//% "I want a stateofus.eth domain" //% "I want a stateofus.eth domain"
qsTrId("ens-want-domain") qsTrId("ens-want-domain")
: :
//% "I own a name on another domain" //% "I own a name on another domain"
qsTrId("ens-want-custom-domain") qsTrId("ens-want-custom-domain")
font.pixelSize: 12 font.pixelSize: 12
color: Style.current.blue color: Style.current.blue
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.padding anchors.rightMargin: Style.current.padding
MouseArea { MouseArea {
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
anchors.fill: parent anchors.fill: parent
onClicked : { onClicked : {
isStatus = !isStatus; isStatus = !isStatus;
let ensUser = ensUsername.text; let ensUser = ensUsername.text;
if(validate(ensUser)) if(validate(ensUser))
validateENS(ensUser, isStatus) validateENS(ensUser, isStatus)
}
}
} }
} }
} }
}
StyledText { StyledText {
id: validationResult id: validationResult
text: validationMessage text: validationMessage
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: ensTypeRect.bottom anchors.top: ensTypeRect.bottom
anchors.topMargin: 24 anchors.topMargin: Style.current.bigPadding
}
} }
} }

9
ui/app/AppLayouts/Profile/Sections/Ens/Welcome.qml
View File

@ -10,8 +10,7 @@ Item {
StyledText { StyledText {
id: sectionTitle id: sectionTitle
//% "ENS usernames" text: ""
text: qsTrId("ens-usernames")
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 24 anchors.leftMargin: 24
anchors.top: parent.top anchors.top: parent.top
@ -34,15 +33,15 @@ Item {
Item { Item {
id: contentItem id: contentItem
anchors.right: parent.right; width: 624
anchors.left: parent.left; anchors.horizontalCenter: parent.horizontalCenter
Image { Image {
id: image id: image
anchors.top: parent.top anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
source: "../../../../img/ens-header@2x.png" source: `../../../../img/ens-header-${Style.current.name}@2x.png`
} }
StyledText { StyledText {

BIN
ui/app/img/ens-header-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
ui/app/img/ens-header-dark@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 82 KiB

BIN
ui/app/img/ens-header-dark@3x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 147 KiB

0
ui/app/img/ens-header@2x.png → ui/app/img/ens-header-light@2x.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

26
ui/imports/Constants.qml
View File

@ -126,6 +126,30 @@ QtObject {
readonly property var acceptedImageExtensions: [".png", ".jpg", ".jpeg", ".svg", ".gif"] readonly property var acceptedImageExtensions: [".png", ".jpg", ".jpeg", ".svg", ".gif"]
readonly property var acceptedDragNDropImageExtensions: [".png", ".jpg", ".jpeg", ".heif", "tif", ".tiff"] readonly property var acceptedDragNDropImageExtensions: [".png", ".jpg", ".jpeg", ".heif", "tif", ".tiff"]
readonly property string mentionSpanTag: `<span style="color:${Style.current.mentionColor}; background-color: ${Style.current.mentionBgColor};">` readonly property string mentionSpanTag: `<span style="color:${Style.current.mentionColor}; background-color: ${Style.current.mentionBgColor};">`
readonly property string ens_taken: "taken"
readonly property string ens_taken_custom: "taken-custom"
readonly property string ens_owned: "owned"
readonly property string ens_availabe: "available"
readonly property string ens_already_connected: "already-connected"
readonly property string ens_connected: "connected"
readonly property string ens_connected_dkey: "connected-different-key"
readonly property var ensState: {
//% "Username already taken :("
"taken": qsTrId("ens-username-taken"),
//% "Username doesn’t belong to you :("
"taken-custom": qsTrId("ens-custom-username-taken"),
//% "Continuing will connect this username with your chat key."
"owned": qsTrId("ens-username-owned-continue"),
//% "✓ Username available!"
"availabe": qsTrId("ens-username-available"),
//% "Username is already connected with your chat key and can be used inside Status."
"already-connected": qsTrId("ens-username-already-added"),
//% "This user name is owned by you and connected with your chat key. Continue to set `Show my ENS username in chats`."
"connected": qsTrId("this-user-name-is-owned-by-you-and-connected-with-your-chat-key--continue-to-set--show-my-ens-username-in-chats--"),
//% "Continuing will require a transaction to connect the username with your current chat key."
"connected-different-key": qsTrId("ens-username-connected-with-different-key"),
}
} }