Add more features for the demo app

Add a common cursor indicator item that all navigable items may
use for visualizing the cursor.
Add a cursor navigable delegate.
Make lists more generic by adding a CNItemDelegate.
Add CNFlipButton that has flipping animations when used with
CursorNavigation. Update Page4 with the new button type.

11 files changed, 133 insertions, 120 deletions

diff --git a/DemoApplication/controls/CNButton.qml b/DemoApplication/controls/CNButton.qml
index fb8e1b8..6530fc4 100644
--- a/DemoApplication/controls/CNButton.qml
+++ b/DemoApplication/controls/CNButton.qml
@@ -8,28 +8,6 @@ Button {
     implicitHeight: 40
 
     CursorNavigation.acceptsCursor: true
-    //property bool hasCursor: CursorNavigation.hasCursor
-
-    Rotation {
-        id: rot
-        origin.x: root.width/2
-        origin.y: root.height/2
-    }
-
-    transform: rot
-
-    CursorNavigation.onHasCursorChanged: {
-        if (!hasCursor)
-            rot.angle = 0
-    }
-
-    CursorNavigation.onMagnitudeChanged: {
-        rot.angle = magnitude*45.0;
-        var a = angle * Math.PI/180.0
-        rot.axis.x = -Math.sin(a)
-        rot.axis.y = Math.cos(a)
-        rot.axis.z = 0
-    }
 
     background: Rectangle {
         anchors.fill: parent
@@ -48,12 +26,6 @@ Button {
             text: root.text
         }
 
-        Rectangle {
-            border.width: 2
-            border.color: "red"
-            anchors.fill: parent
-            visible: root.CursorNavigation.hasCursor
-            color: "transparent"
-        }
+        CNCursorIndicator { cursorItem : root; radius: 40}
     }
 }
diff --git a/DemoApplication/controls/CNCheckBox.qml b/DemoApplication/controls/CNCheckBox.qml
index d411d32..3fd12e9 100644
--- a/DemoApplication/controls/CNCheckBox.qml
+++ b/DemoApplication/controls/CNCheckBox.qml
@@ -3,12 +3,11 @@ import QtQuick.Controls 2.2
 import CursorNavigation 1.0
 
 CheckBox {
+    id: root
     CursorNavigation.acceptsCursor: true
-    Rectangle {
-        anchors.fill: parent
-        color: "transparent"
-        border.width: 2
-        border.color: "red"
-        visible: parent.CursorNavigation.hasCursor
+    CNCursorIndicator { cursorItem : parent }
+
+    CursorNavigation.onActivated: {
+        root.toggle()
     }
 }
diff --git a/DemoApplication/controls/CNCursorIndicator.qml b/DemoApplication/controls/CNCursorIndicator.qml
new file mode 100644
index 0000000..dc21d2e
--- /dev/null
+++ b/DemoApplication/controls/CNCursorIndicator.qml
@@ -0,0 +1,11 @@
+import QtQuick 2.9
+import CursorNavigation 1.0
+
+Rectangle {
+    property Item cursorItem
+    border.width: 2
+    border.color: "#ff66aa"
+    anchors.fill: parent
+    visible: cursorItem.CursorNavigation.hasCursor
+    color: "transparent"
+}
diff --git a/DemoApplication/controls/CNFlipButton.qml b/DemoApplication/controls/CNFlipButton.qml
new file mode 100644
index 0000000..319d10e
--- /dev/null
+++ b/DemoApplication/controls/CNFlipButton.qml
@@ -0,0 +1,90 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import CursorNavigation 1.0
+
+CNButton {
+    id: root
+
+    implicitWidth: (textLabel.contentWidth + 40)
+    implicitHeight: 40
+
+    CursorNavigation.acceptsCursor: true
+
+    background: Rectangle {
+        anchors.fill: parent
+        radius: 4
+        opacity: root.pressed ? 0.6 : 0.4
+        color: "grey"
+    }
+
+    contentItem: Item {
+        anchors.fill: parent
+        Label {
+            id: textLabel
+            anchors.centerIn: parent
+            font.pixelSize: 14
+            color: "blue"
+            text: root.text
+        }
+
+        CNCursorIndicator { cursorItem : root; radius: 4}
+    }
+
+    Rotation {
+        id: rot
+        origin.x: root.width/2
+        origin.y: root.height/2
+    }
+
+
+    NumberAnimation {
+        id: returnAnimation
+        target: rot
+        property: "angle"
+        duration: 400
+        easing.type: Easing.InOutQuad
+        from: 45
+        to: 0
+    }
+
+    transform: rot
+
+    CursorNavigation.onHasCursorChanged: {
+        if (!hasCursor)
+            returnAnimation.start()
+    }
+
+    function flip(angle, magnitude) {
+        rot.angle = magnitude*45.0;
+        var a = angle * Math.PI/180.0
+        rot.axis.x = -Math.sin(a)
+        rot.axis.y = Math.cos(a)
+        rot.axis.z = 0
+    }
+
+    CursorNavigation.onMagnitudeChanged: {
+        flip(angle, magnitude)
+    }
+
+
+    CursorNavigation.onMovedUp: {
+        console.log("moved up ffs")
+        flip(-90, 1);
+        returnAnimation.start()
+    }
+
+    CursorNavigation.onMovedDown: {
+        flip(90, 1);
+        returnAnimation.start()
+    }
+
+    CursorNavigation.onMovedRight: {
+        flip(0, 1);
+        returnAnimation.start()
+    }
+
+    CursorNavigation.onMovedLeft: {
+        flip(180, 1);
+        returnAnimation.start()
+    }
+}
diff --git a/DemoApplication/controls/CNItemDelegate.qml b/DemoApplication/controls/CNItemDelegate.qml
new file mode 100644
index 0000000..b99bee9
--- /dev/null
+++ b/DemoApplication/controls/CNItemDelegate.qml
@@ -0,0 +1,14 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.4
+import CursorNavigation 1.0
+
+ItemDelegate {
+    CursorNavigation.acceptsCursor: true
+    CNCursorIndicator { cursorItem : parent }
+
+    //here we make sure the list's current index follows the cursor!
+    CursorNavigation.onHasCursorChanged: {
+        if (CursorNavigation.hasCursor)
+            parent.currentIndex = index
+    }
+}
diff --git a/DemoApplication/controls/CNListView.qml b/DemoApplication/controls/CNListView.qml
index 7458231..ed4ff45 100644
--- a/DemoApplication/controls/CNListView.qml
+++ b/DemoApplication/controls/CNListView.qml
@@ -4,8 +4,9 @@ import CursorNavigation 1.0
 
 ListView {
     id: listView
-    spacing: 4
-    focus: true
+
+    //use CNItemDelegate as the delegate!
+
     /* when list view scopes the cursor, the cursor is passed further to its
      * currently focused child. this means, moving from outside to the list,
      * will return the cursor to the item that was previously selected
@@ -13,60 +14,4 @@ ListView {
      */
     CursorNavigation.acceptsCursor: true
 
-    Rectangle {
-        anchors.fill: parent
-        border.width: 1
-        border.color: listView.activeFocus ? "red" : "black"
-        color: "transparent"
-    }
-
-    highlight: Rectangle {
-        width: listView.width
-        height: 40
-        color: "lightgrey"
-        opacity: 0.3
-    }
-
-    delegate: ItemDelegate {
-        id: deleg
-        width: listView.width
-        height: 40
-        CursorNavigation.acceptsCursor: true
-
-        //make sure the list's current index follows the cursor!
-        CursorNavigation.onHasCursorChanged: {
-            if (CursorNavigation.hasCursor)
-                listView.currentIndex = index
-        }
-
-        contentItem: Rectangle {
-            width: listView.width
-            height: 40
-            border.color: deleg.CursorNavigation.hasCursor ? "red" : "transparent"
-
-            Row {
-                width: (parent.width - x)
-                height: 35
-                x: 5
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: 10
-                Rectangle {
-                    width: parent.height
-                    height: parent.height
-                    radius: width/2
-                    color: colorCode
-                }
-                Text {
-                    height: parent.height
-                    font.bold: true
-                    verticalAlignment: Text.AlignVCenter
-                    text: name
-                }
-            }
-        }
-        onClicked: {
-            listView.currentIndex = index;
-        }
-    }
-
 }
diff --git a/DemoApplication/controls/CNRadioButton.qml b/DemoApplication/controls/CNRadioButton.qml
index 1f649b3..8bdc06d 100644
--- a/DemoApplication/controls/CNRadioButton.qml
+++ b/DemoApplication/controls/CNRadioButton.qml
@@ -4,11 +4,5 @@ import CursorNavigation 1.0
 
 RadioButton {
     CursorNavigation.acceptsCursor: true
-    Rectangle {
-        anchors.fill: parent
-        color: "transparent"
-        border.width: 2
-        border.color: "red"
-        visible: parent.CursorNavigation.hasCursor
-    }
+    CNCursorIndicator { cursorItem : parent }
 }
diff --git a/DemoApplication/controls/CNSwitch.qml b/DemoApplication/controls/CNSwitch.qml
index e3f0e01..964faef 100644
--- a/DemoApplication/controls/CNSwitch.qml
+++ b/DemoApplication/controls/CNSwitch.qml
@@ -4,11 +4,5 @@ import CursorNavigation 1.0
 
 Switch {
     CursorNavigation.acceptsCursor: true
-    Rectangle {
-        border.width: 2
-        border.color: "red"
-        anchors.fill: parent
-        visible: parent.CursorNavigation.hasCursor
-        color: "transparent"
-    }
+    CNCursorIndicator { cursorItem : parent }
 }
diff --git a/DemoApplication/controls/CNTabButton.qml b/DemoApplication/controls/CNTabButton.qml
index 7557832..48e9205 100644
--- a/DemoApplication/controls/CNTabButton.qml
+++ b/DemoApplication/controls/CNTabButton.qml
@@ -3,12 +3,10 @@ import QtQuick.Controls 2.2
 import CursorNavigation 1.0
 
 TabButton {
+    id: root
     CursorNavigation.acceptsCursor: true
-    Rectangle {
-        anchors.fill: parent
-        color: "transparent"
-        border.width: 2
-        border.color: "red"
-        visible: parent.CursorNavigation.hasCursor
+    CNCursorIndicator { cursorItem : parent }
+    CursorNavigation.onActivated: {
+        root.checked = true;
     }
 }
diff --git a/DemoApplication/controls/CNToolButton.qml b/DemoApplication/controls/CNToolButton.qml
index 65f2338..2da3a31 100644
--- a/DemoApplication/controls/CNToolButton.qml
+++ b/DemoApplication/controls/CNToolButton.qml
@@ -4,11 +4,5 @@ import CursorNavigation 1.0
 
 ToolButton {
     CursorNavigation.acceptsCursor: true
-    Rectangle {
-        anchors.fill: parent
-        color: "transparent"
-        border.width: 2
-        border.color: "red"
-        visible: parent.CursorNavigation.hasCursor
-    }
+    CNCursorIndicator { cursorItem : parent }
 }
diff --git a/DemoApplication/controls/qmldir b/DemoApplication/controls/qmldir
index 6def14f..554a44e 100644
--- a/DemoApplication/controls/qmldir
+++ b/DemoApplication/controls/qmldir
@@ -1,7 +1,9 @@
 CNButton 1.0 CNButton.qml
+CNFlipButton 1.0 CNFlipButton.qml
 CNTabButton 1.0 CNTabButton.qml
 CNToolButton 1.0 CNToolButton.qml
 CNRadioButton 1.0 CNRadioButton.qml
 CNSwitch 1.0 CNSwitch.qml
 CNCheckBox 1.0 CNCheckBox.qml
 CNListView 1.0 CNListView.qml
+CNItemDelegate 1.0 CNItemDelegate.qml