Created a new DateRangeCell component

Rearranged the DateRangeSelector dialog layout to also include a "Month"
and "Year" view buttons, to make selecting a range of dates easier

src/Project-Orion/CMakeLists.txt

@@ -28,6 +28,7 @@ qt_add_qml_module(appProject-Orion
         QML_FILES CalendarGrid.qml
         QML_FILES UserConfiguration.qml
         QML_FILES DateRangeSelector.qml
+        QML_FILES DateRangeCell.qml
 )
 
 # Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.

src/Project-Orion/DateRangeCell.qml

@@ -0,0 +1,37 @@
+import QtQuick
+
+Rectangle {
+    id: repeatedRectangle
+    property bool isHoveredOver: false
+
+    border.color: isHoveredOver ? highlightColor: inactiveBackgroundColor
+    border.width: 3
+    width: rectangleWidth
+    height: 20
+    color: inactiveBackgroundColor
+
+    MouseArea
+    {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: repeatedRectangle.isHoveredOver = true
+        onExited: repeatedRectangle.isHoveredOver = false
+    }
+
+
+    Text {
+        anchors.centerIn: parent
+        font.pixelSize: 12
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        text: myText
+        color: textColor
+    }
+
+    required property color highlightColor
+    required property color textColor
+    required property color activeBackgroundColor
+    required property color inactiveBackgroundColor
+    required property string myText
+    required property int rectangleWidth
+}

src/Project-Orion/DateRangeSelector.qml

@@ -3,69 +3,114 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 Dialog {
-    width: 300
+    width: 400
     height: 300
 
+    id: dateRangeRootDialog
+
     required property date currentDate
-    required property SystemPalette calendarActivePalette;
+    required property SystemPalette calendarActivePalette
-    required property color disabledTextColor;
+    required property color disabledTextColor
 
-    GridLayout {
+    enum ViewMode {
-        columns: 1
+        DAY = 0,
+        MONTH = 1,
+        YEAR = 2
+    }
 
-        Label
+    property int viewMode: 0
-        {
+    property date beginDate
-            font.pixelSize: 22
+    property date endDate
-            text: getMyDate()
-        }
 
-        DayOfWeekRow {
+    Flickable {
-            locale: grid.locale
+        onMovementStarted: console.log("Flick started")
-            Layout.fillWidth: true
+        onMovementEnded: console.log("Flick ended")
-        }
+        anchors.fill: parent
+        contentHeight: myGridLayout.height
 
-        MonthGrid
+        GridLayout {
-        {
+            id: myGridLayout
-
+            columns: 1
-            id: grid
+            anchors.centerIn: parent
-            month: Calendar.January
+            Label {
-            year: currentDate.getFullYear()
+                font.pixelSize: 22
-            locale: Qt.locale("en_US")
+                text: getMyDate()
-
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            delegate: Rectangle {
-                border.color: model.day === currentDate.getDay() ? "green": "transparent"
-                border.width: 3
-                width: 30
-                height: 20
-
-                MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            if (model.day === 11)
-                                console.log(model.day)
-                        }
-                    }
-
-                Text {
-                    anchors.centerIn: parent
-                    font.pixelSize: 12
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    text: model.day
-                    color: model.month === currentDate.getMonth() ? calendarActivePalette.text : disabledTextColor
-                }
-
-                required property var model
             }
 
-            property date currentlySelectedDate: currentDate;
+            DayOfWeekRow {
+                visible: dateRangeRootDialog.viewMode === DateRangeSelector.ViewMode.DAY
+                locale: grid.locale
+                Layout.fillWidth: true
+            }
+
+            MonthGrid {
+                id: grid
+
+                month: currentDate.getMonth()
+                year: currentDate.getFullYear()
+                locale: Qt.locale("en_US")
+                visible: dateRangeRootDialog.viewMode === DateRangeSelector.ViewMode.DAY
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                delegate: Row {
+                    DateRangeCell {
+                        inactiveBackgroundColor: calendarActivePalette ? calendarActivePalette.base : "black"
+                        activeBackgroundColor: calendarActivePalette ? calendarActivePalette.highlight : "yellow"
+                        highlightColor: calendarActivePalette ? calendarActivePalette.highlight : "yellow"
+                        myText: model.day
+                        rectangleWidth: 30
+                        textColor: calendarActivePalette ? (model.month === currentDate.getMonth(
+                                                                ) ? calendarActivePalette.text : calendarActivePalette.dark) : "black"
+                    }
+
+                    required property var model
+                }
+
+                property date currentlySelectedDate: currentDate
+            }
+
+            Grid {
+                id: monthsGrid
+                visible: dateRangeRootDialog.viewMode === DateRangeSelector.ViewMode.MONTH
+                spacing: 15
+                columns: 3
+
+                Repeater {
+                    model: 12
+
+                    DateRangeCell {
+                        property list<string> monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+
+                        inactiveBackgroundColor: calendarActivePalette ? calendarActivePalette.base : "black"
+                        activeBackgroundColor: calendarActivePalette ? calendarActivePalette.highlight : "yellow"
+                        highlightColor: calendarActivePalette ? calendarActivePalette.highlight : "yellow"
+                        myText: monthNames[index]
+                        textColor: calendarActivePalette ? calendarActivePalette.text : "black"
+                        rectangleWidth: 60
+
+                        required property int index
+                    }
+                }
+            }
+
+            Row {
+                Button {
+                    text: "Months"
+
+                    onPressed: dateRangeRootDialog.viewMode = DateRangeSelector.ViewMode.MONTH
+                }
+
+                Button {
+                    text: "Years"
+                    onPressed: dateRangeRootDialog.viewMode = DateRangeSelector.ViewMode.MONTH
+                }
+            }
         }
     }
 
-    function getMyDate()
+    function getMyDate() {
-    {
+        return Qt.formatDateTime(currentDate, "MMM yyyy")
-        return Qt.formatDateTime(currentDate, "MMM yyyy");
     }
+
+    standardButtons: Dialog.Ok | Dialog.Cancel
 }