Add an alternative list based tabbar to the mainpage, fix page 2 a bit

4 files changed, 110 insertions, 46 deletions

diff --git a/DemoApplication/controls/CNListView.qml b/DemoApplication/controls/CNListView.qml
index 3d67317..7458231 100644
--- a/DemoApplication/controls/CNListView.qml
+++ b/DemoApplication/controls/CNListView.qml
@@ -4,7 +4,6 @@ import CursorNavigation 1.0
 
 ListView {
     id: listView
-    anchors.fill: parent
     spacing: 4
     focus: true
     /* when list view scopes the cursor, the cursor is passed further to its
diff --git a/DemoApplication/main.qml b/DemoApplication/main.qml
index bfb7840..1bc600b 100644
--- a/DemoApplication/main.qml
+++ b/DemoApplication/main.qml
@@ -13,35 +13,85 @@ ApplicationWindow {
     visible: true
     title: qsTr("Cursor Navigation Demo Application")
 
-    header:
+    /* there are alternative ways to implement a tabbar. the traditional tabbar has
+     * problems with CursorNavigation: when trying to navigate the cursor on it
+     * right after launching the application, the cursor will not be passed onto
+     * the children. However, if clicked first, the navigation works. Another
+     * workaround is to force the active focus on one of the tabs.
+     * The listview approach works right out of the box
+     */
 
-        TabBar {
-            id: tabBar
-            width: window.width
+    header:/* ListView {
+        id: tabBar
+        orientation: ListView.Horizontal
+        width: window.width
+        height: 40
+        CursorNavigation.acceptsCursor: true
 
+        delegate: Rectangle {
             CursorNavigation.acceptsCursor: true
+            CursorNavigation.onHasCursorChanged: {
+                if (CursorNavigation.hasCursor)
+                    tabBar.currentIndex = index
+            }
+            width: tabBar.width/tabBar.count
+            height: 40
+            border.width: 2
+            border.color: CursorNavigation.hasCursor ? "red" : "transparent"
+
+            Text { anchors.centerIn: parent; text: pageName}
+        }
 
-            CNTabButton {
-                text: qsTr("Page 1")
-                focus: true
+        model: ListModel {
+            ListElement {
+                pageName: "Page 1"
             }
-            CNTabButton {
-                text: qsTr("Page 2")
+            ListElement {
+                pageName: "Page 2"
             }
-            CNTabButton {
-                text: qsTr("Page 3")
+            ListElement {
+                pageName: "Page 3"
             }
-            CNTabButton {
-                text: qsTr("Page 4")
+            ListElement {
+                pageName: "Page 4"
             }
-            CNTabButton {
-                text: qsTr("Page 5")
+            ListElement {
+                pageName: "Page 5"
             }
-            CNTabButton {
-                text: qsTr("Map")
+            ListElement {
+                pageName: "Map"
             }
         }
 
+    }*/
+
+    TabBar {
+        id: tabBar
+        width: window.width
+        CursorNavigation.acceptsCursor: true
+
+        CNTabButton {
+            id: defaultButton
+            text: qsTr("Page 1")
+            focus: true
+        }
+        CNTabButton {
+            text: qsTr("Page 2")
+        }
+        CNTabButton {
+            text: qsTr("Page 3")
+        }
+        CNTabButton {
+            text: qsTr("Page 4")
+        }
+        CNTabButton {
+            text: qsTr("Page 5")
+        }
+        CNTabButton {
+            text: qsTr("Map")
+        }
+    }
+
     contentData: StackLayout {
         anchors.fill: parent
         currentIndex: tabBar.currentIndex
@@ -52,4 +102,10 @@ ApplicationWindow {
         Page5 { }
         Page6 { }
     }
+
+    //a trick that ensure the cursor can be moved on the tabbar without needing to click teh tabbar first
+    Component.onCompleted: {
+        defaultButton.forceActiveFocus()
+    }
+
 }
diff --git a/DemoApplication/pages/Page2.qml b/DemoApplication/pages/Page2.qml
index 9d5a796..40be56c 100644
--- a/DemoApplication/pages/Page2.qml
+++ b/DemoApplication/pages/Page2.qml
@@ -1,5 +1,6 @@
 import QtQuick 2.9
 import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.3
 
 import CursorNavigation 1.0
 import controls 1.0
@@ -8,40 +9,34 @@ Item {
     width: parent.width
     height: parent.height
 
-    Item {
-        width: 580
-        height: 450
-        anchors.centerIn: parent
-        FocusScope {
-            id: focusScope
-            width: 198
-            height: 359
-            anchors.right: parent.right
-            anchors.top: parent.top
-            anchors.topMargin: 20
-
+    RowLayout {
+        anchors.fill: parent
+        spacing: 10
 
+        Column {
             CNListView {
                 id: listView
-                anchors.fill: parent
+                width: 198
+                height: 359
+                //anchors.right: parent.right
+                //anchors.top: parent.top
+                //anchors.topMargin: 20
                 spacing: 4
+                clip: true
 
                 model: ListModel {
                     ListElement {
                         name: "Grey"
                         colorCode: "grey"
                     }
-
                     ListElement {
                         name: "Red"
                         colorCode: "red"
                     }
-
                     ListElement {
                         name: "Blue"
                         colorCode: "blue"
                     }
-
                     ListElement {
                         name: "Green"
                         colorCode: "green"
@@ -62,21 +57,34 @@ Item {
                         name: "Black"
                         colorCode: "black"
                     }
+                    ListElement {
+                        name: "Aliceblue"
+                        colorCode: "aliceblue"
+                    }
+                    ListElement {
+                        name: "Blueviolet"
+                        colorCode: "blueviolet"
+                    }
+                    ListElement {
+                        name: "Coral"
+                        colorCode: "coral"
+                    }
                 }
             }
-        }
-        CNButton {
-            id: button3
-            anchors.top: focusScope.bottom
-            anchors.topMargin: 20
-            anchors.right: parent.right
-            anchors.rightMargin: 60
-            text: qsTr("Button")
+            CNButton {
+                anchors.horizontalCenter: parent.horizontalCenter
+                id: button3
+                //anchors.top: listView.bottom
+                //anchors.topMargin: 20
+                //anchors.right: parent.right
+                //anchors.rightMargin: 60
+                text: qsTr("Button")
+            }
         }
         Column {
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.left: parent.left
-            anchors.leftMargin: 50
+            //anchors.verticalCenter: parent.verticalCenter
+            //anchors.left: parent.left
+            //anchors.leftMargin: 50
             spacing: 30
             CNButton {
                 text: qsTr("Button")
@@ -90,5 +98,6 @@ Item {
                 text: qsTr("Button")
             }
         }
+
     }
 }
diff --git a/DemoApplication/pages/Page5.qml b/DemoApplication/pages/Page5.qml
index 79dda87..578f1f8 100644
--- a/DemoApplication/pages/Page5.qml
+++ b/DemoApplication/pages/Page5.qml
@@ -73,7 +73,7 @@ Item {
         Rectangle {
             anchors.fill: parent
             border.width: 1
-            border.color: pathView.activeFocus ? "red" : "transparent"
+            border.color: pathView.CursorNavigation.hasCursor ? "red" : "transparent"
             color: "transparent"
         }
         PathView {