integrated stroke list into dashboard

3 files changed, 75 insertions, 61 deletions

diff --git a/multilayer-dashboard/Button.qml b/multilayer-dashboard/Button.qml
index 3a04d86..757e213 100644
--- a/multilayer-dashboard/Button.qml
+++ b/multilayer-dashboard/Button.qml
@@ -11,8 +11,9 @@ Rectangle {
 
     property bool enabled : state != "disabled"
 
-    width: 300
-    height: 80
+    anchors.right: parent.right
+    anchors.left: parent.left
+    height: parent.height/5-1
     radius: 10
 
     Rectangle {
diff --git a/multilayer-dashboard/RowTwo.qml b/multilayer-dashboard/RowTwo.qml
index db0539a..567f90c 100644
--- a/multilayer-dashboard/RowTwo.qml
+++ b/multilayer-dashboard/RowTwo.qml
@@ -48,38 +48,39 @@ Rectangle {
     property variant reparentWidget: myRow
     property variant topLevel: myRow
 
-    Rectangle {
+    Column {
         id: tapWidgetContainer
+        spacing: 2
 
-        TapWidget {
-            x: 10
+        ExpandableWidget {
             id: firstWidget
-            color: "green"
-            reparentWidget: myRow.reparentWidget
+            widget: StrokeList {
+                GestureArea {
+                    anchors.fill: parent
+                    Tap { onFinished: firstWidget.fullScreen = !firstWidget.fullScreen }
+                }
+            }
+            fullScreenWidget: myRow.reparentWidget
         }
-        TapWidget {
-            x:10
-            anchors.top : firstWidget.bottom
-            anchors.topMargin : 2.0
+        ExpandableWidget {
             id: secondWidget
-            color: "blue"
-            reparentWidget: myRow.reparentWidget
+            widget: RotatableImage {
+                GestureArea {
+                    anchors.fill: parent
+                    Tap { onFinished: secondWidget.fullScreen = !secondWidget.fullScreen }
+                }
+            }
+            fullScreenWidget: myRow.reparentWidget
         }
-        TapWidget {
-            x:10
-            anchors.top : secondWidget.bottom
-            anchors.topMargin : 2.0
+        ExpandableWidget {
             id: thirdWidget
-            reparentWidget: myRow.reparentWidget
-            GestureArea {
-                id: tapOpenStrokeList
-                anchors.fill: parent
-                Tap {
-                    onFinished: {
-                        console.log("hello world")
-                    }
+            widget: RotatableImage {
+                GestureArea {
+                    anchors.fill: parent
+                    Tap { onFinished: thirdWidget.fullScreen = !thirdWidget.fullScreen }
                 }
             }
+            fullScreenWidget: myRow.reparentWidget
         }
 
         property int maxY : (tapWidgetContainer.childrenRect.height > topLevel.height) ?
@@ -88,7 +89,7 @@ Rectangle {
         property int minY : (tapWidgetContainer.childrenRect.height > topLevel.height) ?
                 -(tapWidgetContainer.childrenRect.height - topLevel.height) :
                 0
-    }	// end Rectangle
+    }
 
     GestureArea {
         id: rowGestureArea
diff --git a/multilayer-dashboard/StrokeList.qml b/multilayer-dashboard/StrokeList.qml
index 491c761..6b58ee9 100644
--- a/multilayer-dashboard/StrokeList.qml
+++ b/multilayer-dashboard/StrokeList.qml
@@ -2,47 +2,59 @@ import Qt 4.7
 import Qt.labs.gestures 1.0
 
 Rectangle {
+    id: borderWidget
+    anchors.fill: parent
+    radius: 10
+    color: "red"
 
-    id: mainrect
+    Rectangle {
 
-    width: 180
-    height: 334
+        id: mainrect
 
-    function foo(index) {
-        var colors = ["blue", "green", "grey", "red", "lightgreen"];
-        return colors[index % colors.length]
-    }
+        anchors.fill: parent
+        anchors.margins: 10
+        radius: 10
+        clip: true
 
-    Rectangle {
-        id: list
-        anchors.left: parent.left
-        anchors.right: parent.right
-        height: parent.height
-
-        Repeater {
-            model: [ "apple", "orange", "pineapple", "coconut", "foo", "bar", "baz", "zealot" ]
-
-            Button {
-                x: 0
-                y: 0 + (height + 2) * index
-                bgColor: foo(index)
-                text: modelData
-            }
+        function foo(index) {
+            var colors = ["blue", "green", "grey", "red", "lightgreen"];
+            return colors[index % colors.length]
         }
-    }
-    GestureArea {
-        anchors.fill: parent
-        property bool panEnabled : false
-
-        Pan {
-            onUpdated: {
-                if (parent.panEnabled)
-                    list.y += gesture.delta.y
-                else if (Math.abs(gesture.offset.y) >= 10 && Math.abs(gesture.offset.x) < 10)
-                    parent.panEnabled = true
+
+        Rectangle {
+            id: list
+            radius: 10
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: parent.height
+
+            onHeightChanged: y = 0
+
+            Repeater {
+                model: [ "apple", "orange", "pineapple", "coconut", "foo", "bar", "baz", "zealot" ]
+
+                Button {
+                    x: 0
+                    y: 0 + (height + 2) * index
+                    bgColor: mainrect.foo(index)
+                    text: modelData
+                }
             }
-            onFinished: {
-                parent.panEnabled = false
+        }
+        GestureArea {
+            anchors.fill: parent
+            property bool panEnabled : false
+
+            Pan {
+                onUpdated: {
+                    if (parent.panEnabled)
+                        list.y += gesture.delta.y
+                    else if (Math.abs(gesture.offset.y) >= 10 && Math.abs(gesture.offset.x) < 10)
+                        parent.panEnabled = true
+                }
+                onFinished: {
+                    parent.panEnabled = false
+                }
             }
         }
     }