~pkunal-parmar/ubuntu-calendar-app/NewDayView

« back to all changes in this revision

Viewing changes to TimeLineHeader.qml

  • Committer: Kunal Parmar
  • Date: 2014-11-15 08:02:45 UTC
  • Revision ID: pkunal.parmar@gmail.com-20141115080245-9f093ak1owlh5tl8
new day and week view

Show diffs side-by-side

added added

removed removed

Lines of Context:
1
 
/*
2
 
 * Copyright (C) 2013-2014 Canonical Ltd
3
 
 *
4
 
 * This file is part of Ubuntu Calendar App
5
 
 *
6
 
 * Ubuntu Calendar App is free software: you can redistribute it and/or modify
7
 
 * it under the terms of the GNU General Public License version 3 as
8
 
 * published by the Free Software Foundation.
9
 
 *
10
 
 * Ubuntu Calendar App is distributed in the hope that it will be useful,
11
 
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12
 
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13
 
 * GNU General Public License for more details.
14
 
 *
15
 
 * You should have received a copy of the GNU General Public License
16
 
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
17
 
 */
18
 
 
19
 
import QtQuick 2.3
 
1
import QtQuick 2.0
20
2
import Ubuntu.Components 1.1
 
3
import QtQuick.Layouts 1.1
 
4
import Ubuntu.Components.ListItems 1.0 as ListItem
 
5
 
21
6
import "ViewType.js" as ViewType
22
7
 
23
 
PathViewBase {
24
 
    id: header
 
8
Column {
 
9
    id: root
25
10
 
26
11
    property int type: ViewType.ViewTypeWeek
27
 
 
28
 
    interactive: false
29
 
    model:3
30
 
 
31
 
    height: units.gu(4)
 
12
    property date startDay;
 
13
    property int weekHeaderScrollX;
 
14
 
 
15
    signal dateSelected(var date);
 
16
 
32
17
    width: parent.width
33
 
 
34
 
    property var date;
35
 
    property var currentDay;
36
 
 
37
 
    signal dateSelected(var date);
38
 
 
39
 
    delegate: TimeLineHeaderComponent{
40
 
        type: header.type
41
 
 
42
 
        isCurrentItem: index == header.currentIndex
43
 
        currentDay: header.currentDay
44
 
 
 
18
    height: units.gu(10)
 
19
 
 
20
    Row{
45
21
        width: parent.width
46
 
 
47
 
        startDay: date.addDays(7*header.indexType(index))
48
 
 
49
 
        onDateSelected: {
50
 
            header.dateSelected(date);
 
22
        height: parent.height
 
23
 
 
24
        Column{
 
25
            id: labelColumn
 
26
            width : units.gu(6)
 
27
            Label{
 
28
                id: weekNumLabel
 
29
                text: "W"+ root.startDay.weekNumber()
 
30
                fontSize: "small"
 
31
                height: units.gu(5)
 
32
                width: parent.width
 
33
                verticalAlignment: Text.AlignVCenter
 
34
                horizontalAlignment: Text.AlignHCenter
 
35
            }
 
36
 
 
37
            ListItem.Divider{
 
38
                height: units.gu(0.1)
 
39
            }
 
40
 
 
41
            Label {
 
42
                height: units.gu(5)
 
43
                text:i18n.tr("All Day");
 
44
                fontSize: "small"
 
45
                width: parent.width
 
46
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
 
47
                verticalAlignment: Text.AlignVCenter
 
48
                horizontalAlignment: Text.AlignHCenter
 
49
            }
 
50
        }
 
51
 
 
52
        Rectangle{
 
53
            width: units.gu(0.2)
 
54
            height: parent.height
 
55
            color: "#e5e2e2"
 
56
        }
 
57
 
 
58
        Column{
 
59
            width: parent.width - labelColumn.width
 
60
            height: parent.height
 
61
 
 
62
            Loader{
 
63
                id: headerloader
 
64
                width: parent.width
 
65
                height: units.gu(5)
 
66
                sourceComponent: {
 
67
                    if( type == ViewType.ViewTypeWeek ) {
 
68
                        weekHeaderComponent
 
69
                    } else {
 
70
                        dayHeaderComponent
 
71
                    }
 
72
                }
 
73
            }
 
74
 
 
75
            ListItem.Divider{
 
76
                height: units.gu(0.1)
 
77
            }
 
78
 
 
79
            Loader{
 
80
                id: allDayLoader
 
81
                width: parent.width
 
82
                height: units.gu(5)
 
83
                sourceComponent: {
 
84
                    if( type == ViewType.ViewTypeWeek ) {
 
85
                        weekAllDayComponent
 
86
                    } else {
 
87
                        dayAllDayComponent
 
88
                    }
 
89
                }
 
90
            }
 
91
        }
 
92
    }
 
93
 
 
94
    Component {
 
95
        id: weekAllDayComponent
 
96
        Flickable{
 
97
            id: weekAllDay
 
98
 
 
99
            width: parent.width
 
100
            height: parent.height
 
101
            clip: true
 
102
            contentX: root.weekHeaderScrollX
 
103
 
 
104
            property int delegateWidth: {
 
105
                width/3 - units.gu(1) /*partial visible area*/
 
106
            }
 
107
            contentHeight: height
 
108
            contentWidth: {
 
109
                (delegateWidth*7)
 
110
            }
 
111
 
 
112
            AllDayEventComponent {
 
113
                type: root.type
 
114
                startDay: root.startDay
 
115
                model: mainModel
 
116
 
 
117
                Component.onCompleted: {
 
118
                    mainModel.addModelChangeListener(createAllDayEvents);
 
119
                }
 
120
                Component.onDestruction: {
 
121
                    mainModel.removeModelChangeListener(createAllDayEvents);
 
122
                }
 
123
            }
 
124
        }
 
125
    }
 
126
 
 
127
    Component {
 
128
        id: dayAllDayComponent
 
129
 
 
130
        AllDayEventComponent {
 
131
            type: root.type
 
132
            startDay: root.startDay
 
133
            model: mainModel
 
134
            width: parent.width
 
135
            height: parent.height
 
136
 
 
137
            Component.onCompleted: {
 
138
                mainModel.addModelChangeListener(createAllDayEvents);
 
139
            }
 
140
            Component.onDestruction: {
 
141
                mainModel.removeModelChangeListener(createAllDayEvents);
 
142
            }
 
143
        }
 
144
    }
 
145
 
 
146
    Component {
 
147
        id: weekHeaderComponent
 
148
        Flickable{
 
149
            id: weekDateHeader
 
150
 
 
151
            width: parent.width
 
152
            height: parent.height
 
153
            clip: true
 
154
            contentX: root.weekHeaderScrollX
 
155
 
 
156
            property int delegateWidth: {
 
157
                width/3 - units.gu(1) /*partial visible area*/
 
158
            }
 
159
            contentHeight: height
 
160
            contentWidth: {
 
161
                (delegateWidth*7)
 
162
            }
 
163
 
 
164
            TimeLineHeaderComponent{
 
165
                id: dateHeader
 
166
                //type: root.type
 
167
                //currentDay: header.currentDay
 
168
                startDay: root.startDay
 
169
 
 
170
                onDateSelected: {
 
171
                    root.dateSelected(date);
 
172
                }
 
173
            }
 
174
        }
 
175
    }
 
176
 
 
177
    Component {
 
178
        id: dayHeaderComponent
 
179
        TimeLineHeaderComponent{
 
180
            id: dateHeader
 
181
            //type: root.type
 
182
            //currentDay: header.currentDay
 
183
            width: parent.width
 
184
            height: parent.height
 
185
            startDay: root.startDay
 
186
 
 
187
            onDateSelected: {
 
188
                root.dateSelected(date);
 
189
            }
51
190
        }
52
191
    }
53
192
}
54