← Back to branch summary

~ci-train-bot/ubuntu-settings-components/ubuntu-settings-components-ubuntu-zesty-2106

« back to all changes in this revision

Viewing changes to plugins/Ubuntu/Settings/Components/Calendar.qml

  • Committer: Marco Trevisan (Treviño)
  • Date: 2016-10-26 16:40:19 UTC
  • mto: This revision was merged to the branch mainline in revision 170.
  • Revision ID: mail@3v1n0.net-20161026164019-4th850n02dmar4c7
Calendar: add support for showing week numbers

Week number has to be properly computed yet, though.

Show diffs side-by-side

added added

removed removed

Lines of Context:
plugins/Ubuntu/Settings/Components/Calendar.qml
32
32
    property var minimumDate
33
33
    property var selectedDate: currentDate
34
34
    property var eventDays: new Array()
 
35
    property bool showWeekNumbers: false
35
36
 
36
37
    function reset() {
37
38
        if (!priv.ready) return;
185
186
    Keys.onLeftPressed: selectedDate.addDays(-1)
186
187
    Keys.onRightPressed: selectedDate.addDays(1)
187
188
 
188
 
    delegate: Grid {
189
 
        id: monthGrid
190
 
 
 
189
    delegate: Row {
191
190
        property var month: new Cal.Month(model.month)
192
191
        property var monthStart: new Cal.Day(model.month.year, model.month.month, 1)
193
192
        property var monthEnd: monthStart.addMonths(1)
194
193
        property var gridStart: monthStart.weekStart(firstDayOfWeek)
195
194
 
196
 
        columns: priv.days
197
 
        columnSpacing: (calendar.width - calendar.implicitWidth) / (columns - 1)
198
 
 
199
 
        rows: priv.weeks + 1 /* the weekDays header */
200
 
        rowSpacing: (calendar.height - calendar.implicitHeight) / (rows - 1)
201
 
 
202
 
        verticalItemAlignment: Grid.AlignVCenter
203
 
        horizontalItemAlignment: Grid.AlignHCenter
204
 
 
205
 
        Repeater {
206
 
            id: daysHeader
207
 
            model: priv.days
208
 
 
209
 
            delegate: Label {
210
 
                objectName: "weekDay" + modelData
211
 
                text: Qt.locale(i18n.language).standaloneDayName((modelData + firstDayOfWeek) % priv.days, Locale.ShortFormat).toUpperCase()
212
 
                textSize: Label.XSmall
213
 
                // FIXME: There's no good palette that covers both
214
 
                //        Ambiance (Ash) and Suru (Silk)
215
 
                color: theme.palette.highlighted.base
216
 
                onHeightChanged: priv.weekDaysHeight = Math.max(height, priv.weekDaysHeight)
217
 
            }
218
 
        }
219
 
 
220
 
        Repeater {
221
 
            model: priv.days * priv.weeks
222
 
            delegate: Item {
223
 
                id: dayItem
224
 
                objectName: "dayItem" + index
225
 
 
226
 
                property int weekday: (index % priv.days + firstDayOfWeek) % priv.days
227
 
                property var dayStart: gridStart.addDays(index)
228
 
                property bool isSelected: priv.userSelected && dayStart.equals(priv.selectedDay)
229
 
                property bool isCurrentMonth: (monthStart < dayStart || monthStart.equals(dayStart))  && dayStart < monthEnd
230
 
                property bool isWeekend: weekday == 0 || weekday == 6
231
 
                property bool isToday: dayStart.equals(priv.today)
232
 
                property bool hasEvent: isCurrentMonth && eventDays.indexOf(dayStart.day) != -1
233
 
                property bool isWithinBounds: (priv.minimumDay === undefined || dayStart >= priv.minimumDay) &&
234
 
                                              (priv.maximumDay === undefined || dayStart <= priv.maximumDay)
235
 
 
236
 
                width: priv.squareUnit
237
 
                height: priv.squareUnit
238
 
 
239
 
                UbuntuShape {
240
 
                    anchors.fill: parent
241
 
                    visible: isToday
242
 
                    aspect: UbuntuShape.Flat
243
 
                    radius: "small"
244
 
                    color: dayNumber.color
245
 
 
246
 
                    UbuntuShape {
247
 
                        // XXX: since we can't just colorize the shape border
248
 
                        //      we need another one to fill the center with bg color
249
 
                        id: currentDayShape
250
 
                        radius: parent.radius
251
 
                        aspect: parent.aspect
252
 
                        backgroundColor: theme.palette.normal.background
253
 
 
254
 
                        anchors.fill: parent
255
 
                        anchors.margins: units.gu(0.1)
256
 
                    }
257
 
                }
258
 
 
259
 
                Label {
260
 
                    id: dayNumber
261
 
                    anchors.centerIn: parent
262
 
                    text: dayStart.day > 9 ? dayStart.day : Qt.locale(i18n.language).zeroDigit + dayStart.day
263
 
                    textSize: Label.Medium
264
 
                    color: isSelected ? theme.palette.normal.positionText : theme.palette.normal.backgroundText
265
 
 
266
 
                    Binding on color {
267
 
                        when: isCurrentMonth && isWeekend && !isSelected
268
 
                        value: theme.palette.normal.backgroundTertiaryText
269
 
                    }
270
 
 
271
 
                    Binding on color {
272
 
                        when: !isCurrentMonth
 
195
        Column {
 
196
            id: weekColumn
 
197
            visible: calendar.showWeekNumbers
 
198
            spacing: monthGrid.rowSpacing
 
199
 
 
200
            Row {
 
201
                Column {
 
202
                    Label {
 
203
                        objectName: "weekDay" + modelData
 
204
                        text: i18n.tr("WEEK")
 
205
                        textSize: Label.XSmall
273
206
                        // FIXME: There's no good palette that covers both
274
 
                        //        Ambiance (silk) and Suru (inkstone)
275
 
                        value: theme.palette.disabled.base
276
 
                    }
277
 
                }
278
 
 
279
 
                UbuntuShape {
280
 
                    objectName: "eventMarker"+index
281
 
                    aspect: UbuntuShape.Flat
282
 
                    radius: "small"
283
 
                    color: theme.palette.selected.baseText
284
 
                    width: units.gu(0.4)
285
 
                    height: width
286
 
                    visible: hasEvent
287
 
                    y: dayNumber.height + (parent.height - dayNumber.height - height) / 2
288
 
                    anchors.horizontalCenter: parent.horizontalCenter
289
 
                }
290
 
 
291
 
                AbstractButton {
292
 
                    anchors.fill: parent
293
 
 
294
 
                    onClicked: {
295
 
                        if (isWithinBounds) {
296
 
                            if (!isSelected) {
297
 
                                calendar.selectedDate = new Date(dayStart.year, dayStart.month, dayStart.day)
298
 
                                priv.userSelected = true
299
 
                            } else if (priv.userSelected) {
300
 
                                calendar.selectedDate = new Date(dayStart.year, dayStart.month)
301
 
                                priv.userSelected = false
 
207
                        //        Ambiance (Ash) and Suru (Silk)
 
208
                        color: theme.palette.disabled.base
 
209
                    }
 
210
 
 
211
                    Repeater {
 
212
                        id: weekNumbers
 
213
                        model: priv.weeks
 
214
                        delegate: Item {
 
215
                            property int weekNumber: modelData + (monthStart.toDate() - new Date(monthStart.year, 0, 1))/1000/86400/7
 
216
                            width: priv.squareUnit
 
217
                            height: priv.squareUnit
 
218
 
 
219
                            Label {
 
220
                                id: weekNumberLabel
 
221
                                anchors.centerIn: parent
 
222
                                text: weekNumber > 9 ? weekNumber : Qt.locale(i18n.language).zeroDigit + weekNumber
 
223
                                textSize: Label.Medium
 
224
                                color: theme.palette.normal.backgroundTertiaryText
 
225
                            }
 
226
                        }
 
227
                    }
 
228
                }
 
229
 
 
230
                Column {
 
231
                    Item {
 
232
                        width: units.gu(2)
 
233
                        height: weekColumn.height
 
234
 
 
235
                        Rectangle {
 
236
                            color: theme.palette.disabled.base
 
237
                            anchors.fill: parent
 
238
                            anchors.topMargin: units.gu(0.5)
 
239
                            anchors.bottomMargin: anchors.topMargin
 
240
                            anchors.leftMargin: units.gu(0.9)
 
241
                            anchors.rightMargin: anchors.leftMargin
 
242
                        }
 
243
                    }
 
244
                }
 
245
            }
 
246
        }
 
247
 
 
248
        Grid {
 
249
            id: monthGrid
 
250
 
 
251
            columns: priv.days
 
252
            columnSpacing: (calendar.width - calendar.implicitWidth - (weekColumn.visible ? weekColumn.width : 0)) / (columns - 1)
 
253
 
 
254
            rows: priv.weeks + 1 /* the weekDays header */
 
255
            rowSpacing: (calendar.height - calendar.implicitHeight) / (rows - 1)
 
256
 
 
257
            verticalItemAlignment: Grid.AlignVCenter
 
258
            horizontalItemAlignment: Grid.AlignHCenter
 
259
 
 
260
            Repeater {
 
261
                id: daysHeader
 
262
                model: priv.days
 
263
 
 
264
                delegate: Label {
 
265
                    objectName: "weekDay" + modelData
 
266
                    text: Qt.locale(i18n.language).standaloneDayName((modelData + firstDayOfWeek) % priv.days, Locale.ShortFormat).toUpperCase()
 
267
                    textSize: Label.XSmall
 
268
                    // FIXME: There's no good palette that covers both
 
269
                    //        Ambiance (Ash) and Suru (Silk)
 
270
                    color: theme.palette.highlighted.base
 
271
                    onHeightChanged: priv.weekDaysHeight = Math.max(height, priv.weekDaysHeight)
 
272
                }
 
273
            }
 
274
 
 
275
            Repeater {
 
276
                model: priv.days * priv.weeks
 
277
                delegate: Item {
 
278
                    id: dayItem
 
279
                    objectName: "dayItem" + index
 
280
 
 
281
                    property int weekday: (index % priv.days + firstDayOfWeek) % priv.days
 
282
                    property var dayStart: gridStart.addDays(index)
 
283
                    property bool isSelected: priv.userSelected && dayStart.equals(priv.selectedDay)
 
284
                    property bool isCurrentMonth: (monthStart < dayStart || monthStart.equals(dayStart))  && dayStart < monthEnd
 
285
                    property bool isWeekend: weekday == 0 || weekday == 6
 
286
                    property bool isToday: dayStart.equals(priv.today)
 
287
                    property bool hasEvent: isCurrentMonth && eventDays.indexOf(dayStart.day) != -1
 
288
                    property bool isWithinBounds: (priv.minimumDay === undefined || dayStart >= priv.minimumDay) &&
 
289
                                                (priv.maximumDay === undefined || dayStart <= priv.maximumDay)
 
290
 
 
291
                    width: priv.squareUnit
 
292
                    height: priv.squareUnit
 
293
 
 
294
                    UbuntuShape {
 
295
                        anchors.fill: parent
 
296
                        visible: isToday
 
297
                        aspect: UbuntuShape.Flat
 
298
                        radius: "small"
 
299
                        color: dayNumber.color
 
300
 
 
301
                        UbuntuShape {
 
302
                            // XXX: since we can't just colorize the shape border
 
303
                            //      we need another one to fill the center with bg color
 
304
                            id: currentDayShape
 
305
                            radius: parent.radius
 
306
                            aspect: parent.aspect
 
307
                            backgroundColor: theme.palette.normal.background
 
308
 
 
309
                            anchors.fill: parent
 
310
                            anchors.margins: units.gu(0.1)
 
311
                        }
 
312
                    }
 
313
 
 
314
                    Label {
 
315
                        id: dayNumber
 
316
                        anchors.centerIn: parent
 
317
                        text: dayStart.day > 9 ? dayStart.day : Qt.locale(i18n.language).zeroDigit + dayStart.day
 
318
                        textSize: Label.Medium
 
319
                        color: isSelected ? theme.palette.normal.positionText : theme.palette.normal.backgroundText
 
320
 
 
321
                        Binding on color {
 
322
                            when: isCurrentMonth && isWeekend && !isSelected
 
323
                            value: theme.palette.normal.backgroundTertiaryText
 
324
                        }
 
325
 
 
326
                        Binding on color {
 
327
                            when: !isCurrentMonth
 
328
                            // FIXME: There's no good palette that covers both
 
329
                            //        Ambiance (silk) and Suru (inkstone)
 
330
                            value: theme.palette.disabled.base
 
331
                        }
 
332
                    }
 
333
 
 
334
                    UbuntuShape {
 
335
                        objectName: "eventMarker"+index
 
336
                        aspect: UbuntuShape.Flat
 
337
                        radius: "small"
 
338
                        color: theme.palette.selected.baseText
 
339
                        width: units.gu(0.4)
 
340
                        height: width
 
341
                        visible: hasEvent
 
342
                        y: dayNumber.height + (parent.height - dayNumber.height - height) / 2
 
343
                        anchors.horizontalCenter: parent.horizontalCenter
 
344
                    }
 
345
 
 
346
                    AbstractButton {
 
347
                        anchors.fill: parent
 
348
 
 
349
                        onClicked: {
 
350
                            if (isWithinBounds) {
 
351
                                if (!isSelected) {
 
352
                                    calendar.selectedDate = new Date(dayStart.year, dayStart.month, dayStart.day)
 
353
                                    priv.userSelected = true
 
354
                                } else if (priv.userSelected) {
 
355
                                    calendar.selectedDate = new Date(dayStart.year, dayStart.month)
 
356
                                    priv.userSelected = false
 
357
                                }
302
358
                            }
303
359
                        }
304
360
                    }