Updated the example so that it adapts to the orientation change

The example was using a Row type to present the visual items, which is
changed to Flow type now, so that the items are rearranged based on the
orientation change on a Mobile device.

Task-number: QTBUG-37203
Change-Id: I990f77a87c409b623a7fe4495d74206a1ca2e1c7
Reviewed-by: Mitch Curtis <mitch.curtis@digia.com>

1 files changed, 97 insertions, 99 deletions

diff --git a/examples/quick/controls/calendar/qml/main.qml b/examples/quick/controls/calendar/qml/main.qml
index 579937ea..e2e89214 100644
--- a/examples/quick/controls/calendar/qml/main.qml
+++ b/examples/quick/controls/calendar/qml/main.qml
@@ -54,121 +54,30 @@ ApplicationWindow {
 
     title: "Calendar Example"
 
-    SystemPalette {
-        id: systemPalette
-    }
-
     SqlEventModel {
         id: eventModel
     }
 
-    Row {
+    Flow {
         id: row
         anchors.fill: parent
         anchors.margins: 20
         spacing: 10
-
-        Rectangle {
-            width: row.width * 0.4 - row.spacing / 2
-            height: calendar.height
-            border.color: Qt.darker(color, 1.2)
-            Column {
-                id: eventsPane
-                anchors.fill: parent
-                anchors.margins: spacing / 2
-                spacing: 10
-
-                Row {
-                    id: eventDateRow
-                    width: parent.width
-                    height: eventDayLabel.height
-                    spacing: 10
-
-                    Label {
-                        id: eventDayLabel
-                        text: calendar.selectedDate.getDate()
-                        font.pointSize: 35
-                    }
-
-                    Column {
-                        height: eventDayLabel.height
-
-                        Label {
-                            readonly property var options: { weekday: "long" }
-                            text: Qt.locale().standaloneDayName(calendar.selectedDate.getDay(), Locale.LongFormat)
-                            font.pointSize: 18
-                        }
-                        Label {
-                            text: Qt.locale().standaloneMonthName(calendar.selectedDate.getMonth())
-                                  + calendar.selectedDate.toLocaleDateString(Qt.locale(), " yyyy")
-                            font.pointSize: 12
-                        }
-                    }
-                }
-
-                ListView {
-                    id: eventsListView
-                    width: parent.width
-                    height: parent.height - eventDateRow.height
-                    spacing: 4
-                    clip: true
-
-                    model: eventModel.eventsForDate(calendar.selectedDate)
-                    delegate: Rectangle {
-                        width: eventsListView.width
-                        height: eventItemColumn.height
-
-                        Image {
-                            anchors.top: parent.top
-                            anchors.topMargin: 4
-                            width: 12
-                            height: width
-                            source: "qrc:/images/eventindicator.png"
-                        }
-
-                        Rectangle {
-                            width: parent.width
-                            height: 1
-                            color: "#eee"
-                        }
-
-                        Column {
-                            id: eventItemColumn
-                            anchors.left: parent.left
-                            anchors.leftMargin: 20
-                            anchors.right: parent.right
-                            height: timeLabel.height + nameLabel.height + 8
-
-                            Label {
-                                id: nameLabel
-                                width: parent.width
-                                wrapMode: Text.Wrap
-                                text: modelData.name
-                            }
-                            Label {
-                                id: timeLabel
-                                width: parent.width
-                                wrapMode: Text.Wrap
-                                text: modelData.startDate.toLocaleTimeString(calendar.locale, Locale.ShortFormat)
-                                color: "#aaa"
-                            }
-                        }
-                    }
-                }
-            }
-        }
+        layoutDirection: Qt.RightToLeft
 
         Calendar {
             id: calendar
-            width: parent.width * 0.6 - row.spacing / 2
-            height: parent.height
+            width: (parent.width > parent.height ? parent.width * 0.6 - parent.spacing : parent.width)
+            height: (parent.height > parent.width ? parent.height * 0.6 - parent.spacing : parent.height)
+            frameVisible: true
+            weekNumbersVisible: true
             selectedDate: new Date(2014, 0, 1)
             focus: true
 
             style: CalendarStyle {
                 dayDelegate: Item {
                     readonly property color sameMonthDateTextColor: "#444"
-                    readonly property color selectedDateColor: Qt.platform.os === "osx" ? "#3778d0" : systemPalette.highlight
+                    readonly property color selectedDateColor: Qt.platform.os === "osx" ? "#3778d0" : __syspal.highlight
                     readonly property color selectedDateTextColor: "white"
                     readonly property color differentMonthDateTextColor: "#bbb"
                     readonly property color invalidDatecolor: "#dddddd"
@@ -193,7 +102,6 @@ ApplicationWindow {
                     Label {
                         id: dayDelegateText
                         text: styleData.date.getDate()
-                        font.pixelSize: 14
                         anchors.centerIn: parent
                         color: {
                             var color = invalidDatecolor;
@@ -210,5 +118,95 @@ ApplicationWindow {
                 }
             }
         }
+
+        Component {
+            id: eventListHeader
+
+            Row {
+                id: eventDateRow
+                width: parent.width
+                height: eventDayLabel.height
+                spacing: 10
+
+                Label {
+                    id: eventDayLabel
+                    text: calendar.selectedDate.getDate()
+                    font.pointSize: 35
+                }
+
+                Column {
+                    height: eventDayLabel.height
+
+                    Label {
+                        readonly property var options: { weekday: "long" }
+                        text: Qt.locale().standaloneDayName(calendar.selectedDate.getDay(), Locale.LongFormat)
+                        font.pointSize: 18
+                    }
+                    Label {
+                        text: Qt.locale().standaloneMonthName(calendar.selectedDate.getMonth())
+                              + calendar.selectedDate.toLocaleDateString(Qt.locale(), " yyyy")
+                        font.pointSize: 12
+                    }
+                }
+            }
+        }
+
+        Rectangle {
+            width: (parent.width > parent.height ? parent.width * 0.4 - parent.spacing : parent.width)
+            height: (parent.height > parent.width ? parent.height * 0.4 - parent.spacing : parent.height)
+            border.color: Qt.darker(color, 1.2)
+
+            ListView {
+                id: eventsListView
+                spacing: 4
+                clip: true
+                header: eventListHeader
+                anchors.fill: parent
+                anchors.margins: 10
+                model: eventModel.eventsForDate(calendar.selectedDate)
+
+                delegate: Rectangle {
+                    width: eventsListView.width
+                    height: eventItemColumn.height
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    Image {
+                        anchors.top: parent.top
+                        anchors.topMargin: 4
+                        width: 12
+                        height: width
+                        source: "qrc:/images/eventindicator.png"
+                    }
+
+                    Rectangle {
+                        width: parent.width
+                        height: 1
+                        color: "#eee"
+                    }
+
+                    Column {
+                        id: eventItemColumn
+                        anchors.left: parent.left
+                        anchors.leftMargin: 20
+                        anchors.right: parent.right
+                        height: timeLabel.height + nameLabel.height + 8
+
+                        Label {
+                            id: nameLabel
+                            width: parent.width
+                            wrapMode: Text.Wrap
+                            text: modelData.name
+                        }
+                        Label {
+                            id: timeLabel
+                            width: parent.width
+                            wrapMode: Text.Wrap
+                            text: modelData.startDate.toLocaleTimeString(calendar.locale, Locale.ShortFormat)
+                            color: "#aaa"
+                        }
+                    }
+                }
+            }
+        }
     }
 }