status-desktop/ui/app/AppLayouts/Wallet/addaccount/panels/DerivationPathSection.qml

124 lines
3.4 KiB
QML

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import utils 1.0
import "../stores"
Column {
id: root
property AddAccountStore store
padding: Style.current.padding
state: root.store.addAccountModule.actionAuthenticated? d.expandedState : d.collapsedState
QtObject {
id: d
readonly property string expandedState: "expanded"
readonly property string collapsedState: "collapsed"
}
RowLayout {
width: parent.width - 2 * root.padding
height: 64
StatusBaseText {
font.pixelSize: Constants.addAccountPopup.labelFontSize1
textFormat: Text.RichText
text: {
let t = qsTr("Derivation path")
let t1 = qsTr("(advanced)")
return `%1 <font color="${Theme.palette.baseColor1}">%2</font>`.arg(t).arg(t1)
}
}
Item {
Layout.fillWidth: true
Layout.preferredHeight: 1
}
StatusButton {
visible: !root.store.addAccountModule.actionAuthenticated
text: qsTr("Edit")
icon.name: {
if (root.store.selectedOrigin.keyUid === root.store.userProfileKeyUid &&
root.store.userProfileUsingBiometricLogin) {
return "touch-id"
}
if (root.store.selectedOrigin.migratedToKeycard || root.store.userProfileIsKeycardUser) {
return "keycard"
}
return "password"
}
onClicked: {
root.store.authenticateForEditingDerivationPath()
}
}
StatusIcon {
id: expandImage
visible: root.store.addAccountModule.actionAuthenticated
color: Theme.palette.baseColor1
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
if (root.state === d.expandedState) {
root.state = d.collapsedState
return
}
root.state = d.expandedState
root.state = Qt.binding(function(){ return root.store.addAccountModule.actionAuthenticated? d.expandedState : d.collapsedState })
}
}
}
}
DerivationPath {
id: derivationPathContent
width: parent.width - 2 * root.padding
store: root.store
}
states: [
State {
name: d.expandedState
PropertyChanges {target: expandImage; icon: "chevron-up"}
PropertyChanges {target: derivationPathContent; visible: true}
},
State {
name: d.collapsedState
PropertyChanges {target: expandImage; icon: "chevron-down"}
PropertyChanges {target: derivationPathContent; visible: false}
}
]
transitions: [
Transition {
from: d.collapsedState
to: d.expandedState
NumberAnimation { properties: "height"; duration: 200;}
},
Transition {
from: d.expandedState
to: d.collapsedState
NumberAnimation { properties: "height"; duration: 200;}
}
]
}