SideNavBar and TabBar Swift Orange styling

resources/ConnectionScreen.qml

@@ -33,16 +33,21 @@ Item {
     }
 
     Rectangle {
-        width: parent.width
-        height: parent.height
-        anchors.centerIn: parent
+        anchors.fill: parent
 
         Image {
             width: parent.width
             height: parent.height
             source: Constants.icons.splashScreenPath
         }
 
+        Rectangle {
+            anchors.left: parent.left
+            height: parent.height
+            width: 1
+            color: "white"
+        }
+
         Dialog {
             id: dialog
 

resources/Constants/Constants.qml

@@ -6,7 +6,7 @@ pragma Singleton
 QtObject {
     readonly property real margins: 2
     readonly property real tabBarWidth: 70
-    readonly property real tabBarHeight: 40
+    readonly property real tabBarHeight: 45
     readonly property real topLevelSpacing: 0
     readonly property real logPanelPreferredHeight: 100
     readonly property int loggingBarPreferredHeight: 50
@@ -50,6 +50,10 @@ QtObject {
     readonly property real mediumPointSize: 8
     readonly property real largePointSize: 9
     readonly property bool debugMode: false
+    readonly property color swiftGrey: "#323F48"
+    readonly property color swiftLightGrey: "#3C464F"
+    readonly property color swiftControlBackground: "#ECECEC"
+    readonly property color tabButtonUnselectedTextColor: "#767676"
     readonly property color materialGrey: "dimgrey"
     readonly property color swiftOrange: "#FF8300"
 
@@ -92,8 +96,7 @@ QtObject {
         readonly property string updatePath: "qrc:///images/fontawesome/chevron-circle-up-solid.svg"
         readonly property string advancedPath: "qrc:///images/fontawesome/lock-solid.svg"
         readonly property real tabBarHeight: 45
-        readonly property real tabBarWidth: 70
-        readonly property int tabBarSpacing: 10
+        readonly property real tabBarWidth: 50
         readonly property int buttonPadding: 0
         readonly property int buttonInset: 0
         readonly property int separatorMargin: 10

resources/Constants/utils.js

@@ -34,3 +34,11 @@ function readTextFile(path, elem){
     req.open("GET", path);
     req.send();
 }
+
+// Dump all properties in a QML item (or any javascript object).
+function listProperty(item)
+{
+    for (var p in item)
+        if (typeof item[p] != "function")
+            console.log(p + ": " + item[p]);
+}

resources/MainTabs.qml

@@ -4,14 +4,12 @@ import QtQuick.Layouts 1.15
 import SwiftConsole 1.0
 
 Item {
+    property alias currentIndex: stackLayout.currentIndex
+
     StackLayout {
         id: stackLayout
 
         anchors.fill: parent
-        currentIndex: parent.curIndex
-
-        Item {
-        }
 
         TrackingTab {
         }

resources/SideNavBar.qml

@@ -1,11 +1,15 @@
 import "Constants"
-import QtQuick 2.5
-import QtQuick.Controls 2.3
+import QtQuick 2.15
+import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
+import "SideNavBarComponents"
 import SwiftConsole 1.0
 
-Rectangle {
-    property alias curIndex: tab.currentIndex
+Item {
+    id: top
+
+    property alias currentIndex: navButtons.currentIndex
+    property bool enabled: true
     property var tabModel: [{
         "name": "Tracking",
         "tooltip": "Tracking",
@@ -36,95 +40,59 @@ Rectangle {
         "source": Constants.sideNavBar.advancedPath
     }]
 
-    color: Constants.sideNavBar.backgroundColor
-
     ConnectionData {
         id: connectionData
     }
 
     ColumnLayout {
         anchors.fill: parent
 
-        Button {
-            id: logo
-
-            Layout.fillWidth: true
-            Layout.preferredHeight: Constants.sideNavBar.tabBarHeight
-            padding: Constants.sideNavBar.buttonPadding
-            icon.source: Constants.icons.swiftLogoPath
-            icon.color: "transparent"
-            ToolTip.visible: hovered
-            ToolTip.text: "About this application"
-            onClicked: {
-                logoPopup.open();
-            }
-
-            background: Item {
-            }
-
-        }
-
         Rectangle {
-            color: Constants.materialGrey
-            Layout.alignment: Qt.AlignHCenter
-            Layout.preferredHeight: Constants.sideNavBar.separatorHeight
-            Layout.fillWidth: true
-            Layout.rightMargin: Constants.sideNavBar.separatorMargin
-            Layout.leftMargin: Constants.sideNavBar.separatorMargin
-        }
-
-        TabBar {
-            id: tab
-
             Layout.fillWidth: true
             Layout.fillHeight: true
-            z: Constants.commonChart.zAboveCharts
-            height: parent.height
-            contentHeight: Constants.sideNavBar.tabBarHeight
-            contentWidth: Constants.sideNavBar.tabBarWidth
-            currentIndex: Globals.initialMainTabIndex + 1
-            Component.onCompleted: {
-                logo.checkable = false;
-            }
+            color: Constants.swiftGrey
 
-            TabButton {
-                enabled: false
-                height: 0
+            ButtonGroup {
+                id: navButtonGroup
+
+                buttons: navButtons.children
+                onCheckedButtonChanged: {
+                    for (var idx = 0; idx < buttons.length && buttons[idx] != checkedButton; idx++);
+                    navButtons.currentIndex = idx;
+                }
             }
 
-            Repeater {
-                id: repeater
+            ListView {
+                id: navButtons
 
+                anchors.fill: parent
                 model: tabModel
+                currentIndex: Globals.initialMainTabIndex
+                enabled: top.enabled
+                highlightMoveDuration: 200
+                highlightResizeDuration: 0
+                highlightFollowsCurrentItem: true
+                Component.onCompleted: {
+                    currentItem.checked = true;
+                }
 
-                TabButton {
-                    text: modelData.name
-                    width: Constants.sideNavBar.tabBarWidth
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    icon.source: modelData.source
-                    icon.color: checked ? Constants.swiftOrange : Constants.materialGrey
-                    display: AbstractButton.TextUnderIcon
-                    font.pointSize: Constants.smallPointSize
-                    padding: Constants.sideNavBar.buttonPadding
-                    rightInset: Constants.sideNavBar.buttonInset
-                    leftInset: Constants.sideNavBar.buttonInset
-                    enabled: Globals.connected_at_least_once
-                    ToolTip.visible: hovered
-                    ToolTip.text: modelData.tooltip
-                    onClicked: {
-                        if (stack.connectionScreenVisible())
-                            stack.mainView();
+                highlight: Item {
+                    // TODO: This is an odd z order which depends on the Z order of some things in the buttons, refactor.
+                    z: 6
 
+                    Rectangle {
+                        height: 2
+                        width: parent.width
+                        y: parent.height - height
+                        color: Constants.swiftOrange
                     }
+
                 }
 
-            }
+                delegate: SideNavButton {
+                    buttonGroup: navButtonGroup
+                }
 
-            contentItem: ListView {
-                model: tab.contentModel
-                currentIndex: tab.currentIndex
-                spacing: Constants.sideNavBar.tabBarSpacing
-                orientation: ListView.Vertical
             }
 
         }
@@ -134,8 +102,10 @@ Rectangle {
 
             Layout.alignment: Qt.AlignBottom
             Layout.preferredWidth: Constants.sideNavBar.tabBarWidth
+            border: false
             icon.source: Constants.icons.lightningBoltPath
-            icon.color: checked ? Constants.swiftOrange : Constants.materialGrey
+            icon.color: !enabled ? Constants.materialGrey : Constants.swiftOrange
+            backgroundColor: hovered ? Qt.darker("white", 1.1) : "white"
             checkable: false
             padding: Constants.sideNavBar.buttonPadding
             rightInset: Constants.sideNavBar.buttonInset

resources/SideNavBarComponents/SideNavButton.qml

@@ -0,0 +1,92 @@
+import "../Constants"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Controls.impl 2.15
+
+// This defines a Side Navigation button as is specified in the Style mockup guidelines listed here:
+// https://snav.slack.com/archives/C020JLK6PK8/p1637094700036500
+// To make the buttons within exclusive, the user needs to create a ButtonGroup, and assign
+// all buttons to that buttongroup
+Button {
+    id: control
+
+    property QtObject buttonGroup
+    property QtObject view: ListView.view
+
+    ButtonGroup.group: buttonGroup
+    width: view.width
+    height: implicitHeight < width ? width : implicitHeight
+    z: visualFocus ? 10 : control.checked || control.highlighted ? 5 : 1
+    display: AbstractButton.TextUnderIcon
+    checkable: true
+    text: modelData.name
+    ToolTip.text: modelData.tooltip
+    ToolTip.delay: 1000
+    ToolTip.timeout: 5000
+    ToolTip.visible: ToolTip.text.length != 0 && hovered
+    icon.source: modelData.source
+    icon.width: 22
+    icon.height: 22
+    icon.color: control.checked || control.highlighted ? Qt.darker(Constants.swiftOrange, control.enabled ? 1 : 1.5) : control.flat && !control.down ? (control.visualFocus ? Constants.swiftOrange : control.palette.windowText) : Qt.darker("white", control.enabled ? 1 : 1.5)
+    font.pointSize: Constants.smallPointSize
+    font.capitalization: Font.MixedCase
+    font.letterSpacing: -1
+    // No idea why the insets are set, but they need to be 0 so there are no gaps between buttons.
+    topInset: 0
+    bottomInset: 0
+    // Padding controls the padding around items within the button. We want to minimize it, so set
+    // to 0. Realistically if we weren't setting an explicit width (set by the SideBar width), we'd
+    // want more padding than 0.
+    padding: 0
+    // Spacing controls the spacing between the icon and the text. Default is 6, we reduce this to
+    // 3 to match the new style mockups.
+    spacing: 3
+    Component.onCompleted: {
+        console.assert(buttonGroup != undefined, "No buttonGroup assigned to SideNavButton! Undesired behavior will result.");
+    }
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.checked || control.highlighted ? Qt.darker(control.palette.dark, control.enabled ? 1 : 1.5) : control.flat && !control.down ? (control.visualFocus ? Constants.swiftOrange : control.palette.windowText) : Qt.darker("white", control.enabled ? 1 : 1.5)
+    }
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        visible: !control.flat || control.down || control.checked || control.highlighted
+        color: Color.blend(control.checked || control.highlighted ? Qt.darker("white", control.enabled ? 1 : 1.5) : Constants.swiftGrey, control.palette.mid, control.down ? 0.5 : 0)
+        border.color: Constants.swiftOrange
+        border.width: control.visualFocus ? 1 : 0
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            height: 1
+            color: Qt.darker("white", control.enabled ? 1 : 1.5)
+            visible: !control.visualFocus && !(control.view.itemAtIndex(index + 1) != null ? control.view.itemAtIndex(index + 1).visualFocus : false)
+        }
+
+        Repeater {
+            model: 2
+
+            Rectangle {
+                anchors.left: index == 0 ? parent.left : undefined
+                anchors.right: index == 1 ? parent.right : undefined
+                y: -1
+                height: parent.height + 1
+                width: 1
+                color: Constants.swiftGrey
+                visible: !control.visualFocus && (control.checked || control.highlighted) && control.enabled
+            }
+
+        }
+
+    }
+
+}