vcs.maemo.org Git - lichviet/blob - qml/DatePicker/component/DateReel.qml

   1 import QtQuick 1.0
   2
   3 Item {
   4     id: container
   5
   6     // Year item dimensions
   7     property int yearWidth: (width-2*spacing)*0.4
   8     property int yearHeight: height
   9     // Month item dimensions
  10     property int monthWidth: (width-2*spacing)*0.3
  11     property int monthHeight: height
  12     // Day item dimensions
  13     property int dayWidth: (width-2*spacing)*0.3
  14     property int dayHeight: height
  15     // Font properties
  16     property string fontName: 'Helvetica'
  17     property int fontSize: 22
  18     property color fontColor: "#666666"
  19     // Spacing between items
  20     property int spacing: 8
  21
  22     property Component itemBackground: Component {
  23         BorderImage {
  24             border { top: 8; bottom: 8; left: 8; right: 8 }
  25             source:  theme_manager.theme.datepicker.button
  26         }
  27     }
  28     property Component itemBackgroundPressed: Component {
  29         BorderImage {
  30             border { top: 8; bottom: 8; left: 8; right: 8 }
  31             source: theme_manager.theme.datepicker.button_pressed
  32         }
  33     }
  34
  35     width: 240
  36     height:  90
  37
  38     Component.onCompleted: {
  39     }
  40
  41     Component {
  42         id: dayDelegate
  43         Button {
  44             width: container.dayWidth
  45             height: container.dayHeight
  46             text: number
  47             fontColor: container.fontColor
  48             fontName: container.fontName
  49             fontSize: container.fontSize
  50             bg: itemBackground
  51             bgPressed: itemBackgroundPressed
  52              opacity: (index+1 < days.start || index+1 > days.end) ? 0.5 : 1.0
  53         }
  54     }
  55
  56     Component {
  57         id: monthDelegate
  58         Button {
  59             width: container.monthWidth
  60             height: container.monthHeight
  61             text: number
  62             fontColor: container.fontColor
  63             fontName: container.fontName
  64             fontSize: container.fontSize
  65             bg: itemBackground
  66             bgPressed: itemBackgroundPressed
  67
  68         }
  69     }
  70
  71     Component {
  72         id: yearDelegate
  73         Button {
  74             width: container.yearWidth
  75             height: container.yearHeight
  76             text: number
  77             fontColor: container.fontColor
  78             fontName: container.fontName
  79             fontSize: container.fontSize
  80             bg: itemBackground
  81             bgPressed: itemBackgroundPressed
  82         }
  83     }
  84
  85
  86     Row {
  87         id: reels
  88         spacing: container.spacing
  89
  90         Reel {
  91             id: day
  92             width: container.dayWidth
  93             height: container.dayHeight
  94             model: days
  95             delegate:  dayDelegate
  96             autoClose: false
  97
  98             function mouseoff(){
  99                 if (day.index+1 < days.start) day.index = days.start-1;
 100                 else if (day.index+1 > days.end ) day.index = days.end-1;
 101
 102
 103                 datePicker.mDay = day.index + 1;
 104                 datePicker.mMonth = month.index + 1;
 105                 datePicker.mYear = year.index + 1900;
 106             }
 107         }
 108
 109         Reel {
 110             id: month
 111             width: container.monthWidth
 112             height: container.monthHeight
 113             model: months
 114             delegate: monthDelegate
 115             autoClose: false
 116
 117             function mouseoff(){
 118                 days.reset()
 119                 datePicker.mDay = day.index + 1;
 120                 datePicker.mMonth = month.index + 1;
 121                 datePicker.mYear = year.index + 1900;
 122             }
 123         }
 124
 125         Reel {
 126             id: year
 127             width: container.yearWidth
 128             height: container.yearHeight
 129             model: years
 130             delegate: yearDelegate
 131             autoClose: false
 132
 133             function mouseoff(){
 134                  days.reset()
 135                 datePicker.mDay = day.index + 1;
 136                 datePicker.mMonth = month.index + 1;
 137                 datePicker.mYear = year.index + 1900;
 138             }
 139         }
 140
 141     }
 142
 143
 144     ListModel {
 145         id: days
 146
 147         property int start: 1
 148         property int end: 31
 149
 150         Component.onCompleted: {
 151             appends()
 152             day.index = screen.curDay - 1
 153             end = LC.calDays(month.index+1,year.index+1900);
 154         }
 155
 156         function reset(){
 157             var howmanydays =  LC.calDays(month.index+1,year.index+1900);
 158             end = howmanydays;
 159
 160             if (day.index+1 < days.start) day.index = days.start-1;
 161             else if (day.index+1 > days.end ) day.index = days.end-1;
 162         }
 163
 164         function appends(){
 165             for(var j=1;j<=31;j++){
 166                 if (j<=9)
 167                    append({number:"0"+j})
 168                 else
 169                    append({number:j})
 170             }
 171         }
 172
 173         function change(){
 174            day.index = screen.curDay-1;
 175         }
 176     }
 177
 178     ListModel{
 179         id: months
 180         Component.onCompleted: {
 181             for(var j=1;j<=12;j++){
 182                 if (j<=9)
 183                    append({number:"0"+j})
 184                 else
 185                    append({number:j})
 186             }
 187             month.index = screen.curMonth - 1
 188         }
 189
 190         function change(){
 191              month.index = screen.curMonth - 1;
 192         }
 193     }
 194
 195     ListModel{
 196         id: years
 197         Component.onCompleted: {
 198             for(var i=1900;i<2099;i++){
 199                 append({number:i})
 200             }
 201             year.index = screen.curYear - 1900
 202         }
 203
 204         function change(){
 205               year.index = screen.curYear - 1900
 206         }
 207     }
 208
 209     function day_reset(){
 210          datePicker.mDay = screen.curDay
 211         days.change()
 212     }
 213
 214     function month_reset(){
 215                  datePicker.mMonth = screen.curMonth
 216         months.change()
 217     }
 218
 219     function year_reset(){
 220         datePicker.mYear = screen.curYear
 221         years.change()
 222     }
 223
 224
 225 }