Twitter Demo App
import QtQuick 2.3
import Felgo 3.0
import QtGraphicalEffects 1.0
import "../model"
import "../widgets"
ListPage {
id: profilePage
title: qsTr("Profile")
backgroundColor: "white"
navigationBarTranslucency: 1.0
useSafeArea: false
titleItem: Column {
opacity: 1 - profileImage.opacity
AppText {
anchors.horizontalCenter: Theme.isAndroid ? undefined : parent.horizontalCenter
text: profilePage.profile.name
color: "white"
font.family: Theme.boldFont.name
font.bold: true
font.pixelSize: dp(14)
}
AppText {
anchors.horizontalCenter: Theme.isAndroid ? undefined : parent.horizontalCenter
text: qsTr("%1 Tweets").arg(profilePage.profile.statuses_count.toLocaleString(Qt.locale(), "f", 0))
color: "white"
font.pixelSize: dp(10)
}
}
property var profile
readonly property real barHeight: dp(Theme.navigationBar.height) + (nativeUtils.safeAreaInsets.top > Theme.statusBarHeight ? nativeUtils.safeAreaInsets.top : Theme.statusBarHeight)
Component { id: detailPage; DetailPage {} }
model: dataModel.timeline
delegate: TweetRow {
id: row
onSelected: {
console.debug("Selected item at index:", index)
navigationStack.push(detailPageComponent, { tweet: row.item })
}
onProfileSelected: {
console.debug("Selected profile at index:", index)
navigationStack.push(profilePageComponent, { profile: row.item.user })
}
}
Rectangle {
id: topImage
z: 1
y: listView.contentY + listView.headerItem.height > 0 ?
-Math.min(listView.contentY + listView.headerItem.height, height - barHeight) : 0
color: ("#" + (!!profile && profile.profile_background_color))
width: parent.width
height: dp(140)
Image {
id: imgHeader
source: !!profile && !!profile.profile_banner_url ? profile.profile_banner_url : ""
anchors.fill: parent
fillMode: Image.PreserveAspectCrop
visible: false
}
FastBlur {
source: imgHeader
anchors.fill: imgHeader
radius: 64 * Math.max(0, Math.min(1, (listView.contentY * 0.5 + topImage.height) / listView.headerItem.contentHeight))
}
RoundedImage {
id: profileImage
source: !!profile && !!profile.profile_image_url ? profile.profile_image_url.replace("_normal", "_bigger") : ""
x: dp(10)
y: -(height / 4) + parent.height
width: dp(50)
height: dp(50)
opacity: Math.max(0, Math.min(1, -(listView.contentY + topImage.height) / topImage.height))
scale: opacity
border.color: "white"
border.width: dp(2)
backgroundColor: "white"
}
Rectangle {
anchors.fill: parent
color: "#35000000"
opacity: 1-profileImage.opacity
}
}
listView {
emptyText.text: qsTr("No tweets")
anchors.leftMargin: nativeUtils.safeAreaInsets.left
anchors.rightMargin: nativeUtils.safeAreaInsets.right
anchors.bottomMargin: nativeUtils.safeAreaInsets.bottom
header: Column {
id: contentColumn
width: parent.width
property real contentHeight: height - topImage.height
Item {
height: topImage.height
width: parent.width
}
Rectangle {
width: parent.width
height: profileContent.height + dp(10) + profileContent.y
color: "white"
Column {
id: profileContent
width: parent.width - dp(20)
x: dp(10)
y: profileImage.height * 0.75 + dp(10)
spacing: dp(8)
Column {
spacing: dp(4)
AppText {
text: profile.name
font.pixelSize: sp(16)
font.bold: true
}
AppText {
text: "@" + profile.screen_name
font.pixelSize: sp(12)
color: Theme.secondaryTextColor
}
}
AppText {
text: profile.description
width: parent.width
wrapMode: Text.WordWrap
font.pixelSize: sp(12)
lineHeight: 1.3
}
Flow {
spacing: dp(6)
width: parent.width
Icon {
icon: IconType.mapmarker
size: dp(12)
color: Theme.secondaryTextColor
visible: profileLocation.visible
}
Text {
id: profileLocation
text: profile.location
visible: !!profile.location
font.family: Theme.normalFont.name
font.pixelSize: sp(12)
color: Theme.textColor
}
Icon {
icon: IconType.link
size: dp(12)
color: Theme.secondaryTextColor
visible: profileUrl.visible
}
Text {
id: profileUrl
text: profile.entities.url && profile.entities.url.urls[0].display_url || ""
visible: !!profile.entities.url
font.family: Theme.normalFont.name
font.pixelSize: sp(12)
color: Theme.textColor
}
}
Flow {
spacing: dp(6)
width: parent.width
Text {
text: profile.friends_count
font.family: Theme.normalFont.name
font.bold: true
font.pixelSize: sp(12)
color: Theme.textColor
}
Text {
text: qsTr("Following")
font.family: Theme.normalFont.name
font.pixelSize: sp(12)
font.capitalization: Font.AllUppercase
color: Theme.secondaryTextColor
}
Text {
text: profile.followers_count
font.family: Theme.normalFont.name
font.bold: true
font.pixelSize: sp(12)
color: Theme.textColor
}
Text {
text: qsTr("Followers")
font.family: Theme.normalFont.name
font.pixelSize: sp(12)
font.capitalization: Font.AllUppercase
color: Theme.secondaryTextColor
}
}
}
}
Rectangle {
y: parent.height - height
width: parent.width
height: 1
color: Theme.dividerColor
}