← Back to branch summary

~elopio/ubuntu-ui-toolkit/toogles_emulator

« back to all changes in this revision

Viewing changes to modules/Ubuntu/Components/Themes/Ambiance/PickerStyle.qml

  • Committer: Leo Arias
  • Date: 2013-09-21 19:00:29 UTC
  • mfrom: (746.1.5 trunk)
  • Revision ID: leo.arias@canonical.com-20130921190029-7pcezfaupj2a2rwa
Merged with trunk.

Show diffs side-by-side

added added

removed removed

Lines of Context:
modules/Ubuntu/Components/Themes/Ambiance/PickerStyle.qml
 
1
/*
 
2
 * Copyright 2012 Canonical Ltd.
 
3
 *
 
4
 * This program is free software; you can redistribute it and/or modify
 
5
 * it under the terms of the GNU Lesser General Public License as published by
 
6
 * the Free Software Foundation; version 3.
 
7
 *
 
8
 * This program is distributed in the hope that it will be useful,
 
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
11
 * GNU Lesser General Public License for more details.
 
12
 *
 
13
 * You should have received a copy of the GNU Lesser General Public License
 
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
15
 */
 
16
 
 
17
import QtQuick 2.0
 
18
import Ubuntu.Components 0.1
 
19
 
 
20
Rectangle {
 
21
    id: control
 
22
    // style properties
 
23
    property color frameColor: UbuntuColors.warmGrey
 
24
    property real frameWidth: 1
 
25
    property color backgroundColor: "#00000000"
 
26
    property bool overlay: true
 
27
    property color overlayColor: UbuntuColors.warmGrey
 
28
 
 
29
    // private properties
 
30
    property bool completed: false
 
31
 
 
32
    border {
 
33
        width: frameWidth
 
34
        color: frameColor
 
35
    }
 
36
    color: backgroundColor
 
37
    anchors.fill: parent
 
38
 
 
39
    function modelSize() {
 
40
        return loader.item.model.hasOwnProperty("count") ? loader.item.model.count : loader.item.model.length;
 
41
    }
 
42
 
 
43
    function moveToIndex(toIndex) {
 
44
        var count = (loader.item && loader.item.model) ? modelSize() : -1;
 
45
        if (completed && count > 0) {
 
46
            if (QuickUtils.className(loader.item) === "QQuickListView") {
 
47
                loader.item.currentIndex = toIndex;
 
48
                return;
 
49
            } else {
 
50
                loader.item.positionViewAtIndex(count - 1, PathView.Center);
 
51
                loader.item.positionViewAtIndex(toIndex, PathView.Center);
 
52
            }
 
53
        }
 
54
    }
 
55
 
 
56
    Component {
 
57
        id: highlightComponent
 
58
        Item {
 
59
            width: parent ? parent.width : 0
 
60
            height: (parent && parent.currentItem) ? parent.currentItem.height : units.gu(4);
 
61
        }
 
62
    }
 
63
 
 
64
    // circular list
 
65
    Component {
 
66
        id: wrapAround
 
67
        PathView {
 
68
            id: pView
 
69
            property Item tumbler: styledItem
 
70
            anchors.fill: parent
 
71
            clip: true
 
72
 
 
73
            model: styledItem.model
 
74
            delegate: styledItem.delegate
 
75
            highlight: highlightComponent
 
76
            // put the currentItem to the center of the view
 
77
            preferredHighlightBegin: 0.5
 
78
            preferredHighlightEnd: 0.5
 
79
 
 
80
            pathItemCount: pView.height / highlightItem.height + 1
 
81
            snapMode: PathView.SnapToItem
 
82
            flickDeceleration: 100
 
83
 
 
84
            property int contentHeight: pathItemCount * highlightItem.height
 
85
            path: Path {
 
86
                startX: pView.width / 2
 
87
                startY: -(pView.contentHeight - pView.height) / 2
 
88
                PathLine {
 
89
                    x: pView.width / 2
 
90
                    y: pView.height + (pView.contentHeight - pView.height) / 2
 
91
                }
 
92
            }
 
93
        }
 
94
    }
 
95
 
 
96
    // linear list
 
97
    Component {
 
98
        id: linear
 
99
        ListView {
 
100
            id: lView
 
101
            property Item tumbler: styledItem
 
102
 
 
103
            anchors.fill: parent
 
104
            clip: true
 
105
 
 
106
            model: styledItem.model
 
107
            delegate: styledItem.delegate
 
108
 
 
109
            highlight: highlightComponent
 
110
            preferredHighlightBegin: highlightItem ? (height - highlightItem.height) / 2 : 0
 
111
            preferredHighlightEnd: highlightItem ? (preferredHighlightBegin + highlightItem.height) : 0
 
112
            highlightRangeMode: ListView.StrictlyEnforceRange
 
113
            highlightMoveDuration: 300
 
114
            flickDeceleration: 100
 
115
        }
 
116
    }
 
117
 
 
118
    Loader {
 
119
        id: loader
 
120
        asynchronous: false
 
121
        anchors {
 
122
            fill: parent
 
123
            margins: units.gu(0.2)
 
124
        }
 
125
        sourceComponent: (styledItem.circular) ? wrapAround : linear
 
126
 
 
127
        // to avoid binding loop
 
128
        Connections {
 
129
            target: styledItem
 
130
            onSelectedIndexChanged: loader.item.currentIndex = styledItem.selectedIndex
 
131
        }
 
132
 
 
133
        // live selectedIndex updater
 
134
        Binding {
 
135
            target: styledItem
 
136
            property: "selectedIndex"
 
137
            value: loader.item.currentIndex
 
138
            when: completed && (styledItem.model !== undefined) && styledItem.live
 
139
        }
 
140
        // non-live selectedIndex updater
 
141
        Connections {
 
142
            target: loader.item
 
143
            ignoreUnknownSignals: true
 
144
            onMovementEnded: {
 
145
                if (!styledItem.live) styledItem.selectedIndex = loader.item.currentIndex;
 
146
            }
 
147
            onCurrentIndexChanged: {
 
148
                if (!styledItem.live && styledItem.__clickedIndex === loader.item.currentIndex) {
 
149
                    styledItem.selectedIndex = loader.item.currentIndex;
 
150
                    styledItem.__clickedIndex = -1;
 
151
                }
 
152
            }
 
153
            onModelChanged: {
 
154
                moveToIndex((completed) ? 0 : styledItem.selectedIndex);
 
155
                if (completed && !styledItem.live) styledItem.selectedIndex = 0;
 
156
            }
 
157
        }
 
158
 
 
159
        Component.onCompleted: {
 
160
            completed = true;
 
161
            if (item) {
 
162
                loader.item.currentIndex = styledItem.selectedIndex;
 
163
                moveToIndex(styledItem.selectedIndex);
 
164
            }
 
165
        }
 
166
 
 
167
        // overlay
 
168
        Rectangle {
 
169
            visible: control.overlay
 
170
            gradient: Gradient {
 
171
                GradientStop {
 
172
                    position: 0
 
173
                    color: control.overlayColor
 
174
                }
 
175
 
 
176
                GradientStop {
 
177
                    position: 0.40
 
178
                    color: "#ffffff"
 
179
                }
 
180
 
 
181
                GradientStop {
 
182
                    position: 0.63
 
183
                    color: "#ffffff"
 
184
                }
 
185
 
 
186
                GradientStop {
 
187
                    position: 1
 
188
                    color: control.overlayColor
 
189
                }
 
190
            }
 
191
            anchors.fill: parent
 
192
        }
 
193
    }
 
194
 
 
195
}