[prev in list] [next in list] [prev in thread] [next in thread]
List: kde-commits
Subject: [kube/develop] views/calendar/qml: Clip events and calculate proper day height
From: Christian Mollekopf <null () kde ! org>
Date: 2018-09-09 9:56:56
Message-ID: E1fywSe-0000nm-KW () code ! kde ! org
[Download RAW message or body]
Git commit c618d14dfc1513f1889bb4c4809d854dfcf82558 by Christian Mollekopf.
Committed on 09/09/2018 at 09:56.
Pushed by cmollekopf into branch 'develop'.
Clip events and calculate proper day height
M +107 -102 views/calendar/qml/MultiDayView.qml
https://commits.kde.org/kube/c618d14dfc1513f1889bb4c4809d854dfcf82558
diff --git a/views/calendar/qml/MultiDayView.qml \
b/views/calendar/qml/MultiDayView.qml index 8810e5cf..90df67f3 100644
--- a/views/calendar/qml/MultiDayView.qml
+++ b/views/calendar/qml/MultiDayView.qml
@@ -42,8 +42,7 @@ Item {
//Internal
property int numberOfLinesShown: 0
property int numberOfRows: (daysToShow / daysPerRow)
- property var dayHeight: height / numberOfRows
-
+ property var dayHeight: (height - dayLabels.height) / numberOfRows
implicitHeight: (numberOfRows > 1 ? Kube.Units.gridUnit * 10 * numberOfRows: \
numberOfLinesShown * Kube.Units.gridUnit) + dayLabels.height
@@ -74,121 +73,127 @@ Item {
// daysPerRow: root.daysPerRow //Hardcoded to 7
}
//One row => one week
- Row {
+ Item {
width: parent.width
- Loader {
- id: weekHeader
- height: root.dayHeight
- sourceComponent: root.weekHeaderDelegate
- property var startDate: weekStartDate
- onStatusChanged: if (weekHeader.status == Loader.Ready) \
root.weekHeaderWidth = item.width
- }
- Item {
- id: dayDelegate
- height: root.dayHeight
- width: parent.width - weekHeader.width
- property var startDate: weekStartDate
- //Grid
- Row {
+ height: root.dayHeight
+ clip: true
+ Row {
+ width: parent.width
+ height: parent.height
+ Loader {
+ id: weekHeader
height: parent.height
- Repeater {
- id: gridRepeater
- model: root.daysPerRow
- Item {
- height: parent.height
- width: root.dayWidth
- property var date: \
DateUtils.addDaysToDate(dayDelegate.startDate, modelData)
- property bool isInPast: DateUtils.roundToDay(date) < \
DateUtils.roundToDay(root.currentDate)
- property bool isToday: \
DateUtils.sameDay(root.currentDate, date)
-
- //Dimm days in the past
- Rectangle {
- anchors.fill: parent
- color: Kube.Colors.buttonColor
- opacity: 0.2
- visible: isInPast
- }
-
- //Grid
- Rectangle {
- anchors.fill: parent
- visible: root.paintGrid
- color: "transparent"
- border.width: 1
- border.color: Kube.Colors.lightgrey
+ sourceComponent: root.weekHeaderDelegate
+ property var startDate: weekStartDate
+ onStatusChanged: if (weekHeader.status == Loader.Ready) \
root.weekHeaderWidth = item.width + }
+ Item {
+ id: dayDelegate
+ height: root.dayHeight
+ width: parent.width - weekHeader.width
+ property var startDate: weekStartDate
+ //Grid
+ Row {
+ height: parent.height
+ Repeater {
+ id: gridRepeater
+ model: root.daysPerRow
+ Item {
+ height: parent.height
+ width: root.dayWidth
+ property var date: \
DateUtils.addDaysToDate(dayDelegate.startDate, modelData) + \
property bool isInPast: DateUtils.roundToDay(date) < \
DateUtils.roundToDay(root.currentDate) + property \
bool isToday: DateUtils.sameDay(root.currentDate, date) +
+ //Dimm days in the past
+ Rectangle {
+ anchors.fill: parent
+ color: Kube.Colors.buttonColor
+ opacity: 0.2
+ visible: isInPast
+ }
- }
+ //Grid
+ Rectangle {
+ anchors.fill: parent
+ visible: root.paintGrid
+ color: "transparent"
+ border.width: 1
+ border.color: Kube.Colors.lightgrey
- //Day number
- Label {
- visible: root.showDayIndicator
- anchors {
- top: parent.top
- left: parent.left
- topMargin: Kube.Units.smallSpacing
- leftMargin: Kube.Units.smallSpacing
}
- text: date.getDate()
- font.bold: true
- color: isInPast ? Kube.Colors.disabledTextColor \
: Kube.Colors.textColor
- Rectangle {
+
+ //Day number
+ Label {
+ visible: root.showDayIndicator
anchors {
+ top: parent.top
left: parent.left
- right: parent.right
- bottom: parent.bottom
+ topMargin: Kube.Units.smallSpacing
+ leftMargin: Kube.Units.smallSpacing
+ }
+ text: date.getDate()
+ font.bold: true
+ color: isInPast ? \
Kube.Colors.disabledTextColor : Kube.Colors.textColor + \
Rectangle { + anchors {
+ left: parent.left
+ right: parent.right
+ bottom: parent.bottom
+ }
+ width: Kube.Units.gridUnit
+ height: 3
+ color: Kube.Colors.plasmaBlue
+ opacity: 0.6
+ visible: isToday
}
- width: Kube.Units.gridUnit
- height: 3
- color: Kube.Colors.plasmaBlue
- opacity: 0.6
- visible: isToday
}
}
}
}
- }
- Column {
- anchors {
- fill: parent
- //Offset for date
- topMargin: root.showDayIndicator ? Kube.Units.gridUnit + \
Kube.Units.smallSpacing : 0
- }
- Repeater {
- id: linesRepeater
- model: events
- onCountChanged: {
- root.numberOfLinesShown = count
+ Column {
+ anchors {
+ fill: parent
+ //Offset for date
+ topMargin: root.showDayIndicator ? \
Kube.Units.gridUnit + Kube.Units.smallSpacing : 0 }
- Item {
- id: line
- height: Kube.Units.gridUnit
- width: parent.width
-
- //Events
- Repeater {
- id: eventsRepeater
- model: modelData
- Rectangle {
- x: root.dayWidth * modelData.starts
- y: 0
- width: root.dayWidth * modelData.duration
- height: parent.height
-
- color: modelData.color
- radius: 2
- border.width: 1
- border.color: \
Kube.Colors.viewBackgroundColor
-
- Kube.Label {
- anchors {
- fill: parent
- leftMargin: Kube.Units.smallSpacing
- rightMargin: Kube.Units.smallSpacing
+ Repeater {
+ id: linesRepeater
+ model: events
+ onCountChanged: {
+ root.numberOfLinesShown = count
+ }
+ Item {
+ id: line
+ height: Kube.Units.gridUnit
+ width: parent.width
+
+ //Events
+ Repeater {
+ id: eventsRepeater
+ model: modelData
+ Rectangle {
+ x: root.dayWidth * modelData.starts
+ y: 0
+ width: root.dayWidth * \
modelData.duration + height: parent.height
+
+ color: modelData.color
+ radius: 2
+ border.width: 1
+ border.color: \
Kube.Colors.viewBackgroundColor +
+ Kube.Label {
+ anchors {
+ fill: parent
+ leftMargin: \
Kube.Units.smallSpacing + \
rightMargin: Kube.Units.smallSpacing + \
} + color: \
Kube.Colors.highlightedTextColor + \
text: modelData.text + elide: \
Text.ElideRight }
- color: Kube.Colors.highlightedTextColor
- text: modelData.text
- elide: Text.ElideRight
}
}
}
[prev in list] [next in list] [prev in thread] [next in thread]