[sociald] Comments in Facebook and Twitter. Fixes JB#8407

This commit provides comments for Twitter, and an enhanced
comments system for Facebook.

rpm/sociald.spec

@@ -25,7 +25,7 @@ BuildRequires:  qt5-qttools-linguist
 Requires: sailfish-components-accounts-qt5 >= 0.0.43
 Requires: sailfish-components-textlinking
 Requires: nemo-qml-plugin-notifications-qt5
-Requires: nemo-qml-plugin-social-qt5 >= 0.0.7
+Requires: nemo-qml-plugin-social-qt5 >= 0.0.9
 Requires: buteo-syncfw-qt5-msyncd
 
 %description

src/eventfeed/SocialAccountPullDownMenu.qml

@@ -11,6 +11,7 @@ PullDownMenu {
     property string changeToAccountString
     property string accountString
     property var pageContainer
+    property bool switchEnabled
     onMetaDataChanged: refreshAccountList()
 
     // We distinguish internal.index and container.currentAccountIndex
@@ -70,6 +71,7 @@ PullDownMenu {
             }
         }
         visible: internal.accountCount > 1
+        enabled: container.switchEnabled
 
         onClicked: {
             if (internal.accountCount > 2) {

src/eventfeed/SocialAvatar.qml

@@ -1,26 +1,37 @@
 import QtQuick 2.0
 import Sailfish.Silica 1.0
 
-Image {
+Item {
     id: container
     property string icon
     width: Theme.itemSizeExtraLarge
     height: Theme.itemSizeExtraLarge
-    sourceSize {
-        width: Theme.itemSizeExtraLarge
-        height: Theme.itemSizeExtraLarge
+
+    Rectangle {
+        anchors.fill: parent
+        color: Theme.highlightColor
+        opacity: 0.5
     }
-    asynchronous: true
-    fillMode: Image.PreserveAspectCrop
-    source: {
-        if (container.icon == "") {
-            return container.icon
-        } else if (container.icon.indexOf("http") == 0) {
-            return container.icon
-        } else if (container.icon.indexOf("/") == 0) {
-            return "image://nemoThumbnail/" + container.icon
-        } else {
-            return "image://theme/" + container.icon
+
+    Image {
+        anchors.fill: parent
+        sourceSize {
+            width: container.width
+            height: container.height
+        }
+        asynchronous: true
+        fillMode: Image.PreserveAspectCrop
+        source: {
+            if (container.icon == "") {
+                return container.icon
+            } else if (container.icon.indexOf("http") == 0) {
+                return container.icon
+            } else if (container.icon.indexOf("/") == 0) {
+                return "image://nemoThumbnail/" + container.icon
+            } else {
+                return "image://theme/" + container.icon
+            }
         }
     }
 }
+

src/eventfeed/SocialComment.qml

@@ -0,0 +1,70 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+Item {
+    id: container
+    property alias avatar: avatar.source
+    property alias message: message.text
+    property alias footer: footer.text
+    property alias extra: extra.text
+    property alias extraVisible: extra.visible
+
+    height: commentColumn.height
+
+    opacity: 0
+    Component.onCompleted: opacity = 1
+    Behavior on opacity { FadeAnimation {} }
+
+    Rectangle {
+        id: avatarPlaceholder
+        width: Theme.iconSizeMedium
+        height: Theme.iconSizeMedium
+        color: Theme.highlightColor
+        opacity: 0.5
+    }
+
+    Image {
+        id: avatar
+        clip: true
+        anchors.fill: avatarPlaceholder
+        fillMode: Image.PreserveAspectCrop
+        smooth: true
+    }
+
+    Column {
+        id: commentColumn
+        anchors {
+            left: avatar.right
+            leftMargin: Theme.paddingMedium
+            top: avatar.top
+            right: parent.right
+            rightMargin: Theme.paddingLarge
+        }
+
+        Label {
+            id: message
+            text: model.contentItem.message
+            width: parent.width
+            font.pixelSize: Theme.fontSizeSmall
+            horizontalAlignment: Text.AlignLeft
+            wrapMode: Text.Wrap
+            color: Theme.highlightColor
+        }
+
+        Label {
+            id: footer
+            opacity: 0.6
+            color: Theme.highlightColor
+            width: parent.width
+            font.pixelSize: Theme.fontSizeExtraSmall
+        }
+
+        Label {
+            id: extra
+            opacity: 0.6
+            color: Theme.highlightColor
+            width: parent.width
+            font.pixelSize: Theme.fontSizeExtraSmall
+        }
+    }
+}

src/eventfeed/SocialContent.qml

@@ -7,8 +7,8 @@ Item {
     property alias source: header.title
     property date timestamp
     property alias body: body.text
-    property alias belowAvatar: belowAvatarContainer.children
     property alias socialButtons: socialButtonsContainer.children
+    property alias fullRowSocialButtons: fullRowSocialButtonsContainer.children
 
     height: childrenRect.height
     anchors {
@@ -48,31 +48,33 @@ Item {
         time: formatter.formatDate(container.timestamp, Formatter.DurationElapsed)
     }
 
-    // This item is used to anchors social buttons and below avatar content
+    // This item is used to anchors social buttons and full-row social buttons content
     Item {
         id: mainContentMask
         anchors.top: header.bottom
         anchors.left: parent.left
         anchors.right: parent.right
-        height: belowAvatarContainer.childrenRect.height > 0 ? Math.max(body.height, socialAvatar.height)
-                                                             : body.height
+        height: fullRowSocialButtonsContainer.childrenRect.height > 0 ? Math.max(body.height, socialAvatar.height)
+                                                                      : body.height
     }
 
     Item {
-        id: belowAvatarContainer
+        id: fullRowSocialButtonsContainer
         anchors {
-            left: socialAvatar.left
-            right: socialAvatar.right
             top: mainContentMask.bottom
+            left: socialAvatar.left
+            leftMargin: Theme.paddingLarge
+            right: parent.right
+            rightMargin: Theme.paddingLarge
         }
-        height: socialButtonsContainer.height
+        height: childrenRect.height
     }
 
     Item {
         id: socialButtonsContainer
         anchors {
             top: mainContentMask.bottom
-            left: belowAvatarContainer.right
+            left: socialAvatar.right
             leftMargin: Theme.paddingMedium
             right: parent.right
             rightMargin: Theme.paddingLarge

src/eventfeed/SocialInfoLabel.qml

@@ -15,13 +15,14 @@ Item {
         id: label
         anchors {
             left: parent.left
-            leftMargin: Theme.paddingMedium
+            leftMargin: Theme.paddingLarge
             right: parent.right
-            rightMargin: Theme.paddingMedium
+            rightMargin: Theme.paddingLarge
             verticalCenter: parent.verticalCenter
         }
-        font.pixelSize: Theme.fontSizeSmall
+        font.pixelSize: Theme.fontSizeExtraSmall
         wrapMode: Text.WordWrap
+        color: Theme.highlightColor
     }
 
     Behavior on opacity { FadeAnimation {} }

src/eventfeed/SocialReplyField.qml

@@ -27,6 +27,12 @@ Item {
 
     Behavior on opacity { FadeAnimation {} }
 
+    Rectangle {
+        anchors.fill: avatar
+        color: Theme.highlightColor
+        opacity: 0.5
+    }
+
     Image {
         id: avatar
         anchors {