From e94ac7c75d713a209b4cdfa2e02459812b459a49 Mon Sep 17 00:00:00 2001 From: xiphon Date: Wed, 17 Mar 2021 11:28:01 +0000 Subject: [PATCH 1/2] Navbar: move to components --- {pages/settings => components}/Navbar.qml | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename {pages/settings => components}/Navbar.qml (100%) diff --git a/pages/settings/Navbar.qml b/components/Navbar.qml similarity index 100% rename from pages/settings/Navbar.qml rename to components/Navbar.qml From 34d3f6575a8f46e206d67ed7f2eb04ca68907bf8 Mon Sep 17 00:00:00 2001 From: xiphon Date: Wed, 17 Mar 2021 11:32:11 +0000 Subject: [PATCH 2/2] Navbar: reimplement as a reusable component, drop redundant code --- components/Navbar.qml | 497 +++++++++++------------------------- components/NavbarItem.qml | 37 +++ pages/settings/Settings.qml | 29 ++- qml.qrc | 3 +- 4 files changed, 213 insertions(+), 353 deletions(-) create mode 100644 components/NavbarItem.qml diff --git a/components/Navbar.qml b/components/Navbar.qml index 87c37dcd..0429eecc 100644 --- a/components/Navbar.qml +++ b/components/Navbar.qml @@ -1,4 +1,4 @@ -// Copyright (c) 2014-2018, The Monero Project +// Copyright (c) 2014-2021, The Monero Project // // All rights reserved. // @@ -27,386 +27,181 @@ // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. import QtQuick 2.9 -import QtQuick.Controls 1.4 -import QtQuick.Controls.Styles 1.4 import QtQuick.Layouts 1.1 -import QtQuick.Dialogs 1.2 -import "../../js/Windows.js" as Windows -import "../../js/Utils.js" as Utils -import "../../components" as MoneroComponents -import "../../pages" -import "." -import moneroComponents.Clipboard 1.0 +import "." as MoneroComponents Rectangle { + default property list items + color: "transparent" height: grid.height width: grid.width - GridLayout { - id: grid - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter - columnSpacing: 0 - property string fontColorActive: MoneroComponents.Style.blackTheme ? "white" : "white" - property string fontColorInActive: MoneroComponents.Style.blackTheme ? "white" : MoneroComponents.Style.dimmedFontColor - property int fontSize: 15 - property bool fontBold: true - property var fontFamily: MoneroComponents.Style.fontRegular.name - property string borderColor: MoneroComponents.Style.blackTheme ? "#808080" : "#B9B9B9" - property int textMargin: { - // left-right margins for a given cell - if(appWindow.width < 890){ - return 32; - } else { - return 64; - } + GridLayout { + id: grid + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + columnSpacing: 0 + property string fontColorActive: MoneroComponents.Style.blackTheme ? "white" : "white" + property string fontColorInActive: MoneroComponents.Style.blackTheme ? "white" : MoneroComponents.Style.dimmedFontColor + property int fontSize: 15 + property bool fontBold: true + property var fontFamily: MoneroComponents.Style.fontRegular.name + property string borderColor: MoneroComponents.Style.blackTheme ? "#808080" : "#B9B9B9" + property int textMargin: { + // left-right margins for a given cell + if(appWindow.width < 890){ + return 32; + } else { + return 64; } + } + + Rectangle { + // navbar left side border + id: navBarLeft + Layout.preferredWidth: 2 + Layout.preferredHeight: 32 + color: "transparent" Rectangle { - // navbar left side border - id: navBarLeft - property bool isActive: settingsStateView.state === "Wallet" - Layout.preferredWidth: 2 - Layout.preferredHeight: 32 - color: "transparent" + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + width: 1 + height: parent.height - 2 + color: grid.borderColor + } + + ColumnLayout { + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.right: parent.right + width: 1 + spacing: 0 Rectangle { - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - width: 1 - height: parent.height - 2 + Layout.preferredHeight: 1 + Layout.preferredWidth: 1 color: grid.borderColor } + Rectangle { + Layout.fillHeight: true + width: 1 + color: items.length > 0 && items[0].active ? grid.borderColor : "transparent"; + } + + Rectangle { + color: grid.borderColor + Layout.preferredHeight: 1 + Layout.preferredWidth: 1 + } + } + } + + Repeater { + model: items.length + + RowLayout { + spacing: 0 + + Rectangle { + Layout.preferredWidth: 1 + Layout.preferredHeight: 32 + color: grid.borderColor + visible: index > 0 && items[index - 1].visible + } + ColumnLayout { - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: parent.right - width: 1 + Layout.minimumWidth: 72 + Layout.preferredHeight: 32 + Layout.fillWidth: true spacing: 0 + visible: items[index].visible Rectangle { - Layout.preferredHeight: 1 - Layout.preferredWidth: 1 color: grid.borderColor + Layout.preferredHeight: 1 + Layout.fillWidth: true } Rectangle { - Layout.fillHeight: true - width: 1 - color: navBarLeft.isActive ? grid.borderColor : "transparent" + Layout.minimumHeight: 30 + color: items[index].active ? grid.borderColor : "transparent" + height: children[0].height + width: children[0].width + + MoneroComponents.TextPlain { + anchors.verticalCenter: parent.verticalCenter + font.family: grid.fontFamily + font.pixelSize: grid.fontSize + font.bold: grid.fontBold + leftPadding: grid.textMargin / 2 + rightPadding: grid.textMargin / 2 + text: items[index].text + color: items[index].active ? grid.fontColorActive : grid.fontColorInActive + themeTransition: false + } + + MouseArea { + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + + onClicked: items[index].selected() + } } Rectangle { color: grid.borderColor Layout.preferredHeight: 1 - Layout.preferredWidth: 1 - } - } - } - - ColumnLayout { - // WALLET - id: navWallet - property bool isActive: settingsStateView.state === "Wallet" - Layout.preferredWidth: navWalletText.width + grid.textMargin - Layout.minimumWidth: 72 - Layout.preferredHeight: 32 - spacing: 0 - - Rectangle { - color: grid.borderColor - Layout.preferredHeight: 1 - Layout.fillWidth: true - } - - Rectangle { - color: parent.isActive ? grid.borderColor : "transparent" - height: 30 - Layout.fillWidth: true - - MoneroComponents.TextPlain { - id: navWalletText - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - font.family: grid.fontFamily - font.pixelSize: grid.fontSize - font.bold: grid.fontBold - text: qsTr("Wallet") + translationManager.emptyString - color: navWallet.isActive ? grid.fontColorActive : grid.fontColorInActive - themeTransition: false - } - - MouseArea { - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - - onClicked: { settingsStateView.state = "Wallet" } - } - } - - Rectangle { - color: grid.borderColor - Layout.preferredHeight: 1 - Layout.fillWidth: true - } - } - Rectangle{ - Layout.preferredWidth: 1 - Layout.preferredHeight: 32 - color: grid.borderColor - } - ColumnLayout { - // UI - id: navUI - property bool isActive: settingsStateView.state === "UI" - Layout.preferredWidth: navUIText.width + grid.textMargin - Layout.preferredHeight: 32 - Layout.minimumWidth: 72 - spacing: 0 - - Rectangle { - color: grid.borderColor - Layout.preferredHeight: 1 - Layout.fillWidth: true - } - - Rectangle { - color: parent.isActive ? grid.borderColor : "transparent" - height: 30 - Layout.fillWidth: true - - MoneroComponents.TextPlain { - id: navUIText - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - font.family: grid.fontFamily - font.pixelSize: grid.fontSize - font.bold: grid.fontBold - text: qsTr("Interface") + translationManager.emptyString - color: navUI.isActive ? grid.fontColorActive : grid.fontColorInActive - themeTransition: false - } - - MouseArea { - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - - onClicked: { settingsStateView.state = "UI" } - } - } - - Rectangle { - color: grid.borderColor - Layout.preferredHeight: 1 - Layout.fillWidth: true - } - } - Rectangle{ - Layout.preferredWidth: 1 - Layout.preferredHeight: 32 - color: grid.borderColor - } - ColumnLayout { - // NODE - id: navNode - property bool isActive: settingsStateView.state === "Node" - visible: appWindow.walletMode >= 2 - Layout.preferredWidth: navNodeText.width + grid.textMargin - Layout.preferredHeight: 32 - Layout.minimumWidth: 72 - spacing: 0 - - Rectangle { - color: grid.borderColor - Layout.preferredHeight: 1 - Layout.fillWidth: true - } - - Rectangle { - color: parent.isActive ? grid.borderColor : "transparent" - height: 30 - Layout.fillWidth: true - - MoneroComponents.TextPlain { - id: navNodeText - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - font.family: grid.fontFamily - font.pixelSize: grid.fontSize - font.bold: grid.fontBold - text: qsTr("Node") + translationManager.emptyString - color: navNode.isActive ? grid.fontColorActive : grid.fontColorInActive - themeTransition: false - } - - MouseArea { - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - - onClicked: { settingsStateView.state = "Node" } - } - } - - Rectangle { - color: grid.borderColor - Layout.preferredHeight: 1 - Layout.fillWidth: true - } - } - Rectangle{ - visible: appWindow.walletMode >= 2 - Layout.preferredWidth: 1 - Layout.preferredHeight: 32 - color: grid.borderColor - } - ColumnLayout { - // LOG - id: navLog - property bool isActive: settingsStateView.state === "Log" - Layout.preferredWidth: navLogText.width + grid.textMargin - Layout.preferredHeight: 32 - Layout.minimumWidth: 72 - spacing: 0 - - Rectangle { - color: grid.borderColor - Layout.preferredHeight: 1 - Layout.fillWidth: true - } - - Rectangle { - color: parent.isActive ? grid.borderColor : "transparent" - height: 30 - Layout.fillWidth: true - - MoneroComponents.TextPlain { - id: navLogText - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - font.family: grid.fontFamily - font.pixelSize: grid.fontSize - font.bold: grid.fontBold - text: qsTr("Log") + translationManager.emptyString - color: navLog.isActive ? grid.fontColorActive : grid.fontColorInActive - themeTransition: false - } - - MouseArea { - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - - onClicked: { settingsStateView.state = "Log" } - } - } - - Rectangle { - color: grid.borderColor - Layout.preferredHeight: 1 - Layout.fillWidth: true - } - } - Rectangle{ - visible: appWindow.walletMode >= 2 - Layout.preferredWidth: 1 - Layout.preferredHeight: 32 - color: grid.borderColor - } - ColumnLayout { - // INFO - id: navInfo - property bool isActive: settingsStateView.state === "Info" - Layout.preferredWidth: navInfoText.width + grid.textMargin - Layout.preferredHeight: 32 - Layout.minimumWidth: 72 - spacing: 0 - - Rectangle { - color: grid.borderColor - Layout.preferredHeight: 1 - Layout.fillWidth: true - } - - Rectangle { - color: parent.isActive ? grid.borderColor : "transparent" - height: 30 - Layout.fillWidth: true - - MoneroComponents.TextPlain { - id: navInfoText - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - font.family: grid.fontFamily - font.pixelSize: grid.fontSize - font.bold: grid.fontBold - text: qsTr("Info") + translationManager.emptyString - color: navInfo.isActive ? grid.fontColorActive : grid.fontColorInActive - themeTransition: false - } - - MouseArea { - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - - onClicked: { settingsStateView.state = "Info" } - } - } - - Rectangle { - color: grid.borderColor - Layout.preferredHeight: 1 - Layout.fillWidth: true - } - } - - Rectangle { - // navbar right side border - id: navBarRight - property bool isActive: settingsStateView.state === "Info" - Layout.preferredWidth: 2 - Layout.preferredHeight: 32 - color: "transparent" - rotation: 180 - - Rectangle { - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - width: 1 - height: parent.height - 2 - color: grid.borderColor - } - - ColumnLayout { - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: parent.right - width: 1 - spacing: 0 - - Rectangle { - Layout.preferredHeight: 1 - Layout.preferredWidth: 1 - color: grid.borderColor - } - - Rectangle { - Layout.fillHeight: true - width: 1 - color: navBarRight.isActive ? grid.borderColor : "transparent" - } - - Rectangle { - color: grid.borderColor - Layout.preferredHeight: 1 - Layout.preferredWidth: 1 + Layout.fillWidth: true } } } } + + Rectangle { + // navbar right side border + id: navBarRight + Layout.preferredWidth: 2 + Layout.preferredHeight: 32 + color: "transparent" + rotation: 180 + + Rectangle { + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + width: 1 + height: parent.height - 2 + color: grid.borderColor + } + + ColumnLayout { + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.right: parent.right + width: 1 + spacing: 0 + + Rectangle { + Layout.preferredHeight: 1 + Layout.preferredWidth: 1 + color: grid.borderColor + } + + Rectangle { + Layout.fillHeight: true + width: 1 + color: items.length > 0 && items[items.length - 1].active ? grid.borderColor : "transparent" + } + + Rectangle { + color: grid.borderColor + Layout.preferredHeight: 1 + Layout.preferredWidth: 1 + } + } + } + } } diff --git a/components/NavbarItem.qml b/components/NavbarItem.qml new file mode 100644 index 00000000..5d4cae06 --- /dev/null +++ b/components/NavbarItem.qml @@ -0,0 +1,37 @@ +// Copyright (c) 2021, The Monero Project +// +// All rights reserved. +// +// Redistribution and use in source and binary forms, with or without modification, are +// permitted provided that the following conditions are met: +// +// 1. Redistributions of source code must retain the above copyright notice, this list of +// conditions and the following disclaimer. +// +// 2. Redistributions in binary form must reproduce the above copyright notice, this list +// of conditions and the following disclaimer in the documentation and/or other +// materials provided with the distribution. +// +// 3. Neither the name of the copyright holder nor the names of its contributors may be +// used to endorse or promote products derived from this software without specific +// prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY +// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF +// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL +// THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, +// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, +// STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF +// THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + +import QtQuick 2.9 + +QtObject { + property bool active: false + property string text + property bool visible: true + + signal selected() +} diff --git a/pages/settings/Settings.qml b/pages/settings/Settings.qml index ae6d682f..703ea346 100644 --- a/pages/settings/Settings.qml +++ b/pages/settings/Settings.qml @@ -48,10 +48,37 @@ ColumnLayout { property int settingsHeight: 900 property alias settingsStateViewState: settingsStateView.state - Navbar { + MoneroComponents.Navbar { Layout.alignment: Qt.AlignHCenter Layout.topMargin: height Layout.bottomMargin: height + + MoneroComponents.NavbarItem { + active: settingsStateView.state == "Wallet" + text: qsTr("Wallet") + translationManager.emptyString + onSelected: settingsStateView.state = "Wallet" + } + MoneroComponents.NavbarItem { + active: settingsStateView.state == "UI" + text: qsTr("Interface") + translationManager.emptyString + onSelected: settingsStateView.state = "UI" + } + MoneroComponents.NavbarItem { + active: settingsStateView.state == "Node" + text: qsTr("Node") + translationManager.emptyString + visible: appWindow.walletMode >= 2 + onSelected: settingsStateView.state = "Node" + } + MoneroComponents.NavbarItem { + active: settingsStateView.state == "Log" + text: qsTr("Log") + translationManager.emptyString + onSelected: settingsStateView.state = "Log" + } + MoneroComponents.NavbarItem { + active: settingsStateView.state == "Info" + text: qsTr("Info") + translationManager.emptyString + onSelected: settingsStateView.state = "Info" + } } Rectangle{ diff --git a/qml.qrc b/qml.qrc index bc4c005e..625da33f 100644 --- a/qml.qrc +++ b/qml.qrc @@ -5,6 +5,8 @@ MiddlePanel.qml components/Label.qml components/LanguageButton.qml + components/Navbar.qml + components/NavbarItem.qml components/SettingsListItem.qml components/Slider.qml components/UpdateDialog.qml @@ -162,7 +164,6 @@ pages/settings/SettingsLog.qml pages/settings/SettingsLayout.qml pages/settings/SettingsInfo.qml - pages/settings/Navbar.qml components/WarningBox.qml images/miningxmr.png images/miningxmr@2x.png