Ensure all of Calendar's style components are within its bounds.

Change-Id: I998e44eec81716aa04f37870d767f70dc70b0195
Reviewed-by: Mitch Curtis <mitch.curtis@digia.com>

3 files changed, 160 insertions, 187 deletions

diff --git a/src/controls/Calendar.qml b/src/controls/Calendar.qml
index 2fd39594..8127ca11 100644
--- a/src/controls/Calendar.qml
+++ b/src/controls/Calendar.qml
@@ -68,6 +68,9 @@ import QtQuick.Controls.Private 1.0
 Control {
     id: calendar
 
+    implicitWidth: 250
+    implicitHeight: 250
+
     /*!
         \qmlproperty date Calendar::date
 
@@ -216,144 +219,171 @@ Control {
         calendar.selectedDate = DateUtils.setMonth(calendar.selectedDate, calendar.selectedDate.getMonth() + 1);
     }
 
-    GridView {
-        id: view
-        cellWidth: __style.cellWidth
-        cellHeight: __style.cellHeight
-        currentIndex: -1
-        anchors.left: parent.left
-        anchors.right: parent.right
-        y: __panel.navigationBarItem.y + __panel.navigationBarItem.height
-        width: cellWidth * DateUtils.daysInAWeek
-        // TODO: fix the reason behind + 1 stopping the flickableness..
-        // might have something to do with the header
-        height: cellHeight * (__style.weeksToShow + 1)
-        model: calendar.__model
-
-        boundsBehavior: Flickable.StopAtBounds
-        KeyNavigation.tab: __panel.navigationBarItem
-
-        Keys.onLeftPressed: {
-            if (currentIndex != 0) {
-                // Be lazy and let the view determine which index we're moving
-                // to, then we can calculate the date from that.
-                moveCurrentIndexLeft();
-                // This will cause the index to be set again (to the same value).
-                calendar.selectedDate = model.dateAt(currentIndex);
-            } else {
-                // We're at the left edge of the calendar on the first row;
-                // this day is the first of the week and the month, so
-                // moving left should go to the last day of the previous month,
-                // rather than do nothing (which is what GridView does when
-                // keyNavigationWraps is false).
-                var newDate = new Date(calendar.selectedDate);
-                newDate.setDate(newDate.getDate() - 1);
-                calendar.selectedDate = newDate;
-            }
-        }
+    Item {
+        /*
+            This is here instead of CalendarStyle, because the interactive
+            stuff shouldn't be in the style, and because the various components
+            of the calendar need to be anchored around the grid.
+        */
+        id: panel
 
-        Keys.onUpPressed: {
-            moveCurrentIndexUp();
-            calendar.selectedDate = model.dateAt(currentIndex);
-        }
+        anchors.fill: parent
 
-        Keys.onDownPressed: {
-            moveCurrentIndexDown();
-            calendar.selectedDate = model.dateAt(currentIndex);
-        }
+        property alias navigationBarItem: navigationBarLoader.item
 
-        Keys.onRightPressed: {
-            moveCurrentIndexRight();
-            calendar.selectedDate = model.dateAt(currentIndex);
+        Loader {
+            id: backgroundLoader
+            anchors.fill: parent
+            sourceComponent: __style.background
         }
 
-        Keys.onEscapePressed: {
-            calendar.escapePressed();
+        Loader {
+            id: navigationBarLoader
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            height: __style.__protectedScope.navigationBarHeight
+            sourceComponent: __style.navigationBar
         }
+        GridView {
+            id: view
+            cellWidth: __style.__protectedScope.cellWidth
+            cellHeight: __style.__protectedScope.cellHeight
+            currentIndex: -1
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: navigationBarLoader.bottom
+            width: cellWidth * DateUtils.daysInAWeek
+            // TODO: fix the reason behind + 1 stopping the flickableness..
+            // might have something to do with the header
+            height: cellHeight * (__style.__protectedScope.weeksToShow + 1)
+            model: calendar.__model
+
+            boundsBehavior: Flickable.StopAtBounds
+            KeyNavigation.tab: panel.navigationBarItem
+
+            Keys.onLeftPressed: {
+                if (currentIndex != 0) {
+                    // Be lazy and let the view determine which index we're moving
+                    // to, then we can calculate the date from that.
+                    moveCurrentIndexLeft();
+                    // This will cause the index to be set again (to the same value).
+                    calendar.selectedDate = model.dateAt(currentIndex);
+                } else {
+                    // We're at the left edge of the calendar on the first row;
+                    // this day is the first of the week and the month, so
+                    // moving left should go to the last day of the previous month,
+                    // rather than do nothing (which is what GridView does when
+                    // keyNavigationWraps is false).
+                    var newDate = new Date(calendar.selectedDate);
+                    newDate.setDate(newDate.getDate() - 1);
+                    calendar.selectedDate = newDate;
+                }
+            }
 
-        Component.onCompleted: {
-            dateChanged();
-
-            if (visible) {
-                forceActiveFocus();
+            Keys.onUpPressed: {
+                moveCurrentIndexUp();
+                calendar.selectedDate = model.dateAt(currentIndex);
             }
-        }
 
-        Connections {
-            target: calendar
-            onSelectedDateChanged: view.dateChanged()
-        }
+            Keys.onDownPressed: {
+                moveCurrentIndexDown();
+                calendar.selectedDate = model.dateAt(currentIndex);
+            }
 
-        function dateChanged() {
-            if (model !== undefined && model.locale !== undefined) {
-                __model.selectedDate = calendar.selectedDate;
-                currentIndex = __model.indexAt(calendar.selectedDate);
+            Keys.onRightPressed: {
+                moveCurrentIndexRight();
+                calendar.selectedDate = model.dateAt(currentIndex);
             }
-        }
 
-        delegate: Loader {
-            id: delegateLoader
-            width: view.cellWidth
-            height: view.cellHeight
-            sourceComponent: __style.dateDelegate
+            Keys.onEscapePressed: {
+                calendar.escapePressed();
+            }
 
-            readonly property int __index: index
-            readonly property var __model: model
+            Component.onCompleted: {
+                dateChanged();
 
-            property QtObject styleData: QtObject {
-                readonly property alias index: delegateLoader.__index
-                readonly property alias model: delegateLoader.__model
-                readonly property bool selected: delegateLoader.GridView.isCurrentItem
-                readonly property date date: model.date
+                if (visible) {
+                    forceActiveFocus();
+                }
             }
 
-            MouseArea {
-                anchors.fill: parent
+            Connections {
+                target: calendar
+                onSelectedDateChanged: view.dateChanged()
+            }
 
-                function setDateIfValid(date) {
-                    if (calendar.isValidDate(date)) {
-                        calendar.selectedDate = date;
-                    }
+            function dateChanged() {
+                if (model !== undefined && model.locale !== undefined) {
+                    __model.selectedDate = calendar.selectedDate;
+                    currentIndex = __model.indexAt(calendar.selectedDate);
                 }
+            }
 
-                onClicked: {
-                    setDateIfValid(date)
+            delegate: Loader {
+                id: delegateLoader
+                width: view.cellWidth
+                height: view.cellHeight
+                sourceComponent: __style.dateDelegate
+
+                readonly property int __index: index
+                readonly property var __model: model
+
+                property QtObject styleData: QtObject {
+                    readonly property alias index: delegateLoader.__index
+                    readonly property alias model: delegateLoader.__model
+                    readonly property bool selected: delegateLoader.GridView.isCurrentItem
+                    readonly property date date: model.date
                 }
 
-                onDoubleClicked: {
-                    if (date.getTime() === calendar.selectedDate.getTime()) {
-                        // Only accept double clicks if the first click does not
-                        // change the month displayed. This is because double-
-                        // clicking on a date in the next month will first cause
-                        // a single click which will change the month and the
-                        // the release will be triggered on the same index but a
-                        // different date (the date in the next month).
-                        calendar.doubleClicked(date);
+                MouseArea {
+                    anchors.fill: parent
+
+                    function setDateIfValid(date) {
+                        if (calendar.isValidDate(date)) {
+                            calendar.selectedDate = date;
+                        }
+                    }
+
+                    onClicked: {
+                        setDateIfValid(date)
+                    }
+
+                    onDoubleClicked: {
+                        if (date.getTime() === calendar.selectedDate.getTime()) {
+                            // Only accept double clicks if the first click does not
+                            // change the month displayed. This is because double-
+                            // clicking on a date in the next month will first cause
+                            // a single click which will change the month and the
+                            // the release will be triggered on the same index but a
+                            // different date (the date in the next month).
+                            calendar.doubleClicked(date);
+                        }
                     }
                 }
             }
-        }
 
-        header: Loader {
-            width: view.width
-            height: view.cellHeight
+            header: Loader {
+                width: view.width
+                height: view.cellHeight
 
-            sourceComponent: Row {
-                Repeater {
-                    id: repeater
-                    model: CalendarHeaderModel {
-                        locale: calendar.locale
-                    }
-                    Loader {
-                        id: dayOfWeekDelegateLoader
-                        sourceComponent: __style.weekdayDelegate
-                        width: view.cellWidth
-                        height: view.cellHeight
+                sourceComponent: Row {
+                    Repeater {
+                        id: repeater
+                        model: CalendarHeaderModel {
+                            locale: calendar.locale
+                        }
+                        Loader {
+                            id: dayOfWeekDelegateLoader
+                            sourceComponent: __style.weekdayDelegate
+                            width: view.cellWidth
+                            height: view.cellHeight
 
-                        readonly property var __dayOfWeek: dayOfWeek
+                            readonly property var __dayOfWeek: dayOfWeek
 
-                        property QtObject styleData: QtObject {
-                            readonly property alias dayOfWeek: dayOfWeekDelegateLoader.__dayOfWeek
+                            property QtObject styleData: QtObject {
+                                readonly property alias dayOfWeek: dayOfWeekDelegateLoader.__dayOfWeek
+                            }
                         }
                     }
                 }
diff --git a/src/controls/Styles/Base/CalendarStyle.qml b/src/controls/Styles/Base/CalendarStyle.qml
index 326fc4ce..9a928f5f 100644
--- a/src/controls/Styles/Base/CalendarStyle.qml
+++ b/src/controls/Styles/Base/CalendarStyle.qml
@@ -101,29 +101,18 @@ import QtQuick.Controls.Private 1.0
 Style {
     id: calendarStyle
 
-    /*!
-        The number of weeks to be shown.
-    */
-    readonly property int weeksToShow: 6
+    property QtObject __protectedScope: QtObject {
+        readonly property int weeksToShow: 6
+        readonly property real navigationBarHeight: 40
 
-    /*!
-        The height of the navigation bar.
-    */
-    readonly property real navigationBarHeight: 40
+        readonly property real cellWidth: control.width % 2 == 0
+            ? control.width / DateUtils.daysInAWeek
+            : Math.floor(control.width / DateUtils.daysInAWeek)
 
-    /*!
-        The width of each cell in the view.
-    */
-    readonly property real cellWidth: control.width % 2 == 0
-        ? control.width / DateUtils.daysInAWeek
-        : Math.floor(control.width / DateUtils.daysInAWeek)
-
-    /*!
-        The height of each cell in the view.
-    */
-    readonly property real cellHeight: {control.height - navigationBarHeight % 2 == 0
-        ? (parent.height - navigationBarHeight) / (weeksToShow + 1)
-        : Math.floor((control.height - navigationBarHeight) / (weeksToShow + 1))
+        readonly property real cellHeight: {control.height - navigationBarHeight % 2 == 0
+            ? (parent.height - navigationBarHeight) / (weeksToShow + 1)
+            : Math.floor((control.height - navigationBarHeight) / (weeksToShow + 1))
+        }
     }
 
     /*!
@@ -242,28 +231,4 @@ Style {
             anchors.centerIn: parent
         }
     }
-
-    /*! \internal */
-    property Component panel: Item {
-        anchors.fill: parent
-        implicitWidth: 250
-        implicitHeight: 250
-
-        property alias navigationBarItem: navigationBarLoader.item
-
-        Loader {
-            id: backgroundLoader
-            anchors.fill: parent
-            sourceComponent: background
-        }
-
-        Loader {
-            id: navigationBarLoader
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.top
-            height: calendarStyle.navigationBarHeight
-            sourceComponent: navigationBar
-        }
-    }
 }
diff --git a/src/controls/Styles/Desktop/CalendarStyle.qml b/src/controls/Styles/Desktop/CalendarStyle.qml
index debd0ac8..58492706 100644
--- a/src/controls/Styles/Desktop/CalendarStyle.qml
+++ b/src/controls/Styles/Desktop/CalendarStyle.qml
@@ -48,17 +48,18 @@ import QtQuick.Controls.Private 1.0
 Style {
     id: calendarStyle
 
-    readonly property int weeksToShow: 6
+    property QtObject __protectedScope: QtObject {
+        readonly property int weeksToShow: 6
+        readonly property real navigationBarHeight: 40
 
-    readonly property real navigationBarHeight: 40
+        readonly property real cellWidth: control.width % 2 == 0
+            ? control.width / DateUtils.daysInAWeek
+            : Math.floor(control.width / DateUtils.daysInAWeek)
 
-    readonly property real cellWidth: control.width % 2 == 0
-        ? control.width / DateUtils.daysInAWeek
-        : Math.floor(control.width / DateUtils.daysInAWeek)
-
-    readonly property real cellHeight: {control.height - navigationBarHeight % 2 == 0
-        ? (parent.height - navigationBarHeight) / (weeksToShow + 1)
-        : Math.floor((control.height - navigationBarHeight) / (weeksToShow + 1))
+        readonly property real cellHeight: {control.height - navigationBarHeight % 2 == 0
+            ? (parent.height - navigationBarHeight) / (weeksToShow + 1)
+            : Math.floor((control.height - navigationBarHeight) / (weeksToShow + 1))
+        }
     }
 
     property Calendar control: __control
@@ -131,27 +132,4 @@ Style {
             anchors.centerIn: parent
         }
     }
-
-    property Component panel: Item {
-        anchors.fill: parent
-        implicitWidth: 250
-        implicitHeight: 250
-
-        property alias navigationBarItem: navigationBarLoader.item
-
-        Loader {
-            id: backgroundLoader
-            anchors.fill: parent
-            sourceComponent: background
-        }
-
-        Loader {
-            id: navigationBarLoader
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.top
-            height: calendarStyle.navigationBarHeight
-            sourceComponent: navigationBar
-        }
-    }
 }