Navbar: reimplement as a reusable component, drop redundant code

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 "." as MoneroComponents
-import "../../js/Windows.js" as Windows
-import "../../js/Utils.js" as Utils
-import "../../components" as MoneroComponents
-import "../../pages"
-import "."
-import moneroComponents.Clipboard 1.0
 
 Rectangle {
+    default property list<MoneroComponents.NavbarItem> items
+
     color: "transparent"
     height: grid.height
     width: grid.width
 
-        GridLayout {
+    GridLayout {
-            id: grid
+        id: grid
-            anchors.verticalCenter: parent.verticalCenter
+        anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
-            columnSpacing: 0
+        columnSpacing: 0
-            property string fontColorActive: MoneroComponents.Style.blackTheme ? "white" : "white"
+        property string fontColorActive: MoneroComponents.Style.blackTheme ? "white" : "white"
-            property string fontColorInActive: MoneroComponents.Style.blackTheme ? "white" : MoneroComponents.Style.dimmedFontColor
+        property string fontColorInActive: MoneroComponents.Style.blackTheme ? "white" : MoneroComponents.Style.dimmedFontColor
-            property int fontSize: 15
+        property int fontSize: 15
-            property bool fontBold: true
+        property bool fontBold: true
-            property var fontFamily: MoneroComponents.Style.fontRegular.name
+        property var fontFamily: MoneroComponents.Style.fontRegular.name
-            property string borderColor: MoneroComponents.Style.blackTheme ? "#808080" : "#B9B9B9"
+        property string borderColor: MoneroComponents.Style.blackTheme ? "#808080" : "#B9B9B9"
-            property int textMargin: {
+        property int textMargin: {
-                // left-right margins for a given cell
+            // left-right margins for a given cell
-                if(appWindow.width < 890){
+            if(appWindow.width < 890){
-                    return 32;
+                return 32;
-                } else {
+            } else {
-                    return 64;
+                return 64;
-                }
             }
+        }
+
+        Rectangle {
+            // navbar left side border
+            id: navBarLeft
+            Layout.preferredWidth: 2
+            Layout.preferredHeight: 32
+            color: "transparent"
 
             Rectangle {
-                // navbar left side border
+                anchors.left: parent.left
-                id: navBarLeft
+                anchors.verticalCenter: parent.verticalCenter
-                property bool isActive: settingsStateView.state === "Wallet"
+                width: 1
-                Layout.preferredWidth: 2
+                height: parent.height - 2
-                Layout.preferredHeight: 32
+                color: grid.borderColor
-                color: "transparent"
+            }
+
+            ColumnLayout {
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.right: parent.right
+                width: 1
+                spacing: 0
 
                 Rectangle {
-                    anchors.left: parent.left
+                    Layout.preferredHeight: 1
-                    anchors.verticalCenter: parent.verticalCenter
+                    Layout.preferredWidth: 1
-                    width: 1
-                    height: parent.height - 2
                     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
+                    Layout.minimumWidth: 72
-                    anchors.bottom: parent.bottom
+                    Layout.preferredHeight: 32
-                    anchors.right: parent.right
+                    Layout.fillWidth: true
-                    width: 1
                     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
+                        Layout.minimumHeight: 30
-                        width: 1
+                        color: items[index].active ? grid.borderColor : "transparent"
-                        color: navBarLeft.isActive ? 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
+                        Layout.fillWidth: true
-                    }
-                }
-            }
-
-            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
                     }
                 }
             }
         }
+
+        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
+                }
+            }
+        }
+    }
 }

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

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{

qml.qrc

@@ -5,6 +5,8 @@
         <file>MiddlePanel.qml</file>
         <file>components/Label.qml</file>
         <file>components/LanguageButton.qml</file>
+        <file>components/Navbar.qml</file>
+        <file>components/NavbarItem.qml</file>
         <file>components/SettingsListItem.qml</file>
         <file>components/Slider.qml</file>
         <file>components/UpdateDialog.qml</file>
@@ -162,7 +164,6 @@
         <file>pages/settings/SettingsLog.qml</file>
         <file>pages/settings/SettingsLayout.qml</file>
         <file>pages/settings/SettingsInfo.qml</file>
-        <file>pages/settings/Navbar.qml</file>
         <file>components/WarningBox.qml</file>
         <file>images/miningxmr.png</file>
         <file>images/miningxmr@2x.png</file>