Merge lp:~ogra/junk/alternate-webapp-container into lp:junk

[Matti Rinta-Nikkola]

Unmerged revisions

16. By Oliver Grawert on 2015-05-04

add check for length of url-handler args

15. By Oliver Grawert on 2015-04-19

fix location of soundeffect wav file

14. By Oliver Grawert on 2015-04-19

oops, add the right imports to make HapticsEffect actually work

13. By Oliver Grawert on 2015-04-18

add support for audible links (click sound when website links are tapped)

12. By Oliver Grawert on 2015-04-18

add support for haptic feedback when links are clicked, add proper comments to config.js

11. By Oliver Grawert on 2015-04-18

add url handler support

10. By Oliver Grawert on 2015-04-11

make sure we actually ship ContentPicker and MimeTypeMapper

9. By Oliver Grawert on 2015-04-04

allow opening urls in the webapp domain from arguments (if called via url-dispatcher)

8. By Oliver Grawert on 2015-03-31

add support to override the User Agent

7. By Oliver Grawert on 2015-03-31

add support for geolocation, add a file picker for apps that support upload of files, set a bunch of defaults for the webview (most importantly cache images)

=== added file 'README'
--- README	1970-01-01 00:00:00 +0000
+++ README	2015-05-21 19:43:33 +0000
@@ -0,0 +1,39 @@
+This is a new approach of an alternate webapp container that
+does not use a toolbar at the top but instead provides a bottom
+menu with navigation objects, similar to the one the dekko mail
+app uses. This way you do not have a jiggly toolbar that always
+expands and collapses in your app.
+
+To make use of this with your own webapp just follow the steps below.
+
+Fist of all branch this tree locally ...
+
+    bzr branch lp:~ogra/junk/alternate-webapp-container
+
+== Building ==
+
+Edit the value of applicationName at the top of qml/Main.qml to match
+your application name to work around https://launchpad.net/bugs/1435778
+
+Edit config.js to add webappName, webappUrl and webappUrlPattern 
+similar to how you would use them as commandline options to webapp-container.
+
+Optionally you can set the webappUA variable in config.js to override
+the User Agent string.
+
+Edit app.desktop and manifest.json to your liking.
+Replace icon.png with your own icon.
+
+Now run:
+    click build .
+
+This will create a .click package with you webapp.
+
+== Installing ==
+
+Push the click to your device via adb, then:
+
+    adb shell pkcon install-local --allow-untrusted /path/to/click
+
+You will see a bunch of progress bars ... once they are done,
+pull down the app scope to refresh it and find your new app in there.

=== added file 'app.desktop'
--- app.desktop	1970-01-01 00:00:00 +0000
+++ app.desktop	2015-05-21 19:43:33 +0000
@@ -0,0 +1,7 @@
+[Desktop Entry]
+Name=Google Plus
+Type=Application
+Icon=icon.png
+Exec=qmlscene %u qml/Main.qml
+Terminal=false
+X-Ubuntu-Touch=true

=== added file 'app.json'
--- app.json	1970-01-01 00:00:00 +0000
+++ app.json	2015-05-21 19:43:33 +0000
@@ -0,0 +1,11 @@
+{
+    "policy_groups": [
+        "networking",
+        "webview",
+        "audio",
+        "video",
+        "location",
+        "content_exchange"
+    ],
+    "policy_version": 1.1
+}

=== added file 'config.js'
--- config.js	1970-01-01 00:00:00 +0000
+++ config.js	2015-05-21 19:43:33 +0000
@@ -0,0 +1,20 @@
+// the name of your app as used in the click package (required)
+var webappName = "google-plus.ogra"
+
+// the start url of your app (required)
+var webappUrl = "https://plus.google.com/"
+
+// the the pattern that defines which links are considered
+// local and which are opened in an external browser (required)
+var webappUrlPattern = "https?://plus.google.*/*,https?://accounts.google.*/*,https?://accounts.google.co.*/*,https?://www.google.*/accounts/*"
+
+// a user agent override (optional)
+// var webappUA = "uncomment this line and set your User Agent string here between these quotes, if you need to override it"
+
+// Haptic feedback for links (note, this does not work if your site
+// uses javascript functions to open links) (optional)
+// var hapticLinks = "true"
+
+// Audible feedback when clicking links (the same constraints as
+// for hapticLinks apply) (optional)
+// var audibleLinks = "true"

=== added file 'icon.png'
Binary files icon.png	1970-01-01 00:00:00 +0000 and icon.png	2015-05-21 19:43:33 +0000 differ
=== added file 'manifest.json'
--- manifest.json	1970-01-01 00:00:00 +0000
+++ manifest.json	2015-05-21 19:43:33 +0000
@@ -0,0 +1,14 @@
+{
+    "description": "Another G+ WebApp",
+    "framework": "ubuntu-sdk-14.04",
+    "hooks": {
+        "google-plus": {
+        "apparmor": "app.json",
+        "desktop": "app.desktop"
+    }
+},
+    "maintainer": "Oliver Grawert <[e-mail]>",
+	"name": "google-plus.ogra",
+    "title": "Google Plus",
+    "version": "0.1"
+}

=== added directory 'qml'
=== added file 'qml/ContentPickerDialog.qml'
--- qml/ContentPickerDialog.qml	1970-01-01 00:00:00 +0000
+++ qml/ContentPickerDialog.qml	2015-05-21 19:43:33 +0000
@@ -0,0 +1,116 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This file is part of webbrowser-app.
+ *
+ * webbrowser-app is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * webbrowser-app is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+import Ubuntu.Components.Popups 1.0 as Popups
+import Ubuntu.Content 0.1
+import "MimeTypeMapper.js" as MimeTypeMapper
+
+Component {
+    Popups.PopupBase {
+        id: picker
+        objectName: "contentPickerDialog"
+
+        // Set the parent at construction time, instead of letting show()
+        // set it later on, which for some reason results in the size of
+        // the dialog not being updated.
+        parent: QuickUtils.rootItem(this)
+
+        property var activeTransfer
+        property var selectedItems
+
+        Rectangle {
+            anchors.fill: parent
+
+            ContentTransferHint {
+                anchors.fill: parent
+                activeTransfer: picker.activeTransfer
+            }
+
+            ContentPeerPicker {
+                id: peerPicker
+                anchors.fill: parent
+                visible: true
+                contentType: ContentType.All
+                handler: ContentHandler.Source
+
+                onPeerSelected: {
+                    if (model.allowMultipleFiles) {
+                        peer.selectionType = ContentTransfer.Multiple
+                    } else {
+                        peer.selectionType = ContentTransfer.Single
+                    }
+                    picker.activeTransfer = peer.request()
+                    stateChangeConnection.target = picker.activeTransfer
+                }
+
+                onCancelPressed: {
+                    webview.focus = true
+                    model.reject()
+                }
+            }
+        }
+
+        Connections {
+            id: stateChangeConnection
+            onStateChanged: {
+                if (picker.activeTransfer.state === ContentTransfer.Charged) {
+                    selectedItems = []
+                    for(var i in picker.activeTransfer.items) {
+                        selectedItems.push(String(picker.activeTransfer.items[i].url).replace("file://", ""))
+                    }
+                    acceptTimer.running = true
+                }
+            }
+        }
+
+        // FIXME: Work around for browser becoming insensitive to touch events
+        // if the dialog is dismissed while the application is inactive.
+        // Just listening for changes to Qt.application.active doesn't appear
+        // to be enough to resolve this, so it seems that something else needs
+        // to be happening first. As such there's a potential for a race
+        // condition here, although as yet no problem has been encountered.
+        Timer {
+            id: acceptTimer
+            interval: 100
+            repeat: true
+            onTriggered: {
+                if(Qt.application.active) {
+                    webview.focus = true
+                    model.accept(selectedItems)
+                }
+            }
+        }
+
+        Component.onCompleted: {
+            if(acceptTypes.length === 1) {
+                var contentType = MimeTypeMapper.mimeTypeToContentType(acceptTypes[0])
+                if(contentType == ContentType.Unknown) {
+                    // If we don't recognise the type, allow uploads from any app
+                    contentType = ContentType.All
+                }
+                peerPicker.contentType = contentType
+            } else {
+                peerPicker.contentType = ContentType.All
+            }
+            show()
+        }
+    }
+}
+

=== added file 'qml/Main.qml'
--- qml/Main.qml	1970-01-01 00:00:00 +0000
+++ qml/Main.qml	2015-05-21 19:43:33 +0000
@@ -0,0 +1,173 @@
+import QtQuick 2.2
+import Ubuntu.Web 0.2
+import Ubuntu.Components 1.1
+import com.canonical.Oxide 1.0 as Oxide
+import "UCSComponents"
+import Ubuntu.Content 1.1
+import QtMultimedia 5.0
+import QtFeedback 5.0
+import "."
+import "../config.js" as Conf
+
+MainView {
+    objectName: "mainView"
+
+    applicationName: "google-plus.ogra"
+
+    useDeprecatedToolbar: false
+    anchorToKeyboard: true
+    automaticOrientation: true
+
+    property string myUrl: Conf.webappUrl
+    property string myPattern: Conf.webappUrlPattern
+
+    property string myUA: Conf.webappUA ? Conf.webappUA : "Mozilla/5.0 (Linux; Android 5.0; Nexus 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.102 Mobile Safari/537.36"
+
+    Page {
+        id: page
+        anchors {
+            fill: parent
+            bottom: parent.bottom
+        }
+        width: parent.width
+        height: parent.height
+
+        HapticsEffect {
+            id: vibration
+            attackIntensity: 0.0
+            attackTime: 50
+            intensity: 1.0
+            duration: 10
+            fadeTime: 50
+            fadeIntensity: 0.0
+        }
+
+        SoundEffect {
+            id: clicksound
+            source: "../sounds/Click.wav"
+        }
+
+        WebContext {
+            id: webcontext
+            userAgent: myUA
+        }
+        WebView {
+            id: webview
+            anchors {
+                fill: parent
+                bottom: parent.bottom
+            } 
+            width: parent.width
+            height: parent.height
+
+            context: webcontext
+            url: myUrl
+            preferences.localStorageEnabled: true
+            preferences.allowFileAccessFromFileUrls: true
+            preferences.allowUniversalAccessFromFileUrls: true
+            preferences.appCacheEnabled: true
+            preferences.javascriptCanAccessClipboard: true
+            filePicker: filePickerLoader.item
+
+            function navigationRequestedDelegate(request) {
+                var url = request.url.toString();
+                var pattern = myPattern.split(',');
+                var isvalid = false;
+
+                if (Conf.hapticLinks) {
+                    vibration.start()
+                }
+
+                if (Conf.audibleLinks) {
+                    clicksound.play()
+                }
+
+                for (var i=0; i<pattern.length; i++) {
+                    var tmpsearch = pattern[i].replace(/\*/g,'(.*)')
+                    var search = tmpsearch.replace(/^https\?:\/\//g, '(http|https):\/\/');
+                    if (url.match(search)) {
+                       isvalid = true;
+                       break
+                    }
+                } 
+                if(isvalid == false) {
+                    console.warn("Opening remote: " + url);
+                    Qt.openUrlExternally(url)
+                    request.action = Oxide.NavigationRequest.ActionReject
+                }
+            }
+            Component.onCompleted: {
+                preferences.localStorageEnabled = true
+                if (Qt.application.arguments[1].toString().indexOf(myUrl) > -1) {
+                    console.warn("got argument: " + Qt.application.arguments[1])
+                    url = Qt.application.arguments[1]
+                }
+                console.warn("url is: " + url)
+            }
+            onGeolocationPermissionRequested: { request.accept() }
+            Loader {
+                id: filePickerLoader
+                source: "ContentPickerDialog.qml"
+                asynchronous: true
+            }
+        }
+        ThinProgressBar {
+            webview: webview
+            anchors {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+            }
+        }
+        RadialBottomEdge {
+            id: nav
+            visible: true
+            actions: [
+                RadialAction {
+                    id: reload
+                    iconName: "reload"
+                    onTriggered: {
+                        webview.reload()
+                    }
+                    text: qsTr("Reload")
+                },
+                RadialAction {
+                    id: forward
+                    enabled: webview.canGoForward
+                    iconName: "go-next"
+                    onTriggered: {
+                        webview.goForward()
+                    }
+                   text: qsTr("Forward")
+                 },
+                RadialAction {
+                    id: back
+                    enabled: webview.canGoBack
+                    iconName: "go-previous"
+                    onTriggered: {
+                        webview.goBack()
+                    }
+                    text: qsTr("Back")
+                }
+            ]
+        }
+    }
+    Connections {
+        target: Qt.inputMethod
+        onVisibleChanged: nav.visible = !nav.visible
+    }
+    Connections {
+        target: webview
+        onFullscreenChanged: nav.visible = !webview.fullscreen
+    }
+    Connections {
+        target: UriHandler
+        onOpened: {
+            if (uris.length === 0 ) {
+                return;
+            }
+            webview.url = uris[0]
+            console.warn("uri-handler request")
+        }
+    }
+}

=== added file 'qml/MimeTypeMapper.js'
--- qml/MimeTypeMapper.js	1970-01-01 00:00:00 +0000
+++ qml/MimeTypeMapper.js	2015-05-21 19:43:33 +0000
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This file is part of webbrowser-app.
+ *
+ * webbrowser-app is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * webbrowser-app is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+
+function mimeTypeToContentType(mimeType) {
+    if(mimeType.search("image/") === 0) {
+        return ContentType.Pictures;
+    } else if(mimeType.search("audio/") === 0) {
+        return ContentType.Music;
+    } else if(mimeType.search("video/") === 0) {
+        return ContentType.Videos;
+    } else if(mimeType.search("text/x-vcard") === 0) {
+        return ContentType.Contacts;
+    } else if(mimeType.search("application/epub[+]zip") === 0
+              || mimeType.search("application/vnd\.amazon\.ebook") === 0
+              || mimeType.search("application/x-mobipocket-ebook") === 0
+              || mimeType.search("application/x-fictionbook+xml") === 0
+              || mimeType.search("application/x-ms-reader") === 0) {
+        return ContentType.EBooks; 
+    } else if(mimeType.search("text/") === 0
+              || mimeType.search("application/pdf") === 0
+              || mimeType.search("application/x-pdf") === 0
+              || mimeType.search("application/vnd\.pdf") === 0) {
+        return ContentType.Documents;
+    } else {
+        return ContentType.Unknown;
+    }
+}

=== added file 'qml/ThinProgressBar.qml'
--- qml/ThinProgressBar.qml	1970-01-01 00:00:00 +0000
+++ qml/ThinProgressBar.qml	2015-05-21 19:43:33 +0000
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This file is part of webbrowser-app.
+ *
+ * webbrowser-app is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * webbrowser-app is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+
+ProgressBar {
+    property var webview
+
+    height: units.dp(3)
+
+    showProgressPercentage: false
+    value: webview ? webview.loadProgress / 100 : 0.0
+    visible: webview ? webview.loading
+                       // Workaround for https://bugs.launchpad.net/oxide/+bug/1290821.
+                       // Note: this also works with a QtWebKit webview by chance,
+                       // because !undefined evaluates to true.
+                       && !webview.lastLoadStopped
+                     : false
+}

=== added directory 'qml/UCSComponents'
=== added file 'qml/UCSComponents/EmptyState.qml'
--- qml/UCSComponents/EmptyState.qml	1970-01-01 00:00:00 +0000
+++ qml/UCSComponents/EmptyState.qml	2015-05-21 19:43:33 +0000
@@ -0,0 +1,43 @@
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+
+/*
+ Component which displays an empty state (approved by design). It offers an
+ icon, title and subtitle to describe the empty state.
+*/
+
+Item {
+    id: emptyState
+
+    // Public APIs
+    property alias iconName: emptyIcon.name
+    property alias iconSource: emptyIcon.source
+    property alias iconColor: emptyIcon.color
+    property alias title: emptyLabel.text
+    property alias subTitle: emptySublabel.text
+
+    height: childrenRect.height
+
+    Icon {
+        id: emptyIcon
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: units.gu(10)
+        width: height
+        color: "#BBBBBB"
+    }
+
+    Label {
+        id: emptyLabel
+        anchors.top: emptyIcon.bottom
+        anchors.topMargin: units.gu(5)
+        anchors.horizontalCenter: parent.horizontalCenter
+        fontSize: "large"
+        font.bold: true
+    }
+
+    Label {
+        id: emptySublabel
+        anchors.top: emptyLabel.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+}

=== added file 'qml/UCSComponents/RadialAction.qml'
--- qml/UCSComponents/RadialAction.qml	1970-01-01 00:00:00 +0000
+++ qml/UCSComponents/RadialAction.qml	2015-05-21 19:43:33 +0000
@@ -0,0 +1,12 @@
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+
+Action {
+    property string iconName: "add"
+    property string iconSource
+    property color iconColor: "Black"
+    property color backgroundColor: "White"
+    property string text
+    property bool top: false
+    property bool enabled: true
+}

=== added file 'qml/UCSComponents/RadialBottomEdge.qml'
--- qml/UCSComponents/RadialBottomEdge.qml	1970-01-01 00:00:00 +0000
+++ qml/UCSComponents/RadialBottomEdge.qml	2015-05-21 19:43:33 +0000
@@ -0,0 +1,251 @@
+import QtQuick 2.0
+import QtFeedback 5.0
+import Ubuntu.Components 1.1
+import QtGraphicalEffects 1.0
+
+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
+
+    HapticsEffect {
+        id: clickEffect
+        attackIntensity: 0.0
+        attackTime: 50
+        intensity: 1.0
+        duration: 10
+        fadeTime: 50
+        fadeIntensity: 0.0
+    }
+
+    Rectangle {
+        id: bgVisual
+
+        z: 1
+        visible: bottomEdgeHint.y !== collapsedPosition
+        color: "black"
+        anchors.fill: parent
+        opacity: 0.9 * (((bottomEdge.height - bottomEdgeHint.y) / bottomEdge.height) * 2)
+
+        MouseArea {
+            anchors.fill: parent
+            enabled: bgVisual.visible
+            onClicked: bottomEdgeHint.state = "collapsed"
+            z: 1
+        }
+
+    }
+
+    Rectangle {
+        id: bottomEdgeHint
+
+        color: hintColor
+        width: hintSize
+        height: width
+        radius: width/2
+        visible: bottomEdgeEnabled
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: collapsedPosition
+        z: parent.z + 1
+
+        Rectangle {
+            id: dropShadow
+            width: parent.width
+            height: parent.height
+            border.color: "#B3B3B3"
+            color: "Transparent"
+            radius: parent.radius + 1
+            z: -1
+            anchors {
+                centerIn: parent
+                verticalCenterOffset: -1 //units.gu(-0.3)
+            }
+        }
+
+        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 {
+                    id: icon
+                    anchors.centerIn: parent
+                    width: parent.width/2
+                    height: width
+//                    name: !modelData.iconSource ? modelData.iconName : undefined
+//                    source: modelData.iconSource ? Qt.resolvedUrl(modelData.iconSource) : undefined
+                    color: modelData.iconColor
+                    opacity: modelData.enabled ? 1.0 : 0.2
+                    Component.onCompleted: modelData.iconSource ? source = Qt.resolvedUrl(modelData.iconSource) : name = modelData.iconName
+                }
+
+                Label {
+                    visible: text && bottomEdgeHint.state == "expanded"
+                    text: modelData.text
+                    anchors {
+                        top: !modelData.top ? icon.bottom : undefined
+                        topMargin: !modelData.top ? units.gu(3) : undefined
+                        bottom: modelData.top ? icon.top : undefined
+                        bottomMargin: modelData.top ? units.gu(3) : undefined
+                        horizontalCenter: icon.horizontalCenter
+                    }
+                    color: Theme.palette.normal.foregroundText
+                    font.bold: true
+                    fontSize: "medium"
+
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    enabled: modelData.enabled
+                    onClicked: {
+                        clickEffect.start()
+                        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 directory 'sounds'
=== added file 'sounds/Click.wav'
Binary files sounds/Click.wav	1970-01-01 00:00:00 +0000 and sounds/Click.wav	2015-05-21 19:43:33 +0000 differ