Improve styling API.

Be more consistent with the other controls' styles.

Change-Id: I2c385774ae780c7341a4f72cf38ecdd6030cc274
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>

3 files changed, 36 insertions, 29 deletions

diff --git a/src/controls/Calendar.qml b/src/controls/Calendar.qml
index 01169eca..471b88ed 100644
--- a/src/controls/Calendar.qml
+++ b/src/controls/Calendar.qml
@@ -294,13 +294,20 @@ Control {
         }
 
         delegate: Loader {
+            id: delegateLoader
+            width: view.cellWidth
+            height: view.cellHeight
             sourceComponent: __style.dateDelegate
 
-            property date cellDate: date
-            readonly property bool isCurrentItem: GridView.isCurrentItem
+            readonly property int __index: index
+            readonly property var __model: model
 
-            width: view.cellWidth
-            height: view.cellHeight
+            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
+            }
 
             MouseArea {
                 anchors.fill: parent
@@ -312,18 +319,18 @@ Control {
                 }
 
                 onClicked: {
-                    setDateIfValid(cellDate)
+                    setDateIfValid(date)
                 }
 
                 onDoubleClicked: {
-                    if (cellDate.getTime() === calendar.selectedDate.getTime()) {
+                    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(cellDate);
+                        calendar.doubleClicked(date);
                     }
                 }
             }
diff --git a/src/controls/Styles/Base/CalendarStyle.qml b/src/controls/Styles/Base/CalendarStyle.qml
index 1710e71b..57e9661c 100644
--- a/src/controls/Styles/Base/CalendarStyle.qml
+++ b/src/controls/Styles/Base/CalendarStyle.qml
@@ -56,25 +56,25 @@ import QtQuick.Controls.Private 1.0
 
         style: CalendarStyle {
             dateDelegate: Rectangle {
-                readonly property bool thisMonth: cellDate.getMonth() === control.selectedDate.getMonth()
+                readonly property bool isSelectedMonth: styleData.date.getMonth() === control.selectedDate.getMonth()
 
                 gradient: Gradient {
                     GradientStop {
                         position: 0.00
-                        color: isCurrentItem ? "#111" : (thisMonth ? "#444" : "#666");
+                        color: styleData.selected ? "#111" : (isSelectedMonth ? "#444" : "#666");
                     }
                     GradientStop {
                         position: 1.00
-                        color: isCurrentItem ? "#444" : (thisMonth ? "#111" : "#666");
+                        color: styleData.selected ? "#444" : (isSelectedMonth ? "#111" : "#666");
                     }
                     GradientStop {
                         position: 1.00
-                        color: isCurrentItem ? "#777" : (thisMonth ? "#111" : "#666");
+                        color: styleData.selected ? "#777" : (isSelectedMonth ? "#111" : "#666");
                     }
                 }
 
                 Text {
-                    text: cellDate.getDate()
+                    text: styleData.date.getDate()
                     anchors.centerIn: parent
                     color: "white"
                 }
@@ -187,8 +187,6 @@ Style {
             anchors.rightMargin: (parent.height - height) / 2
             iconSource: "images/arrow-right.png"
 
-//            KeyNavigation.tab: control.view
-
             onClicked: control.nextMonth()
         }
     }
@@ -196,16 +194,17 @@ Style {
     /*!
         The delegate that styles each date in the calendar.
 
-        The properties provided by the view to each delegate are:
-        \list
-            \li property date cellDate
-            \li readonly property bool isCurrentItem
-        \endlist
+        The properties provided to each delegate are:
+        \table
+            \row \li readonly property date \b styleData.date \li The date this delegate represents.
+            \row \li readonly property bool \b styleData.selected \li \c true if this is the selected date.
+            \row \li readonly property int \b styleData.index \li The index of this delegate.
+            \row \li readonly property var \b styleData.model \li The model of the view.
+        \endtable
     */
     property Component dateDelegate: Rectangle {
         id: dayDelegate
-        color: cellDate !== undefined && isCurrentItem ? selectedDateColor : "white"
-//        radius: 1
+        color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "white"
         readonly property color sameMonthDateTextColor: "black"
         readonly property color selectedDateColor: "steelblue"
         readonly property color selectedDateTextColor: "white"
@@ -214,17 +213,17 @@ Style {
 
         Text {
             id: dayDelegateText
-            text: cellDate.getDate()
+            text: styleData.date.getDate()
             font.pixelSize: 14
             anchors.centerIn: parent
             color: {
                 var color = invalidDatecolor;
-                if (control.isValidDate(cellDate)) {
+                if (control.isValidDate(styleData.date)) {
                     // Date is within the valid range.
-                    color = cellDate.getMonth() === control.selectedDate.getMonth()
+                    color = styleData.date.getMonth() === control.selectedDate.getMonth()
                         ? sameMonthDateTextColor : differentMonthDateTextColor;
 
-                    if (GridView.isCurrentItem) {
+                    if (styleData.selected) {
                         color = selectedDateTextColor
                     }
                 }
diff --git a/src/controls/Styles/Desktop/CalendarStyle.qml b/src/controls/Styles/Desktop/CalendarStyle.qml
index 85629d0e..64a5ab53 100644
--- a/src/controls/Styles/Desktop/CalendarStyle.qml
+++ b/src/controls/Styles/Desktop/CalendarStyle.qml
@@ -109,17 +109,18 @@ Style {
 
     property Component dateDelegate: Rectangle {
         id: dayDelegate
-        color: cellDate !== undefined && isCurrentItem ? __syspal.highlight : __syspal.base
+        color: styleData.date !== undefined && styleData.selected ? __syspal.highlight : __syspal.base
 
         Text {
             SystemPalette {
                 id: pal
-                colorGroup: cellDate.getMonth() === control.selectedDate.getMonth() ? SystemPalette.Active : SystemPalette.Disabled
+                colorGroup: styleData.date.getMonth() === control.selectedDate.getMonth()
+                    ? SystemPalette.Active : SystemPalette.Disabled
             }
             id: dayDelegateText
-            text: cellDate.getDate()
+            text: styleData.date.getDate()
             anchors.centerIn: parent
-            color: isCurrentItem ? pal.highlightedText : pal.text
+            color: styleData.selected ? pal.highlightedText : pal.text
         }
     }