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

Fixed Emoji image positioning in multiline StyledText

harbour-fernschreiber.pro

@@ -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 \

qml/components/MessageListViewItem.qml

@@ -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

qml/components/MultilineEmojiLabel.qml

@@ -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
+                    }
+                }
+            }
+        }
+    }
+}

qml/components/WebPagePreview.qml

@@ -19,101 +19,86 @@
 import QtQuick 2.6
 import QtGraphicalEffects 1.0
 import Sailfish.Silica 1.0
-import "../components"
+import WerkWolf.Fernschreiber 1.0
-import "../js/twemoji.js" as Emoji
 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") {
+            if (webPageData.photo) {
-                hasImage = true;
                 // 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) {
+                if (photo) {
-                    singleImage.source = pictureFileInformation.local.path;
+                    picture.fileInformation = photo
-                } else {
-                    tdLibWrapper.downloadFile(pictureFileInformation.id);
                 }
             }
         }
     }
 
-    Connections {
+    function clicked() {
-        target: tdLibWrapper
+        descriptionText.toggleMaxLineCount()
-        onFileUpdated: {
-            if (typeof pictureFileInformation !== "undefined" && fileId === pictureFileInformation.id) {
-                if (fileInformation.local.is_downloading_completed) {
-                    pictureFileInformation = fileInformation;
-                    singleImage.source = fileInformation.local.path;
-                }
-            }
-        }
     }
 
-    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) : ""
+        rawText: webPageData.site_name ? webPageData.site_name : ""
-        font.pixelSize: webPagePreviewColumn.largerFontSize ? Theme.fontSizeSmall : Theme.fontSizeExtraSmall
+        font.pixelSize: webPagePreviewColumn.fontSize
         font.bold: true
         color: Theme.secondaryHighlightColor
-        truncationMode: TruncationMode.Fade
+        visible: (rawText !== "")
-        maximumLineCount: 1
+        maxLineCount: 1
-        textFormat: Text.StyledText
-        visible: (text !== "")
     }
 
-    Label {
+    MultilineEmojiLabel {
         id: titleText
 
         width: parent.width
-        text: webPageData.title ? Emoji.emojify(webPageData.title, font.pixelSize) : ""
+        rawText: webPageData.title ? webPageData.title : ""
-        font.pixelSize: webPagePreviewColumn.largerFontSize ? Theme.fontSizeSmall : Theme.fontSizeExtraSmall
+        font.pixelSize: webPagePreviewColumn.fontSize
         font.bold: true
-        truncationMode: TruncationMode.Fade
+        visible: (rawText !== "")
-        wrapMode: Text.Wrap
+        maxLineCount: 2
-        maximumLineCount: 2
-        textFormat: Text.StyledText
-        visible: (text !== "")
     }
 
-    Label {
+    MultilineEmojiLabel {
         id: descriptionText
 
         width: parent.width
-        text: webPageData.description ? Emoji.emojify(Functions.enhanceMessageText(webPageData.description), font.pixelSize) : ""
+        rawText: webPageData.description ? Functions.enhanceMessageText(webPageData.description) : ""
-        font.pixelSize: webPagePreviewColumn.largerFontSize ? Theme.fontSizeSmall : Theme.fontSizeExtraSmall
+        font.pixelSize: webPagePreviewColumn.fontSize
-        truncationMode: TruncationMode.Fade
+        visible: (rawText !== "")
-        wrapMode: Text.Wrap
+        readonly property int defaultMaxLineCount: 3
-        maximumLineCount: 3
+        maxLineCount: defaultMaxLineCount
-        textFormat: Text.StyledText
-        visible: (text !== "")
-        linkColor: Theme.highlightColor
         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
     }