Support pinch to zoom in the calendar

CHANGELOG: Using a pinch gesture one can now switch between the different zoom levels of the calenda

REVIEW: 124507

src/declarativeimports/calendar/qml/DayDelegate.qml

@@ -23,9 +23,11 @@ import org.kde.plasma.components 2.0 as Components
 
 import org.kde.plasma.calendar 2.0
 
-Item {
+MouseArea {
     id: dayStyle
 
+    hoverEnabled: true
+
     signal activated
 
     readonly property date thisDate: new Date(yearNumber, typeof monthNumber !== "undefined" ? monthNumber - 1 : 0, typeof dayNumber !== "undefined" ? dayNumber : 1)
@@ -87,7 +89,7 @@ Item {
         opacity: {
             if (selected) {
                 0.6
-            } else if (dateMouse.containsMouse) {
+            } else if (dayStyle.containsMouse) {
                 0.4
             } else {
                 0
@@ -114,14 +116,6 @@ Item {
         }
     }
 
-    MouseArea {
-        id: dateMouse
-        anchors.fill: parent
-        //z: label.z + 1
-        hoverEnabled: true
-        onClicked: dayStyle.activated()
-    }
-
     Component.onCompleted: {
         if (stack.depth === 1 && today) {
             root.date = model

src/declarativeimports/calendar/qml/DaysCalendar.qml

@@ -16,7 +16,8 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import QtQuick 2.0
+import QtQuick 2.2
+import QtQuick.Controls 1.1
 
 import org.kde.plasma.calendar 2.0
 import org.kde.plasma.core 2.0 as PlasmaCore
@@ -32,6 +33,8 @@ Item {
     signal next
 
     signal activated(int index, var date, var item)
+    // so it forwards it to the delegate which then emits activated with all the neccessary data
+    signal activateHighlightedItem
 
     readonly property int gridColumns: showWeekNumbers ? calendarGrid.columns + 1 : calendarGrid.columns
 
@@ -55,6 +58,30 @@ Item {
     // Take the calendar height, subtract the inner spacings and divide by number of rows (root.weeks + one row for day names)
     readonly property int cellHeight:  Math.floor((stack.height - heading.height - (daysCalendar.rows + 1) * root.borderWidth) / (daysCalendar.rows + 1))
 
+    property real transformScale: 1
+    property point transformOrigin: Qt.point(width / 2, height / 2)
+
+    transform: Scale {
+        xScale: daysCalendar.transformScale
+        yScale: xScale
+        origin.x: transformOrigin.x
+        origin.y: transformOrigin.y
+    }
+
+    Behavior on scale {
+        id: scaleBehavior
+        ScaleAnimator {
+            duration: units.longDuration
+        }
+    }
+
+    Stack.onStatusChanged: {
+        if (Stack.status === Stack.Inactive) {
+            daysCalendar.transformScale = 1
+            opacity = 1
+        }
+    }
+
     PlasmaExtras.Heading {
         id: heading
 
@@ -302,7 +329,16 @@ Item {
                 width: daysCalendar.cellWidth
                 height: daysCalendar.cellHeight
 
-                onActivated: daysCalendar.activated(index, model, delegate)
+                onClicked: daysCalendar.activated(index, model, delegate)
+
+                Connections {
+                    target: daysCalendar
+                    onActivateHighlightedItem: {
+                        if (delegate.containsMouse) {
+                            delegate.clicked(null)
+                        }
+                    }
+                }
             }
         }
     }

src/declarativeimports/calendar/qml/MonthView.qml

@@ -25,7 +25,7 @@ import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
 import org.kde.plasma.extras 2.0 as PlasmaExtras
 
-Item {
+PinchArea {
     id: root
 
     anchors.fill: parent
@@ -50,6 +50,29 @@ Item {
     property date today
     property bool showWeekNumbers: false
 
+    onPinchStarted: stack.currentItem.transformOrigin = pinch.center
+    onPinchUpdated: {
+        var item = stack.currentItem
+        if (stack.depth < 3 && pinch.scale < 1) {
+            item.transformScale = pinch.scale
+            item.opacity = pinch.scale
+        } else if (stack.depth > 1 && pinch.scale > 1) {
+            item.transformScale = pinch.scale
+            item.opacity = (2 - pinch.scale / 2)
+        }
+    }
+    onPinchFinished: {
+        var item = stack.currentItem
+        if (item.transformScale < 0.7) {
+            item.headerClicked()
+        } else if (item.transformScale > 1.4) {
+            item.activateHighlightedItem()
+        } else {
+            item.transformScale = 1
+            item.opacity = 1
+        }
+    }
+
     function isToday(date) {
         if (date.toDateString() == new Date().toDateString()) {
             return true;
@@ -158,7 +181,7 @@ Item {
                 NumberAnimation {
                     target: enterItem
                     duration: units.longDuration
-                    property: "scale"
+                    property: "transformScale"
                     from: 1.5
                     to: 1
                 }
@@ -174,9 +197,9 @@ Item {
                 NumberAnimation {
                     target: exitItem
                     duration: units.longDuration
-                    property: "scale"
-                    from: 1
-                    to: 1.5
+                    property: "transformScale"
+                    // so no matter how much you scaled, it would still fly towards you
+                    to: exitItem.transformScale * 1.5
                 }
                 NumberAnimation {
                     target: enterItem