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

@@ -9,22 +9,20 @@ Dialog {
     id: dateRangeRootDialog
 
     required property date currentDate
-    required property SystemPalette calendarActivePalette;
+    required property SystemPalette calendarActivePalette
-    required property color disabledTextColor;
+    required property color disabledTextColor
 
-    enum ViewMode
+    enum ViewMode {
-    {
         DAY = 0,
         MONTH = 1,
         YEAR = 2
     }
 
     property int viewMode: 0
-    property date beginDate;
+    property date beginDate
-    property date endDate;
+    property date endDate
 
-    Flickable
+    Flickable {
-    {
         onMovementStarted: console.log("Flick started")
         onMovementEnded: console.log("Flick ended")
         anchors.fill: parent
@@ -34,8 +32,7 @@ Dialog {
             id: myGridLayout
             columns: 1
             anchors.centerIn: parent
-            Label
+            Label {
-            {
                 font.pixelSize: 22
                 text: getMyDate()
             }
@@ -46,8 +43,7 @@ Dialog {
                 Layout.fillWidth: true
             }
 
-            MonthGrid
+            MonthGrid {
-            {
                 id: grid
 
                 month: currentDate.getMonth()
@@ -56,73 +52,55 @@ Dialog {
                 visible: dateRangeRootDialog.viewMode === DateRangeSelector.ViewMode.DAY
                 Layout.fillWidth: true
                 Layout.fillHeight: true
-                delegate: Rectangle {
+                delegate: Row {
-                    border.color: model.day === currentDate.getDay() ? "green": "transparent"
+                    DateRangeCell {
-                    border.width: 3
+                        inactiveBackgroundColor: calendarActivePalette ? calendarActivePalette.base : "black"
-                    width: 30
+                        activeBackgroundColor: calendarActivePalette ? calendarActivePalette.highlight : "yellow"
-                    height: 20
+                        highlightColor: calendarActivePalette ? calendarActivePalette.highlight : "yellow"
-                    color: calendarActivePalette ? calendarActivePalette.base: "black"
+                        myText: model.day
-
+                        rectangleWidth: 30
-                    Text {
+                        textColor: calendarActivePalette ? (model.month === currentDate.getMonth(
-                        anchors.centerIn: parent
+                                                                ) ? calendarActivePalette.text : calendarActivePalette.dark) : "black"
-                        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;
+                property date currentlySelectedDate: currentDate
             }
 
-            Grid
+            Grid {
-            {
                 id: monthsGrid
                 visible: dateRangeRootDialog.viewMode === DateRangeSelector.ViewMode.MONTH
-
+                spacing: 15
-                property list<string> monthNames: ["January", "February", "March", "April", "May", "June",
-                "July", "August", "September", "October", "November", "December"];
-
-                spacing: 10
                 columns: 3
 
-                Repeater
+                Repeater {
-                {
                     model: 12
 
-                    Rectangle {
+                    DateRangeCell {
-                        width: 100
+                        property list<string> monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
-                        height: 30
-                        color: calendarActivePalette ? calendarActivePalette.base: "black"
-                        required property int index
-                        Label
-                        {
-                            anchors.centerIn: parent
-                            font.pixelSize: 12
-                            horizontalAlignment: Text.AlignHCenter
-                            verticalAlignment: Text.AlignVCenter
-                            anchors.horizontalCenter: parent.horizontalCenter
-                            text: monthsGrid.monthNames[index]
 
-                        }
+                        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
+            Row {
-            {
+                Button {
-                Button
-                {
                     text: "Months"
 
                     onPressed: dateRangeRootDialog.viewMode = DateRangeSelector.ViewMode.MONTH
                 }
 
-                Button
+                Button {
-                {
                     text: "Years"
                     onPressed: dateRangeRootDialog.viewMode = DateRangeSelector.ViewMode.MONTH
                 }
@@ -130,9 +108,8 @@ Dialog {
         }
     }
 
-    function getMyDate()
+    function getMyDate() {
-    {
+        return Qt.formatDateTime(currentDate, "MMM yyyy")
-        return Qt.formatDateTime(currentDate, "MMM yyyy");
     }
 
     standardButtons: Dialog.Ok | Dialog.Cancel