← Back to branch summary

~ubuntu-branches/ubuntu/raring/plasma-mobile/raring-proposed

« back to all changes in this revision

Viewing changes to components/mobilecomponents/IconGrid.qml

  • Committer: Package Import Robot
  • Author(s): Jonathan Riddell
  • Date: 2012-07-17 12:04:43 UTC
  • mfrom: (1.1.6)
  • Revision ID: package-import@ubuntu.com-20120717120443-q3ig9u2fnltx67yg
Tags: 2.0+git2012071701-0ubuntu1
* New upstream snapshot
* Remove build-dep on kde-runtime-dev

Show diffs side-by-side

added added

removed removed

Lines of Context:
components/mobilecomponents/IconGrid.qml
27
27
 
28
28
    property Component delegate
29
29
    property QtObject model
30
 
    property int pageSize: Math.floor(appsView.width/delegateWidth)*Math.floor(appsView.height/delegateHeight)
31
 
    property int delegateWidth: 120
32
 
    property int delegateHeight: 120
33
 
    property alias currentPage: appsView.currentIndex
 
30
    property int pageSize: Math.floor(iconView.width/main.delegateWidth)*Math.floor(iconView.height/main.delegateHeight)
 
31
    property int delegateWidth: theme.defaultFont.mSize.width * 15
 
32
    property int delegateHeight: theme.defaultIconSize + theme.defaultFont.mSize.height + 8
 
33
    property alias currentPage: iconView.currentIndex
34
34
    property int pagesCount: Math.ceil(model.count/pageSize)
35
35
    property int count: model.count
36
36
 
41
41
 
42
42
    function positionViewAtIndex(index)
43
43
    {
44
 
        appsView.positionViewAtIndex(index / pageSize, ListView.Beginning)
 
44
        iconView.positionViewAtIndex(index / pageSize, ListView.Beginning)
45
45
    }
46
46
 
47
47
    function positionViewAtPage(page)
48
48
    {
49
 
        appsView.positionViewAtIndex(page, ListView.Beginning)
 
49
        iconView.positionViewAtIndex(page, ListView.Beginning)
50
50
    }
51
51
 
52
52
    PlasmaCore.Theme {
54
54
    }
55
55
 
56
56
 
 
57
    Timer {
 
58
        id: resizeTimer
 
59
        running: true
 
60
        interval: 100
 
61
        onTriggered: {
 
62
            main.pageSize = Math.floor(iconView.width/main.delegateWidth)*Math.floor(iconView.height/main.delegateHeight)
 
63
            if (iconView.currentItem) {
 
64
                iconView.currentItem.width = iconView.width
 
65
                iconView.currentItem.height = iconView.height
 
66
            }
 
67
        }
 
68
    }
57
69
    ListView {
58
 
        id: appsView
59
 
        objectName: "appsView"
 
70
        id: iconView
 
71
        objectName: "iconView"
60
72
        pressDelay: 200
61
 
        cacheBuffer: width
 
73
        cacheBuffer: 100
62
74
        highlightMoveDuration: 250
63
75
        anchors.fill: parent
64
 
 
65
 
 
66
 
        model: main.model?Math.ceil(main.model.count/main.pageSize):0
 
76
        onWidthChanged: resizeTimer.restart()
 
77
        onHeightChanged: resizeTimer.restart()
 
78
 
 
79
        model: main.model ? Math.ceil(main.model.count/main.pageSize) : 0
67
80
        highlightRangeMode: ListView.StrictlyEnforceRange
68
81
        orientation: ListView.Horizontal
69
82
        snapMode: ListView.SnapOneItem
74
87
 
75
88
        delegate: Component {
76
89
            Item {
77
 
                width: appsView.width
78
 
                height: appsView.height
 
90
                id: delegatePage
 
91
                //Explicitly *not* bind the properties for performance reasons
 
92
                Component.onCompleted: {
 
93
                    width = iconView.width
 
94
                    height = iconView.height
 
95
                    //iconView.cacheBuffer = iconView.width
 
96
                }
 
97
 
79
98
                Flow {
80
99
                    id: iconFlow
81
100
                    width: iconRepeater.suggestedWidth
99
118
                        interval: 0
100
119
                        onTriggered: iconRepeater.model = pagedProxyModel
101
120
                        Component.onCompleted: {
102
 
                            loadTimer.interval = appsView.moving ? 500 : 0
 
121
                            loadTimer.interval = iconView.moving ? 500 : 0
103
122
                            loadTimer.running = true
104
123
                        }
105
124
                    }
106
125
                    Repeater {
107
126
                        id: iconRepeater
108
 
                        property int columns: Math.min(count, Math.floor(appsView.width/main.delegateWidth))
 
127
                        property int columns: Math.min(count, Math.floor(delegatePage.width/main.delegateWidth))
109
128
                        property int suggestedWidth: main.delegateWidth*columns
110
129
                        //property int suggestedHeight: main.delegateHeight*Math.floor(count/columns)
111
130
 
117
136
    }
118
137
 
119
138
 
120
 
    Item {
 
139
    Loader {
 
140
        id: scrollArea
121
141
        visible: main.model && Math.ceil(main.model.count/main.pageSize) > 1
122
142
        anchors {
123
143
            left: parent.left
124
144
            right: parent.right
125
145
            bottom: parent.bottom
126
146
        }
127
 
        height: Math.max( 16, appsView.height - Math.floor(appsView.height/delegateHeight)*delegateHeight)
128
 
        Row {
 
147
        height: Math.max( 16, iconView.height - Math.floor(iconView.height/delegateHeight)*delegateHeight)
 
148
 
 
149
        property int pageCount: main.model ? Math.ceil(main.model.count/main.pageSize) : 0
 
150
 
 
151
        sourceComponent: pageCount > 1 ? ((pageCount * 20 > width) ? scrollDotComponent : dotsRow) : undefined
 
152
        function setViewIndex(index)
 
153
        {
 
154
            //animate only if near
 
155
            if (Math.abs(iconView.currentIndex - index) > 1) {
 
156
                iconView.positionViewAtIndex(index, ListView.Beginning)
 
157
            } else {
 
158
                iconView.currentIndex = index
 
159
            }
 
160
        }
 
161
        Component {
 
162
            id: scrollDotComponent
 
163
            MouseArea {
 
164
                anchors.fill: parent
 
165
                property int pendingIndex: 0
 
166
                Rectangle {
 
167
                    id: barRectangle
 
168
                    color: theme.textColor
 
169
                    opacity: 0.25
 
170
                    height: 4
 
171
                    radius: 2
 
172
                    anchors {
 
173
                        left: parent.left
 
174
                        right: parent.right
 
175
                        verticalCenter: parent.verticalCenter
 
176
                        leftMargin: (parent.width/pageCount/2)
 
177
                        rightMargin: (parent.width/pageCount/2)
 
178
                    }
 
179
                }
 
180
                Rectangle {
 
181
                    color: theme.textColor
 
182
                    height: 8
 
183
                    width: height
 
184
                    radius: 4
 
185
                    anchors.verticalCenter: parent.verticalCenter
 
186
                    x: parent.width/(pageCount/(iconView.currentIndex+1)) - (parent.width/pageCount/2) - 4
 
187
                    Behavior on x {
 
188
                        NumberAnimation {
 
189
                            duration: 250
 
190
                            easing.type: Easing.InOutQuad
 
191
                        }
 
192
                    }
 
193
                }
 
194
                function setViewIndexFromMouse(x)
 
195
                {
 
196
                    pendingIndex = Math.min(pageCount,
 
197
                                            Math.round(pageCount / (barRectangle.width / Math.max(x - barRectangle.x, 1))))
 
198
                    viewPositionTimer.restart()
 
199
                }
 
200
                onPressed: setViewIndexFromMouse(mouse.x)
 
201
                onPositionChanged: setViewIndexFromMouse(mouse.x)
 
202
 
 
203
                Timer {
 
204
                    id: viewPositionTimer
 
205
                    interval: 200
 
206
                    onTriggered: setViewIndex(pendingIndex)
 
207
                }
 
208
            }
 
209
        }
 
210
        Component {
129
211
            id: dotsRow
130
 
            anchors.centerIn: parent
131
 
            spacing: 20
132
 
 
133
 
            Repeater {
134
 
                model: main.model?Math.ceil(main.model.count/main.pageSize):0
135
 
 
136
 
 
137
 
                Rectangle {
138
 
                    width: 6
139
 
                    height: 6
140
 
                    scale: appsView.currentIndex == index ? 1.5 : 1
141
 
                    radius: 5
142
 
                    smooth: true
143
 
                    opacity: appsView.currentIndex == index ? 0.8: 0.4
144
 
                    color: theme.textColor
145
 
 
146
 
                    Behavior on scale {
147
 
                        NumberAnimation {
148
 
                            duration: 250
149
 
                            easing.type: Easing.InOutQuad
150
 
                        }
151
 
                    }
152
 
                    Behavior on opacity {
153
 
                        NumberAnimation {
154
 
                            duration: 250
155
 
                            easing.type: Easing.InOutQuad
156
 
                        }
157
 
                    }
158
 
 
159
 
                    MouseArea {
160
 
                        anchors {
161
 
                            fill: parent
162
 
                            margins: -10
163
 
                        }
164
 
 
165
 
                        onClicked: {
166
 
                            //animate only if near
167
 
                            if (Math.abs(appsView.currentIndex - index) > 1) {
168
 
                                appsView.positionViewAtIndex(index, ListView.Beginning)
169
 
                            } else {
170
 
                                appsView.currentIndex = index
 
212
 
 
213
            Item {
 
214
                Row {
 
215
                    anchors.centerIn: parent
 
216
                    spacing: 20
 
217
 
 
218
                    Repeater {
 
219
                        model: scrollArea.pageCount
 
220
 
 
221
 
 
222
                        Rectangle {
 
223
                            width: 6
 
224
                            height: 6
 
225
                            scale: iconView.currentIndex == index ? 1.5 : 1
 
226
                            radius: 5
 
227
                            smooth: true
 
228
                            opacity: iconView.currentIndex == index ? 0.8: 0.4
 
229
                            color: theme.textColor
 
230
 
 
231
                            Behavior on scale {
 
232
                                NumberAnimation {
 
233
                                    duration: 250
 
234
                                    easing.type: Easing.InOutQuad
 
235
                                }
 
236
                            }
 
237
                            Behavior on opacity {
 
238
                                NumberAnimation {
 
239
                                    duration: 250
 
240
                                    easing.type: Easing.InOutQuad
 
241
                                }
 
242
                            }
 
243
 
 
244
                            MouseArea {
 
245
                                anchors {
 
246
                                    fill: parent
 
247
                                    margins: -10
 
248
                                }
 
249
 
 
250
                                onClicked: {
 
251
                                    setViewIndex(index)
 
252
                                }
171
253
                            }
172
254
                        }
173
255
                    }