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

[Nekhelesh Ramananthan]

Added radial bottom edge component

Added radial bottom edge component

=== 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 @@
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+
+Action {
+    property string iconName: "add"
+    property color iconColor: "Black"
+    property color backgroundColor: "White"
+}

=== 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 @@
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+
+Item {
+    id: bottomEdge
+    
+    property int hintSize: units.gu(8)
+    property color hintColor: Theme.palette.normal.overlay
+    property string hintIconName: "view-grid-symbolic"
+    property alias hintIconSource: hintIcon.source
+    property color hintIconColor: UbuntuColors.coolGrey
+    property bool bottomEdgeEnabled: true
+
+    property real expandedPosition: 0.6 * height
+    property real collapsedPosition: height - hintSize/2
+
+    property list<RadialAction> actions
+    property real actionButtonSize: units.gu(7)
+    property real actionButtonDistance: 1.5* hintSize
+
+    anchors.fill: parent
+
+    Rectangle {
+        id: bgVisual
+        
+        z: 1
+        color: "black"
+        anchors.fill: parent
+        opacity: 0.7 * ((bottomEdge.height - bottomEdgeHint.y) / bottomEdge.height)
+    }
+    
+    Rectangle {
+        id: bottomEdgeHint
+
+        color: hintColor
+        width: hintSize
+        height: width
+        radius: width/2
+        visible: bottomEdgeEnabled
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: collapsedPosition
+        z: parent.z + 1
+        
+        Icon {
+            id: hintIcon
+            width: hintSize/4
+            height: width
+            name: hintIconName
+            color: hintIconColor
+            anchors {
+                centerIn: parent
+                verticalCenterOffset: width * ((bottomEdgeHint.y - expandedPosition)
+                                               /(expandedPosition - collapsedPosition))
+            }
+        }
+
+        property real actionListDistance: -actionButtonDistance * ((bottomEdgeHint.y - collapsedPosition)
+                                                                   /(collapsedPosition - expandedPosition))
+
+        Repeater {
+            id: actionList
+            model: actions
+            delegate: Rectangle {
+                id: actionDelegate
+                readonly property real radAngle: (index % actionList.count * (360/actionList.count)) * Math.PI / 180
+                property real distance: bottomEdgeHint.actionListDistance
+                z: -1
+                width: actionButtonSize
+                height: width
+                radius: width/2
+                anchors.centerIn: parent
+                color: modelData.backgroundColor
+                transform: Translate {
+                    x: distance * Math.sin(radAngle)
+                    y: -distance * Math.cos(radAngle)
+                }
+
+                Icon {
+                    anchors.centerIn: parent
+                    width: parent.width/2
+                    height: width
+                    name: modelData.iconName
+                    color: modelData.iconColor
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        bottomEdgeHint.state = "collapsed"
+                        modelData.triggered(null)
+                    }
+                }
+            }
+        }
+        
+        MouseArea {
+            id: mouseArea
+            
+            property real previousY: -1
+            property string dragDirection: "None"
+            
+            z: 1
+            anchors.fill: parent
+            visible: bottomEdgeEnabled
+            
+            preventStealing: true
+            drag {
+                axis: Drag.YAxis
+                target: bottomEdgeHint
+                minimumY: expandedPosition
+                maximumY: collapsedPosition
+            }
+            
+            onReleased: {
+                if ((dragDirection === "BottomToTop") &&
+                        bottomEdgeHint.y < collapsedPosition) {
+                    bottomEdgeHint.state = "expanded"
+                } else {
+                    if (bottomEdgeHint.state === "collapsed") {
+                        bottomEdgeHint.y = collapsedPosition
+                    }
+                    bottomEdgeHint.state = "collapsed"
+                }
+                previousY = -1
+                dragDirection = "None"
+            }
+
+            onClicked: {
+                if (bottomEdgeHint.y === collapsedPosition)
+                    bottomEdgeHint.state = "expanded"
+                else
+                    bottomEdgeHint.state = "collapsed"
+            }
+            
+            onPressed: {
+                previousY = bottomEdgeHint.y
+            }
+            
+            onMouseYChanged: {
+                var yOffset = previousY - bottomEdgeHint.y
+                if (Math.abs(yOffset) <= units.gu(2)) {
+                    return
+                }
+                previousY = bottomEdgeHint.y
+                dragDirection = yOffset > 0 ? "BottomToTop" : "TopToBottom"
+            }
+        }
+        
+        state: "collapsed"
+        states: [
+            State {
+                name: "collapsed"
+                PropertyChanges {
+                    target: bottomEdgeHint
+                    y: collapsedPosition
+                }
+            },
+            State {
+                name: "expanded"
+                PropertyChanges {
+                    target: bottomEdgeHint
+                    y: expandedPosition
+                }
+            },
+            
+            State {
+                name: "floating"
+                when: mouseArea.drag.active
+            }
+        ]
+        
+        transitions: [
+            Transition {
+                to: "expanded"
+                SpringAnimation {
+                    target: bottomEdgeHint
+                    property: "y"
+                    spring: 2
+                    damping: 0.2
+                }
+            },
+            
+            Transition {
+                to: "collapsed"
+                SmoothedAnimation {
+                    target: bottomEdgeHint
+                    property: "y"
+                    duration: UbuntuAnimation.BriskDuration
+                }
+            }
+        ]
+    }
+}

=== 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 @@
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+import "../ComponentStore/RadialBottomEdge"
+
+TemplateWidgetPage {
+    id: circleImageWidget
+
+    title: "Radial Bottom Edge"
+    author: "Nekhelesh Ramananthan"
+    email: "[e-mail]"
+    license: "GNU General Public License v3.0"
+    description: "This widget adds a bottom edge which provides access to \
+action buttons presented in a radial fashion."
+
+    content: RadialBottomEdge {
+        actions: [
+            RadialAction {
+                iconName: "alarm-clock"
+                iconColor: UbuntuColors.coolGrey
+                onTriggered: console.log("Alarm..zZz")
+            },
+            RadialAction {
+                iconName: "settings"
+                iconColor: UbuntuColors.coolGrey
+            },
+
+            RadialAction {
+                iconName: "save"
+                iconColor: "white"
+                backgroundColor: UbuntuColors.green
+                onTriggered: console.log("save")
+            },
+
+            RadialAction {
+                iconName: "delete"
+                iconColor: "white"
+                backgroundColor: UbuntuColors.red
+                onTriggered: console.log("delete")
+            },
+
+            RadialAction {
+                iconName: "add"
+                iconColor: "white"
+                backgroundColor: UbuntuColors.green
+            },
+
+            RadialAction {
+                iconName: "stock_email"
+                iconColor: UbuntuColors.coolGrey
+            }
+        ]
+    }
+}
+
+
+

=== 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 @@
         label: "Page With Bottom Edge"
         source: "GallerySRC/BottomEdgeWidget.qml"
     }
+
+    ListElement {
+        label: "Radial Bottom Edge"
+        source: "GallerySRC/RadialBottomEdgeWidget.qml"
+    }
 }

=== 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 @@
 +----------+---------------------------------+
 | Contact  | [e-mail]    |
 +----------+---------------------------------+
+| Framework| ubuntu-sdk-14.10                |
++----------+---------------------------------+
 
 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.
   

=== 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 @@
 +----------+---------------------------------+
 | Author   | Nekhelesh Ramananthan           |
 +----------+-------------+-------------------+
-| License  | GNU General Public License v3.0 |
+| License  | BSD License                     |
 +----------+---------------------------------+
 | Contact  | [e-mail]                |
 +----------+---------------------------------+
+| Framework| ubuntu-sdk-14.10                |
++----------+---------------------------------+
 
 This widget provides a standardized way to show an empty state (approved by Canonical designers) 
 to improve the user experience and avoid showing a blank page. This way the user is not left starring 

=== 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 @@
 +----------+---------------------------------+
 | Contact  | [e-mail]      |
 +----------+---------------------------------+
+| Framework| ubuntu-sdk-14.10                |
++----------+---------------------------------+
 
 This widget provides a quick way to navigate long list views by providing
 a fast scroll. Example use cases are scrolling through an address book with

=== 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 @@
 +----------+---------------------------------+
 | Contact  | [e-mail]      |
 +----------+---------------------------------+
+| Framework| ubuntu-sdk-14.10                |
++----------+---------------------------------+
 
 This widget provides an updated listitem which is what the core apps currently use. 
 These listitems will be provided by the SDK with vivid onwards. However current RMT 

=== 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 @@
 +----------+---------------------------------+
 | Contact  | [e-mail]      |
 +----------+---------------------------------+
+| Framework| ubuntu-sdk-14.10                |
++----------+---------------------------------+
 
 This component provides a bottom edge which can be used to house common actions. There is only one bottom edge
 available for a page. Only one. The user can use it without looking where they are pressing. Think carefully

=== 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 @@
+Radial Bottom Edge
+==================
+
++----------+---------------------------------+
+| Author   | Nekhelesh Ramananthan           |
++----------+-------------+-------------------+
+| License  | BSD License                     |
++----------+---------------------------------+
+| Contact  | [e-mail]                |
++----------+---------------------------------+
+| Framework| ubuntu-sdk-14.10                |
++----------+---------------------------------+
+
+This component provides a unique way to show actions buttons using the bottom 
+edge. It allows app developers to decide how many actions they want to show
+and customize it to their liking.
+
+Example:
+
+.. code-block:: qml
+
+    RadialBottomEdge {
+        actions: [
+            RadialAction {
+                iconName: "alarm-clock"
+                iconColor: UbuntuColors.coolGrey
+                onTriggered: console.log("Alarm..zZz")
+            },
+            
+            RadialAction {
+                iconName: "settings"
+                iconColor: UbuntuColors.coolGrey
+            },
+
+            RadialAction {
+                iconName: "save"
+                iconColor: "white"
+                backgroundColor: UbuntuColors.green
+                onTriggered: console.log("save")
+            },
+
+            RadialAction {
+                iconName: "delete"
+                iconColor: "white"
+                backgroundColor: UbuntuColors.red
+                onTriggered: console.log("delete")
+            },
+
+            RadialAction {
+                iconName: "add"
+                iconColor: "white"
+                backgroundColor: UbuntuColors.green
+            },
+
+            RadialAction {
+                iconName: "stock_email"
+                iconColor: UbuntuColors.coolGrey
+            }
+        ]
+    }
+
+.. image:: ../_images/radialbottomedge.png
+   :align: center
+
+Properties
+----------
+
+- :ref:`hintSize`: int
+- :ref:`hintColor`: color
+- :ref:`hintIconName`: string
+- :ref:`hintIconSource`: url
+- :ref:`hintIconColor`: color
+- :ref:`bottomEdgeEnabled`: boolean
+- :ref:`actions`: RadialAction <list> 
+- :ref:`actionButtonSize`: int
+- :ref:`actionButtonDistance`: int
+
+.. 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.
+
+Property Documentation
+----------------------
+
+.. _hintSize:
+
+hintSize
+^^^^^^^^
+
+The size of the hint shown in the bottom edge. It defaults to 8 grid units.
+
+.. _hintColor:
+
+hintColor
+^^^^^^^^^
+
+The background color of the hint shown in the bottom edge. By default it uses
+the ubuntu palette's overlay color.
+
+.. _hintIconName:
+
+hintIconName
+^^^^^^^^^^^^
+
+The name of the icon to display. Valid icon names can be found in the suru-icon-theme.
+
+.. note:: If both :ref:`hintIconName` and :ref:`hintIconSource` are specified, then :ref:`hintIconName` will be ignored. 
+
+.. _hintIconSource:
+
+hintIconSource
+^^^^^^^^^^^^^^
+
+The source url of the icon to display. It has precedence over :ref:`hintIconName`. 
+
+.. _hintIconColor:
+
+hintIconColor
+^^^^^^^^^^^^^
+
+The color of the icon displayed in the hint.
+
+.. _bottomEdgeEnabled:
+
+bottomEdgeEnabled
+^^^^^^^^^^^^^^^^^
+
+Property to enable/disable the bottom edge. When disabled, the bottom edge hint will be hidden.
+
+.. _actions:
+
+actions
+^^^^^^^
+
+This property is used to define a list of actions to be shown in the radial menu. The list takes
+a **RadialAction** which inherits **Action**. A RadialAction adds 3 properties on top of what Action
+provides which are iconName, iconColor and backgroundColor. ::
+
+    RadialAction {
+        iconName: "add"
+        iconColor: "white"
+        backgroundColor: "green"
+    }
+    
+This helps defining properties for each action separately and allow for customization.
+
+.. _actionButtonSize:
+
+actionButtonSize
+^^^^^^^^^^^^^^^^
+
+The size of all the actions buttons. By default it is set to 7 grid units. Increasing this size would also
+require increasing the :ref:`actionButtonDistance` value as well.
+
+.. _actionButtonDistance:
+
+actionButtonDistance
+^^^^^^^^^^^^^^^^^^^^
+
+The distance (separation) between the action buttons and the center of the radial menu.

=== added file 'docs/_images/radialbottomedge.png'
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
=== 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 @@
    _components/fastscroll
    _components/listitemwithactions
    _components/pagewithbottomedge
+   _components/radialbottomedge

=== 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 @@
 Release Notes
 =============
 
+**15th November 2014**
+
+* Added radial bottom edge component
+
 **12th November 2014**
 
 * Fixed typos in the installation guide