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(Language & Currency): Currency settings screen 

Added currency picker into `LanguageView.qml`.

Added `category` and `imageSource` property to existing `CurrenciesStore.qml`. Renamed `code` to `shortName`.

Added `currenciesModel` property to `WalletStore.qml`.

Added wallet store into `LanguageView.qml` in order to link to the currencies model.

Added some tokens in the currencies store.

Made wallet and any currency related UI code that uses current currency use the new Display Currency value.

Removed no longer used wallet/settings related files.

Closes #5385
This commit is contained in:
Noelia 2022-04-01 12:30:55 +02:00 committed by Noelia
parent 952f398042
commit 59631cad8f
8 changed files with 1043 additions and 861 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/StatusQ

@ -1 +1 @@
Subproject commit 29dd4da2e475f4f52a21a9bbaed270bee0ada2af
Subproject commit ae1e72fb23e1037293c55e5279f5337a13aef19f

1
ui/app/AppLayouts/Profile/ProfileLayout.qml
View File

@ -99,6 +99,7 @@ StatusAppTwoPanelLayout {
LanguageView {
languageStore: profileView.store.languageStore
currencyStore: profileView.store.walletStore.currencyStore
profileContentWidth: _internal.profileContentWidth
}

5
ui/app/AppLayouts/Profile/stores/WalletStore.qml
View File

@ -1,5 +1,7 @@
import QtQuick 2.13
import "../../Wallet/stores"
QtObject {
id: root
@ -22,6 +24,9 @@ QtObject {
property var defaultTokenList: walletSectionAllTokens.default
property var customTokenList: walletSectionAllTokens.custom
property var currencyStore: CurrenciesStore {}
function addCustomToken(chainId, address, name, symbol, decimals) {
return walletSectionAllTokens.addCustomToken(chainId, address, name, symbol, decimals)
}

140
ui/app/AppLayouts/Profile/views/LanguageView.qml
View File

@ -17,6 +17,7 @@ Item {
id: root
property LanguageStore languageStore
property var currencyStore
property int profileContentWidth
QtObject {
@ -25,6 +26,7 @@ Item {
property int zOnTop: 100
function setViewIdleState() {
currencyPicker.close()
languagePicker.close()
}
}
@ -36,14 +38,16 @@ Item {
onVisibleChanged: { if(!visible) d.setViewIdleState()}
Component.onCompleted: { root.languageStore.initializeLanguageModel() }
Component.onCompleted: {
root.currencyStore.updateCurrenciesModel()
root.languageStore.initializeLanguageModel()
}
Column {
z: d.zOnTop
width: 560 - (2 * Style.current.padding)
anchors.margins: d.margins
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.margins: d.margins
anchors.left: parent.left
spacing: 45
@ -53,64 +57,112 @@ Item {
font.weight: Font.Bold
font.pixelSize: 22
color: Theme.palette.directColor1
anchors.bottomMargin: Style.current.padding
}
Item {
id: language
width: parent.width
height: 38
Column {
z: d.zOnTop
width: 560 - (2 * Style.current.padding)
spacing: 26
StatusBaseText {
text: qsTr("Language")
anchors.left: parent.left
font.pixelSize: 15
color: Theme.palette.directColor1
}
StatusListPicker {
id: languagePicker
Item {
id: currency
width: parent.width
height: 38
z: d.zOnTop + 1
property string newKey
StatusBaseText {
text: qsTr("Set Display Currency")
anchors.left: parent.left
font.pixelSize: 15
color: Theme.palette.directColor1
}
StatusListPicker {
id: currencyPicker
Timer {
id: pause
interval: 100
onTriggered: {
// changeLocale function operation blocks a little bit the UI so getting around it with a small pause (timer) in order to get the desired visual behavior
root.languageStore.changeLocale(languagePicker.newKey)
property string newKey
Timer {
id: currencyPause
interval: 100
onTriggered: {
// updateCurrency function operation blocks a little bit the UI so getting around it with a small pause (timer) in order to get the desired visual behavior
root.currencyStore.updateCurrency(currencyPicker.newKey)
}
}
z: d.zOnTop + 1
width: 104
height: parent.height
anchors.right: parent.right
inputList: root.currencyStore.currenciesModel
printSymbol: true
placeholderSearchText: qsTr("Search Currencies")
onItemPickerChanged: {
if(selected) {
currencyPicker.newKey = key
currencyPause.start()
}
}
}
}
Item {
id: language
width: parent.width
height: 38
z: d.zOnTop
width: 104
height: parent.height
anchors.right: parent.right
inputList: root.languageStore.languageModel
searchText: qsTr("Search Languages")
onItemPickerChanged: {
if(selected && localAppSettings.locale !== key) {
// TEMPORARY: It should be removed as it is only used in Linux OS but it must be investigated how to change language in execution time, as well, in Linux (will be addressed in another task)
if (Qt.platform.os === Constants.linux) {
linuxConfirmationDialog.active = true
linuxConfirmationDialog.item.newLocale = key
linuxConfirmationDialog.item.open()
StatusBaseText {
text: qsTr("Language")
anchors.left: parent.left
font.pixelSize: 15
color: Theme.palette.directColor1
}
StatusListPicker {
id: languagePicker
property string newKey
Timer {
id: languagePause
interval: 100
onTriggered: {
// changeLocale function operation blocks a little bit the UI so getting around it with a small pause (timer) in order to get the desired visual behavior
root.languageStore.changeLocale(languagePicker.newKey)
}
else {
languagePicker.newKey = key
pause.start()
}
z: d.zOnTop
width: 104
height: parent.height
anchors.right: parent.right
inputList: root.languageStore.languageModel
placeholderSearchText: qsTr("Search Languages")
onItemPickerChanged: {
if(selected && localAppSettings.locale !== key) {
// TEMPORARY: It should be removed as it is only used in Linux OS but it must be investigated how to change language in execution time, as well, in Linux (will be addressed in another task)
if (Qt.platform.os === Constants.linux) {
linuxConfirmationDialog.active = true
linuxConfirmationDialog.item.newLocale = key
linuxConfirmationDialog.item.open()
}
else {
languagePicker.newKey = key
languagePause.start()
}
}
}
}
}
}
Separator {
anchors.left: parent.left
anchors.leftMargin: -Style.current.padding
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
Separator {
anchors.left: parent.left
anchors.leftMargin: -Style.current.padding
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
}
}
}

87
ui/app/AppLayouts/Wallet/panels/SetCurrencyModalContent.qml
View File

@ -1,87 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import utils 1.0
import shared 1.0
import shared.panels 1.0
import StatusQ.Controls 0.1 as StatusQControls
Item {
id: modalBody
property string currency: "USD"
property alias tokenListModel: tokenListView.model
anchors.fill: parent
ButtonGroup {
id: currencyGroup
}
ListView {
id: tokenListView
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
clip: true
spacing: 10
ScrollBar.vertical: ScrollBar {
active: true
policy: tokenListView.contentHeight > tokenListView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
}
boundsBehavior: Flickable.StopAtBounds
delegate: Component {
Rectangle {
id: wrapper
property bool hovered: false
radius: Style.current.radius
color: modalBody.currency === key ? Style.current.secondaryBackground : (hovered ? Style.current.backgroundHover: Style.current.transparent)
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 10
width: parent.width
height: 52
StyledText {
text: name + " (" + code + ")"
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
}
StatusQControls.StatusRadioButton {
id: currencyRadioBtn
checked: currency === key
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
ButtonGroup.group: currencyGroup
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
wrapper.hovered = true
}
onExited: {
wrapper.hovered = false
}
onClicked: {
currencyRadioBtn.checked = !currencyRadioBtn.checked
modalBody.currency = key
}
}
}
}
}
}

54
ui/app/AppLayouts/Wallet/panels/WalletHeader.qml
View File

@ -79,56 +79,4 @@ Item {
anchors.rightMargin: 63
store: walletHeader.walletStore
}
Component {
id: setCurrencyModalComponent
SetCurrencyModal {
onClosed: {
destroy();
}
}
}
RowLayout {
id: walletMenu
anchors.top: parent.top
anchors.topMargin: Style.current.padding
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
spacing: Style.current.bigPadding
HeaderButton {
id: settingsBtn
imageSource: Style.svg("settings")
flipImage: true
text: ""
onClicked: function () {
if (newSettingsMenu.opened) {
newSettingsMenu.close()
} else {
let x = settingsBtn.x + settingsBtn.width / 2 - newSettingsMenu.width / 2
newSettingsMenu.popup(x, settingsBtn.height)
}
}
// TODO: replace with StatusPopupMenu
PopupMenu {
id: newSettingsMenu
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
width: 176
Action {
//% "Set Currency"
text: qsTrId("set-currency")
icon.source: Style.svg("currency")
icon.width: 16
icon.height: 16
onTriggered: {
Global.openPopup(setCurrencyModalComponent)
}
}
}
}
}
}
}

41
ui/app/AppLayouts/Wallet/popups/SetCurrencyModal.qml
View File

@ -1,41 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import utils 1.0
import StatusQ.Controls 0.1
import shared.popups 1.0
import "../panels"
import "../stores"
// TODO: replace with StatusModal
ModalPopup {
id: popup
width: 480
height: 510
property string currentCurrency: RootStore.currentCurrency
onCurrentCurrencyChanged: {
setCurrencyModalContent.currency = currentCurrency
}
//% "Set Currency"
title: qsTrId("set-currency")
SetCurrencyModalContent {
id: setCurrencyModalContent
tokenListModel: CurrenciesStore {}
}
footer: StatusButton {
anchors.right: parent.right
//% "Save"
text: qsTrId("save")
onClicked: {
RootStore.updateCurrency(setCurrencyModalContent.currency)
popup.close()
}
}
}

1574
ui/app/AppLayouts/Wallet/stores/CurrenciesStore.qml
View File

File diff suppressed because it is too large Load Diff