From d2b9d54c4b762732888f8cc8f939f80ef9d2b45d Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Fri, 19 Mar 2021 11:25:29 +0100 Subject: [PATCH] fix: ensure lists and radio button groups look concise throughout app Fixes #1992 --- .../BrowserModals/EthereumExplorerModal.qml | 32 ++-- .../Sections/BrowserModals/HomepageModal.qml | 28 ++- .../BrowserModals/SearchEngineModal.qml | 32 ++-- .../Profile/Sections/FleetRadioSelector.qml | 33 ++-- .../Profile/Sections/FleetsModal.qml | 10 +- .../Profile/Sections/MutedChatsModal.qml | 25 ++- .../Profile/Sections/NetworkRadioSelector.qml | 31 ++-- .../Profile/Sections/NetworksModal.qml | 168 ++++++++---------- .../Profile/Sections/OpenLinksWithModal.qml | 22 ++- 9 files changed, 200 insertions(+), 181 deletions(-) diff --git a/ui/app/AppLayouts/Profile/Sections/BrowserModals/EthereumExplorerModal.qml b/ui/app/AppLayouts/Profile/Sections/BrowserModals/EthereumExplorerModal.qml index dd15321a28..cedf9eef33 100644 --- a/ui/app/AppLayouts/Profile/Sections/BrowserModals/EthereumExplorerModal.qml +++ b/ui/app/AppLayouts/Profile/Sections/BrowserModals/EthereumExplorerModal.qml @@ -15,52 +15,56 @@ ModalPopup { } Column { - spacing: Style.current.bigPadding - width: parent.width + anchors.left: parent.left + anchors.right: parent.right + anchors.rightMargin: Style.current.padding + anchors.leftMargin: Style.current.padding + + spacing: 0 ButtonGroup { id: searchEnginGroup } - StatusRadioButton { + StatusRadioButtonRow { //% "None" text: qsTrId("none") - ButtonGroup.group: searchEnginGroup + buttonGroup: searchEnginGroup checked: appSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerNone - onCheckedChanged: { + onRadioCheckedChanged: { if (checked) { appSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerNone } } } - StatusRadioButton { + StatusRadioButtonRow { text: "etherscan.io" - ButtonGroup.group: searchEnginGroup + buttonGroup: searchEnginGroup checked: appSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEtherscan - onCheckedChanged: { + onRadioCheckedChanged: { if (checked) { appSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEtherscan } } } - StatusRadioButton { + StatusRadioButtonRow { text: "ethplorer.io" - ButtonGroup.group: searchEnginGroup + buttonGroup: searchEnginGroup checked: appSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEthplorer - onCheckedChanged: { + onRadioCheckedChanged: { if (checked) { appSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEthplorer } } } - StatusRadioButton { + StatusRadioButtonRow { text: "blockchair.com" - ButtonGroup.group: searchEnginGroup + buttonGroup: searchEnginGroup checked: appSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerBlockchair - onCheckedChanged: { + onRadioCheckedChanged: { if (checked) { appSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerBlockchair } diff --git a/ui/app/AppLayouts/Profile/Sections/BrowserModals/HomepageModal.qml b/ui/app/AppLayouts/Profile/Sections/BrowserModals/HomepageModal.qml index 7654354762..4b9f9db075 100644 --- a/ui/app/AppLayouts/Profile/Sections/BrowserModals/HomepageModal.qml +++ b/ui/app/AppLayouts/Profile/Sections/BrowserModals/HomepageModal.qml @@ -15,19 +15,25 @@ ModalPopup { } Column { - spacing: Style.current.bigPadding - width: parent.width + 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 } - StatusRadioButton { + StatusRadioButtonRow { //% "Default" text: qsTrId("default") - ButtonGroup.group: homepageGroup + buttonGroup: homepageGroup checked: appSettings.browserHomepage === "" - onCheckedChanged: { + onRadioCheckedChanged: { if (checked) { appSettings.browserHomepage = "" customUrl.visible = false @@ -35,13 +41,15 @@ ModalPopup { } } - StatusRadioButton { + StatusRadioButtonRow { //% "Custom..." text: qsTrId("custom---") - ButtonGroup.group: homepageGroup + buttonGroup: homepageGroup checked: appSettings.browserHomepage !== "" || customUrl.visible - onClicked: { - customUrl.visible = true + onRadioCheckedChanged: { + if (checked) { + customUrl.visible = true + } } } @@ -55,6 +63,8 @@ ModalPopup { textField.onTextChanged: { appSettings.browserHomepage = customUrl.text } + anchors.leftMargin: 0 + anchors.rightMargin: 0 } } } diff --git a/ui/app/AppLayouts/Profile/Sections/BrowserModals/SearchEngineModal.qml b/ui/app/AppLayouts/Profile/Sections/BrowserModals/SearchEngineModal.qml index 86bdcfc135..0c6f2050a7 100644 --- a/ui/app/AppLayouts/Profile/Sections/BrowserModals/SearchEngineModal.qml +++ b/ui/app/AppLayouts/Profile/Sections/BrowserModals/SearchEngineModal.qml @@ -15,52 +15,56 @@ ModalPopup { } Column { - spacing: Style.current.bigPadding - width: parent.width + anchors.left: parent.left + anchors.right: parent.right + anchors.rightMargin: Style.current.padding + anchors.leftMargin: Style.current.padding + + spacing: 0 ButtonGroup { id: searchEnginGroup } - StatusRadioButton { + StatusRadioButtonRow { //% "None" text: qsTrId("none") - ButtonGroup.group: searchEnginGroup + buttonGroup: searchEnginGroup checked: appSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineNone - onCheckedChanged: { + onRadioCheckedChanged: { if (checked) { appSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineNone } } } - StatusRadioButton { + StatusRadioButtonRow { text: "Google" - ButtonGroup.group: searchEnginGroup + buttonGroup: searchEnginGroup checked: appSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineGoogle - onCheckedChanged: { + onRadioCheckedChanged: { if (checked) { appSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineGoogle } } } - StatusRadioButton { + StatusRadioButtonRow { text: "Yahoo!" - ButtonGroup.group: searchEnginGroup + buttonGroup: searchEnginGroup checked: appSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineYahoo - onCheckedChanged: { + onRadioCheckedChanged: { if (checked) { appSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineYahoo } } } - StatusRadioButton { + StatusRadioButtonRow { text: "DuckDuckGo" - ButtonGroup.group: searchEnginGroup + buttonGroup: searchEnginGroup checked: appSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineDuckDuckGo - onCheckedChanged: { + onRadioCheckedChanged: { if (checked) { appSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineDuckDuckGo } diff --git a/ui/app/AppLayouts/Profile/Sections/FleetRadioSelector.qml b/ui/app/AppLayouts/Profile/Sections/FleetRadioSelector.qml index 6b88e23c93..b636ae49b1 100644 --- a/ui/app/AppLayouts/Profile/Sections/FleetRadioSelector.qml +++ b/ui/app/AppLayouts/Profile/Sections/FleetRadioSelector.qml @@ -5,10 +5,19 @@ import "../../../../imports" import "../../../../shared" import "../../../../shared/status" -RowLayout { +StatusRadioButtonRow { property string fleetName: "" property string newFleet: "" - + text: fleetName + buttonGroup: fleetSettings + checked: profileModel.fleets.fleet === text + onRadioCheckedChanged: { + if (checked) { + if (profileModel.fleets.fleet === fleetName) return; + newFleet = fleetName; + confirmDialog.open(); + } + } ConfirmationDialog { id: confirmDialog //% "Warning!" @@ -18,23 +27,5 @@ RowLayout { onConfirmButtonClicked: profileModel.fleets.setFleet(newFleet) onClosed: profileModel.fleets.triggerFleetChange() } - - - width: parent.width - StyledText { - text: fleetName - font.pixelSize: 15 - } - StatusRadioButton { - id: radioProd - Layout.alignment: Qt.AlignRight - ButtonGroup.group: fleetSettings - rightPadding: 0 - checked: profileModel.fleets.fleet === fleetName - onClicked: { - if (profileModel.fleets.fleet === fleetName) return; - newFleet = fleetName; - confirmDialog.open(); - } - } } + diff --git a/ui/app/AppLayouts/Profile/Sections/FleetsModal.qml b/ui/app/AppLayouts/Profile/Sections/FleetsModal.qml index b5e5eef08b..ca194edd41 100644 --- a/ui/app/AppLayouts/Profile/Sections/FleetsModal.qml +++ b/ui/app/AppLayouts/Profile/Sections/FleetsModal.qml @@ -14,8 +14,14 @@ ModalPopup { Column { id: column - spacing: Style.current.padding - width: parent.width + 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: 0 ButtonGroup { id: fleetSettings } diff --git a/ui/app/AppLayouts/Profile/Sections/MutedChatsModal.qml b/ui/app/AppLayouts/Profile/Sections/MutedChatsModal.qml index 455602d1bf..66687835b0 100644 --- a/ui/app/AppLayouts/Profile/Sections/MutedChatsModal.qml +++ b/ui/app/AppLayouts/Profile/Sections/MutedChatsModal.qml @@ -24,9 +24,12 @@ ModalPopup { anchors.right: parent.right model: root.showMutedContacts ? profileModel.mutedContacts : profileModel.mutedChats delegate: Rectangle { + id: channelItem + property bool isHovered: false height: contactImage.height + Style.current.smallPadding * 2 width: parent.width - color: Style.current.transparent + radius: Style.current.radius + color: isHovered ? Style.current.backgroundHover : Style.current.transparent StatusIdenticon { id: contactImage @@ -36,6 +39,7 @@ ModalPopup { chatType: model.chatType identicon: model.identicon anchors.left: parent.left + anchors.leftMargin: Style.current.smallPadding anchors.verticalCenter: parent.verticalCenter } @@ -47,22 +51,39 @@ ModalPopup { anchors.right: unmuteButton.left anchors.rightMargin: Style.current.smallPadding elide: Text.ElideRight - font.pixelSize: 17 + font.pixelSize: 15 anchors.left: contactImage.right anchors.leftMargin: Style.current.padding anchors.verticalCenter: parent.verticalCenter } + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + hoverEnabled: true + onEntered: channelItem.isHovered = true + onExited: channelItem.isHovered = false + } + StatusButton { id: unmuteButton type: "secondary" anchors.right: parent.right + anchors.rightMargin: Style.current.smallPadding anchors.verticalCenter: parent.verticalCenter //% "Unmute" text: qsTrId("unmute") onClicked: { profileModel.unmuteChannel(model.id) } + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + hoverEnabled: true + onEntered: { + channelItem.isHovered = true + } + } } } } diff --git a/ui/app/AppLayouts/Profile/Sections/NetworkRadioSelector.qml b/ui/app/AppLayouts/Profile/Sections/NetworkRadioSelector.qml index e31a746716..0806176989 100644 --- a/ui/app/AppLayouts/Profile/Sections/NetworkRadioSelector.qml +++ b/ui/app/AppLayouts/Profile/Sections/NetworkRadioSelector.qml @@ -5,10 +5,21 @@ import "../../../../imports" import "../../../../shared" import "../../../../shared/status" -RowLayout { +StatusRadioButtonRow { property string network: "" property string networkName: "" property string newNetwork: "" + id: radioProd + text: networkName == "" ? Utils.getNetworkName(network) : networkName + buttonGroup: networkSettings + checked: profileModel.network.current === network + onRadioCheckedChanged: { + if (checked) { + if (profileModel.network.current === network) return; + newNetwork = network; + confirmDialog.open(); + } + } ConfirmationDialog { id: confirmDialog @@ -21,22 +32,4 @@ RowLayout { } onClosed: profileModel.network.triggerNetworkChange() } - - width: parent.width - StyledText { - text: networkName == "" ? Utils.getNetworkName(network) : networkName - font.pixelSize: 15 - } - StatusRadioButton { - id: radioProd - Layout.alignment: Qt.AlignRight - ButtonGroup.group: networkSettings - rightPadding: 0 - checked: profileModel.network.current === network - onClicked: { - if (profileModel.network.current === network) return; - newNetwork = network; - confirmDialog.open(); - } - } } diff --git a/ui/app/AppLayouts/Profile/Sections/NetworksModal.qml b/ui/app/AppLayouts/Profile/Sections/NetworksModal.qml index 51dbf661d6..9694b80c9b 100644 --- a/ui/app/AppLayouts/Profile/Sections/NetworksModal.qml +++ b/ui/app/AppLayouts/Profile/Sections/NetworksModal.qml @@ -41,10 +41,6 @@ ModalPopup { anchors.verticalCenter: parent.verticalCenter } - ButtonGroup { - id: networkChainGroup - } - StyledText { id: usernameText //% "Add network" @@ -176,79 +172,54 @@ ModalPopup { anchors.topMargin: Style.current.smallPadding anchors.left: parent.left anchors.right: parent.right + anchors.rightMargin: Style.current.padding + anchors.leftMargin: Style.current.padding - RowLayout { - width: parent.width - StyledText { - //% "Main network" - text: qsTrId("mainnet-network") - font.pixelSize: 15 - } + ButtonGroup { + id: networkChainGroup + } - StatusRadioButton { - id: mainnetRadioBtn - Layout.alignment: Qt.AlignRight - ButtonGroup.group: networkChainGroup - rightPadding: 0 - checked: true - onClicked: { + StatusRadioButtonRow { + id: mainnetRadioBtn + text: qsTr("Main network") + buttonGroup: networkChainGroup + checked: true + onRadioCheckedChanged: { + if (checked) { addNetworkPopup.networkId = 1; addNetworkPopup.networkType = Constants.networkMainnet; } } } - RowLayout { - width: parent.width - StyledText { - //% "Ropsten test network" - text: qsTrId("ropsten-network") - font.pixelSize: 15 - } - StatusRadioButton { - id: ropstenRadioBtn - Layout.alignment: Qt.AlignRight - ButtonGroup.group: networkChainGroup - rightPadding: 0 - onClicked: { + StatusRadioButtonRow { + text: qsTr("Ropsten test network") + buttonGroup: networkChainGroup + onRadioCheckedChanged: { + if (checked) { addNetworkPopup.networkId = 3; addNetworkPopup.networkType = Constants.networkRopsten; } } } - RowLayout { - width: parent.width - StyledText { - //% "Rinkeby test network" - text: qsTrId("rinkeby-network") - font.pixelSize: 15 - } - StatusRadioButton { - id: rinkebyRadioBtn - Layout.alignment: Qt.AlignRight - ButtonGroup.group: networkChainGroup - rightPadding: 0 - onClicked: { + StatusRadioButtonRow { + text: qsTr("Rinkeby test network") + buttonGroup: networkChainGroup + onRadioCheckedChanged: { + if (checked) { addNetworkPopup.networkId = 4; addNetworkPopup.networkType = Constants.networkRinkeby; } } } - RowLayout { - width: parent.width - StyledText { - //% "Custom" - text: qsTrId("custom") - font.pixelSize: 15 - } - StatusRadioButton { - id: customRadioBtn - Layout.alignment: Qt.AlignRight - ButtonGroup.group: networkChainGroup - rightPadding: 0 - onClicked: { + StatusRadioButtonRow { + id: customRadioBtn + text: qsTr("Custom") + buttonGroup: networkChainGroup + onRadioCheckedChanged: { + if (checked) { addNetworkPopup.networkType = ""; } } @@ -266,51 +237,64 @@ ModalPopup { } } } + Column { + spacing: Style.current.smallPadding + anchors.left: parent.left + anchors.right: parent.right + anchors.leftMargin: Style.current.padding + anchors.rightMargin: Style.current.padding - StatusSectionHeadline { - //% "Main networks" - text: qsTrId("main-networks") - } - NetworkRadioSelector { - network: Constants.networkMainnet - } + StatusSectionHeadline { + //% "Main networks" + text: qsTrId("main-networks") + } - NetworkRadioSelector { - network: Constants.networkPOA - } - NetworkRadioSelector { - network: Constants.networkXDai - } + NetworkRadioSelector { + network: Constants.networkMainnet + } - StatusSectionHeadline { - //% "Test networks" - text: qsTrId("test-networks") - } + NetworkRadioSelector { + network: Constants.networkPOA + } - NetworkRadioSelector { - network: Constants.networkGoerli - } + NetworkRadioSelector { + network: Constants.networkXDai + } - NetworkRadioSelector { - network: Constants.networkRinkeby - } + StatusSectionHeadline { + //% "Test networks" + text: qsTrId("test-networks") + anchors.leftMargin: -Style.current.padding + anchors.rightMargin: -Style.current.padding + } - NetworkRadioSelector { - network: Constants.networkRopsten - } + NetworkRadioSelector { + network: Constants.networkGoerli + } - StatusSectionHeadline { - //% "Custom Networks" - text: qsTrId("custom-networks") - } + NetworkRadioSelector { + network: Constants.networkRinkeby + } - Repeater { - model: profileModel.network.customNetworkList - delegate: NetworkRadioSelector { - networkName: name - network: customNetworkId + NetworkRadioSelector { + network: Constants.networkRopsten + } + + StatusSectionHeadline { + //% "Custom Networks" + text: qsTrId("custom-networks") + anchors.leftMargin: -Style.current.padding + anchors.rightMargin: -Style.current.padding + } + + Repeater { + model: profileModel.network.customNetworkList + delegate: NetworkRadioSelector { + networkName: name + network: customNetworkId + } } } } diff --git a/ui/app/AppLayouts/Profile/Sections/OpenLinksWithModal.qml b/ui/app/AppLayouts/Profile/Sections/OpenLinksWithModal.qml index 0f8721b03e..910f1dd8d5 100644 --- a/ui/app/AppLayouts/Profile/Sections/OpenLinksWithModal.qml +++ b/ui/app/AppLayouts/Profile/Sections/OpenLinksWithModal.qml @@ -15,29 +15,35 @@ ModalPopup { } Column { - anchors.fill: parent - spacing: Style.current.bigPadding + 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: 0 ButtonGroup { id: openLinksWithGroup } - StatusRadioButton { + StatusRadioButtonRow { text: "Status" - ButtonGroup.group: openLinksWithGroup + buttonGroup: openLinksWithGroup checked: appSettings.openLinksInStatus - onCheckedChanged: { + onRadioCheckedChanged: { if (checked) { appSettings.openLinksInStatus = true } } } - StatusRadioButton { + StatusRadioButtonRow { //% "My default browser" text: qsTrId("my-default-browser") - ButtonGroup.group: openLinksWithGroup + buttonGroup: openLinksWithGroup checked: !appSettings.openLinksInStatus - onCheckedChanged: { + onRadioCheckedChanged: { if (checked) { appSettings.openLinksInStatus = false }