Merge pull request #247 from monich/emoji-image-pos

Fixed Emoji image positioning in multiline StyledText
This commit is contained in:
Sebastian Wolf 2020-12-25 12:27:14 +01:00 committed by GitHub
commit 4aa8ff3d8a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 121 additions and 66 deletions

View file

@ -51,6 +51,7 @@ DISTFILES += qml/harbour-fernschreiber.qml \
qml/components/MessageListViewItem.qml \
qml/components/MessageListViewItemSimple.qml \
qml/components/MessageOverlayFlickable.qml \
qml/components/MultilineEmojiLabel.qml \
qml/components/PinnedMessageItem.qml \
qml/components/PollPreview.qml \
qml/components/PressEffect.qml \

View file

@ -57,6 +57,8 @@ ListItem {
mouseX < (extraContentLoader.x + extraContentLoader.width) &&
mouseY < (extraContentLoader.y + extraContentLoader.height)) {
extraContent.clicked()
} else if (webPagePreviewLoader.item) {
webPagePreviewLoader.item.clicked()
}
}
}
@ -397,17 +399,10 @@ ListItem {
active: false
asynchronous: true
width: parent.width
height: typeof myMessage.content.web_page !== "undefined" ? precalculatedValues.webPagePreviewHeight : 0
height: (status === Loader.Ready) ? item.implicitHeight : myMessage.content.web_page ? precalculatedValues.webPagePreviewHeight : 0
sourceComponent: Component {
id: webPagePreviewComponent
WebPagePreview {
id: webPagePreview
onImplicitHeightChanged: {
webPagePreviewLoader.height = webPagePreview.implicitHeight;
}
webPageData: myMessage.content.web_page
width: parent.width
highlighted: messageListItem.highlighted

View file

@ -0,0 +1,78 @@
/*
Copyright (C) 2020 Slava Monich and other contributors
This file is part of Fernschreiber.
Fernschreiber 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, either version 3 of the License, or
(at your option) any later version.
Fernschreiber 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 Fernschreiber. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.0
import Sailfish.Silica 1.0
import "../js/twemoji.js" as Emoji
// Combination of maximumLineCount and TruncationMode.Elide (or Fade) breaks
// Emoji image alignment, pushing the image down. This one aligns the image
// correctly on its line.
Label {
property string rawText
property int maxLineCount
wrapMode: Text.Wrap
textFormat: Text.StyledText
truncationMode: TruncationMode.Elide
// lineCount is unreliable for StyledText with images and line breaks
readonly property int fontSize: font.pixelSize
readonly property int actualLineHeight: (text === rawText) ? fontSize : (fontSize * 6 / 5)
readonly property int actualLineCount: Math.floor(implicitHeight/actualLineHeight)
Component.onCompleted: refitText()
onFontSizeChanged: refitText()
onWidthChanged: refitText()
onRawTextChanged: refitText()
onMaxLineCountChanged: refitText()
function emojify(str) {
return Emoji.emojify(str, fontSize)
}
function refitText() {
text = emojify(rawText)
if (maxLineCount > 0) {
var divisor = 1
var max = rawText.length
var min = max
while (actualLineCount > maxLineCount && divisor < rawText.length) {
max = min
divisor++
min = rawText.length/divisor
text = emojify(rawText.substr(0, min) + "…")
}
while (min < max) {
var mid = Math.floor((min + max)/2)
if (mid === min) {
text = emojify(rawText.substr(0, min) + "…")
break
} else {
text = emojify(rawText.substr(0, mid) + "…")
if (actualLineCount > maxLineCount) {
max = mid
} else {
min = mid
}
}
}
}
}
}

View file

@ -19,101 +19,86 @@
import QtQuick 2.6
import QtGraphicalEffects 1.0
import Sailfish.Silica 1.0
import "../components"
import "../js/twemoji.js" as Emoji
import WerkWolf.Fernschreiber 1.0
import "../js/functions.js" as Functions
Column {
id: webPagePreviewColumn
property var webPageData;
property var pictureFileInformation;
property bool hasImage: false;
property bool largerFontSize: false;
property bool highlighted
readonly property bool hasImage: picture.fileId !== 0
readonly property int fontSize: largerFontSize ? Theme.fontSizeSmall : Theme.fontSizeExtraSmall
spacing: Theme.paddingSmall
Component.onCompleted: {
updateWebPage();
}
function updateWebPage() {
if (webPageData) {
if (typeof webPageData.photo !== "undefined") {
hasImage = true;
if (webPageData.photo) {
// Check first which size fits best...
var photo
for (var i = 0; i < webPageData.photo.sizes.length; i++) {
pictureFileInformation = webPageData.photo.sizes[i].photo;
photo = webPageData.photo.sizes[i].photo;
if (webPageData.photo.sizes[i].width >= webPagePreviewColumn.width) {
break;
}
}
if (pictureFileInformation.local.is_downloading_completed) {
singleImage.source = pictureFileInformation.local.path;
} else {
tdLibWrapper.downloadFile(pictureFileInformation.id);
if (photo) {
picture.fileInformation = photo
}
}
}
}
Connections {
target: tdLibWrapper
onFileUpdated: {
if (typeof pictureFileInformation !== "undefined" && fileId === pictureFileInformation.id) {
if (fileInformation.local.is_downloading_completed) {
pictureFileInformation = fileInformation;
singleImage.source = fileInformation.local.path;
}
}
}
function clicked() {
descriptionText.toggleMaxLineCount()
}
Label {
TDLibFile {
id: picture
tdlib: tdLibWrapper
autoLoad: true
}
MultilineEmojiLabel {
id: siteNameText
width: parent.width
text: webPageData.site_name ? Emoji.emojify(webPageData.site_name, font.pixelSize) : ""
font.pixelSize: webPagePreviewColumn.largerFontSize ? Theme.fontSizeSmall : Theme.fontSizeExtraSmall
rawText: webPageData.site_name ? webPageData.site_name : ""
font.pixelSize: webPagePreviewColumn.fontSize
font.bold: true
color: Theme.secondaryHighlightColor
truncationMode: TruncationMode.Fade
maximumLineCount: 1
textFormat: Text.StyledText
visible: (text !== "")
visible: (rawText !== "")
maxLineCount: 1
}
Label {
MultilineEmojiLabel {
id: titleText
width: parent.width
text: webPageData.title ? Emoji.emojify(webPageData.title, font.pixelSize) : ""
font.pixelSize: webPagePreviewColumn.largerFontSize ? Theme.fontSizeSmall : Theme.fontSizeExtraSmall
rawText: webPageData.title ? webPageData.title : ""
font.pixelSize: webPagePreviewColumn.fontSize
font.bold: true
truncationMode: TruncationMode.Fade
wrapMode: Text.Wrap
maximumLineCount: 2
textFormat: Text.StyledText
visible: (text !== "")
visible: (rawText !== "")
maxLineCount: 2
}
Label {
MultilineEmojiLabel {
id: descriptionText
width: parent.width
text: webPageData.description ? Emoji.emojify(Functions.enhanceMessageText(webPageData.description), font.pixelSize) : ""
font.pixelSize: webPagePreviewColumn.largerFontSize ? Theme.fontSizeSmall : Theme.fontSizeExtraSmall
truncationMode: TruncationMode.Fade
wrapMode: Text.Wrap
maximumLineCount: 3
textFormat: Text.StyledText
visible: (text !== "")
linkColor: Theme.highlightColor
rawText: webPageData.description ? Functions.enhanceMessageText(webPageData.description) : ""
font.pixelSize: webPagePreviewColumn.fontSize
visible: (rawText !== "")
readonly property int defaultMaxLineCount: 3
maxLineCount: defaultMaxLineCount
onLinkActivated: {
Functions.handleLink(link);
}
function toggleMaxLineCount() {
maxLineCount = maxLineCount > 0 ? 0 : defaultMaxLineCount
}
}
Item {
@ -133,15 +118,16 @@ Column {
fillMode: Image.PreserveAspectCrop
autoTransform: true
asynchronous: true
visible: hasImage && status === Image.Ready
source: picture.isDownloadingCompleted ? picture.path : ""
visible: opacity > 0
opacity: hasImage && status === Image.Ready ? 1 : 0
layer.enabled: webPagePreviewColumn.highlighted
layer.effect: PressEffect { source: singleImage }
Behavior on opacity { NumberAnimation {} }
Behavior on opacity { FadeAnimation {} }
MouseArea {
anchors.fill: parent
onClicked: {
pageStack.push(Qt.resolvedUrl("../pages/ImagePage.qml"), { "photoData" : webPageData.photo, "pictureFileInformation" : pictureFileInformation });
pageStack.push(Qt.resolvedUrl("../pages/ImagePage.qml"), { "photoData" : webPageData.photo, "pictureFileInformation" : picture.fileInformation });
}
}
}
@ -154,17 +140,12 @@ Column {
}
Label {
id: noPreviewAvailableText
width: parent.width
text: qsTr("Preview not supported for this link...")
font.pixelSize: webPagePreviewColumn.largerFontSize ? Theme.fontSizeExtraSmall : Theme.fontSizeTiny
font.italic: true
color: Theme.secondaryColor
truncationMode: TruncationMode.Fade
wrapMode: Text.Wrap
maximumLineCount: 1
textFormat: Text.StyledText
visible: !siteNameText.visible && !titleText.visible && !descriptionText.visible && !webPagePreviewImageItem.visible
}