mobile/lib/Calendar.qml

   1 /*
   2     Copyright (C) 2010 Artur Duque de Souza <asouza@kde.org>
   3
   4     This library is free software; you can redistribute it and/or modify it
   5     under the terms of the GNU Library General Public License as published by
   6     the Free Software Foundation; either version 2 of the License, or (at your
   7     option) any later version.
   8
   9     This library is distributed in the hope that it will be useful, but WITHOUT
  10     ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  11     FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Library General Public
  12     License for more details.
  13
  14     You should have received a copy of the GNU Library General Public License
  15     along with this library; see the file COPYING.LIB.  If not, write to the
  16     Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
  17     02110-1301, USA.
  18 */
  19
  20 import Qt 4.7
  21
  22 import org.kde 4.5
  23 import CalendarHelper 4.5
  24
  25 Item {
  26     id: calendar
  27     width: 460
  28     height: 360
  29
  30     property alias day: calendarHelper.day
  31     property alias month: calendarHelper.month
  32     property alias year: calendarHelper.year
  33     property alias daysInMonth: calendarHelper.daysInMonth
  34
  35     signal daySelected();
  36
  37     CalendarHelper {
  38         id: calendarHelper
  39         onDayChanged: calendar.daySelected()
  40     }
  41
  42     Row {
  43         id: title
  44         spacing: 8
  45         anchors.left: parent.left
  46         anchors.leftMargin: spacer.width + 5
  47
  48         Text {
  49             text: KDE.i18n(calendarHelper.monthName)
  50             color: "#004bb8"
  51             font.pixelSize: 24
  52         }
  53
  54         Text {
  55             text: calendarHelper.year
  56             color: "#004bb8"
  57             font.pixelSize: 24
  58         }
  59     }
  60
  61     Grid {
  62         id: calendarGrid
  63         spacing: 3
  64         columns: 8
  65         rows: 7
  66         anchors.top: title.bottom
  67         anchors.topMargin: 10
  68
  69         property int dayBoxSize: 54
  70         property int headlineHeight: 15
  71         property int weekNumberWidth: 20
  72
  73         // headline
  74         Item {
  75             id: spacer
  76             width: calendarGrid.weekNumberWidth
  77             height: calendarGrid.headlineHeight
  78         }
  79
  80         Repeater {
  81             model: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
  82             Text {
  83                 width: calendarGrid.dayBoxSize
  84                 height: calendarGrid.headlineHeight
  85                 text: KDE.i18n(modelData)
  86                 color: "#5c5c5c"
  87                 font.pixelSize: 16
  88                 style: Text.Sunken
  89                 horizontalAlignment: Text.AlignRight
  90                 verticalAlignment: Text.AlignBottom
  91             }
  92         }
  93
  94         // first row
  95         Text {
  96             id: week1
  97             width: calendarGrid.weekNumberWidth
  98             height: calendarGrid.dayBoxSize
  99             color: "#828282"
 100             text: calendarHelper.weekForPosition(1)
 101             horizontalAlignment: Text.AlignRight
 102             verticalAlignment: Text.AlignTop
 103         }
 104
 105         Repeater {
 106             model: 7
 107             CalendarDay {
 108                 dayPos: index + 1
 109                 currentDay: calendarHelper.day
 110                 text: calendarHelper.dayForPosition(dayPos);
 111             }
 112         }
 113
 114
 115         // second row
 116         Text {
 117             id: week2
 118             width: calendarGrid.weekNumberWidth
 119             height: calendarGrid.dayBoxSize
 120             color: "#828282"
 121             text: calendarHelper.weekForPosition(2)
 122             horizontalAlignment: Text.AlignRight
 123             verticalAlignment: Text.AlignTop
 124         }
 125
 126         Repeater {
 127             model: 7
 128             CalendarDay {
 129                 dayPos: index + 8
 130                 currentDay: calendarHelper.day
 131                 text: calendarHelper.dayForPosition(dayPos);
 132             }
 133         }
 134
 135
 136         // third row
 137         Text {
 138             id: week3
 139             width: calendarGrid.weekNumberWidth
 140             height: calendarGrid.dayBoxSize
 141             color: "#828282"
 142             text: calendarHelper.weekForPosition(3)
 143             horizontalAlignment: Text.AlignRight
 144             verticalAlignment: Text.AlignTop
 145         }
 146
 147         Repeater {
 148             model: 7
 149             CalendarDay {
 150                 dayPos: index + 15
 151                 currentDay: calendarHelper.day
 152                 text: calendarHelper.dayForPosition(dayPos);
 153             }
 154         }
 155
 156
 157         // forth row
 158         Text {
 159             id: week4
 160             width: calendarGrid.weekNumberWidth
 161             height: calendarGrid.dayBoxSize
 162             color: "#828282"
 163             text: calendarHelper.weekForPosition(4)
 164             horizontalAlignment: Text.AlignRight
 165             verticalAlignment: Text.AlignTop
 166         }
 167
 168         Repeater {
 169             model: 7
 170             CalendarDay {
 171                 dayPos: index + 22
 172                 currentDay: calendarHelper.day
 173                 text: calendarHelper.dayForPosition(dayPos);
 174             }
 175         }
 176
 177
 178         // fifth row
 179         Text {
 180             id: week5
 181             width: calendarGrid.weekNumberWidth
 182             height: calendarGrid.dayBoxSize
 183             color: "#828282"
 184             text: calendarHelper.weekForPosition(5)
 185             horizontalAlignment: Text.AlignRight
 186             verticalAlignment: Text.AlignTop
 187         }
 188
 189         Repeater {
 190             model: 7
 191             CalendarDay {
 192                 dayPos: index + 29
 193                 currentDay: calendarHelper.day
 194                 text: calendarHelper.dayForPosition(dayPos);
 195             }
 196         }
 197
 198
 199         // sixth row
 200         Text {
 201             id: week6
 202             width: calendarGrid.weekNumberWidth
 203             height: calendarGrid.dayBoxSize
 204             color: "#828282"
 205             text: calendarHelper.weekForPosition(6)
 206             horizontalAlignment: Text.AlignRight
 207             verticalAlignment: Text.AlignTop
 208         }
 209
 210         Repeater {
 211             model: 7
 212             CalendarDay {
 213                 dayPos: index + 36
 214                 currentDay: calendarHelper.day
 215                 text: calendarHelper.dayForPosition(dayPos);
 216             }
 217         }
 218     }
 219
 220     MouseArea {
 221         anchors.fill: calendarGrid
 222         anchors.topMargin: calendarGrid.headlineHeight
 223         anchors.leftMargin: calendarGrid.weekNumberWidth
 224
 225         property int oldX : 0
 226         property int oldY : 0
 227
 228         onPressed: {
 229           oldX = mouseX;
 230           oldY = mouseY;
 231         }
 232
 233         onReleased: {
 234           var xDiff = oldX - mouseX;
 235           var yDiff = oldY - mouseY;
 236
 237           if ( Math.abs( xDiff ) > width * 0.3 || Math.abs( yDiff ) > height * 0.3 ) {
 238             // distance is width enough to be a swipe action
 239
 240             if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
 241               if ( oldX > mouseX )
 242                 calendarHelper.previousMonth();
 243               else
 244                 calendarHelper.nextMonth();
 245             } else {
 246               if ( oldY > mouseY )
 247                 calendarHelper.previousYear();
 248               else
 249                 calendarHelper.nextYear();
 250             }
 251           } else {
 252             selectDay(mouse);
 253           }
 254         }
 255
 256         //onPositionChanged: selectDay(mouse)
 257
 258         function selectDay(mouse) {
 259             if ((mouse.x < 0) || (mouse.x >= width) || (mouse.y < 0) || (mouse.y >= height))
 260                 return;
 261
 262             var boxSize = calendarGrid.dayBoxSize + calendarGrid.spacing;
 263             var row = Math.floor(mouse.y / boxSize);
 264             var column = Math.floor(mouse.x / boxSize);
 265             var dayForPosition = calendarHelper.dayForPosition(row * 7 + column + 1);
 266
 267             if (dayForPosition != "")
 268                 calendarHelper.day = dayForPosition;
 269         }
 270     }
 271
 272     Component.onCompleted: {
 273         calendarHelper.registerItems(calendarGrid);
 274     }
 275 }
 276