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

show dropdown for add account button

This commit is contained in:
Iuri Matias 2020-06-01 10:59:46 -04:00
parent 9fc93b8db2
commit 470687c2a6
7 changed files with 140 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
ui/app/AppLayouts/Wallet/Components/AddAccount.qml Normal file
View File

@ -0,0 +1,123 @@
import QtQuick 2.3
import QtQuick.Controls 2.3
import QtQuick.Controls 2.12 as QQC2
import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
import "../../../../shared"
import "../../../../imports"
import "../components"
Rectangle {
id: addAccount
width: 36
height: 36
color: Theme.blue
radius: 50
anchors.right: parent.right
anchors.rightMargin: 16
anchors.top: parent.top
anchors.topMargin: 59
Image {
id: addAccountLbl
fillMode: Image.PreserveAspectFit
source: "../../../img/plusSign.svg"
width: 14
height: 14
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
state: "default"
rotation: 0
states: [
State {
name: "default"
PropertyChanges {
target: addAccountLbl
rotation: 0
}
},
State {
name: "rotated"
PropertyChanges {
target: addAccountLbl
rotation: 45
}
}
]
transitions: [
Transition {
from: "default"
to: "rotated"
RotationAnimation {
duration: 150
direction: RotationAnimation.Clockwise
easing.type: Easing.InCubic
}
},
Transition {
from: "rotated"
to: "default"
RotationAnimation {
duration: 150
direction: RotationAnimation.Counterclockwise
easing.type: Easing.OutCubic
}
}
]
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
cursorShape: Qt.PointingHandCursor
onClicked: {
addAccountLbl.state = "rotated"
let x = addAccountLbl.x + addAccountLbl.width / 2 - newAccountMenu.width / 2
newAccountMenu.popup(x, addAccountLbl.height + 10)
}
PopupMenu {
id: newAccountMenu
width: 280
QQC2.Action {
text: qsTr("Generate an account")
icon.source: "../../../img/generate_account.svg"
onTriggered: {
console.log("TODO: Generate an account")
}
}
QQC2.Action {
text: qsTr("Add a watch-only address")
icon.source: "../../../img/add_watch_only.svg"
onTriggered: {
console.log("TODO: Add a watch-only address")
}
}
QQC2.Action {
text: qsTr("Enter a seed phrase")
icon.source: "../../../img/enter_seed_phrase.svg"
onTriggered: {
console.log("TODO: Enter a seed phrase")
}
}
QQC2.Action {
text: qsTr("Enter a private key")
icon.source: "../../../img/enter_private_key.svg"
onTriggered: {
console.log("TODO: Enter a private key")
}
}
onAboutToHide: {
addAccountLbl.state = "default"
}
}
}
}
/*##^##
Designer {
D{i:0;formeditorZoom:3}
}
##^##*/

1
ui/app/AppLayouts/Wallet/Components/qmldir
View File

@ -1 +1,2 @@
SendModalContent 1.0 SendModalContent.qml
AddAccount 1.0 AddAccount.qml

28
ui/app/AppLayouts/Wallet/LeftTab.qml
View File

@ -6,6 +6,7 @@ import Qt.labs.platform 1.1
import QtGraphicalEffects 1.0
import "../../../imports"
import "../../../shared"
import "./components"
Item {
property int selectedWallet: 0
@ -58,32 +59,7 @@ Item {
}
}
// TODO change this with a reused Component
Rectangle {
id: addWalletBtn
width: 36
height: 36
color: Theme.blue
radius: 50
anchors.right: parent.right
anchors.rightMargin: Theme.padding
anchors.top: walletValueTextContainer.top
anchors.topMargin: 0
Text {
id: addChatLbl
color: "#ffffff"
text: qsTr("+")
anchors.verticalCenterOffset: -1
anchors.horizontalCenterOffset: 1
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
lineHeight: 1
fontSizeMode: Text.FixedSize
font.bold: true
font.pixelSize: 28
}
}
AddAccount {}
Component {
id: walletDelegate

4
ui/app/img/add_watch_only.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.028 6.00002C10.028 7.10459 9.12002 8.00003 8 8.00003C6.87998 8.00003 5.97202 7.10459 5.97202 6.00002C5.97202 4.89546 6.87998 4.00002 8 4.00002C9.12002 4.00002 10.028 4.89546 10.028 6.00002Z" fill="#4360DF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.64606 6.00002C1.99772 6.53799 2.72309 7.52514 3.78173 8.3853C4.88005 9.27771 6.2938 10 8 10C9.70621 10 11.1199 9.27771 12.2183 8.3853C13.2769 7.52514 14.0023 6.53799 14.3539 6.00002C14.0023 5.46206 13.2769 4.47491 12.2183 3.61475C11.1199 2.72234 9.70621 2.00002 8 2.00002C6.2938 2.00002 4.88005 2.72234 3.78173 3.61475C2.72309 4.47491 1.99772 5.46206 1.64606 6.00002ZM2.7501 2.37988C4.03615 1.33494 5.80282 0.400024 8 0.400024C10.1972 0.400024 11.9639 1.33494 13.2499 2.37988C14.533 3.42239 15.3807 4.60758 15.7655 5.20707C16.0782 5.69425 16.0782 6.3058 15.7655 6.79298C15.3807 7.39247 14.533 8.57766 13.2499 9.62017C11.9639 10.6651 10.1972 11.6 8 11.6C5.80282 11.6 4.03615 10.6651 2.7501 9.62017C1.46704 8.57766 0.619349 7.39247 0.23454 6.79298C-0.0781801 6.3058 -0.0781801 5.69425 0.23454 5.20707C0.619349 4.60758 1.46704 3.42239 2.7501 2.37988Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
ui/app/img/enter_private_key.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.96548 0.634326C1.65317 0.321924 1.14653 0.321924 0.834229 0.634326C0.521729 0.946826 0.521729 1.45327 0.834229 1.76577L5.06841 6.00005L0.834229 10.2343C0.521729 10.5468 0.521729 11.0533 0.834229 11.3658C1.14653 11.6782 1.65317 11.6782 1.96548 11.3658L6.76548 6.56577C7.07798 6.25327 7.07798 5.74683 6.76548 5.43433L1.96548 0.634326Z" fill="#4360DF"/>
<path d="M7.79985 10C7.35806 10 6.99985 10.3583 6.99985 10.8C6.99985 11.2418 7.35806 11.6 7.79985 11.6H12.5999C13.0416 11.6 13.3999 11.2418 13.3999 10.8C13.3999 10.3583 13.0416 10 12.5999 10H7.79985Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 684 B

3
ui/app/img/enter_seed_phrase.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.199951 1.00007C0.199951 0.558245 0.558123 0.200073 0.999951 0.200073H8.99995C9.44178 0.200073 9.79995 0.558245 9.79995 1.00007C9.79995 1.4419 9.44178 1.80007 8.99995 1.80007H0.999951C0.558123 1.80007 0.199951 1.4419 0.199951 1.00007ZM0.199951 5.00007C0.199951 4.55825 0.558123 4.20007 0.999951 4.20007H8.99995C9.44178 4.20007 9.79995 4.55825 9.79995 5.00007C9.79995 5.4419 9.44178 5.80007 8.99995 5.80007H0.999951C0.558123 5.80007 0.199951 5.4419 0.199951 5.00007ZM0.999951 8.20007C0.558123 8.20007 0.199951 8.55825 0.199951 9.00007C0.199951 9.4419 0.558123 9.80007 0.999951 9.80007H5.79995C6.24178 9.80007 6.59995 9.4419 6.59995 9.00007C6.59995 8.55825 6.24178 8.20007 5.79995 8.20007H0.999951Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 869 B

3
ui/app/img/generate_account.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.7999 5.20002V1.2055C6.7999 0.759983 6.44173 0.400024 5.9999 0.400024C5.55499 0.400024 5.1999 0.760649 5.1999 1.2055V5.20002H1.20538C0.759861 5.20002 0.399902 5.5582 0.399902 6.00002C0.399902 6.44493 0.760526 6.80002 1.20538 6.80002H5.1999V10.7945C5.1999 11.2401 5.55807 11.6 5.9999 11.6C6.44481 11.6 6.7999 11.2394 6.7999 10.7945V6.80002H10.7944C11.2399 6.80002 11.5999 6.44185 11.5999 6.00002C11.5999 5.55512 11.2393 5.20002 10.7944 5.20002H6.7999Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 621 B