Skip to content

Commit

Permalink
[sociald] Social media feed UI changes. Contributes to JB#2551
Browse files Browse the repository at this point in the history
  • Loading branch information
Antti Seppälä committed Oct 25, 2013
1 parent f908bdd commit f13fd3d
Show file tree
Hide file tree
Showing 8 changed files with 93 additions and 52 deletions.
2 changes: 1 addition & 1 deletion src/eventfeed/SocialAvatar.qml
View file
Expand Up @@ -15,7 +15,7 @@ Image {
Rectangle {
anchors.fill: parent
color: Theme.highlightColor
opacity: 0.5
opacity: 0.1
visible: image.status !== Image.Ready
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/eventfeed/SocialComment.qml
View file
Expand Up @@ -20,7 +20,7 @@ Item {
width: Theme.iconSizeMedium
height: Theme.iconSizeMedium
color: Theme.highlightColor
opacity: 0.5
opacity: 0.1
}

Image {
Expand Down
55 changes: 55 additions & 0 deletions src/eventfeed/SocialMediaPreviewRow.qml
View file
@@ -0,0 +1,55 @@
import QtQuick 2.0
import Sailfish.Silica 1.0
import Sailfish.TextLinking 1.0

Item {
id: container

property variant imageList
property string mediaName
property string mediaCaption
property string mediaDescription
property real imageSize: width / 3
property int imageCount: imageList ? imageList.length : 0

width: parent.width
height: childrenRect.height
visible: imageCount > 0

Row {
anchors {
left: parent.left
right: parent.right
}

Repeater {
id: repeater
model: container.imageList
delegate: Image {
width: container.imageSize
height: container.imageSize
sourceSize {
width: container.imageSize
height: container.imageSize
}
asynchronous: true
fillMode: Image.PreserveAspectCrop
visible: index < container.imageCount
source: visible ? modelData.url : ""
}
}
}

Label {
width: container.imageSize * 2 - Theme.paddingSmall
x: container.imageSize + Theme.paddingMedium
y: Theme.paddingMedium
visible: container.imageCount === 1
text: container.mediaName
font.pixelSize: Theme.fontSizeExtraSmall
wrapMode: Text.WordWrap
maximumLineCount: 2
elide: Text.ElideRight
opacity: .6
}
}
2 changes: 1 addition & 1 deletion src/eventfeed/SocialReplyField.qml
View file
Expand Up @@ -37,7 +37,7 @@ Item {
Rectangle {
anchors.fill: avatar
color: Theme.highlightColor
opacity: 0.5
opacity: 0.1
}

Image {
Expand Down
33 changes: 4 additions & 29 deletions src/facebook/eventfeed/FacebookFeedItem.qml
View file
Expand Up @@ -5,20 +5,13 @@ import "shared"

SocialMediaFeedItem {
id: item
height: Math.max(content.height, avatar.height) + Theme.paddingLarge
height: Math.max(content.height, avatar.height) + Theme.paddingMedium * 3
width: parent.width

property variant imageList
property int likeCount
property int commentCount

//: Number of facebook likes
//% "%n like(s)"
property string _countFieldLikeCount: likeCount > 0 ? " \u2022 " + qsTrId("lipstick-jolla-home-la-facebook_like_count", likeCount) : ""
//: Number of facebook comments
//% "%n comment(s)"
property string _countFieldCommentCount: commentCount > 0 ? qsTrId("lipstick-jolla-home-la-facebook_comment_count", commentCount) : ""

Column {
id: content
anchors {
Expand All @@ -28,7 +21,7 @@ SocialMediaFeedItem {
rightMargin: Theme.paddingMedium
}

SocialMediaRow {
SocialMediaPreviewRow {
id: mediaRow
imageList: item.imageList
mediaName: model.attachmentName
Expand All @@ -40,7 +33,7 @@ SocialMediaFeedItem {
anchors.right: parent.right
width: parent.width
visible: text.length > 0
maximumLineCount: 20
maximumLineCount: 3
elide: Text.ElideRight
wrapMode: Text.Wrap
color: Theme.highlightColor
Expand All @@ -52,7 +45,7 @@ SocialMediaFeedItem {
LinkedText {
id: bodyField
width: parent.width
maximumLineCount: 50
maximumLineCount: 3
elide: Text.ElideRight
wrapMode: Text.Wrap
font.pixelSize: Theme.fontSizeExtraSmall
Expand All @@ -71,23 +64,5 @@ SocialMediaFeedItem {
font.pixelSize: Theme.fontSizeExtraSmall
text: model.name + " \u2022 " + formattedTime
}

Label {
id: countField
width: parent.width
maximumLineCount: 2
elide: Text.ElideRight
wrapMode: Text.Wrap
visible: text.length > 0
color: Theme.highlightColor
opacity: .6
font.pixelSize: Theme.fontSizeExtraSmall
text: _countFieldCommentCount + _countFieldLikeCount
}

Item {
width: 1
height: Theme.paddingLarge
}
}
}
25 changes: 24 additions & 1 deletion src/facebook/eventfeed/FacebookPostPage.qml
View file
Expand Up @@ -3,6 +3,7 @@ import Sailfish.Silica 1.0
import org.nemomobile.contacts 1.0
import org.nemomobile.social 1.0
import Sailfish.Accounts 1.0
import Sailfish.TextLinking 1.0
import "shared"

Page {
Expand Down Expand Up @@ -323,7 +324,29 @@ Page {
imageList: container.model.images
mediaName: container.model.attachmentName
mediaCaption: container.model.attachmentCaption
mediaDescription: container.attachmentDescription
mediaDescription: container.model.attachmentDescription
}

Item {
width: 1
height: Theme.paddingLarge
}

LinkedText {
id: description
anchors {
left: parent.left
leftMargin: Theme.paddingSmall
right: parent.right
rightMargin: Theme.paddingSmall
}
visible: text.length > 0
elide: Text.ElideRight
wrapMode: Text.Wrap
color: Theme.highlightColor
font.pixelSize: Theme.fontSizeExtraSmall
plainText: container.model.attachmentDescription
shortenUrl: true
}

SocialInfoLabel { text: view.likers }
Expand Down
3 changes: 2 additions & 1 deletion src/src.pro
View file
Expand Up @@ -75,7 +75,8 @@ shared_eventfeed.files = \
$$PWD/eventfeed/SocialMediaFeedPage.qml \
$$PWD/eventfeed/SocialMediaFeedItem.qml \
$$PWD/eventfeed/SocialMediaAccountDelegate.qml \
$$PWD/eventfeed/SocialMediaIndicator.qml
$$PWD/eventfeed/SocialMediaIndicator.qml \
$$PWD/eventfeed/SocialMediaPreviewRow.qml
shared_eventfeed.path = /usr/share/lipstick/eventfeed/shared/

# translations
Expand Down
23 changes: 5 additions & 18 deletions src/twitter/eventfeed/TwitterFeedItem.qml
View file
Expand Up @@ -5,21 +5,14 @@ import "shared"

SocialMediaFeedItem {
id: item
height: Math.max(content.height, avatar.height) + Theme.paddingLarge
height: Math.max(content.height, avatar.height) + Theme.paddingMedium * 3
width: parent.width

property variant imageList
property int likeCount
property int commentCount
property int retweetCount

//: Number of twitter comments
//% "%n comment(s)"
property string _nameFieldCommentsText: commentCount > 0 ? " \u2022 " + qsTrId("lipstick-jolla-home-la-tweet_comment_count", commentCount) : ""
//: Number of twitter re-tweets
//% "%n re-tweet(s)"
property string _nameFieldRetweetsText: retweetCount > 0 ? " \u2022 " + qsTrId("lipstick-jolla-home-la-tweet_retweet_count", retweetCount) : ""

Column {
id: content
anchors {
Expand All @@ -29,7 +22,7 @@ SocialMediaFeedItem {
rightMargin: Theme.paddingMedium
}

SocialMediaRow {
SocialMediaPreviewRow {
imageList: item.imageList
}

Expand Down Expand Up @@ -67,7 +60,7 @@ SocialMediaFeedItem {

LinkedText {
width: parent.width
maximumLineCount: 50
maximumLineCount: 4
elide: Text.ElideRight
wrapMode: Text.Wrap
font.pixelSize: Theme.fontSizeExtraSmall
Expand All @@ -77,19 +70,13 @@ SocialMediaFeedItem {
}

Label {
id: nameField
width: parent.width
maximumLineCount: 3
maximumLineCount: 1
elide: Text.ElideRight
wrapMode: Text.Wrap
color: Theme.highlightColor
font.pixelSize: Theme.fontSizeExtraSmall
text: item.formattedTime + _nameFieldCommentsText + _nameFieldRetweetsText
}

Item {
width: 1
height: Theme.paddingLarge
text: item.formattedTime
}
}
}

0 comments on commit f13fd3d

Please sign in to comment.