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

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

View File

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

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

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,7 +57,54 @@ Item {
font.weight: Font.Bold
font.pixelSize: 22
color: Theme.palette.directColor1
anchors.bottomMargin: Style.current.padding
}
Column {
z: d.zOnTop
width: 560 - (2 * Style.current.padding)
spacing: 26
Item {
id: currency
width: parent.width
height: 38
z: d.zOnTop + 1
StatusBaseText {
text: qsTr("Set Display Currency")
anchors.left: parent.left
font.pixelSize: 15
color: Theme.palette.directColor1
}
StatusListPicker {
id: currencyPicker
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 {
@ -74,7 +125,7 @@ Item {
property string newKey
Timer {
id: pause
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
@ -87,7 +138,7 @@ Item {
height: parent.height
anchors.right: parent.right
inputList: root.languageStore.languageModel
searchText: qsTr("Search Languages")
placeholderSearchText: qsTr("Search Languages")
onItemPickerChanged: {
if(selected && localAppSettings.locale !== key) {
@ -99,7 +150,7 @@ Item {
}
else {
languagePicker.newKey = key
pause.start()
languagePause.start()
}
}
}
@ -113,6 +164,7 @@ Item {
anchors.rightMargin: -Style.current.padding
}
}
}
// 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)
Loader {

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

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

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()
}
}
}

File diff suppressed because it is too large Load Diff