harbour-tooter/qml/pages/components/VisualContainer.qml

458 lines
20 KiB
QML
Raw Normal View History

import QtQuick 2.2
import Sailfish.Silica 1.0
2017-07-04 02:07:39 +03:00
import "../../lib/API.js" as Logic
BackgroundItem {
id: delegate
2020-06-04 12:17:06 +03:00
signal send (string notice)
signal navigateTo(string link)
2020-06-04 12:17:06 +03:00
height: if (myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )) {
mnu.height + miniHeader.height + Theme.paddingLarge + lblContent.height + Theme.paddingLarge + (miniStatus.visible ? miniStatus.height : 0)
} else mnu.height + miniHeader.height + (typeof attachments !== "undefined" && attachments.count ? media.height + Theme.paddingLarge + Theme.paddingMedium: Theme.paddingLarge) + lblContent.height + Theme.paddingLarge + (miniStatus.visible ? miniStatus.height : 0) + (iconDirectMsg.visible ? iconDirectMsg.height : 0)
2020-06-10 11:17:51 +03:00
2020-06-18 09:32:52 +03:00
// Background for Direct Messages in Notification View
Rectangle {
2020-06-04 20:44:12 +03:00
id: bgDirect
2020-06-04 12:17:06 +03:00
x: 0
y: 0
2020-07-06 11:28:42 +03:00
visible: model.status_visibility === "direct"
width: parent.width
height: parent.height
opacity: 0.3
2020-06-10 12:44:58 +03:00
gradient: Gradient {
2020-06-11 15:11:39 +03:00
GradientStop { position: -1.5; color: "transparent" }
GradientStop { position: 0.6; color: Theme.highlightBackgroundColor }
2020-06-10 12:44:58 +03:00
}
}
2020-06-19 11:16:13 +03:00
// Element showing reblog, favourite, follow status on top of Toot
MiniStatus {
id: miniStatus
anchors {
leftMargin: Theme.horizontalPageMargin
rightMargin: Theme.horizontalPageMargin
top: parent.top
topMargin: Theme.paddingMedium
}
}
2020-06-18 09:32:52 +03:00
// Account avatar
Image {
id: avatar
2020-06-04 12:17:06 +03:00
opacity: status === Image.Ready ? 1.0 : 0.0
Behavior on opacity { FadeAnimator {} }
asynchronous: true
smooth: true
source: account_avatar
width: Theme.iconSizeMedium
height: width
anchors {
top: miniStatus.visible ? miniStatus.bottom : parent.top
topMargin: miniStatus.visible ? Theme.paddingMedium : Theme.paddingLarge
left: parent.left
leftMargin: Theme.horizontalPageMargin
}
2017-07-20 13:14:16 +03:00
onStatusChanged: {
if (avatar.status === Image.Error)
2020-06-29 11:48:06 +03:00
source = "../../images/icon-m-profile.svg?" + Theme.primaryColor
2017-07-20 13:14:16 +03:00
}
MouseArea {
anchors.fill: parent
onClicked: {
pageStack.push(Qt.resolvedUrl("../ProfilePage.qml"), {
"display_name": model.account_display_name,
"username": model.account_acct,
"user_id": model.account_id,
"profileImage": model.account_avatar,
"profileBackground": model.account_header,
"note": model.account_note,
"url": model.account_url,
"followers_count": model.account_followers_count,
"following_count": model.account_following_count,
"statuses_count": model.account_statuses_count,
"locked": model.account_locked,
"bot": model.account_bot,
"group": model.account_group
2020-06-15 11:42:10 +03:00
} )
}
2017-07-04 02:07:39 +03:00
}
2020-06-19 11:16:13 +03:00
// Avatar dimmer for facourite and reblog notifications
Rectangle {
visible: myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )
opacity: 0.5
color: Theme.highlightDimmerColor
anchors.fill: avatar
}
2020-06-18 20:42:01 +03:00
Icon {
id: iconDirectMsg
2020-06-10 11:17:51 +03:00
visible: status_visibility === "direct"
width: Theme.iconSizeMedium
height: width
2020-06-29 11:48:06 +03:00
source: "image://theme/icon-m-mail?" + Theme.primaryColor
2020-06-18 20:42:01 +03:00
color: Theme.primaryColor
anchors {
horizontalCenter: avatar.horizontalCenter
top: avatar.bottom
topMargin: Theme.paddingMedium
left: avatar.left
}
}
Rectangle {
id: bgReblogAvatar
2020-06-09 09:52:22 +03:00
color: Theme.secondaryColor
width: Theme.iconSizeSmall
height: width
visible: typeof status_reblog !== "undefined" && status_reblog
anchors {
bottom: parent.bottom
bottomMargin: -width/3
left: parent.left
leftMargin: -width/3
}
2020-06-04 12:17:06 +03:00
Image {
id: reblogAvatar
asynchronous: true
smooth: true
2017-06-16 17:45:04 +03:00
opacity: status === Image.Ready ? 1.0 : 0.0
Behavior on opacity { FadeAnimator {} }
2017-06-14 17:57:44 +03:00
source: typeof reblog_account_avatar !== "undefined" ? reblog_account_avatar : ''
visible: typeof status_reblog !== "undefined" && status_reblog
2020-06-04 12:17:06 +03:00
width: Theme.iconSizeSmall
height: width
}
MouseArea {
anchors.fill: parent
onClicked: {
pageStack.push(Qt.resolvedUrl("../ProfilePage.qml"), {
"display_name": model.reblog_account_display_name,
"username": model.reblog_account_acct,
"user_id": model.reblog_account_id,
"profileImage": model.reblog_account_avatar,
"profileBackground": model.account_header,
"note": model.reblog_account_note,
"url": model.reblog_account_url,
"followers_count": model.reblog_account_followers_count,
"following_count": model.reblog_account_following_count,
"statuses_count": model.reblog_account_statuses_count,
"locked": model.reblog_account_locked,
"bot": model.reblog_account_bot,
"group": model.reblog_account_group
} )
}
}
}
}
2020-06-18 09:32:52 +03:00
// Display name, username, date of Toot
MiniHeader {
id: miniHeader
anchors {
top: avatar.top
left: avatar.right
right: parent.right
}
}
2020-06-18 09:32:52 +03:00
// Toot content
Label {
id: lblContent
2020-06-04 20:44:12 +03:00
visible: model.type !== "follow"
2020-06-18 09:32:52 +03:00
text: if (myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )) {
content
} else content.replace(new RegExp("<a ", 'g'), '<a style="text-decoration: none; color:'+(pressed ? Theme.secondaryColor : Theme.highlightColor)+'" ')
textFormat: myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" ) ? Text.StyledText : Text.RichText
2020-06-04 12:17:06 +03:00
font.pixelSize: Theme.fontSizeSmall
wrapMode: Text.Wrap
2020-06-18 09:32:52 +03:00
truncationMode: TruncationMode.Elide
color: if (myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )) {
(pressed ? Theme.secondaryHighlightColor : (!highlight ? Theme.secondaryColor : Theme.secondaryHighlightColor))
} else (pressed ? Theme.highlightColor : (!highlight ? Theme.primaryColor : Theme.secondaryColor))
2020-06-18 09:32:52 +03:00
linkColor: if (myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )) {
Theme.secondaryHighlightColor
} else Theme.highlightColor
2020-06-04 20:44:12 +03:00
height: if (model.type === "follow") {
Theme.paddingLarge
2020-06-18 09:32:52 +03:00
} else if (myList.type === "notifications" && ( model.type === "favourite" || model.type === "reblog" )) {
Math.min( implicitHeight, Theme.itemSizeExtraLarge * 1.5 )
} else content.length ? ( contentWarningLabel.paintedHeight > paintedHeight ? contentWarningLabel.paintedHeight : paintedHeight ) : 0
anchors {
left: miniHeader.left
2020-06-19 11:16:13 +03:00
leftMargin: Theme.paddingMedium
right: miniHeader.right
2020-07-12 10:17:07 +03:00
rightMargin: Theme.horizontalPageMargin + Theme.paddingMedium
top: miniHeader.bottom
topMargin: Theme.paddingSmall
bottomMargin: Theme.paddingLarge
}
onLinkActivated: {
var test = link.split("/")
console.log(link)
console.log(JSON.stringify(test))
console.log(JSON.stringify(test.length))
if (test.length === 5 && (test[3] === "tags" || test[3] === "tag") ) {
pageStack.pop(pageStack.find(function(page) {
var check = page.isFirstPage === true;
if (check)
page.onLinkActivated(link)
return check;
}));
send(link)
2020-05-04 10:26:41 +03:00
// temporary solution for access to user profiles via toots
} else if (test.length === 4 && test[3][0] === "@" ) {
2020-06-04 12:17:06 +03:00
pageStack.pop(pageStack.find(function(page) {
var check = page.isFirstPage === true;
if (check)
page.onLinkActivated(link)
return check;
}));
} else {
Qt.openUrlExternally(link);
}
}
2020-06-04 12:17:06 +03:00
2020-06-18 09:32:52 +03:00
// Content warning cover for Toots
Rectangle {
id: contentWarningBg
color: Theme.highlightDimmerColor
visible: status_spoiler_text.length > 0
2020-06-04 12:17:06 +03:00
anchors.fill: parent
Label {
2017-07-20 13:14:16 +03:00
id: contentWarningLabel
2020-06-04 12:17:06 +03:00
text: model.status_spoiler_text
font.pixelSize: Theme.fontSizeExtraSmall
2020-06-04 12:17:06 +03:00
color: Theme.highlightColor
truncationMode: TruncationMode.Fade
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignHCenter
2020-06-04 12:17:06 +03:00
width: parent.width
2017-07-20 13:14:16 +03:00
anchors {
topMargin: Theme.paddingSmall
left: parent.left
leftMargin: Theme.paddingMedium
centerIn: parent
right: parent.right
rightMargin: Theme.paddingMedium
bottomMargin: Theme.paddingSmall
}
}
MouseArea {
anchors.fill: parent
2020-06-04 12:17:06 +03:00
onClicked: parent.visible = false
}
}
}
2020-06-18 09:32:52 +03:00
// Displays media in Toots
2017-06-16 17:45:04 +03:00
MediaBlock {
id: media
2020-07-06 11:28:42 +03:00
visible: (myList.type === "notifications" && ( type === "favourite" || type === "reblog" )) ? false : true
2020-06-18 09:32:52 +03:00
model: typeof attachments !== "undefined" ? attachments : Qt.createQmlObject('import QtQuick 2.0; ListModel { }', Qt.application, 'InternalQmlObject')
2020-06-04 12:17:06 +03:00
height: Theme.iconSizeExtraLarge * 2
anchors {
2020-06-19 11:16:13 +03:00
left: lblContent.left
2020-06-29 11:48:06 +03:00
leftMargin: isPortrait ? 0 : Theme.itemSizeSmall
2020-06-19 11:16:13 +03:00
right: lblContent.right
2020-07-06 11:28:42 +03:00
rightMargin: isPortrait ? 0 : Theme.itemSizeLarge * 1.2
top: lblContent.bottom
topMargin: Theme.paddingMedium
bottomMargin: Theme.paddingLarge
}
}
2020-06-18 09:32:52 +03:00
// Context menu for Toots
ContextMenu {
id: mnu
2020-06-04 12:17:06 +03:00
2017-07-04 02:07:39 +03:00
MenuItem {
2020-06-10 11:17:51 +03:00
id: mnuBoost
2020-06-04 20:44:12 +03:00
visible: model.type !== "follow"
2020-07-06 11:28:42 +03:00
enabled: model.status_visibility !== "direct"
2020-06-19 17:06:11 +03:00
text: typeof model.status_reblogged !== "undefined" && model.status_reblogged ? qsTr("Unboost") : qsTr("Boost")
2017-07-04 02:07:39 +03:00
onClicked: {
2020-06-19 17:06:11 +03:00
var status = typeof model.status_reblogged !== "undefined" && model.status_reblogged
2017-07-04 02:07:39 +03:00
worker.sendMessage({
"conf" : Logic.conf,
"params" : [],
"method" : "POST",
"bgAction": true,
"action" : "statuses/"+model.status_id+"/" + (status ? "unreblog" : "reblog")
2017-07-04 02:07:39 +03:00
})
model.status_reblogs_count = !status ? model.status_reblogs_count+1 : (model.status_reblogs_count > 0 ? model.status_reblogs_count-1 : model.status_reblogs_count);
2020-06-19 17:06:11 +03:00
model.status_reblogged = !model.status_reblogged
}
2020-06-04 12:17:06 +03:00
Icon {
id: icRT
2020-06-19 17:06:11 +03:00
source: "image://theme/icon-s-retweet?" + (!model.status_reblogged ? Theme.highlightColor : Theme.primaryColor)
2020-06-22 21:13:05 +03:00
width: Theme.iconSizeSmall
2020-06-04 12:17:06 +03:00
height: width
anchors {
leftMargin: Theme.horizontalPageMargin
left: parent.left
verticalCenter: parent.verticalCenter
}
}
Label {
2020-06-22 21:13:05 +03:00
text: status_reblogs_count
font.pixelSize: Theme.fontSizeSmall
2020-06-19 17:06:11 +03:00
color: !model.status_reblogged ? Theme.highlightColor : Theme.primaryColor
anchors {
left: icRT.right
leftMargin: Theme.paddingMedium
verticalCenter: parent.verticalCenter
}
2017-07-04 02:07:39 +03:00
}
}
2017-07-04 02:07:39 +03:00
MenuItem {
2020-06-10 11:17:51 +03:00
id: mnuFavourite
2020-06-11 15:11:39 +03:00
visible: model.type !== "follow"
text: typeof model.status_favourited !== "undefined" && model.status_favourited ? qsTr("Unfavorite") : qsTr("Favorite")
2017-07-04 02:07:39 +03:00
onClicked: {
var status = typeof model.status_favourited !== "undefined" && model.status_favourited
2017-07-04 02:07:39 +03:00
worker.sendMessage({
"conf" : Logic.conf,
"params" : [],
"method" : "POST",
"bgAction": true,
"action" : "statuses/"+model.status_id+"/" + (status ? "unfavourite" : "favourite")
2017-07-04 02:07:39 +03:00
})
model.status_favourites_count = !status ? model.status_favourites_count+1 : (model.status_favourites_count > 0 ? model.status_favourites_count-1 : model.status_favourites_count);
model.status_favourited = !model.status_favourited
}
Icon {
id: icFA
source: "image://theme/icon-s-favorite?" + (!model.status_favourited ? Theme.highlightColor : Theme.primaryColor)
2020-06-22 21:13:05 +03:00
width: Theme.iconSizeSmall
height: width
anchors {
left: parent.left
2020-07-03 11:45:30 +03:00
leftMargin: Theme.horizontalPageMargin
verticalCenter: parent.verticalCenter
}
}
Label {
text: status_favourites_count
2020-06-22 21:13:05 +03:00
font.pixelSize: Theme.fontSizeSmall
color: !model.status_favourited ? Theme.highlightColor : Theme.primaryColor
anchors {
left: icFA.right
leftMargin: Theme.paddingMedium
verticalCenter: parent.verticalCenter
}
2017-07-04 02:07:39 +03:00
}
}
2020-06-04 20:44:12 +03:00
MenuItem {
id: mnuBookmark
visible: model.type !== "follow"
text: typeof model.status_bookmarked !== "undefined" && model.status_bookmarked ? qsTr("Remove Bookmark") : qsTr("Bookmark")
onClicked: {
var status = typeof model.status_bookmarked !== "undefined" && model.status_bookmarked
worker.sendMessage({
"conf" : Logic.conf,
"params" : [],
"method" : "POST",
"bgAction": true,
"action" : "statuses/"+model.status_id+"/" + (status ? "unbookmark" : "bookmark")
})
model.status_bookmarked = !model.status_bookmarked
}
Icon {
2020-06-19 11:16:13 +03:00
id: icBM
source: "../../images/icon-s-bookmark.svg?"
color: !model.status_bookmarked ? Theme.highlightColor : Theme.primaryColor
2020-06-22 21:13:05 +03:00
width: Theme.iconSizeSmall
height: width
anchors {
left: parent.left
leftMargin: Theme.horizontalPageMargin + Theme.paddingMedium
verticalCenter: parent.verticalCenter
}
}
}
2020-06-04 20:44:12 +03:00
MenuItem {
2020-06-10 11:17:51 +03:00
id: mnuMention
2020-06-04 20:44:12 +03:00
visible: model.type === "follow"
text: qsTr("Mention")
onClicked: {
pageStack.push(Qt.resolvedUrl("../ConversationPage.qml"), {
2020-06-18 09:32:52 +03:00
headerTitle: qsTr("Mention"),
2020-06-04 20:44:12 +03:00
description: "@"+reblog_account_acct,
type: "new"
})
}
Icon {
2020-06-04 20:44:12 +03:00
id: icMT
source: "image://theme/icon-s-chat?" + (!model.status_favourited ? Theme.highlightColor : Theme.primaryColor)
2020-06-22 21:13:05 +03:00
width: Theme.iconSizeSmall
height: width
2020-06-04 20:44:12 +03:00
anchors {
left: parent.left
2020-06-19 11:16:13 +03:00
leftMargin: Theme.horizontalPageMargin + Theme.paddingMedium
2020-06-04 20:44:12 +03:00
verticalCenter: parent.verticalCenter
}
}
}
2017-07-04 02:07:39 +03:00
}
2020-06-22 21:13:05 +03:00
// Open ConversationPage and show other Toots in thread (if available) or ProfilePage if new Follower
onClicked: {
2020-06-15 11:42:10 +03:00
var m = Qt.createQmlObject('import QtQuick 2.0; ListModel { }', Qt.application, 'InternalQmlObject');
if (typeof mdl !== "undefined")
m.append(mdl.get(index))
2020-06-22 21:13:05 +03:00
if (model.type !== "follow") {
pageStack.push(Qt.resolvedUrl("../ConversationPage.qml"), {
headerTitle: qsTr("Conversation"),
"status_id": status_id,
"status_url": status_url,
"status_uri": status_uri,
"username": '@'+account_acct,
mdl: m,
type: "reply"
})
} else pageStack.push(Qt.resolvedUrl("../ProfilePage.qml"), {
"display_name": model.account_display_name,
"username": model.account_acct,
"user_id": model.account_id,
"profileImage": model.account_avatar,
"profileBackground": model.account_header,
"note": model.account_note,
"url": model.account_url,
"followers_count": model.account_followers_count,
"following_count": model.account_following_count,
"statuses_count": model.account_statuses_count,
"locked": model.account_locked,
"bot": model.account_bot,
"group": model.account_group
} )
}
2020-06-22 21:13:05 +03:00
2017-06-16 17:45:04 +03:00
onPressAndHold: {
2018-10-24 14:38:17 +03:00
console.log(JSON.stringify(mdl.get(index)))
mnu.open(delegate)
}
onDoubleClicked: {
console.log("double click")
2017-06-16 17:45:04 +03:00
}
}