From b61a03c048d57678cc65c206e4acfce01e5930f8 Mon Sep 17 00:00:00 2001 From: Kai Uwe Broulik Date: Tue, 4 Aug 2015 12:44:37 +0200 Subject: [PATCH] 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 --- .../calendar/qml/DayDelegate.qml | 14 ++----- .../calendar/qml/DaysCalendar.qml | 40 ++++++++++++++++++- .../calendar/qml/MonthView.qml | 33 ++++++++++++--- 3 files changed, 70 insertions(+), 17 deletions(-) diff --git a/src/declarativeimports/calendar/qml/DayDelegate.qml b/src/declarativeimports/calendar/qml/DayDelegate.qml index b2c79af29..fbf875b88 100644 --- a/src/declarativeimports/calendar/qml/DayDelegate.qml +++ b/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 diff --git a/src/declarativeimports/calendar/qml/DaysCalendar.qml b/src/declarativeimports/calendar/qml/DaysCalendar.qml index 35a1e202c..a1d84d4e8 100644 --- a/src/declarativeimports/calendar/qml/DaysCalendar.qml +++ b/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 . */ -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) + } + } + } } } } diff --git a/src/declarativeimports/calendar/qml/MonthView.qml b/src/declarativeimports/calendar/qml/MonthView.qml index 57ac59a3f..f698934f8 100644 --- a/src/declarativeimports/calendar/qml/MonthView.qml +++ b/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