Navbar: reimplement as a reusable component, drop redundant code

2 files changed, 155 insertions, 323 deletions

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<MoneroComponents.NavbarItem> 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
-                property bool isActive: settingsStateView.state === "Wallet"
-                Layout.preferredWidth: 2
-                Layout.preferredHeight: 32
-                color: "transparent"
-
-                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: navBarLeft.isActive ? grid.borderColor : "transparent"
-                    }
+        Rectangle {
+            // navbar left side border
+            id: navBarLeft
+            Layout.preferredWidth: 2
+            Layout.preferredHeight: 32
+            color: "transparent"
 
-                    Rectangle {
-                        color: grid.borderColor
-                        Layout.preferredHeight: 1
-                        Layout.preferredWidth: 1
-                    }
-                }
+            Rectangle {
+                anchors.left: parent.left
+                anchors.verticalCenter: parent.verticalCenter
+                width: 1
+                height: parent.height - 2
+                color: grid.borderColor
             }
 
             ColumnLayout {
-                // WALLET
-                id: navWallet
-                property bool isActive: settingsStateView.state === "Wallet"
-                Layout.preferredWidth: navWalletText.width + grid.textMargin
-                Layout.minimumWidth: 72
-                Layout.preferredHeight: 32
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.right: parent.right
+                width: 1
                 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 { 
+                    Layout.preferredWidth: 1
                     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" }
-                    }
+                    Layout.fillHeight: true
+                    width: 1
+                    color: items.length > 0 && items[0].active ? grid.borderColor : "transparent";
                 }
 
-                Rectangle { 
+                Rectangle {
                     color: grid.borderColor
                     Layout.preferredHeight: 1
-                    Layout.fillWidth: true
+                    Layout.preferredWidth: 1
                 }
             }
-            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
+        }
+
+        Repeater {
+            model: items.length
+
+            RowLayout {
                 spacing: 0
 
-                Rectangle { 
+                Rectangle {
+                    Layout.preferredWidth: 1
+                    Layout.preferredHeight: 32
                     color: grid.borderColor
-                    Layout.preferredHeight: 1
-                    Layout.fillWidth: true
+                    visible: index > 0 && items[index - 1].visible
                 }
 
-                Rectangle {
-                    color: parent.isActive ? grid.borderColor : "transparent"
-                    height: 30
+                ColumnLayout {
+                    Layout.minimumWidth: 72
+                    Layout.preferredHeight: 32
                     Layout.fillWidth: true
+                    spacing: 0
+                    visible: items[index].visible
 
-                    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 { 
-                    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 {
+                        Layout.minimumHeight: 30
+                        color: items[index].active ? grid.borderColor : "transparent"
+                        height: children[0].height
+                        width: children[0].width
 
-                Rectangle { 
-                    color: grid.borderColor
-                    Layout.preferredHeight: 1
-                    Layout.fillWidth: true
-                }
+                        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
+                        }
 
-                Rectangle {
-                    color: parent.isActive ? grid.borderColor : "transparent"
-                    height: 30
-                    Layout.fillWidth: true
+                        MouseArea {
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
 
-                    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
+                            onClicked: items[index].selected()
+                        }
                     }
 
-                    MouseArea {
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        cursorShape: Qt.PointingHandCursor
-
-                        onClicked: { settingsStateView.state = "Log" }
+                    Rectangle {
+                        color: grid.borderColor
+                        Layout.preferredHeight: 1
+                        Layout.fillWidth: true
                     }
                 }
-
-                Rectangle { 
-                    color: grid.borderColor
-                    Layout.preferredHeight: 1
-                    Layout.fillWidth: true
-                }
             }
-            Rectangle{
-                visible: appWindow.walletMode >= 2
-                Layout.preferredWidth: 1
-                Layout.preferredHeight: 32
+        }
+
+        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 {
-                // INFO
-                id: navInfo
-                property bool isActive: settingsStateView.state === "Info"
-                Layout.preferredWidth: navInfoText.width + grid.textMargin
-                Layout.preferredHeight: 32
-                Layout.minimumWidth: 72
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.right: parent.right
+                width: 1
                 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
+                    Layout.preferredWidth: 1
+                    color: grid.borderColor
                 }
-            }
-
-            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
+                    Layout.fillHeight: true
                     width: 1
-                    height: parent.height - 2
-                    color: grid.borderColor
+                    color: items.length > 0 && items[items.length - 1].active ? grid.borderColor : "transparent"
                 }
 
-                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 {
+                    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()
+}