Merge lp:~nik90/component-store/add-radial-bottom-edge into lp:component-store

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
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
=== added directory 'ComponentStore/RadialBottomEdge'
=== added file 'ComponentStore/RadialBottomEdge/RadialAction.qml'
--- ComponentStore/RadialBottomEdge/RadialAction.qml 1970-01-01 00:00:00 +0000
+++ ComponentStore/RadialBottomEdge/RadialAction.qml 2014-11-15 15:00:12 +0000
@@ -0,0 +1,8 @@
1import QtQuick 2.0
2import Ubuntu.Components 1.1
3
4Action {
5 property string iconName: "add"
6 property color iconColor: "Black"
7 property color backgroundColor: "White"
8}
09
=== added file 'ComponentStore/RadialBottomEdge/RadialBottomEdge.qml'
--- ComponentStore/RadialBottomEdge/RadialBottomEdge.qml 1970-01-01 00:00:00 +0000
+++ ComponentStore/RadialBottomEdge/RadialBottomEdge.qml 2014-11-15 15:00:12 +0000
@@ -0,0 +1,194 @@
1import QtQuick 2.0
2import Ubuntu.Components 1.1
3
4Item {
5 id: bottomEdge
6
7 property int hintSize: units.gu(8)
8 property color hintColor: Theme.palette.normal.overlay
9 property string hintIconName: "view-grid-symbolic"
10 property alias hintIconSource: hintIcon.source
11 property color hintIconColor: UbuntuColors.coolGrey
12 property bool bottomEdgeEnabled: true
13
14 property real expandedPosition: 0.6 * height
15 property real collapsedPosition: height - hintSize/2
16
17 property list<RadialAction> actions
18 property real actionButtonSize: units.gu(7)
19 property real actionButtonDistance: 1.5* hintSize
20
21 anchors.fill: parent
22
23 Rectangle {
24 id: bgVisual
25
26 z: 1
27 color: "black"
28 anchors.fill: parent
29 opacity: 0.7 * ((bottomEdge.height - bottomEdgeHint.y) / bottomEdge.height)
30 }
31
32 Rectangle {
33 id: bottomEdgeHint
34
35 color: hintColor
36 width: hintSize
37 height: width
38 radius: width/2
39 visible: bottomEdgeEnabled
40
41 anchors.horizontalCenter: parent.horizontalCenter
42 y: collapsedPosition
43 z: parent.z + 1
44
45 Icon {
46 id: hintIcon
47 width: hintSize/4
48 height: width
49 name: hintIconName
50 color: hintIconColor
51 anchors {
52 centerIn: parent
53 verticalCenterOffset: width * ((bottomEdgeHint.y - expandedPosition)
54 /(expandedPosition - collapsedPosition))
55 }
56 }
57
58 property real actionListDistance: -actionButtonDistance * ((bottomEdgeHint.y - collapsedPosition)
59 /(collapsedPosition - expandedPosition))
60
61 Repeater {
62 id: actionList
63 model: actions
64 delegate: Rectangle {
65 id: actionDelegate
66 readonly property real radAngle: (index % actionList.count * (360/actionList.count)) * Math.PI / 180
67 property real distance: bottomEdgeHint.actionListDistance
68 z: -1
69 width: actionButtonSize
70 height: width
71 radius: width/2
72 anchors.centerIn: parent
73 color: modelData.backgroundColor
74 transform: Translate {
75 x: distance * Math.sin(radAngle)
76 y: -distance * Math.cos(radAngle)
77 }
78
79 Icon {
80 anchors.centerIn: parent
81 width: parent.width/2
82 height: width
83 name: modelData.iconName
84 color: modelData.iconColor
85 }
86
87 MouseArea {
88 anchors.fill: parent
89 onClicked: {
90 bottomEdgeHint.state = "collapsed"
91 modelData.triggered(null)
92 }
93 }
94 }
95 }
96
97 MouseArea {
98 id: mouseArea
99
100 property real previousY: -1
101 property string dragDirection: "None"
102
103 z: 1
104 anchors.fill: parent
105 visible: bottomEdgeEnabled
106
107 preventStealing: true
108 drag {
109 axis: Drag.YAxis
110 target: bottomEdgeHint
111 minimumY: expandedPosition
112 maximumY: collapsedPosition
113 }
114
115 onReleased: {
116 if ((dragDirection === "BottomToTop") &&
117 bottomEdgeHint.y < collapsedPosition) {
118 bottomEdgeHint.state = "expanded"
119 } else {
120 if (bottomEdgeHint.state === "collapsed") {
121 bottomEdgeHint.y = collapsedPosition
122 }
123 bottomEdgeHint.state = "collapsed"
124 }
125 previousY = -1
126 dragDirection = "None"
127 }
128
129 onClicked: {
130 if (bottomEdgeHint.y === collapsedPosition)
131 bottomEdgeHint.state = "expanded"
132 else
133 bottomEdgeHint.state = "collapsed"
134 }
135
136 onPressed: {
137 previousY = bottomEdgeHint.y
138 }
139
140 onMouseYChanged: {
141 var yOffset = previousY - bottomEdgeHint.y
142 if (Math.abs(yOffset) <= units.gu(2)) {
143 return
144 }
145 previousY = bottomEdgeHint.y
146 dragDirection = yOffset > 0 ? "BottomToTop" : "TopToBottom"
147 }
148 }
149
150 state: "collapsed"
151 states: [
152 State {
153 name: "collapsed"
154 PropertyChanges {
155 target: bottomEdgeHint
156 y: collapsedPosition
157 }
158 },
159 State {
160 name: "expanded"
161 PropertyChanges {
162 target: bottomEdgeHint
163 y: expandedPosition
164 }
165 },
166
167 State {
168 name: "floating"
169 when: mouseArea.drag.active
170 }
171 ]
172
173 transitions: [
174 Transition {
175 to: "expanded"
176 SpringAnimation {
177 target: bottomEdgeHint
178 property: "y"
179 spring: 2
180 damping: 0.2
181 }
182 },
183
184 Transition {
185 to: "collapsed"
186 SmoothedAnimation {
187 target: bottomEdgeHint
188 property: "y"
189 duration: UbuntuAnimation.BriskDuration
190 }
191 }
192 ]
193 }
194}
0195
=== added file 'GallerySRC/RadialBottomEdgeWidget.qml'
--- GallerySRC/RadialBottomEdgeWidget.qml 1970-01-01 00:00:00 +0000
+++ GallerySRC/RadialBottomEdgeWidget.qml 2014-11-15 15:00:12 +0000
@@ -0,0 +1,56 @@
1import QtQuick 2.0
2import Ubuntu.Components 1.1
3import "../ComponentStore/RadialBottomEdge"
4
5TemplateWidgetPage {
6 id: circleImageWidget
7
8 title: "Radial Bottom Edge"
9 author: "Nekhelesh Ramananthan"
10 email: "nik90@ubuntu.com"
11 license: "GNU General Public License v3.0"
12 description: "This widget adds a bottom edge which provides access to \
13action buttons presented in a radial fashion."
14
15 content: RadialBottomEdge {
16 actions: [
17 RadialAction {
18 iconName: "alarm-clock"
19 iconColor: UbuntuColors.coolGrey
20 onTriggered: console.log("Alarm..zZz")
21 },
22 RadialAction {
23 iconName: "settings"
24 iconColor: UbuntuColors.coolGrey
25 },
26
27 RadialAction {
28 iconName: "save"
29 iconColor: "white"
30 backgroundColor: UbuntuColors.green
31 onTriggered: console.log("save")
32 },
33
34 RadialAction {
35 iconName: "delete"
36 iconColor: "white"
37 backgroundColor: UbuntuColors.red
38 onTriggered: console.log("delete")
39 },
40
41 RadialAction {
42 iconName: "add"
43 iconColor: "white"
44 backgroundColor: UbuntuColors.green
45 },
46
47 RadialAction {
48 iconName: "stock_email"
49 iconColor: UbuntuColors.coolGrey
50 }
51 ]
52 }
53}
54
55
56
057
=== modified file 'GallerySRC/WidgetsModel.qml'
--- GallerySRC/WidgetsModel.qml 2014-11-12 15:27:00 +0000
+++ GallerySRC/WidgetsModel.qml 2014-11-15 15:00:12 +0000
@@ -27,4 +27,9 @@
27 label: "Page With Bottom Edge"27 label: "Page With Bottom Edge"
28 source: "GallerySRC/BottomEdgeWidget.qml"28 source: "GallerySRC/BottomEdgeWidget.qml"
29 }29 }
30
31 ListElement {
32 label: "Radial Bottom Edge"
33 source: "GallerySRC/RadialBottomEdgeWidget.qml"
34 }
30}35}
3136
=== modified file 'docs/_components/circleimage.rst'
--- docs/_components/circleimage.rst 2014-11-09 16:01:02 +0000
+++ docs/_components/circleimage.rst 2014-11-15 15:00:12 +0000
@@ -8,6 +8,8 @@
8+----------+---------------------------------+8+----------+---------------------------------+
9| Contact | mspencer@sonrisesoftware.com |9| Contact | mspencer@sonrisesoftware.com |
10+----------+---------------------------------+10+----------+---------------------------------+
11| Framework| ubuntu-sdk-14.10 |
12+----------+---------------------------------+
1113
12This 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.14This 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.
13 15
1416
=== modified file 'docs/_components/emptystate.rst'
--- docs/_components/emptystate.rst 2014-11-06 17:03:51 +0000
+++ docs/_components/emptystate.rst 2014-11-15 15:00:12 +0000
@@ -4,10 +4,12 @@
4+----------+---------------------------------+4+----------+---------------------------------+
5| Author | Nekhelesh Ramananthan |5| Author | Nekhelesh Ramananthan |
6+----------+-------------+-------------------+6+----------+-------------+-------------------+
7| License | GNU General Public License v3.0 |7| License | BSD License |
8+----------+---------------------------------+8+----------+---------------------------------+
9| Contact | nik90@ubuntu.com |9| Contact | nik90@ubuntu.com |
10+----------+---------------------------------+10+----------+---------------------------------+
11| Framework| ubuntu-sdk-14.10 |
12+----------+---------------------------------+
1113
12This widget provides a standardized way to show an empty state (approved by Canonical designers) 14This widget provides a standardized way to show an empty state (approved by Canonical designers)
13to improve the user experience and avoid showing a blank page. This way the user is not left starring 15to improve the user experience and avoid showing a blank page. This way the user is not left starring
1416
=== modified file 'docs/_components/fastscroll.rst'
--- docs/_components/fastscroll.rst 2014-11-08 21:34:25 +0000
+++ docs/_components/fastscroll.rst 2014-11-15 15:00:12 +0000
@@ -8,6 +8,8 @@
8+----------+---------------------------------+8+----------+---------------------------------+
9| Contact | renato.filho@canonical.com |9| Contact | renato.filho@canonical.com |
10+----------+---------------------------------+10+----------+---------------------------------+
11| Framework| ubuntu-sdk-14.10 |
12+----------+---------------------------------+
1113
12This widget provides a quick way to navigate long list views by providing14This widget provides a quick way to navigate long list views by providing
13a fast scroll. Example use cases are scrolling through an address book with15a fast scroll. Example use cases are scrolling through an address book with
1416
=== modified file 'docs/_components/listitemwithactions.rst'
--- docs/_components/listitemwithactions.rst 2014-11-12 16:25:04 +0000
+++ docs/_components/listitemwithactions.rst 2014-11-15 15:00:12 +0000
@@ -8,6 +8,8 @@
8+----------+---------------------------------+8+----------+---------------------------------+
9| Contact | renato.filho@canonical.com |9| Contact | renato.filho@canonical.com |
10+----------+---------------------------------+10+----------+---------------------------------+
11| Framework| ubuntu-sdk-14.10 |
12+----------+---------------------------------+
1113
12This widget provides an updated listitem which is what the core apps currently use. 14This widget provides an updated listitem which is what the core apps currently use.
13These listitems will be provided by the SDK with vivid onwards. However current RMT 15These listitems will be provided by the SDK with vivid onwards. However current RMT
1416
=== modified file 'docs/_components/pagewithbottomedge.rst'
--- docs/_components/pagewithbottomedge.rst 2014-11-09 16:01:02 +0000
+++ docs/_components/pagewithbottomedge.rst 2014-11-15 15:00:12 +0000
@@ -8,6 +8,8 @@
8+----------+---------------------------------+8+----------+---------------------------------+
9| Contact | renato.filho@canonical.com |9| Contact | renato.filho@canonical.com |
10+----------+---------------------------------+10+----------+---------------------------------+
11| Framework| ubuntu-sdk-14.10 |
12+----------+---------------------------------+
1113
12This component provides a bottom edge which can be used to house common actions. There is only one bottom edge14This component provides a bottom edge which can be used to house common actions. There is only one bottom edge
13available for a page. Only one. The user can use it without looking where they are pressing. Think carefully15available for a page. Only one. The user can use it without looking where they are pressing. Think carefully
1416
=== added file 'docs/_components/radialbottomedge.rst'
--- docs/_components/radialbottomedge.rst 1970-01-01 00:00:00 +0000
+++ docs/_components/radialbottomedge.rst 2014-11-15 15:00:12 +0000
@@ -0,0 +1,158 @@
1Radial Bottom Edge
2==================
3
4+----------+---------------------------------+
5| Author | Nekhelesh Ramananthan |
6+----------+-------------+-------------------+
7| License | BSD License |
8+----------+---------------------------------+
9| Contact | nik90@ubuntu.com |
10+----------+---------------------------------+
11| Framework| ubuntu-sdk-14.10 |
12+----------+---------------------------------+
13
14This component provides a unique way to show actions buttons using the bottom
15edge. It allows app developers to decide how many actions they want to show
16and customize it to their liking.
17
18Example:
19
20.. code-block:: qml
21
22 RadialBottomEdge {
23 actions: [
24 RadialAction {
25 iconName: "alarm-clock"
26 iconColor: UbuntuColors.coolGrey
27 onTriggered: console.log("Alarm..zZz")
28 },
29
30 RadialAction {
31 iconName: "settings"
32 iconColor: UbuntuColors.coolGrey
33 },
34
35 RadialAction {
36 iconName: "save"
37 iconColor: "white"
38 backgroundColor: UbuntuColors.green
39 onTriggered: console.log("save")
40 },
41
42 RadialAction {
43 iconName: "delete"
44 iconColor: "white"
45 backgroundColor: UbuntuColors.red
46 onTriggered: console.log("delete")
47 },
48
49 RadialAction {
50 iconName: "add"
51 iconColor: "white"
52 backgroundColor: UbuntuColors.green
53 },
54
55 RadialAction {
56 iconName: "stock_email"
57 iconColor: UbuntuColors.coolGrey
58 }
59 ]
60 }
61
62.. image:: ../_images/radialbottomedge.png
63 :align: center
64
65Properties
66----------
67
68- :ref:`hintSize`: int
69- :ref:`hintColor`: color
70- :ref:`hintIconName`: string
71- :ref:`hintIconSource`: url
72- :ref:`hintIconColor`: color
73- :ref:`bottomEdgeEnabled`: boolean
74- :ref:`actions`: RadialAction <list>
75- :ref:`actionButtonSize`: int
76- :ref:`actionButtonDistance`: int
77
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.
79
80Property Documentation
81----------------------
82
83.. _hintSize:
84
85hintSize
86^^^^^^^^
87
88The size of the hint shown in the bottom edge. It defaults to 8 grid units.
89
90.. _hintColor:
91
92hintColor
93^^^^^^^^^
94
95The background color of the hint shown in the bottom edge. By default it uses
96the ubuntu palette's overlay color.
97
98.. _hintIconName:
99
100hintIconName
101^^^^^^^^^^^^
102
103The name of the icon to display. Valid icon names can be found in the suru-icon-theme.
104
105.. note:: If both :ref:`hintIconName` and :ref:`hintIconSource` are specified, then :ref:`hintIconName` will be ignored.
106
107.. _hintIconSource:
108
109hintIconSource
110^^^^^^^^^^^^^^
111
112The source url of the icon to display. It has precedence over :ref:`hintIconName`.
113
114.. _hintIconColor:
115
116hintIconColor
117^^^^^^^^^^^^^
118
119The color of the icon displayed in the hint.
120
121.. _bottomEdgeEnabled:
122
123bottomEdgeEnabled
124^^^^^^^^^^^^^^^^^
125
126Property to enable/disable the bottom edge. When disabled, the bottom edge hint will be hidden.
127
128.. _actions:
129
130actions
131^^^^^^^
132
133This property is used to define a list of actions to be shown in the radial menu. The list takes
134a **RadialAction** which inherits **Action**. A RadialAction adds 3 properties on top of what Action
135provides which are iconName, iconColor and backgroundColor. ::
136
137 RadialAction {
138 iconName: "add"
139 iconColor: "white"
140 backgroundColor: "green"
141 }
142
143This helps defining properties for each action separately and allow for customization.
144
145.. _actionButtonSize:
146
147actionButtonSize
148^^^^^^^^^^^^^^^^
149
150The size of all the actions buttons. By default it is set to 7 grid units. Increasing this size would also
151require increasing the :ref:`actionButtonDistance` value as well.
152
153.. _actionButtonDistance:
154
155actionButtonDistance
156^^^^^^^^^^^^^^^^^^^^
157
158The distance (separation) between the action buttons and the center of the radial menu.
0159
=== added file 'docs/_images/radialbottomedge.png'
1Binary files docs/_images/radialbottomedge.png 1970-01-01 00:00:00 +0000 and docs/_images/radialbottomedge.png 2014-11-15 15:00:12 +0000 differ160Binary 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
=== modified file 'docs/index.rst'
--- docs/index.rst 2014-11-12 15:54:22 +0000
+++ docs/index.rst 2014-11-15 15:00:12 +0000
@@ -53,3 +53,4 @@
53 _components/fastscroll53 _components/fastscroll
54 _components/listitemwithactions54 _components/listitemwithactions
55 _components/pagewithbottomedge55 _components/pagewithbottomedge
56 _components/radialbottomedge
5657
=== modified file 'docs/release.rst'
--- docs/release.rst 2014-11-12 15:55:24 +0000
+++ docs/release.rst 2014-11-15 15:00:12 +0000
@@ -1,6 +1,10 @@
1Release Notes1Release Notes
2=============2=============
33
4**15th November 2014**
5
6* Added radial bottom edge component
7
4**12th November 2014**8**12th November 2014**
59
6* Fixed typos in the installation guide10* Fixed typos in the installation guide

Subscribers

People subscribed via source and target branches