← Back to branch summary

~ubuntu-branches/ubuntu/saucy/plasma-mobile/saucy

« back to all changes in this revision

Viewing changes to applets/org.kde.active.connman/contents/ui/ExpandingBox.qml

  • Committer: Package Import Robot
  • Author(s): Jonathan Riddell
  • Date: 2013-09-17 14:08:58 UTC
  • mfrom: (1.1.8)
  • Revision ID: package-import@ubuntu.com-20130917140858-wv7n3z6t95iy1fs9
Tags: 1:0.5-0ubuntu1
https://launchpad.net/bugs/1227602
* New upstream release LP: #1227602
* Use epoch to sync with upstream version number
* Build-dep on libxcursor-dev
* Add kubuntu_no_contourd.diff to disable contourd from building,
  does not compile with 4.11 and not used by default
* Depend on renamed package ksplash-theme-active
* Add kubuntu_no_dirmodel.diff to prevert compile of dirmodel,
  included in kde-runtime 4.11

Show diffs side-by-side

added added

removed removed

Lines of Context:
applets/org.kde.active.connman/contents/ui/ExpandingBox.qml
1
 
/*
2
 
 * Copyright 2011 Intel Corporation.
3
 
 *
4
 
 * This program is licensed under the terms and conditions of the
5
 
 * LGPL, version 2.1.  The full text of the LGPL License is at
6
 
 * http://www.gnu.org/licenses/lgpl.html
7
 
 */
8
 
 
9
 
/*!
10
 
  \qmlclass ExpandingBox
11
 
  \title ExpandingBox
12
 
  \section1 ExpandingBox
13
 
  This is a box which can be given any content and adapts its size accordingly.
14
 
  The default state of the box only show a header line and an icon which
15
 
  indicates if the box is expanded or not. Clicking on the header expands the
16
 
  box and shows the content.
17
 
 
18
 
  The behaviour isn't final because detailed specifications are missing.
19
 
 
20
 
  \section2 API properties
21
 
  \qmlproperty bool expanded
22
 
  \qmlcm true if the box is currently expanded
23
 
 
24
 
  \qmlproperty Row iconRow
25
 
  \qmlcm area that can hold a set of icons
26
 
 
27
 
  \qmlproperty string titleText
28
 
  \qmlcm sets the text shown on the header
29
 
 
30
 
  \qmlproperty color titleTextColor
31
 
  \qmlcm sets the color of the text shown on the header
32
 
 
33
 
  \qmlproperty Component detailsComponent
34
 
  \qmlcm contains the content to be shown when the box is expanded
35
 
 
36
 
  \qmlproperty Item detailsItem
37
 
  \qmlcm stores the contents when created
38
 
 
39
 
  \qmlproperty int buttonHeight
40
 
  \qmlcm this defines how big the Expanding box is when it's not extended. If you change the orientation and the size, you have to set these too.
41
 
 
42
 
  \qmlproperty int buttonWidth
43
 
  \qmlcm this defines how big the Expanding box is when it's not extended. If you change the orientation and the size, you have to set these too.
44
 
 
45
 
  \qmlproperty Item headerContent
46
 
  \qmlcm this Item will appear in the header. It can be used to create complex custom headers.
47
 
 
48
 
  \qmlproperty string orientation
49
 
  \qmlcm this value defines how ExpandingBox is orientated. Possible values are: "horizontal" - expands to lower; "vertical" - expands to the right. Default is 'horizontal'.
50
 
  If you change the orientation and the size during runtime, make sure you change the buttonWidth and buttonHeight too.
51
 
 
52
 
  \qmlproperty bool lazyCreation
53
 
  \qmlcm this value defines how ExpandingBox is created. By default (false), content to expand is created when the ExpandingBox is first instantiated.  Setting this property to true delays content created if and until the box is expanded.
54
 
 
55
 
  \section2 Signals
56
 
  \qmlproperty [signal] expandingChanged
57
 
  \qmlcm emitted if the box switches between expanded and not expanded
58
 
        \param bool expanded
59
 
        \qmlpcm indicates if the box is expanded or not \endparam
60
 
 
61
 
  \section2 Functions
62
 
  \qmlnone
63
 
 
64
 
  \section2 Example
65
 
  \qml
66
 
      ExpandingBox {
67
 
          id: expandingBox
68
 
 
69
 
          width: 200
70
 
          height: 75
71
 
          titleText: "ExpandingBox"
72
 
          titleTextColor: "black"
73
 
          anchors.centerIn:  parent
74
 
          detailsComponent: expandingBoxComponent
75
 
 
76
 
          Component {
77
 
              id: expandingBoxComponent
78
 
 
79
 
              Rectangle {
80
 
                   id: rect
81
 
 
82
 
                   color: "blue"
83
 
                   height: 50; width: 150
84
 
                   anchors.centerIn: parent
85
 
 
86
 
                   Button {
87
 
                       text: "Switch"  // switches orientation to vertical
88
 
                       onClicked: {
89
 
                           expandingBox.width = 75
90
 
                           expandingBox.height = 200
91
 
                           expandingBox.buttonWidth = 75
92
 
                           expandingBox.buttonHeight = 200
93
 
                           expandingBox.orientation = "vertical"   // this has to be last, since it triggers the changes
94
 
                       }
95
 
                   }
96
 
              }
97
 
          }
98
 
      }
99
 
  \endqml
100
 
*/
101
 
 
102
 
import Qt 4.7
103
 
import MeeGo.Ux.Kernel 0.1
104
 
import MeeGo.Ux.Components.Common 0.1
105
 
import org.kde.plasma.core 0.1 as PlasmaCore
106
 
import org.kde.plasma.components 0.1 as PlasmaComponents
107
 
 
108
 
PlasmaComponents.ListItem {
109
 
    id: expandingBox
110
 
    enabled: true
111
 
 
112
 
    checked: expanded
113
 
    onClicked: expanded = !expanded
114
 
 
115
 
    property bool expanded: false
116
 
    property alias titleText: titleText.text
117
 
    property alias titleTextColor: titleText.color
118
 
    property Component detailsComponent: null
119
 
    property Item detailsItem: null
120
 
    property alias iconRow: iconArea.children
121
 
    property int buttonHeight: 13
122
 
    property int buttonWidth: 13
123
 
    property alias headerContent: headerContentArea.children
124
 
    property string orientation: "horizontal"
125
 
    property bool lazyCreation: false
126
 
 
127
 
    signal expandingChanged( bool expanded )
128
 
 
129
 
    width: 250
130
 
    height: 45// + ( ( titleText.font.pixelSize > expandButton.height ) ? titleText.font.pixelSize : expandButton.height )
131
 
    clip: true
132
 
 
133
 
    // if new content is set, destroy any old content and create the new one
134
 
    onDetailsComponentChanged: {
135
 
        if( detailsItem ) {
136
 
            detailsItem.destroy()
137
 
            detailsItem = null
138
 
        }
139
 
        if (expanded || !lazyCreation) {
140
 
            //console.log("Creating expanding box!") 
141
 
            detailsItem = detailsComponent.createObject( boxDetailsArea )
142
 
        }
143
 
        pulldownImage.componentCompleted  = true
144
 
    }
145
 
 
146
 
    // if content has been set, destroy any old content and create the new one
147
 
    Component.onCompleted: {
148
 
        buttonHeight = height
149
 
        buttonWidth = width
150
 
        pulldownImage.boxReady = true
151
 
        if( !lazyCreation && detailsComponent && !pulldownImage.componentCompleted ) {
152
 
            if ( detailsItem ) detailsItem.destroy()
153
 
            detailsItem = detailsComponent.boxDetailsArea( boxDetailsArea )
154
 
        }
155
 
    }
156
 
 
157
 
    // if the expanded state changes, propagate the change via signal
158
 
    onExpandedChanged: {
159
 
        if (expanded) {
160
 
            if( !detailsItem ) {
161
 
                //console.log("Creating expanding box!") 
162
 
                detailsItem = detailsComponent.createObject( boxDetailsArea )
163
 
            }
164
 
        }
165
 
        expandingBox.expandingChanged( expanded )
166
 
    }
167
 
 
168
 
    Item {
169
 
        id: pulldownImage
170
 
 
171
 
        property bool componentCompleted: false
172
 
        property int animationTime: 200
173
 
        property bool boxReady: false
174
 
 
175
 
 
176
 
        height: expandingBox.height
177
 
        width: expandingBox.width
178
 
 
179
 
 
180
 
        // the header item contains the title, the image for the button which indicates
181
 
        // the expanded state and a GestreuArea to change the expanded state on click
182
 
        Item {
183
 
            id: header
184
 
 
185
 
            // the header adapts its height to the height of the title and the button plus some space
186
 
            height: ( expandingBox.orientation == "horizontal" ) ? buttonHeight : parent.height
187
 
            width: ( expandingBox.orientation == "horizontal" ) ? parent.width : buttonWidth
188
 
 
189
 
            anchors.top:  parent.top
190
 
 
191
 
            Row {
192
 
                id: iconArea
193
 
 
194
 
                anchors { left: parent.left; margins: 5 }
195
 
                anchors.verticalCenter: expandButton.verticalCenter
196
 
                spacing: anchors.margins
197
 
            }
198
 
 
199
 
            PlasmaComponents.Label {
200
 
                id: titleText
201
 
 
202
 
                elide: Text.ElideRight
203
 
                anchors.left: iconArea.right
204
 
                anchors.right: expandButton.left
205
 
                anchors.leftMargin: 10
206
 
                anchors.verticalCenter: expandButton.verticalCenter
207
 
            }
208
 
 
209
 
            Item {
210
 
                id: headerContentArea
211
 
 
212
 
                x: 5
213
 
                y: 5
214
 
 
215
 
                width: ( expandingBox.orientation == "horizontal" ) ? expandingBox.width - expandButton.width - 6 * 2 - 10 : parent.width - 10
216
 
                height: ( expandingBox.orientation == "horizontal" ) ? parent.height -10 : expandingBox.height - expandButton.height - 6 * 2 - 10
217
 
 
218
 
                clip: true
219
 
            }
220
 
 
221
 
            PlasmaCore.SvgItem {
222
 
                id: expandButton
223
 
 
224
 
 
225
 
                x: ( expandingBox.orientation == "horizontal" ) ? expandingBox.width - width - 6 :  (header.width - width) / 2
226
 
                y: ( expandingBox.orientation == "horizontal" ) ? (header.height - height) / 2 :  expandingBox.height - height - 6
227
 
 
228
 
                svg: PlasmaCore.Svg {
229
 
                    imagePath: "widgets/arrows"
230
 
                }
231
 
                width: naturalSize.width
232
 
                height: naturalSize.height
233
 
                elementId: expandingBox.expanded ? "up-arrow" : "down-arrow"
234
 
            }
235
 
        }
236
 
 
237
 
        // this item is used when creating the content in the detailsItem to set some general properties
238
 
        Item {
239
 
            id: boxDetailsArea
240
 
 
241
 
            property int itemMargins: 3
242
 
            opacity: 0
243
 
 
244
 
            clip: true
245
 
            visible: expandingBox.expanded
246
 
            anchors {
247
 
                top: ( expandingBox.orientation == "horizontal" ) ? header.bottom : parent.top
248
 
                left: ( expandingBox.orientation == "horizontal" ) ? parent.left : header.right
249
 
                bottom: parent.bottom
250
 
                right: parent.right
251
 
                margins: itemMargins
252
 
            }
253
 
        }
254
 
    }
255
 
 
256
 
    onOrientationChanged: {
257
 
        if(!pulldownImage.boxReady)
258
 
            return
259
 
 
260
 
        var oldExpanded = expanded
261
 
        pulldownImage.animationTime = 0
262
 
        expanded = false
263
 
        height = buttonHeight
264
 
        width = buttonWidth
265
 
        expanded = oldExpanded
266
 
        pulldownImage.animationTime = 200
267
 
    }
268
 
 
269
 
    states: [
270
 
        State {
271
 
            name: "expanded"
272
 
 
273
 
            PropertyChanges {
274
 
                target: expandingBox
275
 
                height: buttonHeight + detailsItem.height + boxDetailsArea.itemMargins * 2
276
 
            }
277
 
 
278
 
            PropertyChanges {
279
 
                target: boxDetailsArea
280
 
                visible: true
281
 
                opacity: 1.0
282
 
            }
283
 
 
284
 
            when: { expandingBox.expanded && expandingBox.orientation == "horizontal" }
285
 
        },
286
 
 
287
 
        State {
288
 
            name: "expandedVertical"
289
 
 
290
 
            PropertyChanges {
291
 
                target: expandingBox
292
 
                width: buttonWidth + detailsItem.width + boxDetailsArea.itemMargins * 2
293
 
            }
294
 
 
295
 
            PropertyChanges {
296
 
                target: boxDetailsArea
297
 
                visible: true
298
 
                opacity: 1.0
299
 
            }
300
 
 
301
 
            when: { expandingBox.expanded && expandingBox.orientation == "vertical" }
302
 
        }
303
 
    ]
304
 
 
305
 
    transitions: [
306
 
        Transition {
307
 
            SequentialAnimation {
308
 
                ParallelAnimation{
309
 
                    NumberAnimation {
310
 
                        properties: "height"
311
 
                        duration: pulldownImage.animationTime
312
 
                        easing.type: Easing.InCubic
313
 
                    }
314
 
                    NumberAnimation {
315
 
                        properties: "width"
316
 
                        duration: pulldownImage.animationTime
317
 
                        easing.type: Easing.InCubic
318
 
                    }
319
 
                }
320
 
                NumberAnimation {
321
 
                    properties: "opacity"
322
 
                    duration: pulldownImage.animationTime
323
 
                    easing.type: Easing.OutCubic
324
 
                }
325
 
            }
326
 
        }
327
 
    ]
328
 
}