Merge lp:~nik90/component-store/add-radial-bottom-edge into lp:component-store
- add-radial-bottom-edge
- Merge into trunk.14.10
Proposed by
Nekhelesh Ramananthan
Status: | Merged |
---|---|
Merged at revision: | 39 |
Proposed branch: | lp:~nik90/component-store/add-radial-bottom-edge |
Merge into: | lp:component-store |
Diff against target: |
546 lines (+437/-1) 12 files modified
ComponentStore/RadialBottomEdge/RadialAction.qml (+8/-0) ComponentStore/RadialBottomEdge/RadialBottomEdge.qml (+194/-0) GallerySRC/RadialBottomEdgeWidget.qml (+56/-0) GallerySRC/WidgetsModel.qml (+5/-0) docs/_components/circleimage.rst (+2/-0) docs/_components/emptystate.rst (+3/-1) docs/_components/fastscroll.rst (+2/-0) docs/_components/listitemwithactions.rst (+2/-0) docs/_components/pagewithbottomedge.rst (+2/-0) docs/_components/radialbottomedge.rst (+158/-0) docs/index.rst (+1/-0) docs/release.rst (+4/-0) |
To merge this branch: | bzr merge lp:~nik90/component-store/add-radial-bottom-edge |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Ubuntu Touch Community Dev | Pending | ||
Review via email: mp+241873@code.launchpad.net |
Commit message
Added radial bottom edge component
Description of the change
Added radial bottom edge component
To post a comment you must log in.
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1 | === added directory 'ComponentStore/RadialBottomEdge' | |||
2 | === added file 'ComponentStore/RadialBottomEdge/RadialAction.qml' | |||
3 | --- ComponentStore/RadialBottomEdge/RadialAction.qml 1970-01-01 00:00:00 +0000 | |||
4 | +++ ComponentStore/RadialBottomEdge/RadialAction.qml 2014-11-15 15:00:12 +0000 | |||
5 | @@ -0,0 +1,8 @@ | |||
6 | 1 | import QtQuick 2.0 | ||
7 | 2 | import Ubuntu.Components 1.1 | ||
8 | 3 | |||
9 | 4 | Action { | ||
10 | 5 | property string iconName: "add" | ||
11 | 6 | property color iconColor: "Black" | ||
12 | 7 | property color backgroundColor: "White" | ||
13 | 8 | } | ||
14 | 0 | 9 | ||
15 | === added file 'ComponentStore/RadialBottomEdge/RadialBottomEdge.qml' | |||
16 | --- ComponentStore/RadialBottomEdge/RadialBottomEdge.qml 1970-01-01 00:00:00 +0000 | |||
17 | +++ ComponentStore/RadialBottomEdge/RadialBottomEdge.qml 2014-11-15 15:00:12 +0000 | |||
18 | @@ -0,0 +1,194 @@ | |||
19 | 1 | import QtQuick 2.0 | ||
20 | 2 | import Ubuntu.Components 1.1 | ||
21 | 3 | |||
22 | 4 | Item { | ||
23 | 5 | id: bottomEdge | ||
24 | 6 | |||
25 | 7 | property int hintSize: units.gu(8) | ||
26 | 8 | property color hintColor: Theme.palette.normal.overlay | ||
27 | 9 | property string hintIconName: "view-grid-symbolic" | ||
28 | 10 | property alias hintIconSource: hintIcon.source | ||
29 | 11 | property color hintIconColor: UbuntuColors.coolGrey | ||
30 | 12 | property bool bottomEdgeEnabled: true | ||
31 | 13 | |||
32 | 14 | property real expandedPosition: 0.6 * height | ||
33 | 15 | property real collapsedPosition: height - hintSize/2 | ||
34 | 16 | |||
35 | 17 | property list<RadialAction> actions | ||
36 | 18 | property real actionButtonSize: units.gu(7) | ||
37 | 19 | property real actionButtonDistance: 1.5* hintSize | ||
38 | 20 | |||
39 | 21 | anchors.fill: parent | ||
40 | 22 | |||
41 | 23 | Rectangle { | ||
42 | 24 | id: bgVisual | ||
43 | 25 | |||
44 | 26 | z: 1 | ||
45 | 27 | color: "black" | ||
46 | 28 | anchors.fill: parent | ||
47 | 29 | opacity: 0.7 * ((bottomEdge.height - bottomEdgeHint.y) / bottomEdge.height) | ||
48 | 30 | } | ||
49 | 31 | |||
50 | 32 | Rectangle { | ||
51 | 33 | id: bottomEdgeHint | ||
52 | 34 | |||
53 | 35 | color: hintColor | ||
54 | 36 | width: hintSize | ||
55 | 37 | height: width | ||
56 | 38 | radius: width/2 | ||
57 | 39 | visible: bottomEdgeEnabled | ||
58 | 40 | |||
59 | 41 | anchors.horizontalCenter: parent.horizontalCenter | ||
60 | 42 | y: collapsedPosition | ||
61 | 43 | z: parent.z + 1 | ||
62 | 44 | |||
63 | 45 | Icon { | ||
64 | 46 | id: hintIcon | ||
65 | 47 | width: hintSize/4 | ||
66 | 48 | height: width | ||
67 | 49 | name: hintIconName | ||
68 | 50 | color: hintIconColor | ||
69 | 51 | anchors { | ||
70 | 52 | centerIn: parent | ||
71 | 53 | verticalCenterOffset: width * ((bottomEdgeHint.y - expandedPosition) | ||
72 | 54 | /(expandedPosition - collapsedPosition)) | ||
73 | 55 | } | ||
74 | 56 | } | ||
75 | 57 | |||
76 | 58 | property real actionListDistance: -actionButtonDistance * ((bottomEdgeHint.y - collapsedPosition) | ||
77 | 59 | /(collapsedPosition - expandedPosition)) | ||
78 | 60 | |||
79 | 61 | Repeater { | ||
80 | 62 | id: actionList | ||
81 | 63 | model: actions | ||
82 | 64 | delegate: Rectangle { | ||
83 | 65 | id: actionDelegate | ||
84 | 66 | readonly property real radAngle: (index % actionList.count * (360/actionList.count)) * Math.PI / 180 | ||
85 | 67 | property real distance: bottomEdgeHint.actionListDistance | ||
86 | 68 | z: -1 | ||
87 | 69 | width: actionButtonSize | ||
88 | 70 | height: width | ||
89 | 71 | radius: width/2 | ||
90 | 72 | anchors.centerIn: parent | ||
91 | 73 | color: modelData.backgroundColor | ||
92 | 74 | transform: Translate { | ||
93 | 75 | x: distance * Math.sin(radAngle) | ||
94 | 76 | y: -distance * Math.cos(radAngle) | ||
95 | 77 | } | ||
96 | 78 | |||
97 | 79 | Icon { | ||
98 | 80 | anchors.centerIn: parent | ||
99 | 81 | width: parent.width/2 | ||
100 | 82 | height: width | ||
101 | 83 | name: modelData.iconName | ||
102 | 84 | color: modelData.iconColor | ||
103 | 85 | } | ||
104 | 86 | |||
105 | 87 | MouseArea { | ||
106 | 88 | anchors.fill: parent | ||
107 | 89 | onClicked: { | ||
108 | 90 | bottomEdgeHint.state = "collapsed" | ||
109 | 91 | modelData.triggered(null) | ||
110 | 92 | } | ||
111 | 93 | } | ||
112 | 94 | } | ||
113 | 95 | } | ||
114 | 96 | |||
115 | 97 | MouseArea { | ||
116 | 98 | id: mouseArea | ||
117 | 99 | |||
118 | 100 | property real previousY: -1 | ||
119 | 101 | property string dragDirection: "None" | ||
120 | 102 | |||
121 | 103 | z: 1 | ||
122 | 104 | anchors.fill: parent | ||
123 | 105 | visible: bottomEdgeEnabled | ||
124 | 106 | |||
125 | 107 | preventStealing: true | ||
126 | 108 | drag { | ||
127 | 109 | axis: Drag.YAxis | ||
128 | 110 | target: bottomEdgeHint | ||
129 | 111 | minimumY: expandedPosition | ||
130 | 112 | maximumY: collapsedPosition | ||
131 | 113 | } | ||
132 | 114 | |||
133 | 115 | onReleased: { | ||
134 | 116 | if ((dragDirection === "BottomToTop") && | ||
135 | 117 | bottomEdgeHint.y < collapsedPosition) { | ||
136 | 118 | bottomEdgeHint.state = "expanded" | ||
137 | 119 | } else { | ||
138 | 120 | if (bottomEdgeHint.state === "collapsed") { | ||
139 | 121 | bottomEdgeHint.y = collapsedPosition | ||
140 | 122 | } | ||
141 | 123 | bottomEdgeHint.state = "collapsed" | ||
142 | 124 | } | ||
143 | 125 | previousY = -1 | ||
144 | 126 | dragDirection = "None" | ||
145 | 127 | } | ||
146 | 128 | |||
147 | 129 | onClicked: { | ||
148 | 130 | if (bottomEdgeHint.y === collapsedPosition) | ||
149 | 131 | bottomEdgeHint.state = "expanded" | ||
150 | 132 | else | ||
151 | 133 | bottomEdgeHint.state = "collapsed" | ||
152 | 134 | } | ||
153 | 135 | |||
154 | 136 | onPressed: { | ||
155 | 137 | previousY = bottomEdgeHint.y | ||
156 | 138 | } | ||
157 | 139 | |||
158 | 140 | onMouseYChanged: { | ||
159 | 141 | var yOffset = previousY - bottomEdgeHint.y | ||
160 | 142 | if (Math.abs(yOffset) <= units.gu(2)) { | ||
161 | 143 | return | ||
162 | 144 | } | ||
163 | 145 | previousY = bottomEdgeHint.y | ||
164 | 146 | dragDirection = yOffset > 0 ? "BottomToTop" : "TopToBottom" | ||
165 | 147 | } | ||
166 | 148 | } | ||
167 | 149 | |||
168 | 150 | state: "collapsed" | ||
169 | 151 | states: [ | ||
170 | 152 | State { | ||
171 | 153 | name: "collapsed" | ||
172 | 154 | PropertyChanges { | ||
173 | 155 | target: bottomEdgeHint | ||
174 | 156 | y: collapsedPosition | ||
175 | 157 | } | ||
176 | 158 | }, | ||
177 | 159 | State { | ||
178 | 160 | name: "expanded" | ||
179 | 161 | PropertyChanges { | ||
180 | 162 | target: bottomEdgeHint | ||
181 | 163 | y: expandedPosition | ||
182 | 164 | } | ||
183 | 165 | }, | ||
184 | 166 | |||
185 | 167 | State { | ||
186 | 168 | name: "floating" | ||
187 | 169 | when: mouseArea.drag.active | ||
188 | 170 | } | ||
189 | 171 | ] | ||
190 | 172 | |||
191 | 173 | transitions: [ | ||
192 | 174 | Transition { | ||
193 | 175 | to: "expanded" | ||
194 | 176 | SpringAnimation { | ||
195 | 177 | target: bottomEdgeHint | ||
196 | 178 | property: "y" | ||
197 | 179 | spring: 2 | ||
198 | 180 | damping: 0.2 | ||
199 | 181 | } | ||
200 | 182 | }, | ||
201 | 183 | |||
202 | 184 | Transition { | ||
203 | 185 | to: "collapsed" | ||
204 | 186 | SmoothedAnimation { | ||
205 | 187 | target: bottomEdgeHint | ||
206 | 188 | property: "y" | ||
207 | 189 | duration: UbuntuAnimation.BriskDuration | ||
208 | 190 | } | ||
209 | 191 | } | ||
210 | 192 | ] | ||
211 | 193 | } | ||
212 | 194 | } | ||
213 | 0 | 195 | ||
214 | === added file 'GallerySRC/RadialBottomEdgeWidget.qml' | |||
215 | --- GallerySRC/RadialBottomEdgeWidget.qml 1970-01-01 00:00:00 +0000 | |||
216 | +++ GallerySRC/RadialBottomEdgeWidget.qml 2014-11-15 15:00:12 +0000 | |||
217 | @@ -0,0 +1,56 @@ | |||
218 | 1 | import QtQuick 2.0 | ||
219 | 2 | import Ubuntu.Components 1.1 | ||
220 | 3 | import "../ComponentStore/RadialBottomEdge" | ||
221 | 4 | |||
222 | 5 | TemplateWidgetPage { | ||
223 | 6 | id: circleImageWidget | ||
224 | 7 | |||
225 | 8 | title: "Radial Bottom Edge" | ||
226 | 9 | author: "Nekhelesh Ramananthan" | ||
227 | 10 | email: "nik90@ubuntu.com" | ||
228 | 11 | license: "GNU General Public License v3.0" | ||
229 | 12 | description: "This widget adds a bottom edge which provides access to \ | ||
230 | 13 | action buttons presented in a radial fashion." | ||
231 | 14 | |||
232 | 15 | content: RadialBottomEdge { | ||
233 | 16 | actions: [ | ||
234 | 17 | RadialAction { | ||
235 | 18 | iconName: "alarm-clock" | ||
236 | 19 | iconColor: UbuntuColors.coolGrey | ||
237 | 20 | onTriggered: console.log("Alarm..zZz") | ||
238 | 21 | }, | ||
239 | 22 | RadialAction { | ||
240 | 23 | iconName: "settings" | ||
241 | 24 | iconColor: UbuntuColors.coolGrey | ||
242 | 25 | }, | ||
243 | 26 | |||
244 | 27 | RadialAction { | ||
245 | 28 | iconName: "save" | ||
246 | 29 | iconColor: "white" | ||
247 | 30 | backgroundColor: UbuntuColors.green | ||
248 | 31 | onTriggered: console.log("save") | ||
249 | 32 | }, | ||
250 | 33 | |||
251 | 34 | RadialAction { | ||
252 | 35 | iconName: "delete" | ||
253 | 36 | iconColor: "white" | ||
254 | 37 | backgroundColor: UbuntuColors.red | ||
255 | 38 | onTriggered: console.log("delete") | ||
256 | 39 | }, | ||
257 | 40 | |||
258 | 41 | RadialAction { | ||
259 | 42 | iconName: "add" | ||
260 | 43 | iconColor: "white" | ||
261 | 44 | backgroundColor: UbuntuColors.green | ||
262 | 45 | }, | ||
263 | 46 | |||
264 | 47 | RadialAction { | ||
265 | 48 | iconName: "stock_email" | ||
266 | 49 | iconColor: UbuntuColors.coolGrey | ||
267 | 50 | } | ||
268 | 51 | ] | ||
269 | 52 | } | ||
270 | 53 | } | ||
271 | 54 | |||
272 | 55 | |||
273 | 56 | |||
274 | 0 | 57 | ||
275 | === modified file 'GallerySRC/WidgetsModel.qml' | |||
276 | --- GallerySRC/WidgetsModel.qml 2014-11-12 15:27:00 +0000 | |||
277 | +++ GallerySRC/WidgetsModel.qml 2014-11-15 15:00:12 +0000 | |||
278 | @@ -27,4 +27,9 @@ | |||
279 | 27 | label: "Page With Bottom Edge" | 27 | label: "Page With Bottom Edge" |
280 | 28 | source: "GallerySRC/BottomEdgeWidget.qml" | 28 | source: "GallerySRC/BottomEdgeWidget.qml" |
281 | 29 | } | 29 | } |
282 | 30 | |||
283 | 31 | ListElement { | ||
284 | 32 | label: "Radial Bottom Edge" | ||
285 | 33 | source: "GallerySRC/RadialBottomEdgeWidget.qml" | ||
286 | 34 | } | ||
287 | 30 | } | 35 | } |
288 | 31 | 36 | ||
289 | === modified file 'docs/_components/circleimage.rst' | |||
290 | --- docs/_components/circleimage.rst 2014-11-09 16:01:02 +0000 | |||
291 | +++ docs/_components/circleimage.rst 2014-11-15 15:00:12 +0000 | |||
292 | @@ -8,6 +8,8 @@ | |||
293 | 8 | +----------+---------------------------------+ | 8 | +----------+---------------------------------+ |
294 | 9 | | Contact | mspencer@sonrisesoftware.com | | 9 | | Contact | mspencer@sonrisesoftware.com | |
295 | 10 | +----------+---------------------------------+ | 10 | +----------+---------------------------------+ |
296 | 11 | | Framework| ubuntu-sdk-14.10 | | ||
297 | 12 | +----------+---------------------------------+ | ||
298 | 11 | 13 | ||
299 | 12 | This widget converts any image into a circular sized image which can be useful for showing user profile pictures. As trivial as this might look, it is not a straightforward solution in QML. | 14 | This widget converts any image into a circular sized image which can be useful for showing user profile pictures. As trivial as this might look, it is not a straightforward solution in QML. |
300 | 13 | 15 | ||
301 | 14 | 16 | ||
302 | === modified file 'docs/_components/emptystate.rst' | |||
303 | --- docs/_components/emptystate.rst 2014-11-06 17:03:51 +0000 | |||
304 | +++ docs/_components/emptystate.rst 2014-11-15 15:00:12 +0000 | |||
305 | @@ -4,10 +4,12 @@ | |||
306 | 4 | +----------+---------------------------------+ | 4 | +----------+---------------------------------+ |
307 | 5 | | Author | Nekhelesh Ramananthan | | 5 | | Author | Nekhelesh Ramananthan | |
308 | 6 | +----------+-------------+-------------------+ | 6 | +----------+-------------+-------------------+ |
310 | 7 | | License | GNU General Public License v3.0 | | 7 | | License | BSD License | |
311 | 8 | +----------+---------------------------------+ | 8 | +----------+---------------------------------+ |
312 | 9 | | Contact | nik90@ubuntu.com | | 9 | | Contact | nik90@ubuntu.com | |
313 | 10 | +----------+---------------------------------+ | 10 | +----------+---------------------------------+ |
314 | 11 | | Framework| ubuntu-sdk-14.10 | | ||
315 | 12 | +----------+---------------------------------+ | ||
316 | 11 | 13 | ||
317 | 12 | This widget provides a standardized way to show an empty state (approved by Canonical designers) | 14 | This widget provides a standardized way to show an empty state (approved by Canonical designers) |
318 | 13 | to improve the user experience and avoid showing a blank page. This way the user is not left starring | 15 | to improve the user experience and avoid showing a blank page. This way the user is not left starring |
319 | 14 | 16 | ||
320 | === modified file 'docs/_components/fastscroll.rst' | |||
321 | --- docs/_components/fastscroll.rst 2014-11-08 21:34:25 +0000 | |||
322 | +++ docs/_components/fastscroll.rst 2014-11-15 15:00:12 +0000 | |||
323 | @@ -8,6 +8,8 @@ | |||
324 | 8 | +----------+---------------------------------+ | 8 | +----------+---------------------------------+ |
325 | 9 | | Contact | renato.filho@canonical.com | | 9 | | Contact | renato.filho@canonical.com | |
326 | 10 | +----------+---------------------------------+ | 10 | +----------+---------------------------------+ |
327 | 11 | | Framework| ubuntu-sdk-14.10 | | ||
328 | 12 | +----------+---------------------------------+ | ||
329 | 11 | 13 | ||
330 | 12 | This widget provides a quick way to navigate long list views by providing | 14 | This widget provides a quick way to navigate long list views by providing |
331 | 13 | a fast scroll. Example use cases are scrolling through an address book with | 15 | a fast scroll. Example use cases are scrolling through an address book with |
332 | 14 | 16 | ||
333 | === modified file 'docs/_components/listitemwithactions.rst' | |||
334 | --- docs/_components/listitemwithactions.rst 2014-11-12 16:25:04 +0000 | |||
335 | +++ docs/_components/listitemwithactions.rst 2014-11-15 15:00:12 +0000 | |||
336 | @@ -8,6 +8,8 @@ | |||
337 | 8 | +----------+---------------------------------+ | 8 | +----------+---------------------------------+ |
338 | 9 | | Contact | renato.filho@canonical.com | | 9 | | Contact | renato.filho@canonical.com | |
339 | 10 | +----------+---------------------------------+ | 10 | +----------+---------------------------------+ |
340 | 11 | | Framework| ubuntu-sdk-14.10 | | ||
341 | 12 | +----------+---------------------------------+ | ||
342 | 11 | 13 | ||
343 | 12 | This widget provides an updated listitem which is what the core apps currently use. | 14 | This widget provides an updated listitem which is what the core apps currently use. |
344 | 13 | These listitems will be provided by the SDK with vivid onwards. However current RMT | 15 | These listitems will be provided by the SDK with vivid onwards. However current RMT |
345 | 14 | 16 | ||
346 | === modified file 'docs/_components/pagewithbottomedge.rst' | |||
347 | --- docs/_components/pagewithbottomedge.rst 2014-11-09 16:01:02 +0000 | |||
348 | +++ docs/_components/pagewithbottomedge.rst 2014-11-15 15:00:12 +0000 | |||
349 | @@ -8,6 +8,8 @@ | |||
350 | 8 | +----------+---------------------------------+ | 8 | +----------+---------------------------------+ |
351 | 9 | | Contact | renato.filho@canonical.com | | 9 | | Contact | renato.filho@canonical.com | |
352 | 10 | +----------+---------------------------------+ | 10 | +----------+---------------------------------+ |
353 | 11 | | Framework| ubuntu-sdk-14.10 | | ||
354 | 12 | +----------+---------------------------------+ | ||
355 | 11 | 13 | ||
356 | 12 | This component provides a bottom edge which can be used to house common actions. There is only one bottom edge | 14 | This component provides a bottom edge which can be used to house common actions. There is only one bottom edge |
357 | 13 | available for a page. Only one. The user can use it without looking where they are pressing. Think carefully | 15 | available for a page. Only one. The user can use it without looking where they are pressing. Think carefully |
358 | 14 | 16 | ||
359 | === added file 'docs/_components/radialbottomedge.rst' | |||
360 | --- docs/_components/radialbottomedge.rst 1970-01-01 00:00:00 +0000 | |||
361 | +++ docs/_components/radialbottomedge.rst 2014-11-15 15:00:12 +0000 | |||
362 | @@ -0,0 +1,158 @@ | |||
363 | 1 | Radial Bottom Edge | ||
364 | 2 | ================== | ||
365 | 3 | |||
366 | 4 | +----------+---------------------------------+ | ||
367 | 5 | | Author | Nekhelesh Ramananthan | | ||
368 | 6 | +----------+-------------+-------------------+ | ||
369 | 7 | | License | BSD License | | ||
370 | 8 | +----------+---------------------------------+ | ||
371 | 9 | | Contact | nik90@ubuntu.com | | ||
372 | 10 | +----------+---------------------------------+ | ||
373 | 11 | | Framework| ubuntu-sdk-14.10 | | ||
374 | 12 | +----------+---------------------------------+ | ||
375 | 13 | |||
376 | 14 | This component provides a unique way to show actions buttons using the bottom | ||
377 | 15 | edge. It allows app developers to decide how many actions they want to show | ||
378 | 16 | and customize it to their liking. | ||
379 | 17 | |||
380 | 18 | Example: | ||
381 | 19 | |||
382 | 20 | .. code-block:: qml | ||
383 | 21 | |||
384 | 22 | RadialBottomEdge { | ||
385 | 23 | actions: [ | ||
386 | 24 | RadialAction { | ||
387 | 25 | iconName: "alarm-clock" | ||
388 | 26 | iconColor: UbuntuColors.coolGrey | ||
389 | 27 | onTriggered: console.log("Alarm..zZz") | ||
390 | 28 | }, | ||
391 | 29 | |||
392 | 30 | RadialAction { | ||
393 | 31 | iconName: "settings" | ||
394 | 32 | iconColor: UbuntuColors.coolGrey | ||
395 | 33 | }, | ||
396 | 34 | |||
397 | 35 | RadialAction { | ||
398 | 36 | iconName: "save" | ||
399 | 37 | iconColor: "white" | ||
400 | 38 | backgroundColor: UbuntuColors.green | ||
401 | 39 | onTriggered: console.log("save") | ||
402 | 40 | }, | ||
403 | 41 | |||
404 | 42 | RadialAction { | ||
405 | 43 | iconName: "delete" | ||
406 | 44 | iconColor: "white" | ||
407 | 45 | backgroundColor: UbuntuColors.red | ||
408 | 46 | onTriggered: console.log("delete") | ||
409 | 47 | }, | ||
410 | 48 | |||
411 | 49 | RadialAction { | ||
412 | 50 | iconName: "add" | ||
413 | 51 | iconColor: "white" | ||
414 | 52 | backgroundColor: UbuntuColors.green | ||
415 | 53 | }, | ||
416 | 54 | |||
417 | 55 | RadialAction { | ||
418 | 56 | iconName: "stock_email" | ||
419 | 57 | iconColor: UbuntuColors.coolGrey | ||
420 | 58 | } | ||
421 | 59 | ] | ||
422 | 60 | } | ||
423 | 61 | |||
424 | 62 | .. image:: ../_images/radialbottomedge.png | ||
425 | 63 | :align: center | ||
426 | 64 | |||
427 | 65 | Properties | ||
428 | 66 | ---------- | ||
429 | 67 | |||
430 | 68 | - :ref:`hintSize`: int | ||
431 | 69 | - :ref:`hintColor`: color | ||
432 | 70 | - :ref:`hintIconName`: string | ||
433 | 71 | - :ref:`hintIconSource`: url | ||
434 | 72 | - :ref:`hintIconColor`: color | ||
435 | 73 | - :ref:`bottomEdgeEnabled`: boolean | ||
436 | 74 | - :ref:`actions`: RadialAction <list> | ||
437 | 75 | - :ref:`actionButtonSize`: int | ||
438 | 76 | - :ref:`actionButtonDistance`: int | ||
439 | 77 | |||
440 | 78 | .. note:: All properties except for *hintIconSource* have well defined defaults. As a developer, you could choose to go with the defaults or change them to your liking. | ||
441 | 79 | |||
442 | 80 | Property Documentation | ||
443 | 81 | ---------------------- | ||
444 | 82 | |||
445 | 83 | .. _hintSize: | ||
446 | 84 | |||
447 | 85 | hintSize | ||
448 | 86 | ^^^^^^^^ | ||
449 | 87 | |||
450 | 88 | The size of the hint shown in the bottom edge. It defaults to 8 grid units. | ||
451 | 89 | |||
452 | 90 | .. _hintColor: | ||
453 | 91 | |||
454 | 92 | hintColor | ||
455 | 93 | ^^^^^^^^^ | ||
456 | 94 | |||
457 | 95 | The background color of the hint shown in the bottom edge. By default it uses | ||
458 | 96 | the ubuntu palette's overlay color. | ||
459 | 97 | |||
460 | 98 | .. _hintIconName: | ||
461 | 99 | |||
462 | 100 | hintIconName | ||
463 | 101 | ^^^^^^^^^^^^ | ||
464 | 102 | |||
465 | 103 | The name of the icon to display. Valid icon names can be found in the suru-icon-theme. | ||
466 | 104 | |||
467 | 105 | .. note:: If both :ref:`hintIconName` and :ref:`hintIconSource` are specified, then :ref:`hintIconName` will be ignored. | ||
468 | 106 | |||
469 | 107 | .. _hintIconSource: | ||
470 | 108 | |||
471 | 109 | hintIconSource | ||
472 | 110 | ^^^^^^^^^^^^^^ | ||
473 | 111 | |||
474 | 112 | The source url of the icon to display. It has precedence over :ref:`hintIconName`. | ||
475 | 113 | |||
476 | 114 | .. _hintIconColor: | ||
477 | 115 | |||
478 | 116 | hintIconColor | ||
479 | 117 | ^^^^^^^^^^^^^ | ||
480 | 118 | |||
481 | 119 | The color of the icon displayed in the hint. | ||
482 | 120 | |||
483 | 121 | .. _bottomEdgeEnabled: | ||
484 | 122 | |||
485 | 123 | bottomEdgeEnabled | ||
486 | 124 | ^^^^^^^^^^^^^^^^^ | ||
487 | 125 | |||
488 | 126 | Property to enable/disable the bottom edge. When disabled, the bottom edge hint will be hidden. | ||
489 | 127 | |||
490 | 128 | .. _actions: | ||
491 | 129 | |||
492 | 130 | actions | ||
493 | 131 | ^^^^^^^ | ||
494 | 132 | |||
495 | 133 | This property is used to define a list of actions to be shown in the radial menu. The list takes | ||
496 | 134 | a **RadialAction** which inherits **Action**. A RadialAction adds 3 properties on top of what Action | ||
497 | 135 | provides which are iconName, iconColor and backgroundColor. :: | ||
498 | 136 | |||
499 | 137 | RadialAction { | ||
500 | 138 | iconName: "add" | ||
501 | 139 | iconColor: "white" | ||
502 | 140 | backgroundColor: "green" | ||
503 | 141 | } | ||
504 | 142 | |||
505 | 143 | This helps defining properties for each action separately and allow for customization. | ||
506 | 144 | |||
507 | 145 | .. _actionButtonSize: | ||
508 | 146 | |||
509 | 147 | actionButtonSize | ||
510 | 148 | ^^^^^^^^^^^^^^^^ | ||
511 | 149 | |||
512 | 150 | The size of all the actions buttons. By default it is set to 7 grid units. Increasing this size would also | ||
513 | 151 | require increasing the :ref:`actionButtonDistance` value as well. | ||
514 | 152 | |||
515 | 153 | .. _actionButtonDistance: | ||
516 | 154 | |||
517 | 155 | actionButtonDistance | ||
518 | 156 | ^^^^^^^^^^^^^^^^^^^^ | ||
519 | 157 | |||
520 | 158 | The distance (separation) between the action buttons and the center of the radial menu. | ||
521 | 0 | 159 | ||
522 | === added file 'docs/_images/radialbottomedge.png' | |||
523 | 1 | Binary files docs/_images/radialbottomedge.png 1970-01-01 00:00:00 +0000 and docs/_images/radialbottomedge.png 2014-11-15 15:00:12 +0000 differ | 160 | Binary files docs/_images/radialbottomedge.png 1970-01-01 00:00:00 +0000 and docs/_images/radialbottomedge.png 2014-11-15 15:00:12 +0000 differ |
524 | === modified file 'docs/index.rst' | |||
525 | --- docs/index.rst 2014-11-12 15:54:22 +0000 | |||
526 | +++ docs/index.rst 2014-11-15 15:00:12 +0000 | |||
527 | @@ -53,3 +53,4 @@ | |||
528 | 53 | _components/fastscroll | 53 | _components/fastscroll |
529 | 54 | _components/listitemwithactions | 54 | _components/listitemwithactions |
530 | 55 | _components/pagewithbottomedge | 55 | _components/pagewithbottomedge |
531 | 56 | _components/radialbottomedge | ||
532 | 56 | 57 | ||
533 | === modified file 'docs/release.rst' | |||
534 | --- docs/release.rst 2014-11-12 15:55:24 +0000 | |||
535 | +++ docs/release.rst 2014-11-15 15:00:12 +0000 | |||
536 | @@ -1,6 +1,10 @@ | |||
537 | 1 | Release Notes | 1 | Release Notes |
538 | 2 | ============= | 2 | ============= |
539 | 3 | 3 | ||
540 | 4 | **15th November 2014** | ||
541 | 5 | |||
542 | 6 | * Added radial bottom edge component | ||
543 | 7 | |||
544 | 4 | **12th November 2014** | 8 | **12th November 2014** |
545 | 5 | 9 | ||
546 | 6 | * Fixed typos in the installation guide | 10 | * Fixed typos in the installation guide |