From 7984ce207450e285ba959502e0caf19f459c1e7a Mon Sep 17 00:00:00 2001 From: Christian Mollekopf Date: Sat, 4 Aug 2018 14:41:18 +0200 Subject: A date selector --- views/calendar/qml/DateSelector.qml | 85 +++++++++++++++++++++++++++++++++++++ views/calendar/qml/View.qml | 73 ++++++++++++++++++------------- 2 files changed, 128 insertions(+), 30 deletions(-) create mode 100644 views/calendar/qml/DateSelector.qml diff --git a/views/calendar/qml/DateSelector.qml b/views/calendar/qml/DateSelector.qml new file mode 100644 index 00000000..2a341c41 --- /dev/null +++ b/views/calendar/qml/DateSelector.qml @@ -0,0 +1,85 @@ +/* + * Copyright (C) 2018 Christian Mollekopf, + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 2 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License along + * with this program; if not, write to the Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import QtQuick 2.4 +import QtQuick.Controls 2.2 +import Qt.labs.calendar 1.0 + +import org.kube.framework 1.0 as Kube + +Column { + id: root + property date selectedDate + spacing: Kube.Units.smallSpacing + + Row { + Kube.IconButton { + color: Kube.Colors.darkBackgroundColor + iconName: Kube.Icons.goBack_inverted + onClicked: { + var dateOffset = (24*60*60*1000) * 7; //7 days + var myDate = root.selectedDate; + myDate.setTime(myDate.getTime() - dateOffset); + root.selectedDate = myDate + } + } + Kube.Label { + anchors.verticalCenter: parent.verticalCenter + color: Kube.Colors.highlightedTextColor + font.bold: true + text: root.selectedDate.toLocaleString(Qt.locale(), "MMMM yyyy") + } + Kube.IconButton { + color: Kube.Colors.darkBackgroundColor + iconName: Kube.Icons.goNext_inverted + onClicked: { + var dateOffset = (24*60*60*1000) * 7; //7 days + var myDate = root.selectedDate; + myDate.setTime(myDate.getTime() + dateOffset); + root.selectedDate = myDate + } + } + } + + MonthGrid { + id: grid + month: root.selectedDate.getMonth() + year: root.selectedDate.getFullYear() + locale: Qt.locale() + + delegate: Text { + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + opacity: model.month === grid.month ? 1 : 0.5 + text: model.day + font: grid.font + color: Kube.Colors.highlightedTextColor + Rectangle { + anchors { + left: parent.left + right: parent.right + bottom: parent.bottom + } + width: Kube.Units.gridUnit + height: 1 + color: Kube.Colors.plasmaBlue + opacity: 0.6 + visible: model.day === root.selectedDate.getDate() && model.month === root.selectedDate.getMonth() + } + } + } +} diff --git a/views/calendar/qml/View.qml b/views/calendar/qml/View.qml index 917d0c80..601ca0cf 100644 --- a/views/calendar/qml/View.qml +++ b/views/calendar/qml/View.qml @@ -27,6 +27,7 @@ RowLayout { id: root property date currentDate: new Date() + property date selectedDate: currentDate property bool autoUpdateDate: true Timer { @@ -72,12 +73,10 @@ RowLayout { DateView { date: root.currentDate } - color: Kube.Colors.highlightedTextColor - } - } + } - Column { + ColumnLayout { anchors { bottom: parent.bottom left: newEventButton.left @@ -85,36 +84,50 @@ RowLayout { bottomMargin: Kube.Units.largeSpacing } - spacing: Kube.Units.smallSpacing + spacing: Kube.Units.largeSpacing - Repeater { - model: Kube.EntityModel { - type: "calendar" - roles: ["name", "color"] + DateSelector { + selectedDate: root.selectedDate + onSelectedDateChanged: { + root.selectedDate = selectedDate } - delegate: Item { - width: parent.width - Kube.Units.largeSpacing - height: Kube.Units.gridUnit - Row { - spacing: Kube.Units.smallSpacing - Kube.CheckBox { - opacity: 0.9 - checked: true + } + + Column { + anchors { + left: parent.left + right: parent.right + } + spacing: Kube.Units.smallSpacing + Repeater { + model: Kube.EntityModel { + type: "calendar" + roles: ["name", "color"] + } + delegate: Item { + width: parent.width - Kube.Units.largeSpacing + height: Kube.Units.gridUnit + Row { + spacing: Kube.Units.smallSpacing + Kube.CheckBox { + opacity: 0.9 + checked: true + } + Kube.Label { + text: model.name + color: Kube.Colors.highlightedTextColor + } } - Kube.Label { - text: model.name - color: Kube.Colors.highlightedTextColor + Rectangle { + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + width: Kube.Units.gridUnit + height: width + radius: width / 2 + color: model.color + opacity: 0.9 } } - Rectangle { - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - width: Kube.Units.gridUnit - height: width - radius: width / 2 - color: model.color - opacity: 0.9 - } } } } @@ -123,6 +136,6 @@ RowLayout { WeekView { Layout.fillHeight: true Layout.fillWidth: true - currentDate: root.currentDate + currentDate: root.selectedDate } } -- cgit v1.2.3