Styling improvements for Calendar

Also
- added the property Calendar::frameVisible.
- moved the gridVisible property to CalendarStyle

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

12 files changed, 207 insertions, 69 deletions

diff --git a/examples/quick/controls/calendar/images/eventindicator.png b/examples/quick/controls/calendar/images/eventindicator.png
new file mode 100644
index 00000000..1edffd02
--- /dev/null
+++ b/examples/quick/controls/calendar/images/eventindicator.png
diff --git a/examples/quick/controls/calendar/qml/main.qml b/examples/quick/controls/calendar/qml/main.qml
index a42745ed..feb21852 100644
--- a/examples/quick/controls/calendar/qml/main.qml
+++ b/examples/quick/controls/calendar/qml/main.qml
@@ -46,9 +46,10 @@ import org.qtproject.examples.calendar 1.0
 ApplicationWindow {
     visible: true
     width: 640
-    height: 480
+    height: 400
     minimumWidth: 400
     minimumHeight: 300
+    color: "#f4f4f4"
 
     title: "Calendar Example"
 
@@ -65,7 +66,7 @@ ApplicationWindow {
         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
@@ -112,19 +113,32 @@ ApplicationWindow {
                         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: 4
+                            anchors.leftMargin: 20
                             anchors.right: parent.right
-                            height: timeLabel.height + nameLabel.height
+                            height: timeLabel.height + nameLabel.height + 8
 
                             Label {
                                 id: nameLabel
                                 width: parent.width
                                 wrapMode: Text.Wrap
                                 text: modelData.name
-                                font.pointSize: 12
                             }
                             Label {
                                 id: timeLabel
@@ -147,14 +161,30 @@ ApplicationWindow {
             focus: true
 
             style: CalendarStyle {
-                dayDelegate: Rectangle {
-                    color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "white"
-                    readonly property color sameMonthDateTextColor: "black"
-                    readonly property color selectedDateColor: "#aaa"
+                dayDelegate: Item {
+                    readonly property color sameMonthDateTextColor: "#444"
+                    readonly property color selectedDateColor: Qt.platform.os === "osx" ? "#3778d0" : __syspal.highlight
                     readonly property color selectedDateTextColor: "white"
-                    readonly property color differentMonthDateTextColor: Qt.darker("darkgrey", 1.4)
+                    readonly property color differentMonthDateTextColor: "#bbb"
                     readonly property color invalidDatecolor: "#dddddd"
 
+                    Rectangle {
+                        anchors.fill: parent
+                        border.color: "transparent"
+                        color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"
+                        anchors.margins: styleData.selected ? -1 : 0
+                    }
+
+                    Image {
+                        visible: eventModel.eventsForDate(styleData.date).length > 0
+                        anchors.top: parent.top
+                        anchors.left: parent.left
+                        anchors.margins: -1
+                        width: 12
+                        height: width
+                        source: "qrc:/images/eventindicator.png"
+                    }
+
                     Label {
                         id: dayDelegateText
                         text: styleData.date.getDate()
@@ -172,17 +202,6 @@ ApplicationWindow {
                             color;
                         }
                     }
-
-                    Rectangle {
-                        color: styleData.selected ? "white" : "red"
-                        width: 4
-                        height: width
-                        radius: width / 2
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        anchors.top: dayDelegateText.bottom
-                        anchors.topMargin: 2
-                        visible: eventModel.eventsForDate(styleData.date).length > 0
-                    }
                 }
             }
         }
diff --git a/examples/quick/controls/calendar/resources.qrc b/examples/quick/controls/calendar/resources.qrc
index 69145a82..9da283ba 100644
--- a/examples/quick/controls/calendar/resources.qrc
+++ b/examples/quick/controls/calendar/resources.qrc
@@ -1,5 +1,6 @@
 <RCC>
     <qresource prefix="/">
         <file>qml/main.qml</file>
+        <file>images/eventindicator.png</file>
     </qresource>
 </RCC>
diff --git a/src/controls/Calendar.qml b/src/controls/Calendar.qml
index 07e9b4ad..1fa5d72d 100644
--- a/src/controls/Calendar.qml
+++ b/src/controls/Calendar.qml
@@ -156,11 +156,12 @@ Control {
     }
 
     /*!
-        This property determines the visibility of the grid.
+        This property determines the visibility of the frame
+        surrounding the calendar.
 
         The default value is \c true.
     */
-    property bool gridVisible: true
+    property bool frameVisible: true
 
     /*!
         This property determines the visibility of week numbers.
diff --git a/src/controls/Private/HoverButton.qml b/src/controls/Private/HoverButton.qml
new file mode 100644
index 00000000..9d3ca713
--- /dev/null
+++ b/src/controls/Private/HoverButton.qml
@@ -0,0 +1,79 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the Qt Quick Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
+**     of its contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+
+Item {
+    id: button
+    property alias source: image.source
+    signal clicked
+
+    Rectangle {
+        id: fillRect
+        anchors.fill: parent
+        color: "black"
+        opacity: mouse.pressed ? 0.07 : mouse.containsMouse ? 0.02 : 0.0
+    }
+
+    Rectangle {
+        border.color: gridColor
+        anchors.fill: parent
+        anchors.margins: -1
+        color: "transparent"
+        opacity: fillRect.opacity * 10
+    }
+
+    Image {
+        id: image
+        width: implicitWidth/2
+        height: implicitHeight/2
+        anchors.centerIn: parent
+        anchors.alignWhenCentered: true
+        source: "images/leftanglearrow.png"
+        opacity: 0.6
+    }
+
+    MouseArea {
+        id: mouse
+        anchors.fill: parent
+        onClicked: button.clicked()
+        hoverEnabled: true
+    }
+}
diff --git a/src/controls/Private/private.pri b/src/controls/Private/private.pri
index 49227c9d..f9446854 100644
--- a/src/controls/Private/private.pri
+++ b/src/controls/Private/private.pri
@@ -53,6 +53,7 @@ PRIVATE_QML_FILES += \
     $$PWD/MenuContentItem.qml \
     $$PWD/MenuContentScroller.qml \
     $$PWD/ContentItem.qml \
+    $$PWD/HoverButton.qml \
     $$PWD/qmldir
 
 QML_FILES += $$PRIVATE_QML_FILES
diff --git a/src/controls/Private/qmldir b/src/controls/Private/qmldir
index 99740190..d31483e3 100644
--- a/src/controls/Private/qmldir
+++ b/src/controls/Private/qmldir
@@ -23,4 +23,5 @@ MenuContentItem 1.0 MenuContentItem.qml
 MenuContentScroller 1.0 MenuContentScroller.qml
 ColumnMenuContent 1.0 ColumnMenuContent.qml
 ContentItem 1.0 ContentItem.qml
+HoverButton 1.0 HoverButton.qml
 singleton TextSingleton 1.0 TextSingleton.qml
diff --git a/src/controls/Styles/Base/CalendarStyle.qml b/src/controls/Styles/Base/CalendarStyle.qml
index 40d03636..78a0eb9f 100644
--- a/src/controls/Styles/Base/CalendarStyle.qml
+++ b/src/controls/Styles/Base/CalendarStyle.qml
@@ -77,9 +77,9 @@ import QtQuick.Controls.Private 1.0
     \qml
     Calendar {
         anchors.centerIn: parent
-        gridVisible: false
 
         style: CalendarStyle {
+            gridVisible: false
             dayDelegate: Rectangle {
                 gradient: Gradient {
                     GradientStop {
@@ -132,7 +132,14 @@ Style {
     /*!
         The color of the grid lines.
     */
-    property color gridColor: "#f0f0f0"
+    property color gridColor: "#d3d3d3"
+
+    /*!
+        This property determines the visibility of the grid.
+
+        The default value is \c true.
+    */
+    property bool gridVisible: true
 
     /*!
         \internal
@@ -165,18 +172,28 @@ Style {
         Styles the bar at the top of the calendar that contains the
         next month/previous month buttons and the selected date label.
     */
-    property Component navigationBar: Item {
-        height: 50
+    property Component navigationBar: Rectangle {
+        height: 41
+        color: "#f9f9f9"
+
+        Rectangle {
+            color: Qt.rgba(1,1,1,0.6)
+            height: 1
+            width: parent.width
+        }
 
-        Button {
+        Rectangle {
+            anchors.bottom: parent.bottom
+            height: 1
+            width: parent.width
+            color: "#ddd"
+        }
+        HoverButton {
             id: previousMonth
-            width: parent.height * 0.6
-            height: width
             anchors.left: parent.left
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.leftMargin: (parent.height - height) / 2
-            iconSource: "images/arrow-left.png"
-
+            width: parent.height
+            height: parent.height
+            source: "images/leftanglearrow.png"
             onClicked: control.showPreviousMonth()
         }
         Label {
@@ -192,15 +209,13 @@ Style {
             anchors.right: nextMonth.left
             anchors.rightMargin: 2
         }
-        Button {
+        HoverButton {
             id: nextMonth
-            width: parent.height * 0.6
+            width: parent.height
             height: width
-            anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
-            anchors.rightMargin: (parent.height - height) / 2
-            iconSource: "images/arrow-right.png"
-
+            anchors.right: parent.right
+            source: "images/rightanglearrow.png"
             onClicked: control.showNextMonth()
         }
     }
@@ -232,18 +247,20 @@ Style {
         \endtable
     */
     property Component dayDelegate: Rectangle {
-        color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "white"/*"transparent"*/
-        readonly property color sameMonthDateTextColor: "black"
-        readonly property color selectedDateColor: __syspal.highlight
+        anchors.fill: parent
+        anchors.margins: styleData.selected ? -1 : 0
+        color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"
+        readonly property color sameMonthDateTextColor: "#444"
+        readonly property color selectedDateColor: Qt.platform.os === "osx" ? "#3778d0" : __syspal.highlight
         readonly property color selectedDateTextColor: "white"
-        readonly property color differentMonthDateTextColor: Qt.darker("darkgrey", 1.4);
+        readonly property color differentMonthDateTextColor: "#bbb"
         readonly property color invalidDateColor: "#dddddd"
-
         Label {
             id: dayDelegateText
             text: styleData.date.getDate()
             anchors.centerIn: parent
             horizontalAlignment: Text.AlignRight
+            font.pixelSize: Math.min(parent.height/3, parent.width/3)
             color: {
                 var theColor = invalidDateColor;
                 if (styleData.valid) {
@@ -261,7 +278,7 @@ Style {
         The delegate that styles each weekday.
     */
     property Component dayOfWeekDelegate: Rectangle {
-        color: "white"
+        color: gridVisible ? "#fcfcfc" : "transparent"
         Label {
             text: control.__locale.dayName(styleData.dayOfWeek, control.dayOfWeekFormat)
             anchors.centerIn: parent
@@ -272,10 +289,10 @@ Style {
         The delegate that styles each week number.
     */
     property Component weekNumberDelegate: Rectangle {
-        color: "white"
         Label {
             text: styleData.weekNumber
             anchors.centerIn: parent
+            color: "#444"
         }
     }
 
@@ -295,8 +312,8 @@ Style {
         readonly property int columns: CalendarUtils.daysInAWeek
 
         // The combined available width and height to be shared amongst each cell.
-        readonly property real availableWidth: (viewContainer.width - (control.gridVisible ? __gridLineWidth : 0))
-        readonly property real availableHeight: (viewContainer.height - (control.gridVisible ? __gridLineWidth : 0))
+        readonly property real availableWidth: (viewContainer.width - (control.frameVisible ? 2 * __gridLineWidth : 0))
+        readonly property real availableHeight: (viewContainer.height - (control.frameVisible ? 2 * __gridLineWidth : 0))
 
         property int hoveredCellIndex: -1
         property int pressedCellIndex: -1
@@ -312,6 +329,7 @@ Style {
             anchors.left: parent.left
             anchors.right: parent.right
             anchors.top: parent.top
+            anchors.margins: control.frameVisible ? 1 : 0
             sourceComponent: navigationBar
 
             property QtObject styleData: QtObject {
@@ -322,10 +340,9 @@ Style {
 
         Row {
             id: dayOfWeekHeaderRow
-            spacing: (control.gridVisible ? __gridLineWidth : 0)
             anchors.top: navigationBarLoader.bottom
             anchors.left: parent.left
-            anchors.leftMargin: (control.weekNumbersVisible ? weekNumbersItem.width : 0) + (control.gridVisible ? __gridLineWidth : 0)
+            anchors.leftMargin: (control.weekNumbersVisible ? weekNumbersItem.width : 0)
             anchors.right: parent.right
             height: dayOfWeekHeaderRowHeight
 
@@ -337,7 +354,7 @@ Style {
                 Loader {
                     id: dayOfWeekDelegateLoader
                     sourceComponent: dayOfWeekDelegate
-                    width: __cellRectAt(index).width - (control.gridVisible ? __gridLineWidth : 0)
+                    width: __cellRectAt(index).width
                     height: dayOfWeekHeaderRow.height
 
                     readonly property var __dayOfWeek: dayOfWeek
@@ -360,16 +377,15 @@ Style {
                 visible: control.weekNumbersVisible
                 width: 30
                 height: viewContainer.height
-
                 Repeater {
                     id: weekNumberRepeater
                     model: panelItem.weeksToShow
 
                     Loader {
                         id: weekNumberDelegateLoader
-                        y: __cellRectAt(index * panelItem.columns).y + (control.gridVisible ? __gridLineWidth : 0)
+                        y: __cellRectAt(index * panelItem.columns).y + (gridVisible ? __gridLineWidth : 0)
                         width: weekNumbersItem.width
-                        height: __cellRectAt(index * panelItem.columns).height - (control.gridVisible ? __gridLineWidth : 0)
+                        height: __cellRectAt(index * panelItem.columns).height - (control.frameVisible ? __gridLineWidth : 0)
                         sourceComponent: weekNumberDelegate
 
                         readonly property int __index: index
@@ -392,6 +408,17 @@ Style {
                         }
                     }
                 }
+                Rectangle {
+                    anchors.topMargin: - navigationBarLoader.height
+                    anchors.top: parent.top
+                    anchors.bottom: parent.bottom
+
+                    width: 1
+                    anchors.rightMargin: -1
+                    anchors.right: parent.right
+                    color: gridColor
+                }
+
             }
 
             // Contains the grid lines and the grid itself.
@@ -402,23 +429,23 @@ Style {
 
                 Repeater {
                     id: verticalGridLineRepeater
-                    model: panelItem.columns + 1
+                    model: panelItem.columns - 1
                     delegate: Rectangle {
                         // The last line will be an invalid index, so we must handle it
                         x: index < panelItem.columns
-                           ? __cellRectAt(index).x
-                           : __cellRectAt(panelItem.columns - 1).x + __cellRectAt(panelItem.columns - 1).width
+                           ? __cellRectAt(index + 1).x
+                           : __cellRectAt(panelItem.columns).x + __cellRectAt(panelItem.columns).width
                         y: 0
                         width: __gridLineWidth
                         height: viewContainer.height
                         color: gridColor
-                        visible: control.gridVisible
+                        visible: gridVisible
                     }
                 }
 
                 Repeater {
                     id: horizontalGridLineRepeater
-                    model: panelItem.rows + 1
+                    model: panelItem.rows
                     delegate: Rectangle {
                         x: 0
                         // The last line will be an invalid index, so we must handle it
@@ -428,7 +455,7 @@ Style {
                         width: viewContainer.width
                         height: __gridLineWidth
                         color: gridColor
-                        visible: control.gridVisible
+                        visible: gridVisible
                     }
                 }
 
@@ -549,11 +576,11 @@ Style {
                     delegate: Loader {
                         id: delegateLoader
 
-                        x: __cellRectAt(index).x + (control.gridVisible ? __gridLineWidth : 0)
-                        y: __cellRectAt(index).y + (control.gridVisible ? __gridLineWidth : 0)
-                        width: __cellRectAt(index).width - (control.gridVisible ? __gridLineWidth : 0)
-                        height: __cellRectAt(index).height - (control.gridVisible ? __gridLineWidth : 0)
-
+                        x: __cellRectAt(index).x + (gridVisible ? __gridLineWidth : 0)
+                        y: __cellRectAt(index).y + (gridVisible ? __gridLineWidth : 0)
+                        width: __cellRectAt(index).width - (gridVisible ? __gridLineWidth : 0)
+                        height: __cellRectAt(index).height - (gridVisible ? __gridLineWidth : 0)
+                        z: styleData.selected ? 1 : 0
                         sourceComponent: dayDelegate
 
                         readonly property int __index: index
@@ -579,5 +606,12 @@ Style {
                 }
             }
         }
+        Rectangle {
+            anchors.fill: parent
+            color: "transparent"
+            border.color: gridColor
+            visible: control.frameVisible
+        }
+
     }
 }
diff --git a/src/controls/Styles/Base/images/leftanglearrow.png b/src/controls/Styles/Base/images/leftanglearrow.png
new file mode 100644
index 00000000..d4e85ae0
--- /dev/null
+++ b/src/controls/Styles/Base/images/leftanglearrow.png
diff --git a/src/controls/Styles/Base/images/rightanglearrow.png b/src/controls/Styles/Base/images/rightanglearrow.png
new file mode 100644
index 00000000..a8157538
--- /dev/null
+++ b/src/controls/Styles/Base/images/rightanglearrow.png
diff --git a/src/controls/Styles/styles.pri b/src/controls/Styles/styles.pri
index 9199dfc5..ddc867a5 100644
--- a/src/controls/Styles/styles.pri
+++ b/src/controls/Styles/styles.pri
@@ -75,6 +75,8 @@ STYLES_QML_FILES += \
     $$PWD/Base/images/arrow-left@2x.png \
     $$PWD/Base/images/arrow-right.png \
     $$PWD/Base/images/arrow-right@2x.png \
+    $$PWD/Base/images/leftanglearrow.png \
+    $$PWD/Base/images/rightanglearrow.png \
     $$PWD/Base/images/spinner_small.png \
     $$PWD/Base/images/spinner_medium.png \
     $$PWD/Base/images/spinner_large.png \
diff --git a/tests/auto/controls/data/tst_calendar.qml b/tests/auto/controls/data/tst_calendar.qml
index 5533b909..843aed15 100644
--- a/tests/auto/controls/data/tst_calendar.qml
+++ b/tests/auto/controls/data/tst_calendar.qml
@@ -109,7 +109,7 @@ Item {
             compare(calendar.minimumDate, new Date(1, 0, 1));
             compare(calendar.maximumDate, new Date(4000, 0, 1));
             compare(calendar.selectedDate, new Date(new Date().setHours(0, 0, 0, 0)));
-            compare(calendar.gridVisible, true);
+            compare(calendar.frameVisible, true);
             compare(calendar.dayOfWeekFormat, Locale.ShortFormat);
             compare(calendar.__locale, Qt.locale());
         }
@@ -118,14 +118,14 @@ Item {
             calendar.minimumDate = new Date(1900, 0, 1);
             calendar.maximumDate = new Date(1999, 11, 31);
             calendar.selectedDate = new Date(1980, 0, 1);
-            calendar.gridVisible = false;
+            calendar.frameVisible = false;
             calendar.dayOfWeekFormat = Locale.NarrowFormat;
             calendar.__locale = Qt.locale("de_DE");
 
             compare(calendar.minimumDate, new Date(1900, 0, 1));
             compare(calendar.maximumDate, new Date(1999, 11, 31));
             compare(calendar.selectedDate, new Date(1980, 0, 1));
-            compare(calendar.gridVisible, false);
+            compare(calendar.frameVisible, false);
             compare(calendar.__locale, Qt.locale("de_DE"));
         }