added rescaling images

Content.qml

@@ -49,6 +49,8 @@ ScrollView {
 
         MouseArea {
             onWheel: {
+                // If we use the mouse wheel we don't want any
+                // animation bahaviour because it slows it down
                 wheel.accepted = false
                 smoothScrolling.enabled = false
             }
@@ -135,20 +137,14 @@ ScrollView {
                     width: parent.width
                     color: "transparent"
 
-                    Label {
+                    RescalingRichText {
                         id: contentLabel
-                        text: post ? "<style>a { color: #555; }</style>" + post.content : ""
+                        text: post ? post.content : ""
-                        textFormat: Text.RichText
+                        fontSize: textfontSize * 1.3
-                        font.pointSize: textfontSize
-                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                         width: parent.width
-                        renderType: Text.NativeRendering
                         anchors.top: parent.top
-                        anchors.topMargin: 20
+                        anchors.topMargin: 0
                         lineHeight: 1.3
-                        onLinkActivated: {
-                            Qt.openUrlExternally(link)
-                        }
                     }
                 }
             }

PostListItem.qml

@@ -49,7 +49,7 @@ Component {
                         text: title
                         color: read ? "gray" : this.color
                         font.pointSize: headLinefontSize
-                        textFormat: Text.PlainText
+                        textFormat: Text.RichText
                         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                         renderType: Text.NativeRendering
                         width: parent.width

RescalingRichText.qml

@@ -0,0 +1,96 @@
+import QtQuick 2.0
+import QtQuick.Controls 1.3
+
+// from: https://github.com/pycage/tidings/blob/master/qml/pages/RescalingRichText.qml
+
+/* Pretty fancy element for displaying rich text fitting the width.
+ *
+ * Images are scaled down to fit the width, or, technically speaking, the
+ * rich text content is actually scaled down so the images fit, while the
+ * font size is scaled up to keep the original font size.
+ */
+Item {
+    id: root
+
+    property string text
+    property color color
+    property real fontSize
+    property bool showSource: false
+    property real lineHeight: 1
+
+    property real scaling: 1
+
+    property string _style: "<style>" +
+                            "a:link { color: gray }" +
+                            "</style>"
+
+    signal linkActivated(string link)
+
+    height: contentLabel.sourceComponent !== null ? contentLabel.height * scaling
+                                                  : 0
+    clip: true
+
+    onWidthChanged: {
+        rescaleTimer.restart();
+    }
+
+    onTextChanged: {
+        rescaleTimer.restart();
+    }
+
+    Label {
+        id: layoutLabel
+
+        visible: false
+        width: parent.width
+        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+        textFormat: Text.RichText
+
+        // tiny font so that only images are relevant
+        text: "<style>* { font-size: 1px }</style>" + parent.text
+
+        onContentWidthChanged: {
+            // console.log("contentWidth: " + contentWidth);
+            rescaleTimer.restart();
+        }
+    }
+
+    Loader {
+        id: contentLabel
+        sourceComponent: rescaleTimer.running ? null : labelComponent
+    }
+
+    Component {
+        id: labelComponent
+
+        Label {
+            width: root.width / scaling
+            scale: scaling
+
+            transformOrigin: Item.TopLeft
+            color: root.color
+            font.pixelSize: root.fontSize / scaling
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            textFormat: root.showSource ? Text.PlainText : Text.RichText
+            smooth: true
+            lineHeight: root.lineHeight * scaling
+
+            text: _style + root.text
+
+            onLinkActivated: {
+                root.linkActivated(link);
+            }
+        }
+    }
+
+    Timer {
+        id: rescaleTimer
+        interval: 100
+
+        onTriggered: {
+            var contentWidth = Math.floor(layoutLabel.contentWidth);
+            scaling = Math.min(1, parent.width / (layoutLabel.contentWidth + 0.0));
+            // console.log("scaling: " + scaling);
+        }
+    }
+}

qml.qrc

@@ -6,5 +6,6 @@
         <file>Login.qml</file>
         <file>PostListItem.qml</file>
         <file>Sidebar.qml</file>
+        <file>RescalingRichText.qml</file>
     </qresource>
 </RCC>