Improve demoapp, try to make it look better

7 files changed, 87 insertions, 63 deletions

diff --git a/DemoApplication/controls/CNButton.qml b/DemoApplication/controls/CNButton.qml
index 6530fc4..5e91333 100644
--- a/DemoApplication/controls/CNButton.qml
+++ b/DemoApplication/controls/CNButton.qml
@@ -14,6 +14,7 @@ Button {
         radius: 40
         opacity: root.pressed ? 0.6 : 0.4
         color: "grey"
+        border.width: 1
     }
 
     contentItem: Item {
diff --git a/DemoApplication/controls/CNCursorIndicator.qml b/DemoApplication/controls/CNCursorIndicator.qml
index dc21d2e..66fde20 100644
--- a/DemoApplication/controls/CNCursorIndicator.qml
+++ b/DemoApplication/controls/CNCursorIndicator.qml
@@ -4,7 +4,7 @@ import CursorNavigation 1.0
 Rectangle {
     property Item cursorItem
     border.width: 2
-    border.color: "#ff66aa"
+    border.color: "deeppink"
     anchors.fill: parent
     visible: cursorItem.CursorNavigation.hasCursor
     color: "transparent"
diff --git a/DemoApplication/controls/qmldir b/DemoApplication/controls/qmldir
index 736988e..96432d8 100644
--- a/DemoApplication/controls/qmldir
+++ b/DemoApplication/controls/qmldir
@@ -7,4 +7,5 @@ CNSwitch 1.0 CNSwitch.qml
 CNCheckBox 1.0 CNCheckBox.qml
 CNListView 1.0 CNListView.qml
 CNItemDelegate 1.0 CNItemDelegate.qml
+CNCursorIndicator 1.0 CNCursorIndicator.qml
 MessageDialog 1.0 MessageDialog.qml
diff --git a/DemoApplication/main.qml b/DemoApplication/main.qml
index eb1e953..7eed033 100644
--- a/DemoApplication/main.qml
+++ b/DemoApplication/main.qml
@@ -88,20 +88,14 @@ ApplicationWindow {
 
         CNTabButton {
             id: defaultButton
-            text: qsTr("Page 1")
+            text: qsTr("Basics and scopes")
             focus: true
         }
         CNTabButton {
-            text: qsTr("Page 2")
+            text: qsTr("Lists etc")
         }
         CNTabButton {
-            text: qsTr("Page 3")
-        }
-        CNTabButton {
-            text: qsTr("Page 4")
-        }
-        CNTabButton {
-            text: qsTr("Page 5")
+            text: qsTr("Flip buttons")
         }
         CNTabButton {
             text: qsTr("Map")
@@ -116,9 +110,7 @@ ApplicationWindow {
             currentIndex: tabBar.currentIndex
             Page1 { }
             Page2 { }
-            Page3 { }
             Page4 { }
-            Page5 { }
             Page6 { }
         }
 
diff --git a/DemoApplication/pages/Page1.qml b/DemoApplication/pages/Page1.qml
index 84ef0a7..356bee1 100644
--- a/DemoApplication/pages/Page1.qml
+++ b/DemoApplication/pages/Page1.qml
@@ -1,5 +1,5 @@
 import QtQuick 2.9
-
+import QtQuick.Layouts 1.3
 import CursorNavigation 1.0
 import controls 1.0
 
@@ -7,80 +7,109 @@ Item {
     width: parent.width
     height: parent.height
 
-    FocusScope {
-        anchors.fill: parent
+    RowLayout {
+        anchors.centerIn: parent
 
-        Item {
-            width: 500
-            height: 400
-            anchors.centerIn: parent
+        GridLayout {
+            rows: 3
+            columns: 2
+            rowSpacing: 10
+            columnSpacing: 10
 
             CNButton {
                 id: button
-                x: 52
-                y: 50
                 text: qsTr("Button")
             }
 
             CNButton {
                 id: button1
-                x: 110
-                y: 138
                 text: qsTr("Button")
             }
 
             CNButton {
                 id: button2
-                x: 160
-                y: 241
-                text: qsTr("Button with default focus")
-                focus: true
+                text: qsTr("Button \n(cursor off)")
+                CursorNavigation.acceptsCursor: false
             }
 
             CNButton {
                 id: button3
-                x: 383
-                y: 241
-                text: qsTr("Button")
+                text: qsTr("Button \n(esc. target)")
             }
 
-            CNButton {
-                id: button4
-                x: 383
-                y: 322
-                text: qsTr("Button")
+            Rectangle {
+                border.width: 1
+                CNCursorIndicator { cursorItem: textEdit }
+                Layout.columnSpan: 2
+                Layout.fillWidth: true
+                Layout.minimumWidth: 100
+                Layout.preferredWidth: 200
+                Layout.maximumWidth: 300
+                Layout.minimumHeight: 30
+                TextEdit {
+                    id: textEdit
+                    anchors.fill: parent
+                    CursorNavigation.acceptsCursor: true
+                    text: "some text..."
+                }
             }
 
-            CNButton {
-                id: button5
-                x: 383
-                y: 138
-                text: qsTr("Button")
-            }
+        }
 
-            CNButton {
-                id: button6
-                x: 383
-                y: 50
-                text: qsTr("Button")
-            }
+        Rectangle {
+            Layout.fillWidth: true
+            //Layout.minimumWidth: 300
+            //Layout.preferredWidth: 250
+            //Layout.maximumWidth: 300
+            //Layout.minimumHeight: 350
+            Layout.minimumHeight: grid.height
+            Layout.minimumWidth: grid.width
+            border.width: 1
 
-            CNButton {
-                id: button7
-                x: 62
-                y: 241
-                text: qsTr("Button")
-            }
+            FocusScope {
+                anchors.fill: parent
+                CursorNavigation.acceptsCursor: true
+                CursorNavigation.escapeTarget: button3
+                CursorNavigation.trapsCursor: trapCheckBox.checked
 
-            CNButton {
-                id: button8
-                x: 210
-                y: 138
-                text: qsTr("Button (cursor off)")
-                CursorNavigation.acceptsCursor: false
+                GridLayout {
+                    id: grid
+                    anchors.centerIn: parent
+                    rows: 3
+                    columns: 2
+                    rowSpacing: 10
+                    columnSpacing: 10
+
+                    CNButton {
+                        id: button4
+                        //make the focusscope forward the focus and the cursor to it's children
+                        focus: true
+                        text: qsTr("Button")
+                    }
+
+                    CNButton {
+                        id: button5
+                        text: qsTr("Button")
+                    }
+
+                    CNButton {
+                        id: button6
+                        text: qsTr("Button")
+                    }
+
+                    CNButton {
+                        id: button7
+                        text: qsTr("Button")
+                    }
+
+                    CNCheckBox {
+                        id: trapCheckBox
+                        text: "Trap cursor to this scope"
+                        Layout.columnSpan: 2
+                    }
+                }
             }
         }
-        //this seems to be the way to force focus on a newly opened dialog?
-        Component.onCompleted: { forceActiveFocus(); }
     }
+
 }
diff --git a/DemoApplication/pages/Page2.qml b/DemoApplication/pages/Page2.qml
index 76b45f1..ea9bc77 100644
--- a/DemoApplication/pages/Page2.qml
+++ b/DemoApplication/pages/Page2.qml
@@ -10,7 +10,7 @@ Item {
     height: parent.height
 
     RowLayout {
-        anchors.fill: parent
+        anchors.centerIn: parent
         spacing: 10
 
         Column {
diff --git a/DemoApplication/pages/Page4.qml b/DemoApplication/pages/Page4.qml
index e111745..ff5ce2d 100644
--- a/DemoApplication/pages/Page4.qml
+++ b/DemoApplication/pages/Page4.qml
@@ -8,8 +8,9 @@ Item {
     GridLayout {
         columns: 4
         rows: 4
+        rowSpacing: 10
+        columnSpacing: 10
 
-        anchors.fill: parent
         anchors.centerIn: parent
 
         Repeater {