Created a new DateRangeCell component

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,28 +3,26 @@ 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 color disabledTextColor;
+    required property SystemPalette calendarActivePalette
+    required property color disabledTextColor
 
-    enum ViewMode
-    {
+    enum ViewMode {
         DAY = 0,
         MONTH = 1,
         YEAR = 2
     }
 
-    property int viewMode: Qt.enumStringToValue(DateRangeSelector.ViewMode, "DAY")
-    property date beginDate;
-    property date endDate;
+    property int viewMode: 0
+    property date beginDate
+    property date endDate
 
-    Flickable
-    {
+    Flickable {
         onMovementStarted: console.log("Flick started")
         onMovementEnded: console.log("Flick ended")
         anchors.fill: parent
@@ -33,69 +31,85 @@ Dialog {
         GridLayout {
             id: myGridLayout
             columns: 1
-
-            Label
-            {
+            anchors.centerIn: parent
+            Label {
                 font.pixelSize: 22
                 text: getMyDate()
             }
 
             DayOfWeekRow {
-                visible: dateRangeRootDialog.viewMode === Qt.enumStringToValue(DateRangeSelector.ViewMode, "DAY")
+                visible: dateRangeRootDialog.viewMode === DateRangeSelector.ViewMode.DAY
                 locale: grid.locale
                 Layout.fillWidth: true
             }
 
-            MonthGrid
-            {
-
+            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: Rectangle {
-                    border.color: model.day === currentDate.getDay() ? "green": "transparent"
-                    border.width: 3
-                    width: 30
-                    height: 20
-                    color: calendarActivePalette.base
-
-
-                    Text {
-                        anchors.centerIn: parent
-                        font.pixelSize: 12
-                        horizontalAlignment: Text.AlignHCenter
-                        verticalAlignment: Text.AlignVCenter
-                        text: model.day
-                        color: model.month === currentDate.getMonth() ? calendarActivePalette.text : disabledTextColor
+                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;
+                property date currentlySelectedDate: currentDate
             }
-            Row
-            {
-                Button
-                {
+
+            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
-                {
+                Button {
                     text: "Years"
+                    onPressed: dateRangeRootDialog.viewMode = DateRangeSelector.ViewMode.MONTH
                 }
             }
         }
     }
 
-    function getMyDate()
-    {
-        return Qt.formatDateTime(currentDate, "MMM yyyy");
+    function getMyDate() {
+        return Qt.formatDateTime(currentDate, "MMM yyyy")
     }
 
     standardButtons: Dialog.Ok | Dialog.Cancel