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

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 2021-08-31 13:46:15 +02:00 committed by Michał Cieślak
parent 4c661109c6
commit 1398b3c9d5
7 changed files with 248 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
ui/StatusQ/sandbox/StatusExpandableSettingsItemPage.qml Normal file
View File

@ -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")
}
}
}
}

10
ui/StatusQ/sandbox/main.qml
View File

@ -169,6 +169,11 @@ StatusWindow {
selected: page.sourceComponent == othersComponent
onClicked: page.sourceComponent = othersComponent
}
StatusNavigationListItem {
title: "StatusExpandableSettingsItem"
selected: page.sourceComponent == settingsComponent
onClicked: page.sourceComponent = settingsComponent
}
StatusListSectionHeadline { text: "StatusQ.Popup" }
StatusNavigationListItem {
title: "StatusPopupMenu"
@ -291,6 +296,11 @@ StatusWindow {
StatusTabSwitchPage {}
}
Component {
id: settingsComponent
StatusExpandableSettingsItemPage{}
}
Component {
id: demoAppCmp

1
ui/StatusQ/sandbox/qml.qrc
View File

@ -13,5 +13,6 @@
<file>ThemeSwitch.qml</file>
<file>Layout.qml</file>
<file>Popups.qml</file>
<file>StatusExpandableSettingsItemPage.qml</file>
</qresource>
</RCC>

155
ui/StatusQ/src/StatusQ/Components/StatusExpandableSettingsItem.qml Normal file
View File

@ -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 }
}
]
}

1
ui/StatusQ/src/StatusQ/Components/qmldir
View File

@ -20,3 +20,4 @@ StatusRoundIcon 0.1 StatusRoundIcon.qml
StatusRoundedImage 0.1 StatusRoundedImage.qml
StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
StatusListItemBadge 0.1 StatusListItemBadge.qml
StatusExpandableSettingsItem 0.1 StatusExpandableSettingsItem.qml

10
ui/StatusQ/src/assets/img/icons/seed-phrase.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

2
ui/StatusQ/statusq.qrc
View File

@ -243,6 +243,7 @@
<file>src/assets/img/icons/add-contact.svg</file>
<file>src/assets/img/icons/add-circle.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/StatusChatListCategory.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/StatusQ/Controls/StatusSwitchTabButton.qml</file>
<file>src/StatusQ/Controls/StatusSwitchTabBar.qml</file>
<file>src/StatusQ/Components/StatusExpandableSettingsItem.qml</file>
</qresource>
</RCC>