From 1079192fe75bf01b34eb94492421e084ec0a7c2f Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Fri, 17 Sep 2021 15:06:28 +0200 Subject: [PATCH 1/4] Improved month grid border drawing method, is now customisable --- src/contents/ui/DayLabels.qml | 2 +- src/contents/ui/MonthView.qml | 9 ++--- src/contents/ui/MultiDayView.qml | 62 ++++++++++++++++++-------------- 3 files changed, 42 insertions(+), 31 deletions(-) diff --git a/src/contents/ui/DayLabels.qml b/src/contents/ui/DayLabels.qml index 21916b31..33a0a827 100644 --- a/src/contents/ui/DayLabels.qml +++ b/src/contents/ui/DayLabels.qml @@ -30,7 +30,7 @@ Row { height: childrenRect.height - spacing: 1 + spacing: 0 Repeater { model: root.daysToShow delegate: Loader { diff --git a/src/contents/ui/MonthView.qml b/src/contents/ui/MonthView.qml index eeca4d8b..ed625a46 100644 --- a/src/contents/ui/MonthView.qml +++ b/src/contents/ui/MonthView.qml @@ -155,10 +155,6 @@ Kirigami.Page { objectName: "monthView" width: pathView.width height: pathView.height - daysToShow: daysPerRow * 6 - daysPerRow: 7 - paintGrid: true - showDayIndicator: true loadModel: viewLoader.isNextItem startDate: model.startDate @@ -206,6 +202,11 @@ Kirigami.Page { verticalAlignment: Qt.AlignTop horizontalAlignment: Qt.AlignHCenter text: DateUtils.getWeek(startDate, Qt.locale().firstDayOfWeek) + background: Rectangle { + Kirigami.Theme.inherit: false + Kirigami.Theme.colorSet: Kirigami.Theme.View + color: Kirigami.Theme.backgroundColor + } } openOccurrence: monthPage.openOccurrence diff --git a/src/contents/ui/MultiDayView.qml b/src/contents/ui/MultiDayView.qml index 3f298c3d..01bf5901 100644 --- a/src/contents/ui/MultiDayView.qml +++ b/src/contents/ui/MultiDayView.qml @@ -24,15 +24,17 @@ Item { property var openOccurrence - property int daysToShow - property int daysPerRow: daysToShow + property int daysToShow: daysPerRow * 6 + property int daysPerRow: 7 property double weekHeaderWidth: Kalendar.Config.showWeekNumbers ? Kirigami.Units.gridUnit * 1.5 : 0 - property double dayWidth: (width - weekHeaderWidth) / daysPerRow + property double dayWidth: Kalendar.Config.showWeekNumbers ? + ((width - weekHeaderWidth) / daysPerRow) - spacing : // No spacing on right, spacing in between weekheader and monthgrid + (width - weekHeaderWidth - (spacing * (daysPerRow - 1))) / daysPerRow // No spacing on left or right of month grid when no week header property date currentDate property date startDate property var calendarFilter - property bool paintGrid: false - property bool showDayIndicator: false + property bool paintGrid: true + property bool showDayIndicator: true property var filter property alias dayHeaderDelegate: dayLabels.delegate property Component weekHeaderDelegate @@ -41,10 +43,9 @@ Item { //Internal property int numberOfLinesShown: 0 property int numberOfRows: (daysToShow / daysPerRow) - property var dayHeight: (height - dayLabels.height) / numberOfRows - + property var dayHeight: ((height - dayLabels.height) / numberOfRows) - spacing + property real spacing: 1 required property bool loadModel - readonly property bool isDark: LabelUtils.isDarkColor(Kirigami.Theme.backgroundColor) implicitHeight: (numberOfRows > 1 ? Kirigami.Units.gridUnit * 10 * numberOfRows : numberOfLinesShown * Kirigami.Units.gridUnit) + dayLabels.height @@ -67,18 +68,27 @@ Item { } } - Column { - spacing: 0 + Rectangle { anchors { fill: parent + topMargin: dayLabels.height } + // Matches Kirigami Separator color + color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15) + } + + Column { + id: rootBackgroundColumn + spacing: root.spacing + anchors.fill: parent DayLabels { id: dayLabels startDate: root.startDate dayWidth: root.dayWidth daysToShow: root.daysPerRow - anchors.leftMargin: weekHeaderWidth + spacing: root.spacing + anchors.leftMargin: Kalendar.Config.showWeekNumbers ? weekHeaderWidth + root.spacing : 0 anchors.left: parent.left anchors.right: parent.right } @@ -94,14 +104,16 @@ Item { RowLayout { width: parent.width height: parent.height - spacing: 0 + spacing: root.spacing Loader { id: weekHeader sourceComponent: root.weekHeaderDelegate property date startDate: DateUtils.addDaysToDate(root.startDate, index * 7) Layout.preferredWidth: weekHeaderWidth Layout.fillHeight: true + active: Kalendar.Config.showWeekNumbers visible: Kalendar.Config.showWeekNumbers + } Item { id: dayDelegate @@ -111,7 +123,7 @@ Item { //Grid Row { - spacing: 0 + spacing: root.spacing height: parent.height Repeater { id: gridRepeater @@ -132,10 +144,6 @@ Item { color: gridItem.isToday ? Kirigami.Theme.activeBackgroundColor : gridItem.isCurrentMonth ? Kirigami.Theme.backgroundColor : Kirigami.Theme.alternateBackgroundColor - // Matches Kirigami Separator color - border.color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15) - border.width: 1 - DayMouseArea { anchors.fill: parent addDate: DateUtils.addDaysToDate(dayDelegate.startDate, modelData) @@ -178,11 +186,12 @@ Item { } Column { - spacing: 0 + id: rootForegroundColumn + spacing: root.spacing anchors { fill: parent - topMargin: dayLabels.height - leftMargin: weekHeaderWidth + topMargin: dayLabels.height + root.spacing + leftMargin: Kalendar.Config.showWeekNumbers ? weekHeaderWidth + root.spacing : 0 } //Weeks @@ -196,7 +205,7 @@ Item { RowLayout { width: parent.width height: parent.height - spacing: 0 + spacing: root.spacing Item { id: dayDelegate Layout.fillWidth: true @@ -213,8 +222,10 @@ Item { QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff ListView { - Layout.fillWidth: true id: linesRepeater + Layout.fillWidth: true + Layout.rightMargin: parent.contentHeight > parent.availableHeight ? + spacing : spacing clip: true spacing: Kirigami.Units.smallSpacing @@ -248,16 +259,15 @@ Item { delegate: Item { id: line height: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing - width: parent.width //Incidences Repeater { id: incidencesRepeater model: modelData Rectangle { - x: ((root.dayWidth /*+ 1*/) * modelData.starts) + horizontalSpacing // +1 because of the spacing between each day + x: ((root.dayWidth + root.spacing) * modelData.starts) + horizontalSpacing y: 0 - width: (root.dayWidth * modelData.duration) - (horizontalSpacing * 2) // Account for spacing added to x and for spacing at end of line + width: ((root.dayWidth + root.spacing) * modelData.duration) - (horizontalSpacing * 2) - root.spacing // Account for spacing added to x and for spacing at end of line height: parent.height opacity: isOpenOccurrence || modelData.endTime.getMonth() == root.month || @@ -267,7 +277,7 @@ Item { color: Qt.rgba(0,0,0,0) property int rectRadius: 5 - property int horizontalSpacing: Kirigami.Units.smallSpacing + property int horizontalSpacing: linesRepeater.spacing property bool isOpenOccurrence: root.openOccurrence ? root.openOccurrence.incidenceId === modelData.incidenceId : false -- GitLab From 4ec0325f21d080245b54afeedf13dad40f9454f9 Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Fri, 17 Sep 2021 17:34:46 +0200 Subject: [PATCH 2/4] Made month grid border adjustable --- src/contents/ui/MultiDayView.qml | 2 +- src/contents/ui/Settings/ViewSettingsPage.qml | 19 +++++++++++++++++++ src/kalendarconfig.kcfg | 5 +++++ 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/contents/ui/MultiDayView.qml b/src/contents/ui/MultiDayView.qml index 01bf5901..209255e7 100644 --- a/src/contents/ui/MultiDayView.qml +++ b/src/contents/ui/MultiDayView.qml @@ -44,7 +44,7 @@ Item { property int numberOfLinesShown: 0 property int numberOfRows: (daysToShow / daysPerRow) property var dayHeight: ((height - dayLabels.height) / numberOfRows) - spacing - property real spacing: 1 + property real spacing: Kalendar.Config.monthGridBorderWidth required property bool loadModel readonly property bool isDark: LabelUtils.isDarkColor(Kirigami.Theme.backgroundColor) diff --git a/src/contents/ui/Settings/ViewSettingsPage.qml b/src/contents/ui/Settings/ViewSettingsPage.qml index 0116ceb8..9b734072 100644 --- a/src/contents/ui/Settings/ViewSettingsPage.qml +++ b/src/contents/ui/Settings/ViewSettingsPage.qml @@ -4,6 +4,7 @@ import QtQuick 2.15 import org.kde.kirigami 2.14 as Kirigami import QtQuick.Controls 2.15 as Controls +import QtQuick.Layouts 1.15 import org.kde.kalendar 1.0 Kirigami.ScrollablePage { @@ -87,6 +88,24 @@ Kirigami.ScrollablePage { Config.save(); } } + RowLayout { + Kirigami.FormData.label: i18n("Month grid border width (pixels):") + Layout.fillWidth: true + Controls.SpinBox { + Layout.fillWidth: true + value: Config.monthGridBorderWidth + onValueChanged: Config.monthGridBorderWidth = value + from: 0 + to: 50 + } + Rectangle { + Layout.alignment: Qt.AlignVCenter + width: Kirigami.Units.gridUnit * 4 + implicitHeight: height + height: Config.monthGridBorderWidth + color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15) + } + } Kirigami.Separator { Kirigami.FormData.isSection: true diff --git a/src/kalendarconfig.kcfg b/src/kalendarconfig.kcfg index ecae41a1..280392f7 100644 --- a/src/kalendarconfig.kcfg +++ b/src/kalendarconfig.kcfg @@ -70,6 +70,11 @@ true + + + + 1 + -- GitLab From c0a91fa0996b935a0a05bc0b9b984a8e44085177 Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Fri, 17 Sep 2021 18:01:27 +0200 Subject: [PATCH 3/4] Fix alignment of indicator rectangle --- src/contents/ui/Settings/ViewSettingsPage.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/contents/ui/Settings/ViewSettingsPage.qml b/src/contents/ui/Settings/ViewSettingsPage.qml index 9b734072..85363838 100644 --- a/src/contents/ui/Settings/ViewSettingsPage.qml +++ b/src/contents/ui/Settings/ViewSettingsPage.qml @@ -89,7 +89,7 @@ Kirigami.ScrollablePage { } } RowLayout { - Kirigami.FormData.label: i18n("Month grid border width (pixels):") + Kirigami.FormData.label: i18n("Grid border width (pixels):") Layout.fillWidth: true Controls.SpinBox { Layout.fillWidth: true -- GitLab From 20951f3ec900691a31555656c19c3ff66fbd76c7 Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Sun, 19 Sep 2021 19:29:14 +0200 Subject: [PATCH 4/4] Swapped rectangle background for kirigami separator background --- src/contents/ui/MultiDayView.qml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/contents/ui/MultiDayView.qml b/src/contents/ui/MultiDayView.qml index 209255e7..4fce50dd 100644 --- a/src/contents/ui/MultiDayView.qml +++ b/src/contents/ui/MultiDayView.qml @@ -68,13 +68,12 @@ Item { } } - Rectangle { + Kirigami.Separator { + id: gridBackground anchors { fill: parent topMargin: dayLabels.height } - // Matches Kirigami Separator color - color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15) } Column { -- GitLab