Merge lp:~abreu-alexandre/webapps-core/fix-facebook-links-share-ui into lp:webapps-core

[Alexandre Abreu]

Improve facebook share ui for links & pictures

Improve facebook share ui for links & pictures

[Alberto Mardegan (mardy)]

LGTM!

review: Approve

[lp:~abreu-alexandre/webapps-core/fix-facebook-links-share-ui]

134. By Alexandre Abreu on 2016-04-07

bump version to 1.4

=== modified file 'webapp-facebook/manifest.json'
--- webapp-facebook/manifest.json	2016-02-11 11:24:27 +0000
+++ webapp-facebook/manifest.json	2016-04-07 14:17:14 +0000
@@ -19,5 +19,5 @@
     "maintainer": "Webapps Team <[e-mail]>",
     "name": "com.ubuntu.developer.webapps.webapp-facebook",
     "title": "Facebook",
-    "version": "1.2.3"
+    "version": "1.4"
 }

=== modified file 'webapp-facebook/unity-webapps-facebook/HubSharer.qml'
--- webapp-facebook/unity-webapps-facebook/HubSharer.qml	2015-04-16 14:59:02 +0000
+++ webapp-facebook/unity-webapps-facebook/HubSharer.qml	2016-04-07 14:17:14 +0000
@@ -1,6 +1,22 @@
-import QtQuick 2.0
-import Ubuntu.Components 0.1
-import Ubuntu.Content 0.1
+/*
+ * Copyright (C) 2016 Canonical, Ltd.
+ *
+ * This program 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.
+ *
+ * This program 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.4
+import Ubuntu.Components 1.3
+import Ubuntu.Content 1.3
 
 Item {
     id: main
@@ -59,7 +75,7 @@
         contentType: main.contentType
         callback: _callback
 
-        onCanceled: {
+        onCancelled: {
             completed(JSON.stringify({status: "cancelled"}),
                       function(result) { uploadCompleted(result); });
             main.destroy();

=== modified file 'webapp-facebook/unity-webapps-facebook/Share.qml'
--- webapp-facebook/unity-webapps-facebook/Share.qml	2015-09-21 15:53:37 +0000
+++ webapp-facebook/unity-webapps-facebook/Share.qml	2016-04-07 14:17:14 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2012-2013 Canonical, Ltd.
+ * Copyright (C) 2012-2013-2016 Canonical, Ltd.
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -14,13 +14,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import QtQuick 2.0
+import QtQuick 2.4
 import QtQuick.Window 2.0
-import Ubuntu.Components 0.1
-import Ubuntu.Components.ListItems 0.1 as ListItem
+import Ubuntu.Components 1.3
+import Ubuntu.Components.ListItems 1.3 as ListItem
 import Ubuntu.OnlineAccounts 0.1
 import Ubuntu.OnlineAccounts.Client 0.1
 
+
 Item {
     id: root
     anchors.fill: parent
@@ -29,6 +30,7 @@
     property string contentType
     property var callback
 
+    readonly property string applicationId: "com.ubuntu.developer.webapps.webapp-facebook_webapp-facebook"
     readonly property string serviceType: "webapps"
     readonly property string provider: "facebook"
 
@@ -37,17 +39,36 @@
     property var account
 
     signal accountSelected
-    signal canceled
+    signal cancelled
     signal uploadCompleted(bool success)
 
     onUploadCompleted: {
-        activitySpinner.visible = false;
+        shareComponent.shareCompleted(success);
         if (success)
             print ("Successfully posted");
         else
             print ("Failed to post");
     }
 
+    ShareComponent {
+        id: shareComponent
+        visible: false
+        
+        anchors.fill: parent
+
+        accountProviderIconName: root.account.provider.iconName
+        accountProviderDisplayName: root.account.displayName
+
+        resourceToShare: root.fileToShare
+        contentType: root.contentType
+
+        onCancelled: root.cancelled()
+        onShare: callback(root.accessToken,
+                          root.fileToShare,
+                          userMessage,
+                          uploadCompleted);
+    }
+
     AccountServiceModel {
         id: accounts
         serviceType: root.serviceType
@@ -73,193 +94,6 @@
         }
     }
 
-    Item {
-        id: shareComponent
-        objectName: "shareComponent"
-        anchors {
-            left: parent.left
-            right: parent.right
-        }
-        visible: false
-
-        Column {
-            anchors.fill: parent
-            spacing: units.gu(1)
-
-            Item {
-                id: serviceHeader
-                y: 0
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.topMargin: units.gu(1)
-                anchors.leftMargin: units.gu(1)
-                anchors.rightMargin: units.gu(1)
-                height: childrenRect.height
-
-                ListItem.Subtitled {
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                    }
-                    iconName: root.account.provider.iconName
-                    text: root.account.provider.displayName
-                    subText: root.account.displayName
-                    showDivider: false
-                }
-            }
-
-            ListItem.ThinDivider {}
-
-            UbuntuShape {
-                id: messageArea
-                objectName: "messageArea"
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.topMargin: units.gu(1)
-                anchors.leftMargin: units.gu(1)
-                anchors.rightMargin: units.gu(1)
-                height: units.gu(20)
-                color: "#f2f2f2"
-
-                TextArea {
-                    id: message
-                    //color: "#333333"
-                    anchors.top: parent.top
-                    anchors.left: snapshot.right
-                    anchors.bottom: parent.bottom
-                    anchors.margins: units.gu(1)
-                    wrapMode: Text.Wrap
-                    width: parent.width - snapshot.width -
-                           snapshot.anchors.margins * 2 -
-                           message.anchors.leftMargin - message.anchors.rightMargin
-                    clip: true
-                    font.pixelSize: FontUtils.sizeToPixels("medium")
-                    font.weight: Font.Light
-                    focus: true
-                }
-
-                ActivityIndicator {
-                    id: activitySpinner
-                    anchors.centerIn: message
-                    visible: false
-                    running: visible
-                }
-
-                UbuntuShape {
-                    id: snapshot
-
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-                    anchors.margins: units.gu(1)
-                    width: units.gu(10)
-                    height: units.gu(10)
-                    
-                    image: Image {
-                        source: contentType === 'Pictures' ? fileToShare : null
-                        visible: contentType === 'Pictures'
-                        sourceSize.height: snapshot.height
-                        sourceSize.width: snapshot.width
-                        fillMode: Image.PreserveAspectCrop
-                    }
-                }
-            }
-
-            Item {
-                id: actionsBar
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.topMargin: units.gu(2)
-                anchors.leftMargin: units.gu(1)
-                anchors.rightMargin: units.gu(1)
-                height: childrenRect.height
-
-                Button {
-                    objectName: "cancelButton"
-                    anchors.left: parent.left
-                    text: i18n.dtr("ubuntu-ui-extras", "Cancel")
-                    color: "#cccccc"
-                    width: units.gu(10)
-                    height: units.gu(4)
-                    onClicked: canceled()
-                }
-
-                Button {
-                    objectName: "postButton"
-                    anchors.right: parent.right
-                    anchors.top: parent.top
-                    text: i18n.dtr("ubuntu-ui-extras", "Post")
-                    color: "#dd4814"
-                    width: units.gu(10)
-                    height: units.gu(4)
-                    enabled: !activitySpinner.visible
-                    onClicked: {
-                        activitySpinner.visible = true;
-                        callback(accessToken,
-                                 fileToShare,
-                                 message.text,
-				 uploadCompleted);
-                    }
-                }
-            }
-
-            // toggle to enable including location - Not implemented yet
-            /*
-            UbuntuShape {
-                id: useLocation
-                anchors {
-                    left: parent.left
-                    leftMargin: units.gu(1)
-                    topMargin: units.gu(1)
-                }
-                color: selected ? "#cccccc" : "transparent"
-                property bool selected: false
-                width: units.gu(4.5)
-                height: units.gu(4)
-
-                AbstractButton {
-                    anchors.fill: parent
-                    onClicked: parent.selected = !parent.selected
-                    Image {
-                        source: "assets/icon_location.png"
-                        anchors.centerIn: parent
-                        height: parent.height * 0.75
-                        fillMode: Image.PreserveAspectFit
-                        smooth: true
-                    }
-                }
-            }
-
-            Label {
-                anchors.left: useLocation.right
-                anchors.baseline: useLocation.top
-                anchors.baselineOffset: units.gu(3)
-                anchors.leftMargin: units.gu(1)
-                text: i18n.dtr("ubuntu-ui-extras", "Include location")
-                fontSize: "small"
-            }
-            */
-            // End location toggle
-
-        }
-
-        states: [
-            State {
-                name: "landscape-with-keyborad"
-                PropertyChanges {
-                    target: serviceHeader
-                    y: - serviceHeader.height
-                }
-                PropertyChanges {
-                    target: messageArea
-                    height: units.gu(12)
-                }
-            }
-        ]
-
-        state: ((Screen.orientation === Qt.LandscapeOrientation) ||
-                (Screen.orientation === Qt.InvertedLandscapeOrientation)) &&
-               Qt.inputMethod.visible ? "landscape-with-keyborad" : ""
-    }
 
     /* Menu listing online accounts */
     Item {
@@ -381,12 +215,12 @@
 
             ProviderModel {
                 id: providerModel
-                applicationId: "com.ubuntu.developer.webapps.webapp-facebook_webapp-facebook"
+                applicationId: applicationId
             }
 
             Setup {
                 id: setup
-                applicationId: "com.ubuntu.developer.webapps.webapp-facebook_webapp-facebook"
+                applicationId: applicationId
             }
         }
     }

=== added file 'webapp-facebook/unity-webapps-facebook/ShareComponent.qml'
--- webapp-facebook/unity-webapps-facebook/ShareComponent.qml	1970-01-01 00:00:00 +0000
+++ webapp-facebook/unity-webapps-facebook/ShareComponent.qml	2016-04-07 14:17:14 +0000
@@ -0,0 +1,285 @@
+/*
+ * Copyright (C) 2016 Canonical, Ltd.
+ *
+ * This program 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.
+ *
+ * This program 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.4
+import QtQuick.Window 2.0
+import Ubuntu.Components 1.3
+import Ubuntu.Components.ListItems 1.3 as ListItem
+
+Item {
+    id: shareComponent
+
+    property string accountProviderIconName
+    property string accountProviderDisplayName
+    property string contentType
+    property string resourceToShare
+
+    signal cancelled()
+    signal share(string userMessage)
+
+    objectName: "shareComponent"
+
+    function shareSuccessful(result) {
+        activitySpinner.visible = result
+    }
+
+    ActivityIndicator {
+        id: activitySpinner
+
+        anchors.centerIn: parent
+        z: 1
+        visible: false
+
+        running: visible
+    }
+
+    Column {
+        id: bla
+
+        anchors.fill: parent
+
+        spacing: units.gu(1)
+
+        Item {
+            id: serviceHeader
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            anchors.topMargin: units.gu(1)
+            anchors.leftMargin: units.gu(1)
+            anchors.rightMargin: units.gu(1)
+
+            height: childrenRect.height
+
+            ListItem.Subtitled {
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                }
+
+                iconName: accountProviderIconName
+                text: accountProviderDisplayName
+                subText: accountProviderDisplayName
+
+                showDivider: false
+            }
+        }
+
+        ListItem.ThinDivider {}
+
+        Rectangle {
+            id: messageArea
+            objectName: "messageArea"
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: units.gu(1)
+            anchors.leftMargin: units.gu(1)
+            anchors.rightMargin: units.gu(1)
+
+            height: units.gu(30)
+
+            color: "#f2f2f2"
+
+            Column {
+                anchors.fill: parent
+
+                spacing: units.gu(1)
+
+                Rectangle {
+                    id: sharedResourcePreview
+
+                    visible: contentType === 'Pictures' || contentType === 'Links'
+
+                    color: "#f2f2f2"
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    anchors.margins: units.gu(1)
+
+                    height: units.gu(15)
+
+                    UbuntuShape {
+                        id: imageSnapshot
+
+                        anchors.verticalCenter: parent.verticalCenter
+
+                        height: units.gu(13)
+                        width: units.gu(13)
+
+                        visible: contentType === 'Pictures'
+
+                        source: Image {
+                            source: contentType === 'Pictures' ? resourceToShare : ''
+                            sourceSize.height: imageSnapshot.height
+                            sourceSize.width: imageSnapshot.width
+                            fillMode: Image.PreserveAspectCrop
+                        }
+                    }
+                    Text {
+                        id: linksSnapshot
+
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+
+                        anchors.verticalCenter: parent.verticalCenter
+
+                        anchors.margins: units.gu(1)
+
+                        visible: contentType === 'Links'
+
+                        wrapMode: Text.NoWrap
+                        text: resourceToShare
+                        clip: true
+                        elide: Text.ElideRight
+
+                        font.pixelSize: FontUtils.sizeToPixels("medium")
+                        font.weight: Font.Light
+                    }
+                }
+
+                TextArea {
+                    id: message
+
+                    //color: "#333333"
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    anchors.margins: units.gu(1)
+
+                    wrapMode: Text.Wrap
+
+                    clip: true
+                    font.pixelSize: FontUtils.sizeToPixels("medium")
+                    font.weight: Font.Light
+                    focus: true
+                }
+            }
+        }
+
+        Item {
+            id: actionsBar
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: units.gu(2)
+            anchors.leftMargin: units.gu(1)
+            anchors.rightMargin: units.gu(1)
+
+            height: childrenRect.height
+
+            Button {
+                objectName: "cancelButton"
+
+                anchors.left: parent.left
+
+                text: i18n.dtr("ubuntu-ui-extras", "Cancel")
+
+                color: "#cccccc"
+
+                width: units.gu(10)
+                height: units.gu(4)
+
+                onClicked: cancelled()
+            }
+
+            Button {
+                objectName: "shareButton"
+
+                anchors.right: parent.right
+                anchors.top: parent.top
+
+                text: i18n.dtr("ubuntu-ui-extras", "Share")
+                color: "#dd4814"
+
+                width: units.gu(10)
+                height: units.gu(4)
+
+                enabled: !activitySpinner.visible
+
+                onClicked: {
+                    if (activitySpinner.visible) {
+                        return;
+                    }
+
+                    activitySpinner.visible = true;
+
+                    share(message.text);
+                }
+            }
+        }
+
+        // toggle to enable including location - Not implemented yet
+        /*
+            UbuntuShape {
+                id: useLocation
+                anchors {
+                    left: parent.left
+                    leftMargin: units.gu(1)
+                    topMargin: units.gu(1)
+                }
+                color: selected ? "#cccccc" : "transparent"
+                property bool selected: false
+                width: units.gu(4.5)
+                height: units.gu(4)
+
+                AbstractButton {
+                    anchors.fill: parent
+                    onClicked: parent.selected = !parent.selected
+                    Image {
+                        source: "assets/icon_location.png"
+                        anchors.centerIn: parent
+                        height: parent.height * 0.75
+                        fillMode: Image.PreserveAspectFit
+                        smooth: true
+                    }
+                }
+            }
+
+            Label {
+                anchors.left: useLocation.right
+                anchors.baseline: useLocation.top
+                anchors.baselineOffset: units.gu(3)
+                anchors.leftMargin: units.gu(1)
+                text: i18n.dtr("ubuntu-ui-extras", "Include location")
+                fontSize: "small"
+            }
+            */
+        // End location toggle
+
+    }
+
+    states: [
+        State {
+            name: "landscape-with-keyborad"
+            PropertyChanges {
+                target: serviceHeader
+                y: - serviceHeader.height
+            }
+            PropertyChanges {
+                target: messageArea
+                height: units.gu(12)
+            }
+        }
+    ]
+
+    state: ((Screen.orientation === Qt.LandscapeOrientation) ||
+            (Screen.orientation === Qt.InvertedLandscapeOrientation)) &&
+           Qt.inputMethod.visible ? "landscape-with-keyborad" : ""
+}