From 2e03b31720d009639cf2c8d661e39062a8006794 Mon Sep 17 00:00:00 2001 From: Skycoder42 Date: Mon, 25 Jun 2018 19:19:38 +0200 Subject: [PATCH] added date edit (unpolished) --- src/imports/mvvmquick/ContrastToolBar.qml | 2 +- src/imports/mvvmquick/DateEdit.qml | 169 ++++++++++++++++++ .../icons/ic_navigate_before_white_24px.svg | 4 + .../icons/ic_navigate_next_white_24px.svg | 4 + src/imports/mvvmquick/mvvmquick.pro | 3 +- src/imports/mvvmquick/qmldir | 1 + src/imports/mvvmquick/qtmvvmquick_plugin.qrc | 42 ++--- src/mvvmquick/DateEdit.qml | 20 +++ src/mvvmquick/TimeEdit.qml | 3 +- src/mvvmquick/inputviewfactory.cpp | 2 +- src/mvvmquick/qtmvvmquick_module.qrc | 1 + 11 files changed, 227 insertions(+), 24 deletions(-) create mode 100644 src/imports/mvvmquick/DateEdit.qml create mode 100644 src/imports/mvvmquick/icons/ic_navigate_before_white_24px.svg create mode 100644 src/imports/mvvmquick/icons/ic_navigate_next_white_24px.svg create mode 100644 src/mvvmquick/DateEdit.qml diff --git a/src/imports/mvvmquick/ContrastToolBar.qml b/src/imports/mvvmquick/ContrastToolBar.qml index c6a09a0..d0c53c4 100644 --- a/src/imports/mvvmquick/ContrastToolBar.qml +++ b/src/imports/mvvmquick/ContrastToolBar.qml @@ -28,7 +28,7 @@ ToolBar { * the color value is checked, too. If baseColor is easily readable, it is simply returned * as result. Otherwise the method proceeds as usual. */ - function accentTextColor(accentColor, baseColor) { + function accentTextColor(accentColor, baseColor) { //TODO move to global var a = (0.299 * accentColor.r + 0.587 * accentColor.g + 0.144 * accentColor.b); if(typeof baseColor !== "undefined") { var b = (0.299 * baseColor.r + 0.587 * baseColor.g + 0.144 * baseColor.b); diff --git a/src/imports/mvvmquick/DateEdit.qml b/src/imports/mvvmquick/DateEdit.qml new file mode 100644 index 0000000..bf9a9de --- /dev/null +++ b/src/imports/mvvmquick/DateEdit.qml @@ -0,0 +1,169 @@ +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import QtQuick.Controls.Material 2.3 +import QtQuick.Layouts 1.3 +import Qt.labs.calendar 1.0 + +ListView { + id: _calenderList + + property date firstDate: new Date(1970, 0, 1) + property date lastDate: new Date(9999, 11, 31) + property date currentDate: today(); + + function today() { + var cDate = new Date(); + cDate.setHours(0, 0, 0, 0, 0); + return cDate; + } + + QtObject { + id: _p + + property bool _skipNextFocus: false + + function focusDate() { + if(_skipNextFocus) + _skipNextFocus = false; + else { + _calenderList.currentIndex = calendarModel.indexOf(_calenderList.currentDate); + _calenderList.positionViewAtIndex(_calenderList.currentIndex, ListView.SnapPosition); + } + } + } + + Component.onCompleted: _p.focusDate() + onCurrentDateChanged: _p.focusDate() + + implicitWidth: 300 + implicitHeight: 200 + + interactive: true + keyNavigationWraps: true + snapMode: ListView.SnapOneItem + orientation: ListView.Horizontal + highlightRangeMode: ListView.StrictlyEnforceRange + clip: true + + model: CalendarModel { + id: calendarModel + from: _calenderList.firstDate + to: _calenderList.lastDate + } + + delegate: GridLayout { + width: _calenderList.width + height: _calenderList.height + columns: 4 + + Button { + Layout.rowSpan: 3 + Layout.fillHeight: true + Layout.preferredWidth: 36 + flat: true + + icon.name: "go-previous" + icon.source: "qrc:/de/skycoder42/qtmvvm/quick/icons/ic_navigate_before.svg" + icon.width: 24 + icon.height: 24 + + onClicked: _calenderList.decrementCurrentIndex() + } + + Label { + Layout.columnSpan: 2 + Layout.fillWidth: true + horizontalAlignment: Text.AlignHCenter + font.bold: true + text: grid.title + } + + Button { + Layout.rowSpan: 3 + Layout.fillHeight: true + Layout.preferredWidth: 36 + flat: true + + icon.name: "go-next" + icon.source: "qrc:/de/skycoder42/qtmvvm/quick/icons/ic_navigate_next.svg" + icon.width: 24 + icon.height: 24 + + onClicked: _calenderList.incrementCurrentIndex() + } + + Item { + Layout.fillWidth: true + } // spacer + + DayOfWeekRow { + Layout.fillWidth: true + } + + WeekNumberColumn { + month: model.month + year: model.year + Layout.fillHeight: true + } + + MonthGrid { + id: grid + month: model.month + year: model.year + Layout.fillWidth: true + Layout.fillHeight: true + + delegate: Label { + id: dayDelegate + + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + opacity: model.month === grid.month ? 1 : 0.5 + text: model.day + font: grid.font + //TODO accent text color + + background: Rectangle { + readonly property double size: Math.max(dayDelegate.width, dayDelegate.height) * 1.2 + + anchors.centerIn: parent + height: size + width: size + + color: Material.accentColor //TODO highlight color from globally + opacity: model.day === _calenderList.currentDate.getDate() && model.month === _calenderList.currentDate.getMonth() ? 1 : 0 + radius: size / 2 + + Behavior on opacity { + NumberAnimation { + duration: 750 + easing.type: Easing.OutBack + } + } + } + + MouseArea { + anchors.fill: parent + + onClicked: { + if(model.month < grid.month) { + _calenderList.decrementCurrentIndex(); + _p._skipNextFocus = true; + } else if(model.month > grid.month) { + _calenderList.incrementCurrentIndex(); + _p._skipNextFocus = true; + } + _calenderList.currentDate = model.date; + } + } + } + } + + Item { + Layout.fillWidth: true + Layout.columnSpan: 4 + Layout.minimumHeight: 0 + Layout.maximumHeight: 0 + } // spacer, only needed for the additional padding below the month grid + } +} diff --git a/src/imports/mvvmquick/icons/ic_navigate_before_white_24px.svg b/src/imports/mvvmquick/icons/ic_navigate_before_white_24px.svg new file mode 100644 index 0000000..ee6f80e --- /dev/null +++ b/src/imports/mvvmquick/icons/ic_navigate_before_white_24px.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/imports/mvvmquick/icons/ic_navigate_next_white_24px.svg b/src/imports/mvvmquick/icons/ic_navigate_next_white_24px.svg new file mode 100644 index 0000000..bbb978a --- /dev/null +++ b/src/imports/mvvmquick/icons/ic_navigate_next_white_24px.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/imports/mvvmquick/mvvmquick.pro b/src/imports/mvvmquick/mvvmquick.pro index 5dadc21..213d2a2 100644 --- a/src/imports/mvvmquick/mvvmquick.pro +++ b/src/imports/mvvmquick/mvvmquick.pro @@ -54,8 +54,9 @@ QML_FILES += \ RoundMenuButton.qml \ DecorLabel.qml \ MsgDelegate.qml \ + TimeTumbler.qml \ TimeEdit.qml \ - TimeTumbler.qml + DateEdit.qml RESOURCES += \ qtmvvmquick_plugin.qrc diff --git a/src/imports/mvvmquick/qmldir b/src/imports/mvvmquick/qmldir index 62b3d34..e8cba6b 100644 --- a/src/imports/mvvmquick/qmldir +++ b/src/imports/mvvmquick/qmldir @@ -30,6 +30,7 @@ RoundMenuButton 1.1 RoundMenuButton.qml DecorLabel 1.1 DecorLabel.qml MsgDelegate 1.1 MsgDelegate.qml TimeEdit 1.1 TimeEdit.qml +DateEdit 1.1 DateEdit.qml PresenterProgress 1.0 PresenterProgress.qml PresentingStackView 1.0 PresentingStackView.qml diff --git a/src/imports/mvvmquick/qtmvvmquick_plugin.qrc b/src/imports/mvvmquick/qtmvvmquick_plugin.qrc index 6c275c3..ed44272 100644 --- a/src/imports/mvvmquick/qtmvvmquick_plugin.qrc +++ b/src/imports/mvvmquick/qtmvvmquick_plugin.qrc @@ -1,22 +1,24 @@ - - icons/ic_error_white_24px.svg - icons/ic_help_white_24px.svg - icons/ic_info_white_24px.svg - icons/ic_warning_white_24px.svg - icons/ic_close_white_24px.svg - icons/ic_search_white_24px.svg - icons/ic_settings_backup_restore_white_24px.svg - icons/ic_chevron_right_white_24px.svg - icons/ic_more_vert_white_24px.svg - - - FileDialog.qml - FolderDialog.qml - AndroidFileDialog.qml - AndroidFolderDialog.qml - - - icons/ic_settings_white_24px.svg - + + icons/ic_error_white_24px.svg + icons/ic_help_white_24px.svg + icons/ic_info_white_24px.svg + icons/ic_warning_white_24px.svg + icons/ic_close_white_24px.svg + icons/ic_search_white_24px.svg + icons/ic_settings_backup_restore_white_24px.svg + icons/ic_chevron_right_white_24px.svg + icons/ic_more_vert_white_24px.svg + icons/ic_navigate_before_white_24px.svg + icons/ic_navigate_next_white_24px.svg + + + FileDialog.qml + FolderDialog.qml + AndroidFileDialog.qml + AndroidFolderDialog.qml + + + icons/ic_settings_white_24px.svg + diff --git a/src/mvvmquick/DateEdit.qml b/src/mvvmquick/DateEdit.qml new file mode 100644 index 0000000..054132e --- /dev/null +++ b/src/mvvmquick/DateEdit.qml @@ -0,0 +1,20 @@ +import QtQuick 2.10 +import QtQuick.Controls 2.3 +import QtQuick.Layouts 1.3 +import de.skycoder42.QtMvvm.Quick 1.1 as QtMvvm + +QtMvvm.DateEdit { + id: _edit + + property var inputValue: new Date() + + onInputValueChanged: { + var realDate = typeof inputValue == "string" ? new Date(inputValue + "T00:00:00") : inputValue + if(realDate.getDate() !== currentDate.getDate() || + realDate.getMonth() !== currentDate.getMonth() || + realDate.getYear() !== currentDate.getYear()) { + currentDate = realDate + } + } + onCurrentDateChanged: inputValue = currentDate +} diff --git a/src/mvvmquick/TimeEdit.qml b/src/mvvmquick/TimeEdit.qml index c5d06fd..4ff09f2 100644 --- a/src/mvvmquick/TimeEdit.qml +++ b/src/mvvmquick/TimeEdit.qml @@ -11,7 +11,8 @@ QtMvvm.TimeEdit { onInputValueChanged: { var realTime = typeof inputValue == "string" ? new Date("2000-01-01T" + inputValue) : inputValue if(realTime.getHours() !== time.getHours() || - realTime.getMinutes() !== time.getMinutes()) { + realTime.getMinutes() !== time.getMinutes() || + realTime.getSeconds() !== time.getSeconds()) { time = realTime } } diff --git a/src/mvvmquick/inputviewfactory.cpp b/src/mvvmquick/inputviewfactory.cpp index 5080b37..0c3517d 100644 --- a/src/mvvmquick/inputviewfactory.cpp +++ b/src/mvvmquick/inputviewfactory.cpp @@ -115,8 +115,8 @@ InputViewFactoryPrivate::InputViewFactoryPrivate() : {QMetaType::typeName(QMetaType::Double), QStringLiteral("qrc:/qtmvvm/inputs/DoubleSpinBox.qml")}, {"number", QStringLiteral("qrc:/qtmvvm/inputs/DoubleSpinBox.qml")}, {"range", QStringLiteral("qrc:/qtmvvm/inputs/Slider.qml")}, -// {QMetaType::typeName(QMetaType::QDate), QStringLiteral("qrc:/qtmvvm/inputs/")}, {QMetaType::typeName(QMetaType::QTime), QStringLiteral("qrc:/qtmvvm/inputs/TimeEdit.qml")}, + {QMetaType::typeName(QMetaType::QDate), QStringLiteral("qrc:/qtmvvm/inputs/DateEdit.qml")}, // {QMetaType::typeName(QMetaType::QDateTime), QStringLiteral("qrc:/qtmvvm/inputs/")}, // {"date", QStringLiteral("qrc:/qtmvvm/inputs/.qml")}, {QMetaType::typeName(QMetaType::QFont), QStringLiteral("qrc:/qtmvvm/inputs/FontEdit.qml")}, diff --git a/src/mvvmquick/qtmvvmquick_module.qrc b/src/mvvmquick/qtmvvmquick_module.qrc index 0284365..9c8ebd2 100644 --- a/src/mvvmquick/qtmvvmquick_module.qrc +++ b/src/mvvmquick/qtmvvmquick_module.qrc @@ -11,6 +11,7 @@ RadioListEdit.qml Slider.qml TimeEdit.qml + DateEdit.qml BoolDelegate.qml