Created a new DateRangeCell component

This commit is contained in:
2026-02-15 01:03:09 +02:00
parent ad6cc066bc
commit bd50bb84c2
3 changed files with 74 additions and 59 deletions

View File

@@ -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.

View File

@@ -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
}

View File

@@ -9,22 +9,20 @@ Dialog {
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: 0
property date beginDate;
property date endDate;
property date beginDate
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 {
border.color: model.day === currentDate.getDay() ? "green": "transparent"
border.width: 3
width: 30
height: 20
color: calendarActivePalette ? calendarActivePalette.base: "black"
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
}
Grid
{
Grid {
id: monthsGrid
visible: dateRangeRootDialog.viewMode === DateRangeSelector.ViewMode.MONTH
property list<string> monthNames: ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
spacing: 10
spacing: 15
columns: 3
Repeater
{
Repeater {
model: 12
Rectangle {
width: 100
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]
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
{
Row {
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()
{
return Qt.formatDateTime(currentDate, "MMM yyyy");
function getMyDate() {
return Qt.formatDateTime(currentDate, "MMM yyyy")
}
standardButtons: Dialog.Ok | Dialog.Cancel