Warning, /maui/mauikit-calendar/src/controls.5/DayGridView.qml is written in an unsupported language. File is not indexed.
0001 // Copyright (C) 2018 Michael Bohlender, <bohlender@kolabsys.com>
0002 // Copyright (C) 2018 Christian Mollekopf, <mollekopf@kolabsys.com>
0003 // SPDX-FileCopyrightText: 2021 Claudio Cambra <claudio.cambra@gmail.com>
0004 // SPDX-License-Identifier: GPL-2.0-or-later
0005
0006 import QtQuick 2.15
0007 import QtQuick.Layouts 1.15
0008 import QtQuick.Controls 2.15 as QQC2
0009 import org.mauikit.controls 1.3 as Maui
0010
0011 import org.mauikit.calendar 1.0 as Kalendar
0012 import "dateutils.js" as DateUtils
0013 import "labelutils.js" as LabelUtils
0014
0015 QQC2.Pane
0016 {
0017 id: root
0018
0019 property var openOccurrence
0020 property var model
0021
0022 property int daysToShow: daysPerRow * 6
0023 property int daysPerRow: 7
0024 property double weekHeaderWidth: root.showWeekNumbers ? Maui.Style.units.gridUnit * 1.5 : 0
0025 property date currentDate
0026
0027 property int currentDay: currentDate ? currentDate.getDate() : null
0028 property int currentMonth: currentDate ? currentDate.getMonth() : null
0029 property int currentYear: currentDate ? currentDate.getFullYear() : null
0030
0031 property date startDate
0032
0033 property bool paintGrid: true
0034 property bool showDayIndicator: true
0035
0036 property Component dayHeaderDelegate
0037 property Component weekHeaderDelegate
0038
0039 property int month
0040 property alias bgLoader: backgroundLoader.item
0041 property bool isCurrentView: true
0042 property bool dragDropEnabled: true
0043 property bool showWeekNumbers : false
0044
0045 //Internal
0046 property int numberOfLinesShown: 0
0047 property int numberOfRows: (daysToShow / daysPerRow)
0048
0049 property int dayWidth: (root.showWeekNumbers ?
0050 ((width - weekHeaderWidth) / daysPerRow) - spacing : // No spacing on right, spacing in between weekheader and monthgrid
0051 (width - rightPadding - leftPadding - weekHeaderWidth - (spacing * (daysPerRow - 1))) / daysPerRow) // No spacing on left or right of month grid when no week header
0052
0053 property int dayHeight: ((height - topPadding - bottomPadding - bgLoader.dayLabelsBar.height) / numberOfRows) - spacing
0054
0055 readonly property bool isDark: KalendarUiUtils.darkMode
0056 // readonly property int mode: Kalendar.KalendarApplication.Event
0057
0058 // implicitHeight: (numberOfRows > 1 ? Maui.Style.units.gridUnit * 10 * numberOfRows : numberOfLinesShown * Maui.Style.units.gridUnit) + bgLoader.dayLabelsBar.height +topPadding + bottomPadding
0059 // height: implicitHeight
0060 readonly property bool isWide : dayWidth > Maui.Style.units.gridUnit * 5
0061
0062 padding: Maui.Style.space.medium
0063 spacing: Maui.Style.space.small
0064 background: null
0065
0066 signal dateClicked(var date)
0067 signal dateDoubleClicked(var date)
0068
0069 contentItem: Loader
0070 {
0071 id: backgroundLoader
0072 asynchronous: !root.isCurrentView
0073 sourceComponent: Column
0074 {
0075 id: rootBackgroundColumn
0076 spacing: root.spacing
0077
0078 property alias dayLabelsBar: dayLabelsBarComponent
0079 Kalendar.DayLabelsBar
0080 {
0081 id: dayLabelsBarComponent
0082 delegate: root.dayHeaderDelegate
0083 startDate: root.startDate
0084 dayWidth: root.dayWidth
0085 daysToShow: root.daysPerRow
0086 spacing: root.spacing
0087 anchors.leftMargin: root.showWeekNumbers ? weekHeaderWidth + root.spacing : 0
0088 anchors.left: parent.left
0089 anchors.right: parent.right
0090 }
0091
0092 Repeater
0093 {
0094 model: root.numberOfRows
0095
0096 //One row => one week
0097 Item
0098 {
0099 width: parent.width
0100 height: root.dayHeight
0101 clip: true
0102
0103 RowLayout
0104 {
0105 width: parent.width
0106 height: parent.height
0107 spacing: root.spacing
0108
0109 Loader
0110 {
0111 id: weekHeader
0112 sourceComponent: root.weekHeaderDelegate
0113 property date startDate: DateUtils.addDaysToDate(root.startDate, index * 7)
0114 Layout.preferredWidth: weekHeaderWidth
0115 Layout.fillHeight: true
0116 active: root.showWeekNumbers
0117 visible: root.showWeekNumbers
0118 }
0119
0120 Item
0121 {
0122 id: dayDelegate
0123 Layout.fillWidth: true
0124 Layout.fillHeight: true
0125 property date startDate: DateUtils.addDaysToDate(root.startDate, index * 7)
0126
0127 //Grid
0128 Row
0129 {
0130 spacing: root.spacing
0131 height: parent.height
0132
0133 Repeater
0134 {
0135 id: gridRepeater
0136 model: root.daysPerRow
0137
0138 QQC2.Button
0139 {
0140 id: gridItem
0141 Maui.Theme.colorSet: Maui.Theme.View
0142 Maui.Theme.inherit: false
0143
0144 height: root.dayHeight
0145 width: root.dayWidth
0146 enabled: root.daysToShow > 1
0147 visible: root.showDayIndicator
0148 padding: Maui.Style.space.small
0149 onClicked: root.dateClicked(gridItem.date)
0150 onDoubleClicked: root.dateDoubleClicked(gridItem.date)
0151
0152 property date gridSquareDate: date
0153 property date date: DateUtils.addDaysToDate(dayDelegate.startDate, modelData)
0154 property int day: date.getDate()
0155 property int month: date.getMonth()
0156 property int year: date.getFullYear()
0157 property bool isToday: day === root.currentDay && month === root.currentMonth && year === root.currentYear
0158 property bool isCurrentMonth: month === root.month
0159
0160 background: Rectangle
0161 {
0162 visible: gridItem.isCurrentMonth
0163 color: gridItem.isToday ? Maui.Theme.activeBackgroundColor :
0164 gridItem.hovered ? Maui.Theme.hoverColor : Maui.Theme.alternateBackgroundColor
0165 radius: Maui.Style.radiusV
0166 }
0167
0168 contentItem: ColumnLayout
0169 {
0170 spacing: Maui.Style.space.medium
0171 RowLayout
0172 {
0173 id: dayNumberLayout
0174 Layout.fillWidth: true
0175 visible: root.showDayIndicator
0176
0177
0178 QQC2.Label
0179 {
0180 Layout.alignment: Qt.AlignLeft | Qt.AlignTop
0181 text: i18n("Today")
0182 renderType: Text.QtRendering
0183 color: Maui.Theme.highlightedTextColor
0184 visible: gridItem.isToday && root.isWide
0185 font.bold: root.isWide
0186 font.weight: root.isWide ? Font.Bold : Font.Normal
0187 font.pointSize: root.isWide ? Maui.Style.fontSizes.big : Maui.Style.fontSizes.small
0188 }
0189
0190 QQC2.Label
0191 {
0192 Layout.alignment: gridItem.width > Maui.Style.units.gridUnit * 5 ? Qt.AlignRight | Qt.AlignTop : Qt.AlignCenter
0193
0194 text: gridItem.date.toLocaleDateString(Qt.locale(), gridItem.day == 1 ?
0195 "d MMM" : "d")
0196 renderType: Text.QtRendering
0197 horizontalAlignment: Qt.AlignHCenter
0198
0199 color: gridItem.isToday ?
0200 Maui.Theme.highlightedTextColor :
0201 (!gridItem.isCurrentMonth ? Maui.Theme.disabledTextColor : Maui.Theme.textColor)
0202 font.bold: root.isWide
0203 font.weight: root.isWide ? Font.Bold : Font.Normal
0204 font.pointSize: root.isWide ? Maui.Style.fontSizes.big : Maui.Style.fontSizes.small
0205
0206 }
0207 }
0208
0209
0210 Flow
0211 {
0212 width: parent.width
0213 Layout.alignment: Qt.AlignBottom
0214 Layout.fillWidth: true
0215 Layout.fillHeight: true
0216 spacing: Maui.Style.space.tiny
0217 clip: true
0218
0219 Repeater
0220 {
0221 model: Kalendar.IncidenceOccurrenceModel
0222 {
0223 start: gridItem.date
0224 length: 0
0225 calendar: Kalendar.CalendarManager.calendar
0226 filter: Kalendar.Filter
0227 }
0228
0229
0230
0231
0232 delegate: Rectangle
0233 {
0234 radius: height
0235 height: 10
0236 width: height
0237 color: randomColor(150)
0238
0239 function randomColor(brightness){
0240 function randomChannel(brightness){
0241 var r = 255-brightness;
0242 var n = 0|((Math.random() * r) + brightness);
0243 var s = n.toString(16);
0244 return (s.length==1) ? '0'+s : s;
0245 }
0246 return '#' + randomChannel(brightness) + randomChannel(brightness) + randomChannel(brightness);
0247 }
0248
0249 }
0250 }
0251 }
0252
0253 }
0254
0255 }
0256 }
0257 }
0258 }
0259 }
0260 }
0261 }
0262 }
0263 }
0264
0265 // Loader {
0266 // id: foregroundLoader
0267 // anchors.fill: parent
0268 // asynchronous: !root.isCurrentView
0269 // sourceComponent: Column {
0270 // id: rootForegroundColumn
0271 // spacing: root.spacing
0272 // anchors {
0273 // fill: parent
0274 // topMargin: root.bgLoader.dayLabelsBar.height + root.spacing
0275 // leftMargin: root.showWeekNumbers ? weekHeaderWidth + root.spacing : 0
0276 // }
0277
0278 // //Weeks
0279 // Repeater {
0280 // model: root.model
0281 // //One row => one week
0282 // Item {
0283 // width: parent.width
0284 // height: root.dayHeight
0285 // clip: true
0286 // RowLayout {
0287 // width: parent.width
0288 // height: parent.height
0289 // spacing: root.spacing
0290 // Item {
0291 // id: dayDelegate
0292 // Layout.fillWidth: true
0293 // Layout.fillHeight: true
0294 // property date startDate: periodStartDate
0295
0296 // ListView {
0297 // id: linesRepeater
0298
0299 // anchors {
0300 // fill: parent
0301 // // Offset for date
0302 // topMargin: root.showDayIndicator ? Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 1.5 : 0
0303 // rightMargin: spacing
0304 // }
0305
0306 // // DO NOT use a ScrollView as a bug causes this to crash randomly.
0307 // // So we instead make the ListView act like a ScrollView on desktop. No crashing now!
0308 // flickableDirection: Flickable.VerticalFlick
0309 // boundsBehavior: Kirigami.Settings.isMobile ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds
0310 // QQC2.ScrollBar.vertical: QQC2.ScrollBar {}
0311
0312 // clip: true
0313 // spacing: root.listViewSpacing
0314
0315 // DayMouseArea {
0316 // id: listViewMenu
0317 // anchors.fill: parent
0318 // z: -1
0319
0320 // function useGridSquareDate(type, root, globalPos) {
0321 // for(var i in root.children) {
0322 // var child = root.children[i];
0323 // var localpos = child.mapFromGlobal(globalPos.x, globalPos.y);
0324
0325 // if(child.contains(localpos) && child.gridSquareDate) {
0326 // KalendarUiUtils.setUpAdd(type, child.gridSquareDate);
0327 // } else {
0328 // useGridSquareDate(type, child, globalPos);
0329 // }
0330 // }
0331 // }
0332
0333 // onAddNewIncidence: useGridSquareDate(type, applicationWindow().contentItem, this.mapToGlobal(clickX, clickY))
0334 // onDeselect: KalendarUiUtils.appMain.incidenceInfoDrawer.close()
0335 // }
0336
0337 // model: incidences
0338 // onCountChanged: {
0339 // root.numberOfLinesShown = count
0340 // }
0341
0342 // delegate: Item {
0343 // id: line
0344 // height: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing
0345
0346 // //Incidences
0347 // Repeater {
0348 // id: incidencesRepeater
0349 // model: modelData
0350
0351 // DayGridViewIncidenceDelegate {
0352 // id: incidenceDelegate
0353 // dayWidth: root.dayWidth
0354 // height: line.height
0355 // parentViewSpacing: root.spacing
0356 // horizontalSpacing: linesRepeater.spacing
0357 // openOccurrenceId: root.openOccurrence ? root.openOccurrence.incidenceId : ""
0358 // isDark: root.isDark
0359 // dragDropEnabled: root.dragDropEnabled
0360 // }
0361 // }
0362 // }
0363 // }
0364 // }
0365 // }
0366 // }
0367 // }
0368 // }
0369 // }
0370 }