feat(Settings): Add new UI for Browser settings

Closes: #4933
This commit is contained in:
Boris Melnik 2022-03-25 12:09:49 +03:00
parent 33e3d2377e
commit 7bbefa5518
7 changed files with 270 additions and 268 deletions

View File

@ -1,78 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import utils 1.0
import shared.popups 1.0
import shared.controls 1.0
// TODO: replace with StatusModal
ModalPopup {
id: popup
//% "Ethereum explorer"
title: qsTrId("ethereum-explorer")
onClosed: {
destroy()
}
Column {
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
anchors.leftMargin: Style.current.padding
spacing: 0
ButtonGroup {
id: searchEnginGroup
}
RadioButtonSelector {
//% "None"
title: qsTrId("none")
buttonGroup: searchEnginGroup
checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerNone
onCheckedChanged: {
if (checked) {
localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerNone
}
}
}
RadioButtonSelector {
title: "etherscan.io"
buttonGroup: searchEnginGroup
checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEtherscan
onCheckedChanged: {
if (checked) {
localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEtherscan
}
}
}
RadioButtonSelector {
title: "ethplorer.io"
buttonGroup: searchEnginGroup
checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEthplorer
onCheckedChanged: {
if (checked) {
localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEthplorer
}
}
}
RadioButtonSelector {
title: "blockchair.com"
buttonGroup: searchEnginGroup
checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerBlockchair
onCheckedChanged: {
if (checked) {
localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerBlockchair
}
}
}
}
}

View File

@ -1,74 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import utils 1.0
import shared.popups 1.0
import shared.controls 1.0
// TODO: replace with StatusModal
ModalPopup {
id: popup
//% "Homepage"
title: qsTrId("homepage")
onClosed: {
destroy()
}
Column {
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
anchors.leftMargin: Style.current.padding
spacing: Style.current.padding
ButtonGroup {
id: homepageGroup
}
RadioButtonSelector {
//% "Default"
title: qsTrId("default")
buttonGroup: homepageGroup
checked: localAccountSensitiveSettings.browserHomepage === ""
onCheckedChanged: {
if (checked) {
localAccountSensitiveSettings.browserHomepage = ""
customUrl.visible = false
}
}
}
RadioButtonSelector {
//% "Custom..."
title: qsTrId("custom---")
buttonGroup: homepageGroup
checked: localAccountSensitiveSettings.browserHomepage !== "" || customUrl.visible
onCheckedChanged: {
if (checked) {
customUrl.visible = true
}
}
}
Input {
id: customUrl
visible: localAccountSensitiveSettings.browserHomepage !== ""
//% "Paste URL"
placeholderText: qsTrId("paste-url")
text: localAccountSensitiveSettings.browserHomepage
pasteFromClipboard: true
textField.onTextChanged: {
localAccountSensitiveSettings.browserHomepage = customUrl.text
}
anchors.leftMargin: 0
anchors.rightMargin: 0
}
}
}

View File

@ -1,5 +1,6 @@
import QtQuick 2.13
import QtQuick.Layouts 1.13
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
@ -12,56 +13,52 @@ import shared.panels 1.0
import shared.status 1.0
import "../popups"
import "../stores"
import "browser"
import "wallet"
Item {
ScrollView {
id: root
Layout.fillHeight: true
Layout.fillWidth: true
clip: true
property var store
property int profileContentWidth
property ProfileSectionStore store
property real profileContentWidth
property Component homePagePopup: HomepageModal {}
property Component searchEngineModal: SearchEngineModal {}
property Component ethereumExplorerModal: EthereumExplorerModal {}
contentHeight: rootItem.height
Item {
anchors.top: parent.top
anchors.topMargin: 64
anchors.bottom: parent.bottom
width: profileContentWidth
anchors.horizontalCenter: parent.horizontalCenter
id: rootItem
width: parent.width
height: childrenRect.height
Column {
id: generalColumn
width: parent.width
StatusSectionHeadline {
//% "General"
text: qsTrId("general")
bottomPadding: Style.current.bigPadding
id: layout
anchors.top: parent.top
anchors.topMargin: 24
anchors.left: parent.left
anchors.leftMargin: 48
width: profileContentWidth
spacing: 10
StatusBaseText {
id: titleText
text: qsTr("Browser")
font.weight: Font.Bold
font.pixelSize: 28
color: Theme.palette.directColor1
}
// TODO: Replace with StatusQ StatusListItem component
StatusSettingsLineButton {
//% "Homepage"
text: qsTrId("homepage")
//% "Default"
currentValue: localAccountSensitiveSettings.browserHomepage === "" ? qsTrId("default") : localAccountSensitiveSettings.browserHomepage
onClicked: homePagePopup.createObject(root).open()
Item {
height: 25
width: 1
}
// TODO: Replace with StatusQ StatusListItem component
StatusSettingsLineButton {
//% "Show favorites bar"
text: qsTrId("show-favorites-bar")
isSwitch: true
switchChecked: localAccountSensitiveSettings.shouldShowFavoritesBar
onClicked: function (checked) {
localAccountSensitiveSettings.shouldShowFavoritesBar = checked
}
HomePageView {
id: homePageView
homepage: localAccountSensitiveSettings.browserHomepage
}
// TODO: Replace with StatusQ StatusListItem component
@ -81,48 +78,44 @@ Item {
onClicked: searchEngineModal.createObject(root).open()
}
// TODO: Replace with StatusQ StatusListItem component
StatusSettingsLineButton {
id: ethereumExplorerBtn
//% "Ethereum explorer used in the address bar"
text: qsTrId("ethereum-explorer-used-in-the-address-bar")
currentValue: {
switch (localAccountSensitiveSettings.useBrowserEthereumExplorer) {
case Constants.browserEthereumExplorerEtherscan: return "etherscan.io"
case Constants.browserEthereumExplorerEthplorer: return "ethplorer.io"
case Constants.browserEthereumExplorerBlockchair: return "blockchair.com"
case Constants.browserSearchEngineNone:
//% "None"
default: return qsTrId("none")
DefaultDAppExplorerView {
id: dAppExplorerView
}
StatusListItem {
id: showFavouritesItem
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width + Style.current.padding * 2
title: qsTr("Show Favorites Bar")
components: [
StatusSwitch {
checked: localAccountSensitiveSettings.shouldShowFavoritesBar
onCheckedChanged: {
localAccountSensitiveSettings.shouldShowFavoritesBar = checked
}
}
onClicked: ethereumExplorerModal.createObject(root).open()
}
StatusBaseText {
//% "Open an ethereum explorer after a transaction hash or an address is entered"
text: qsTrId("open-an-ethereum-explorer-after-a-transaction-hash-or-an-address-is-entered")
font.pixelSize: 15
color: Theme.palette.baseColor1
width: parent.width - 150
wrapMode: Text.WordWrap
bottomPadding: Style.current.bigPadding
]
}
Separator {
id: separator1
anchors.topMargin: Style.current.bigPadding
anchors.left: parent.left
anchors.leftMargin: -Style.current.padding
anchors.right: parent.right
anchors.rightMargin: -Style.current.padding
}
StatusSectionHeadline {
//% "Privacy"
text: qsTrId("privacy")
topPadding: Style.current.bigPadding
bottomPadding: Style.current.padding
}
}
StatusBaseText {
text: qsTr("Connected DApps")
font.pixelSize: 15
color: Theme.palette.baseColor1
}
PermissionsListView {
id: permissionListView
width: parent.width
walletStore: root.store.walletStore
}
} // Column
} // Item
} // ScrollView

View File

@ -0,0 +1,84 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import utils 1.0
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
ColumnLayout {
id: root
StatusBaseText {
text: qsTr("Default DApp explorer")
font.pixelSize: 15
color: Theme.palette.directColor1
}
ButtonGroup {
id: explorerGroup
buttons: [
noneRadioButton,
etherscanRadioButton,
ethplorerRadioButton,
blockchairRadioButton
]
exclusive: true
}
StatusRadioButton {
id: noneRadioButton
Layout.alignment: Qt.AlignTop
Layout.topMargin: 10
checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerNone
text: qsTrId("none")
onCheckedChanged: {
if (checked) {
localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerNone
}
}
}
StatusRadioButton {
id: etherscanRadioButton
Layout.alignment: Qt.AlignTop
Layout.topMargin: 10
checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEtherscan
text: "etherscan.io"
onCheckedChanged: {
if (checked) {
localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEtherscan
}
}
}
StatusRadioButton {
id: ethplorerRadioButton
Layout.alignment: Qt.AlignTop
Layout.topMargin: 10
checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEthplorer
text: "ethplorer.io"
onCheckedChanged: {
if (checked) {
localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEthplorer
}
}
}
StatusRadioButton {
id: blockchairRadioButton
Layout.alignment: Qt.AlignTop
Layout.topMargin: 10
checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerBlockchair
text: "blockchair.com"
onCheckedChanged: {
if (checked) {
localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerBlockchair
}
}
}
} // Column

View File

@ -0,0 +1,57 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
ColumnLayout {
id: root
property string homepage: ""
spacing: 0
StatusBaseText {
text: qsTrId("homepage")
font.pixelSize: 15
color: Theme.palette.directColor1
}
ButtonGroup {
id: homepageGroup
buttons: [defaultRadioButton, customRadioButton]
exclusive: true
}
StatusRadioButton {
id: defaultRadioButton
Layout.alignment: Qt.AlignTop
Layout.topMargin: 10
checked: root.homepage == ""
text: qsTr("System default")
}
StatusRadioButton {
id: customRadioButton
Layout.alignment: Qt.AlignTop
Layout.topMargin: 10
checked: root.homepage !== ""
text: qsTr("Other")
}
StatusBaseInput {
id: customUrlInput
Layout.alignment: Qt.AlignTop
Layout.topMargin: 10
visible: customRadioButton.checked
placeholderText: qsTr("Example: duckduckgo.com")
text: root.homepage
onTextChanged: {
root.homepage = text
}
}
} // Column

View File

@ -52,52 +52,10 @@ Item {
height: Style.current.bigPadding
width: parent.width
}
Repeater {
PermissionsListView {
id: permissionsList
model: walletStore.dappList
delegate: Item {
width: parent.width
height: listItem.height + spacer.height
StatusListItem {
id: listItem
title: model.name
icon.isLetterIdenticon: true
width: parent.width
highlighted: true
sensor.enabled: false
components: [
StatusButton {
text: model.accounts.count > 1 ? qsTr("Disconnect All") : qsTr("Disconnect")
size: StatusBaseButton.Size.Small
type: StatusBaseButton.Type.Danger
onClicked: {
walletStore.disconnect(model.name)
}
}
]
bottomModel: model.accounts
bottomDelegate: StatusListItemTag {
property int outerIndex: listItem.index
title: model.name
icon.isLetterIdenticon: true
icon.color: model.color
onClicked: {
const dappName = walletStore.dappList.rowData(outerIndex, 'name')
walletStore.disconnectAddress(dappName, model.address)
}
}
}
Item {
id: spacer
height: Style.current.bigPadding
width: parent.width
}
}
walletStore: root.walletStore
}
}
}

View File

@ -0,0 +1,62 @@
import QtQuick 2.14
import shared.status 1.0
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import utils 1.0
import "../../stores"
Column {
id: root
property WalletStore walletStore
width: 560
Repeater {
id: permissionsList
model: walletStore.dappList
delegate: Item {
width: parent.width
height: listItem.height + spacer.height
StatusListItem {
id: listItem
title: model.name
icon.isLetterIdenticon: true
width: parent.width
highlighted: true
sensor.enabled: false
components: [
StatusButton {
text: model.accounts.count > 1 ? qsTr("Disconnect All") : qsTr("Disconnect")
size: StatusBaseButton.Size.Small
type: StatusBaseButton.Type.Danger
onClicked: {
walletStore.disconnect(model.name)
}
}
]
bottomModel: model.accounts
bottomDelegate: StatusListItemTag {
property int outerIndex: listItem.index
title: model.name
icon.isLetterIdenticon: true
icon.color: model.color
onClicked: {
const dappName = walletStore.dappList.rowData(outerIndex, 'name')
walletStore.disconnectAddress(dappName, model.address)
}
}
}
Item {
id: spacer
height: Style.current.bigPadding
width: parent.width
}
} // Item
} // Repeater
} // Column