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

« back to all changes in this revision

Viewing changes to TimeLineBaseComponent.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:
20
20
import QtQuick.Layouts 1.1
21
21
import Ubuntu.Components 1.1
22
22
import Ubuntu.Components.Popups 1.0
 
23
import Ubuntu.Components.ListItems 1.0 as ListItem
23
24
import QtOrganizer 5.0
 
25
 
24
26
import "dateExt.js" as DateExt
25
27
import "ViewType.js" as ViewType
26
28
 
39
41
    //visible hour
40
42
    property int scrollHour;
41
43
 
 
44
    signal dateSelected(var date);
 
45
 
42
46
    function scrollToCurrentTime() {
43
47
        var currentTime = new Date();
44
48
        scrollHour = currentTime.getHours();
45
49
 
46
 
        timeLineView.contentY = scrollHour * units.gu(10);
 
50
        timeLineView.contentY = scrollHour * units.gu(8);
47
51
        if(timeLineView.contentY >= timeLineView.contentHeight - timeLineView.height) {
48
52
            timeLineView.contentY = timeLineView.contentHeight - timeLineView.height
49
53
        }
61
65
 
62
66
        onScrollDown:{
63
67
            scrollHour++;
64
 
            var visibleHour = root.height / units.gu(10);
 
68
            var visibleHour = root.height / units.gu(8);
65
69
            if( scrollHour > (25 -visibleHour)) {
66
70
                scrollHour = 25 - visibleHour;
67
71
            }
70
74
    }
71
75
 
72
76
    function scrollToHour() {
73
 
        timeLineView.contentY = scrollHour * units.gu(10);
 
77
        timeLineView.contentY = scrollHour * units.gu(8);
74
78
        if(timeLineView.contentY >= timeLineView.contentHeight - timeLineView.height) {
75
79
            timeLineView.contentY = timeLineView.contentHeight - timeLineView.height
76
80
        }
91
95
        z:2
92
96
    }
93
97
 
94
 
    AllDayEventComponent {
95
 
        id: allDayContainer
96
 
        type: root.type
97
 
        startDay: root.startDay
98
 
        model: mainModel
99
 
        z:1
100
 
        anchors {
101
 
            left: parent.left
102
 
            right: parent.right
103
 
            leftMargin: type == ViewType.ViewTypeWeek ? 0
104
 
                                                      : units.gu(8)
105
 
 
106
 
            rightMargin: type == ViewType.ViewTypeWeek ? 0
107
 
                                                      : units.gu(1)
108
 
        }
109
 
 
110
 
        Component.onCompleted: {
111
 
            mainModel.addModelChangeListener(createAllDayEvents);
112
 
        }
113
 
        Component.onDestruction: {
114
 
            mainModel.removeModelChangeListener(createAllDayEvents);
115
 
        }
116
 
    }
117
 
 
118
 
    ColumnLayout {
 
98
    Column {
119
99
        anchors.fill: parent
120
100
 
121
 
        Flickable {
122
 
            id: timeLineView
123
 
 
124
 
            Layout.fillHeight: true
125
 
 
126
 
            contentHeight: units.gu(10) * 24
127
 
            contentWidth: width
128
 
            anchors.right: parent.right
129
 
            anchors.left: parent.left
130
 
 
131
 
            clip: true
132
 
 
133
 
            TimeLineBackground {}
134
 
 
135
 
            Row {
136
 
                id: week
137
 
 
138
 
                anchors {
139
 
                    fill: parent
140
 
                    leftMargin: type == ViewType.ViewTypeWeek ? 0
141
 
                                                              : units.gu(8)
142
 
 
143
 
                    rightMargin: type == ViewType.ViewTypeWeek ? 0
144
 
                                                              : units.gu(1)
145
 
                }
146
 
 
147
 
                Repeater {
148
 
                    model: type == ViewType.ViewTypeWeek ? 7 : 1
149
 
 
150
 
                    delegate: TimeLineBase {
151
 
                        property int idx: index
152
 
                        anchors.top: parent.top
153
 
                        width: {
154
 
                            if( type == ViewType.ViewTypeWeek ) {
155
 
                                parent.width / 7
156
 
                            } else {
157
 
                                (parent.width)
158
 
                            }
159
 
                        }
160
 
 
161
 
                        height: parent.height
162
 
                        delegate: comp
163
 
                        day: startDay.addDays(index)
164
 
 
165
 
                        Loader{
166
 
                            objectName: "weekdevider"
167
 
                            height: parent.height
168
 
                            width: units.gu(0.15)
169
 
                            sourceComponent: type == ViewType.ViewTypeWeek ? weekDeviderComponent : undefined
170
 
                        }
171
 
 
172
 
                        Component {
173
 
                            id: weekDeviderComponent
174
 
                            Rectangle{
175
 
                                anchors.fill: parent
176
 
                                color: "#e5e2e2"
177
 
                            }
178
 
                        }
179
 
 
180
 
                        Connections{
181
 
                            target: mainModel
182
 
                            onStartPeriodChanged:{
183
 
                                destroyAllChildren();
184
 
                            }
185
 
                        }
186
 
 
187
 
                        model: mainModel
188
 
                        Component.onCompleted: {
189
 
                            model.addModelChangeListener(destroyAllChildren);
190
 
                            model.addModelChangeListener(createEvents);
191
 
                        }
192
 
                        Component.onDestruction: {
193
 
                            model.removeModelChangeListener(destroyAllChildren);
194
 
                            model.removeModelChangeListener(createEvents);
195
 
                        }
196
 
                    }
197
 
                }
198
 
            }
199
 
        }
200
 
    }
201
 
 
202
 
    Component {
203
 
        id: comp
204
 
        EventBubble {
205
 
            type: root.type == ViewType.ViewTypeWeek ? narrowType : wideType
206
 
            flickable: root.isActive ? timeLineView : null
207
 
            clip: true
 
101
        TimeLineHeader{
 
102
            id: header
 
103
            startDay: root.startDay
 
104
            weekHeaderScrollX: timeLineView.contentX
 
105
            type: root.type
 
106
 
 
107
            onDateSelected: {
 
108
                root.dateSelected(date);
 
109
            }
 
110
        }
 
111
 
 
112
        ListItem.Divider{
 
113
            height: units.gu(0.1)
 
114
        }
 
115
 
 
116
        Row {
 
117
            width: parent.width
 
118
            height: parent.height - header.height
 
119
 
 
120
            TimeLineTimeScale{}
 
121
 
 
122
            Rectangle{
 
123
                width: units.gu(0.1)
 
124
                height: parent.height
 
125
                color: "#e5e2e2"
 
126
            }
 
127
 
 
128
            Column {
 
129
                height: parent.height
 
130
                width: parent.width - units.gu(6)
 
131
 
 
132
                Flickable {
 
133
                    id: timeLineView
 
134
 
 
135
                    height: parent.height
 
136
                    width: parent.width
 
137
 
 
138
                    boundsBehavior: Flickable.StopAtBounds
 
139
 
 
140
                    property int delegateWidth: {
 
141
                        if( type == ViewType.ViewTypeWeek ) {
 
142
                            width/3 - units.gu(1) /*partial visible area*/
 
143
                        } else {
 
144
                            width
 
145
                        }
 
146
                    }
 
147
 
 
148
                    contentHeight: units.gu(8) * 24
 
149
                    contentWidth: {
 
150
                        if( type == ViewType.ViewTypeWeek ) {
 
151
                            delegateWidth*7
 
152
                        } else {
 
153
                            width
 
154
                        }
 
155
                    }
 
156
 
 
157
                    clip: true
 
158
 
 
159
                    TimeLineBackground{}
 
160
 
 
161
                    Row {
 
162
                        id: week
 
163
                        anchors.fill: parent
 
164
                        Repeater {
 
165
                            model: type == ViewType.ViewTypeWeek ? 7 : 1
 
166
 
 
167
                            delegate: TimeLineBase {
 
168
                                property int idx: index
 
169
                                anchors.top: parent.top
 
170
                                width: {
 
171
                                    if( type == ViewType.ViewTypeWeek ) {
 
172
                                        parent.width / 7
 
173
                                    } else {
 
174
                                        (parent.width)
 
175
                                    }
 
176
                                }
 
177
                                height: parent.height
 
178
                                delegate: comp
 
179
                                day: startDay.addDays(index)
 
180
 
 
181
                                Loader{
 
182
                                    objectName: "weekdevider"
 
183
                                    height: parent.height
 
184
                                    width: units.gu(0.15)
 
185
                                    sourceComponent: type == ViewType.ViewTypeWeek ? weekDeviderComponent : undefined
 
186
                                }
 
187
 
 
188
                                Component {
 
189
                                    id: weekDeviderComponent
 
190
                                    Rectangle{
 
191
                                        anchors.fill: parent
 
192
                                        color: "#e5e2e2"
 
193
                                    }
 
194
                                }
 
195
 
 
196
                                Connections{
 
197
                                    target: mainModel
 
198
                                    onStartPeriodChanged:{
 
199
                                        destroyAllChildren();
 
200
                                    }
 
201
                                }
 
202
 
 
203
                                model: mainModel
 
204
                                Component.onCompleted: {
 
205
                                    model.addModelChangeListener(destroyAllChildren);
 
206
                                    model.addModelChangeListener(createEvents);
 
207
                                }
 
208
                                Component.onDestruction: {
 
209
                                    model.removeModelChangeListener(destroyAllChildren);
 
210
                                    model.removeModelChangeListener(createEvents);
 
211
                                }
 
212
                            }
 
213
                        }
 
214
                    }
 
215
                }
 
216
            }
 
217
 
 
218
            Component {
 
219
                id: comp
 
220
                EventBubble {
 
221
                    type: root.type == ViewType.ViewTypeWeek ? narrowType : wideType
 
222
                    flickable: root.isActive ? timeLineView : null
 
223
                    clip: true
 
224
                }
 
225
            }
208
226
        }
209
227
    }
210
228
}