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

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

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