src/controls.6/DaysGrid.qml

0001 import QtQuick
0002 import QtQuick.Layouts
0003 import QtQuick.Controls
0004
0005 import org.mauikit.controls 1.3 as Maui
0006 import org.mauikit.calendar 1.0 as Kalendar
0007
0008 import "dateutils.js" as DateUtils
0009
0010 /**
0011  * @inherit QtQuick.Controls.Page
0012  * @brief A control for quickly picking a date in the format of year, month and day number.
0013  *
0014  * @image html daysgrid.png
0015  *
0016  * @code
0017  *
0018  * Maui.ApplicationWindow
0019  * {
0020  *    id: root
0021  *    title: _daysGrid.year
0022  *    Maui.Page
0023  *    {
0024  *        anchors.fill: parent
0025  *        Maui.Controls.showCSD: true
0026  *        title: root.title
0027  *
0028  *        MC.DaysGrid
0029  *        {
0030  *            id: _daysGrid
0031  *            height: 300
0032  *            width: 300
0033  *            anchors.centerIn: parent
0034  *
0035  *            year: 1993
0036  *            month: 5
0037  *
0038  *            onDateClicked: (date) => root.title = date.toString()
0039  *        }
0040  *    }
0041  * }
0042  * @endcode
0043  */
0044 Page
0045 {
0046     id: control
0047
0048     /**
0049      * @brief
0050      */
0051     property bool compact : false
0052
0053     /**
0054      * @brief
0055      */
0056     readonly property alias model : _monthModel
0057
0058     /**
0059      * @brief
0060      */
0061     property alias year: _monthModel.year
0062
0063     /**
0064      * @brief
0065      */
0066     property alias month : _monthModel.month
0067
0068     /**
0069      * @brief
0070      * @param date
0071      */
0072     signal dateClicked(var date)
0073
0074     /**
0075      * @brief
0076      * @param date
0077      */
0078     signal dateRightClicked(var date)
0079
0080     title : _monthModel.monthName(control.month)
0081
0082     padding: control.compact ? Maui.Style.space.small : Maui.Style.defaultPadding
0083
0084     Kalendar.MonthModel
0085     {
0086         id: _monthModel
0087     }
0088
0089     background: null
0090
0091     contentItem: GridLayout
0092     {
0093         id: _daysGrid
0094
0095         columns: 7
0096         rows: 7
0097
0098         columnSpacing: control.compact ? 0 : Maui.Style.space.small
0099         rowSpacing:  control.compact ? 0 : Maui.Style.space.small
0100
0101         ButtonGroup
0102         {
0103             buttons: _daysGrid.children
0104         }
0105
0106         Repeater
0107         {
0108             model: _monthModel
0109
0110             delegate: Button
0111             {
0112                 Maui.Theme.colorSet: Maui.Theme.View
0113                 Maui.Theme.inherit: false
0114
0115                 Layout.fillWidth: true
0116                 Layout.fillHeight: true
0117
0118                 padding: 0
0119
0120                 highlighted: model.isToday
0121
0122                 checkable: true
0123                 checked: model.isToday
0124
0125                 opacity: sameMonth ? 1 : 0.7
0126
0127                 text: model.dayNumber
0128
0129                 font.bold: model.isToday
0130                 font.weight: checked ? Font.Bold : Font.Normal
0131                 font.pointSize: control.compact ? Maui.Style.fontSizes.tiny : Maui.Style.fontSizes.medium
0132
0133                 onClicked: control.dateClicked(model.date)
0134
0135                 background: Rectangle
0136                 {
0137                     visible: sameMonth
0138                     color: checked || pressed ? Maui.Theme.highlightColor : hovered ? Maui.Theme.hoverColor : "transparent"
0139                     radius: Maui.Style.radiusV
0140                 }
0141             }
0142         }
0143     }
0144 }