ListView for calendars so we can deal with many calendars

2 files changed, 142 insertions, 54 deletions

diff --git a/views/calendar/main.qml b/views/calendar/main.qml
index bf7179b7..11eff6c8 100644
--- a/views/calendar/main.qml
+++ b/views/calendar/main.qml
@@ -142,6 +142,90 @@ ApplicationWindow {
                 resource: "caldavresource",
                 name: "Test Calendar2",
                 color: "#f67400"
+            },
+            {
+                id: "calendar3",
+                resource: "caldavresource",
+                name: "Test Calendar3 Loooooooooooooooooooooooooooooong Name",
+                color: "#f67400"
+            },
+            {
+                id: "calendar4",
+                resource: "caldavresource",
+                name: "Test Calendar4",
+                color: "#f67400"
+            },
+            {
+                id: "calendar5",
+                resource: "caldavresource",
+                name: "Test Calendar5",
+                color: "#f67400"
+            },
+            {
+                id: "calendar6",
+                resource: "caldavresource",
+                name: "Test Calendar6",
+                color: "#f67400"
+            },
+            {
+                id: "calendar7",
+                resource: "caldavresource",
+                name: "Test Calendar7",
+                color: "#f67400"
+            },
+            {
+                id: "calendar8",
+                resource: "caldavresource",
+                name: "Test Calendar8",
+                color: "#f67400"
+            },
+            {
+                id: "calendar9",
+                resource: "caldavresource",
+                name: "Test Calendar9",
+                color: "#f67400"
+            },
+            {
+                id: "calendar10",
+                resource: "caldavresource",
+                name: "Test Calendar 10",
+                color: "#f67400"
+            },
+            {
+                id: "calendar11",
+                resource: "caldavresource",
+                name: "Test Calendar11",
+                color: "#f67400"
+            },
+            {
+                id: "calendar12",
+                resource: "caldavresource",
+                name: "Test Calendar12",
+                color: "#f67400"
+            },
+            {
+                id: "calendar13",
+                resource: "caldavresource",
+                name: "Test Calendar13",
+                color: "#f67400"
+            },
+            {
+                id: "calendar14",
+                resource: "caldavresource",
+                name: "Test Calendar14",
+                color: "#f67400"
+            },
+            {
+                id: "calendar15",
+                resource: "caldavresource",
+                name: "Test Calendar15",
+                color: "#f67400"
+            },
+            {
+                id: "calendar16",
+                resource: "caldavresource",
+                name: "Test Calendar16",
+                color: "#f67400"
             }],
         }
         TestStore.setup(initialState)
diff --git a/views/calendar/qml/View.qml b/views/calendar/qml/View.qml
index 0ef87e65..3aa1398d 100644
--- a/views/calendar/qml/View.qml
+++ b/views/calendar/qml/View.qml
@@ -59,48 +59,52 @@ RowLayout {
     }
 
     Rectangle {
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+        }
         width: Kube.Units.gridUnit * 10
-        Layout.fillHeight: parent.height
         color: Kube.Colors.darkBackgroundColor
 
-        Kube.PositiveButton {
-            id: newEventButton
-            objectName: "newEventButton"
-
+        Column {
+            id: topLayout
             anchors {
                 top: parent.top
                 left: parent.left
                 right: parent.right
                 margins: Kube.Units.largeSpacing
             }
-            focus: true
-            text: qsTr("New Event")
-            onClicked: {}
-        }
+            Kube.PositiveButton {
+                id: newEventButton
+                objectName: "newEventButton"
 
-        Column {
-            anchors {
-                top: newEventButton.bottom
-                left: newEventButton.left
-                topMargin: Kube.Units.largeSpacing
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                }
+                focus: true
+                text: qsTr("New Event")
+                onClicked: {}
             }
-
-            width: parent.width
-            spacing: Kube.Units.smallSpacing
-
             DateView {
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                }
                 date: root.currentDate
             }
-
         }
 
         ColumnLayout {
+            //Grow from the button but don't go over topLayout
             anchors {
                 bottom: parent.bottom
-                left: newEventButton.left
+                left: topLayout.left
                 right: parent.right
                 bottomMargin: Kube.Units.largeSpacing
+                rightMargin: Kube.Units.largeSpacing
             }
+            height: Math.min(implicitHeight, parent.height - (topLayout.y + topLayout.height) - Kube.Units.largeSpacing)
 
             spacing: Kube.Units.largeSpacing
 
@@ -109,7 +113,6 @@ RowLayout {
                 anchors {
                     left: parent.left
                     right: parent.right
-                    rightMargin: Kube.Units.largeSpacing
                 }
                 selectedDate: root.selectedDate
                 onSelectedDateChanged: {
@@ -118,44 +121,45 @@ RowLayout {
                 }
             }
 
-            Column {
+            Kube.ListView {
+                Layout.fillHeight: true
+                Layout.preferredHeight: contentHeight
+                Layout.minimumHeight: Kube.Units.gridUnit
                 anchors {
                     left: parent.left
                     right: parent.right
                 }
                 spacing: Kube.Units.smallSpacing
-                Repeater {
-                    model: Kube.CheckableEntityModel {
-                        id: calendarModel
-                        type: "calendar"
-                        roles: ["name", "color"]
-                    }
-                    delegate: Item {
-                        width: parent.width - Kube.Units.largeSpacing
-                        height: Kube.Units.gridUnit
-                        RowLayout {
-                            anchors.fill: parent
-                            spacing: Kube.Units.smallSpacing
-                            Kube.CheckBox {
-                                opacity: 0.9
-                                checked: !model.checked
-                                onToggled: model.checked = !checked
-                            }
-                            Kube.Label {
-                                Layout.fillWidth: true
-                                text: model.name
-                                color: Kube.Colors.highlightedTextColor
-                                elide: Text.ElideRight
-                                clip: true
-                            }
-                            Rectangle {
-                                anchors.verticalCenter: parent.verticalCenter
-                                width: Kube.Units.gridUnit
-                                height: width
-                                radius: width / 2
-                                color: model.color
-                                opacity: 0.9
-                            }
+                model: Kube.CheckableEntityModel {
+                    id: calendarModel
+                    type: "calendar"
+                    roles: ["name", "color"]
+                }
+                delegate: Item {
+                    width: parent.width
+                    height: Kube.Units.gridUnit
+                    RowLayout {
+                        anchors.fill: parent
+                        spacing: Kube.Units.smallSpacing
+                        Kube.CheckBox {
+                            opacity: 0.9
+                            checked: !model.checked
+                            onToggled: model.checked = !checked
+                        }
+                        Kube.Label {
+                            Layout.fillWidth: true
+                            text: model.name
+                            color: Kube.Colors.highlightedTextColor
+                            elide: Text.ElideRight
+                            clip: true
+                        }
+                        Rectangle {
+                            anchors.verticalCenter: parent.verticalCenter
+                            width: Kube.Units.gridUnit
+                            height: width
+                            radius: width / 2
+                            color: model.color
+                            opacity: 0.9
                         }
                     }
                 }