feat(StatusExpandableSettingsItem): Added new component for wallet settings
Also added a page in the sandbox to demonstrate its usage.
This commit is contained in:
Khushboo Mehta
Pascal Precht
parent
d449f0e903
commit
f3ab4ce9c9
|
|
@ -0,0 +1,69 @@
|
||||||
|
import QtQuick 2.14
|
||||||
|
import QtQuick.Layouts 1.14
|
||||||
|
import StatusQ.Core 0.1
|
||||||
|
import StatusQ.Core.Theme 0.1
|
||||||
|
import StatusQ.Components 0.1
|
||||||
|
|
||||||
|
Column {
|
||||||
|
spacing: 12
|
||||||
|
width: 800
|
||||||
|
anchors.top:parent.top
|
||||||
|
leftPadding: 20
|
||||||
|
rightPadding: 20
|
||||||
|
|
||||||
|
StatusExpandableSettingsItem {
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
|
||||||
|
expandable: false
|
||||||
|
icon.name: "seed-phrase"
|
||||||
|
primaryText: qsTr("Back up seed phrase")
|
||||||
|
secondaryText: qsTr("Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD")
|
||||||
|
button.text: qsTr("Back up seed phrase")
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusExpandableSettingsItem {
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
|
||||||
|
expandable: true
|
||||||
|
icon.name: "secret"
|
||||||
|
primaryText: qsTr("Account signing phrase")
|
||||||
|
secondaryText: qsTr("View your signing phrase and ensure that you never get scammed")
|
||||||
|
expandableComponent: notImplemented
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusExpandableSettingsItem {
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
|
||||||
|
expandable: true
|
||||||
|
icon.name: "seed-phrase"
|
||||||
|
primaryText: qsTr("View private key")
|
||||||
|
secondaryText: qsTr("Back up your seed phrase now to secure this account")
|
||||||
|
expandableComponent: notImplemented
|
||||||
|
button.text: qsTr("View private key")
|
||||||
|
button.icon.name: "tiny/public-chat"
|
||||||
|
button.onClicked: {
|
||||||
|
// To-do open enter password Modal
|
||||||
|
expanded = !expanded
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: notImplemented
|
||||||
|
Rectangle {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
width: 654
|
||||||
|
height: infoText.implicitHeight
|
||||||
|
color: Theme.palette.baseColor5
|
||||||
|
StatusBaseText {
|
||||||
|
id: infoText
|
||||||
|
anchors.centerIn: parent
|
||||||
|
color: Theme.palette.directColor4
|
||||||
|
font.pixelSize: 15
|
||||||
|
lineHeight: 22
|
||||||
|
lineHeightMode: Text.FixedHeight
|
||||||
|
font.weight: Font.Medium
|
||||||
|
text: qsTr("Not Implemented")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -169,6 +169,11 @@ StatusWindow {
|
||||||
selected: page.sourceComponent == othersComponent
|
selected: page.sourceComponent == othersComponent
|
||||||
onClicked: page.sourceComponent = othersComponent
|
onClicked: page.sourceComponent = othersComponent
|
||||||
}
|
}
|
||||||
|
StatusNavigationListItem {
|
||||||
|
title: "StatusExpandableSettingsItem"
|
||||||
|
selected: page.sourceComponent == settingsComponent
|
||||||
|
onClicked: page.sourceComponent = settingsComponent
|
||||||
|
}
|
||||||
StatusListSectionHeadline { text: "StatusQ.Popup" }
|
StatusListSectionHeadline { text: "StatusQ.Popup" }
|
||||||
StatusNavigationListItem {
|
StatusNavigationListItem {
|
||||||
title: "StatusPopupMenu"
|
title: "StatusPopupMenu"
|
||||||
|
|
@ -291,6 +296,11 @@ StatusWindow {
|
||||||
StatusTabSwitchPage {}
|
StatusTabSwitchPage {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: settingsComponent
|
||||||
|
StatusExpandableSettingsItemPage{}
|
||||||
|
}
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: demoAppCmp
|
id: demoAppCmp
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,5 +13,6 @@
|
||||||
<file>ThemeSwitch.qml</file>
|
<file>ThemeSwitch.qml</file>
|
||||||
<file>Layout.qml</file>
|
<file>Layout.qml</file>
|
||||||
<file>Popups.qml</file>
|
<file>Popups.qml</file>
|
||||||
|
<file>StatusExpandableSettingsItemPage.qml</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
</RCC>
|
</RCC>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
import QtQuick 2.14
|
||||||
|
import StatusQ.Core 0.1
|
||||||
|
import StatusQ.Controls 0.1
|
||||||
|
import StatusQ.Core.Theme 0.1
|
||||||
|
import StatusQ.Components 0.1
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: statusExpandableSettingsItem
|
||||||
|
|
||||||
|
property alias primaryText: primaryText.text
|
||||||
|
property alias secondaryText: secondaryText.text
|
||||||
|
property alias button: button
|
||||||
|
property alias expandableComponent: expandableRegion.sourceComponent
|
||||||
|
|
||||||
|
property bool expandable: true
|
||||||
|
property bool expanded: false
|
||||||
|
property StatusIconSettings icon: StatusIconSettings {
|
||||||
|
color: Theme.palette.directColor1
|
||||||
|
background: StatusIconBackgroundSettings {
|
||||||
|
width: 32
|
||||||
|
height: 32
|
||||||
|
color: Theme.palette.primaryColor2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
implicitWidth: 718
|
||||||
|
|
||||||
|
radius: 8
|
||||||
|
color: "transparent"
|
||||||
|
border.color: Theme.palette.baseColor2
|
||||||
|
state: "COLLAPSED"
|
||||||
|
clip: true
|
||||||
|
|
||||||
|
StatusRoundIcon {
|
||||||
|
id: roundIcon
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.topMargin: 25
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: 11
|
||||||
|
|
||||||
|
icon.background.width: statusExpandableSettingsItem.icon.background.width
|
||||||
|
icon.background.height: statusExpandableSettingsItem.icon.background.height
|
||||||
|
icon.background.color: statusExpandableSettingsItem.icon.background.color
|
||||||
|
icon.color: statusExpandableSettingsItem.icon.color
|
||||||
|
icon.name: statusExpandableSettingsItem.icon.name
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusBaseText {
|
||||||
|
id: primaryText
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.topMargin: 17
|
||||||
|
anchors.left: roundIcon.right
|
||||||
|
anchors.leftMargin: 10
|
||||||
|
|
||||||
|
width: button.visible ? parent.width - icon.background.width - button.width - 70 :
|
||||||
|
parent.width - icon.background.width - 70
|
||||||
|
|
||||||
|
font.weight: Font.Medium
|
||||||
|
font.pixelSize: 15
|
||||||
|
lineHeight: 22
|
||||||
|
lineHeightMode: Text.FixedHeight
|
||||||
|
elide: Text.ElideRight
|
||||||
|
color: Theme.palette.directColor1
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusBaseText {
|
||||||
|
id: secondaryText
|
||||||
|
anchors.top: primaryText.bottom
|
||||||
|
anchors.topMargin: 4
|
||||||
|
anchors.left: primaryText.left
|
||||||
|
anchors.right: primaryText.right
|
||||||
|
|
||||||
|
font.pixelSize: 15
|
||||||
|
lineHeight: 22
|
||||||
|
lineHeightMode: Text.FixedHeight
|
||||||
|
elide: Text.ElideRight
|
||||||
|
color: Theme.palette.directColor3
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusButton {
|
||||||
|
id: button
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.topMargin: 19
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: 16
|
||||||
|
visible: !!text
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusIcon {
|
||||||
|
id: expandImage
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.topMargin: 36
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: 23
|
||||||
|
visible: expandable && !button.visible
|
||||||
|
color: Theme.palette.directColor1
|
||||||
|
}
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
id: expandableRegion
|
||||||
|
anchors.top: secondaryText.bottom
|
||||||
|
anchors.topMargin: 16
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: 48
|
||||||
|
width: parent.width - 64
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
anchors.fill: parent
|
||||||
|
onClicked: {
|
||||||
|
if(expandable) {
|
||||||
|
expanded = !expanded
|
||||||
|
}
|
||||||
|
}
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
visible: !button.visible && expandable
|
||||||
|
}
|
||||||
|
|
||||||
|
onExpandedChanged: {
|
||||||
|
if(expanded) {
|
||||||
|
state = "EXPANDED"
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
state = "COLLAPSED"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
states: [
|
||||||
|
State {
|
||||||
|
name: "EXPANDED"
|
||||||
|
PropertyChanges {target: expandImage; icon: "chevron-up"}
|
||||||
|
PropertyChanges {target: statusExpandableSettingsItem; height: 82 + expandableRegion.height + 22}
|
||||||
|
PropertyChanges {target: expandableRegion; active: true}
|
||||||
|
},
|
||||||
|
State {
|
||||||
|
name: "COLLAPSED"
|
||||||
|
PropertyChanges {target: expandImage; icon: "chevron-down"}
|
||||||
|
PropertyChanges {target: statusExpandableSettingsItem; height: 82}
|
||||||
|
PropertyChanges {target: expandableRegion; active: false}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
transitions: [
|
||||||
|
Transition {
|
||||||
|
from: "COLLAPSED"
|
||||||
|
to: "EXPANDED"
|
||||||
|
NumberAnimation { properties: "height"; duration: 200 }
|
||||||
|
},
|
||||||
|
Transition {
|
||||||
|
from: "EXPANDED"
|
||||||
|
to: "COLLAPSED"
|
||||||
|
NumberAnimation { properties: "height"; duration: 200 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -20,3 +20,4 @@ StatusRoundIcon 0.1 StatusRoundIcon.qml
|
||||||
StatusRoundedImage 0.1 StatusRoundedImage.qml
|
StatusRoundedImage 0.1 StatusRoundedImage.qml
|
||||||
StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
|
StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
|
||||||
StatusListItemBadge 0.1 StatusListItemBadge.qml
|
StatusListItemBadge 0.1 StatusListItemBadge.qml
|
||||||
|
StatusExpandableSettingsItem 0.1 StatusExpandableSettingsItem.qml
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3 6.26471C3 5.84237 3.33579 5.5 3.75 5.5H10.5C10.9142 5.5 11.25 5.84237 11.25 6.26471C11.25 6.68704 10.9142 7.02941 10.5 7.02941H3.75C3.33579 7.02941 3 6.68704 3 6.26471Z" fill="black"/>
|
||||||
|
<path d="M13 6.26471C13 5.84237 13.3358 5.5 13.75 5.5H20.25C20.6642 5.5 21 5.84237 21 6.26471C21 6.68704 20.6642 7.02941 20.25 7.02941H13.75C13.3358 7.02941 13 6.68704 13 6.26471Z" fill="black"/>
|
||||||
|
<path d="M16 10.0882C16 9.6659 16.3358 9.32353 16.75 9.32353H20.25C20.6642 9.32353 21 9.6659 21 10.0882C21 10.5106 20.6642 10.8529 20.25 10.8529H16.75C16.3358 10.8529 16 10.5106 16 10.0882Z" fill="black"/>
|
||||||
|
<path d="M8 13.9118C8 13.4894 7.66421 13.1471 7.25 13.1471H3.75C3.33579 13.1471 3 13.4894 3 13.9118C3 14.3341 3.33579 14.6765 3.75 14.6765H7.25C7.66421 14.6765 8 14.3341 8 13.9118Z" fill="black"/>
|
||||||
|
<path d="M3 10.0882C3 9.6659 3.33579 9.32353 3.75 9.32353H13.5C13.9142 9.32353 14.25 9.6659 14.25 10.0882C14.25 10.5106 13.9142 10.8529 13.5 10.8529H3.75C3.33579 10.8529 3 10.5106 3 10.0882Z" fill="black"/>
|
||||||
|
<path d="M21 13.9118C21 13.4894 20.6642 13.1471 20.25 13.1471H10.5C10.0858 13.1471 9.75 13.4894 9.75 13.9118C9.75 14.3341 10.0858 14.6765 10.5 14.6765H20.25C20.6642 14.6765 21 14.3341 21 13.9118Z" fill="black"/>
|
||||||
|
<path d="M3 17.7353C3 17.313 3.33579 16.9706 3.75 16.9706H10.5C10.9142 16.9706 11.25 17.313 11.25 17.7353C11.25 18.1576 10.9142 18.5 10.5 18.5H3.75C3.33579 18.5 3 18.1576 3 17.7353Z" fill="black"/>
|
||||||
|
<path d="M13 17.7353C13 17.313 13.3358 16.9706 13.75 16.9706H20.25C20.6642 16.9706 21 17.313 21 17.7353C21 18.1576 20.6642 18.5 20.25 18.5H13.75C13.3358 18.5 13 18.1576 13 17.7353Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -243,6 +243,7 @@
|
||||||
<file>src/assets/img/icons/add-contact.svg</file>
|
<file>src/assets/img/icons/add-contact.svg</file>
|
||||||
<file>src/assets/img/icons/add-circle.svg</file>
|
<file>src/assets/img/icons/add-circle.svg</file>
|
||||||
<file>src/assets/img/icons/activity.svg</file>
|
<file>src/assets/img/icons/activity.svg</file>
|
||||||
|
<file>src/assets/img/icons/seed-phrase.svg</file>
|
||||||
<file>src/StatusQ/Components/StatusChatListCategoryItem.qml</file>
|
<file>src/StatusQ/Components/StatusChatListCategoryItem.qml</file>
|
||||||
<file>src/StatusQ/Components/StatusChatListCategory.qml</file>
|
<file>src/StatusQ/Components/StatusChatListCategory.qml</file>
|
||||||
<file>src/StatusQ/Controls/StatusBaseInput.qml</file>
|
<file>src/StatusQ/Controls/StatusBaseInput.qml</file>
|
||||||
|
|
@ -265,5 +266,6 @@
|
||||||
<file>src/assets/img/icons/windows_titlebar/status.svg</file>
|
<file>src/assets/img/icons/windows_titlebar/status.svg</file>
|
||||||
<file>src/StatusQ/Controls/StatusSwitchTabButton.qml</file>
|
<file>src/StatusQ/Controls/StatusSwitchTabButton.qml</file>
|
||||||
<file>src/StatusQ/Controls/StatusSwitchTabBar.qml</file>
|
<file>src/StatusQ/Controls/StatusSwitchTabBar.qml</file>
|
||||||
|
<file>src/StatusQ/Components/StatusExpandableSettingsItem.qml</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
</RCC>
|
</RCC>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue