fixed font resizing

Content.qml

@@ -12,11 +12,11 @@ ScrollView {
     property Post post
     property ApplicationWindow app
 
-    property int headLinefontSize: 23
+    property int textFontSize: 14
-    property int textfontSize: 14
     property int scrollJump: 48
     property int pageJump: parent.height
     Layout.minimumWidth: 400
+    onTextFontSizeChanged: webView.setDefaults()
 
     style: ScrollViewStyle {
         transientScrollBars: true
@@ -58,7 +58,7 @@ ScrollView {
         function setDefaults() {
             // font name needs to be enclosed in single quotes
             experimental.evaluateJavaScript("document.body.style.fontFamily = \"'" + fontLabel.font.family + "'\";");
-            experimental.evaluateJavaScript("document.body.style.fontSize = '" + fontLabel.font.pointSize + "pt';");
+            experimental.evaluateJavaScript("document.body.style.fontSize = '" + content.textFontSize + "pt';");
         }
 
 

PostListItem.qml

@@ -1,84 +1,89 @@
 import QtQuick 2.0
 import QtQuick.Controls 1.3
 
-Component {
+Item {
-    Item {
+    property int textFontSize: 14
-        property int headLinefontSize: 14
+    property int smallfontSize: 11
-        property int smallfontSize: 11
 
-        id: item
+    Component.onCompleted: fixFontSize()
-        height: column.height + 20
+    onTextFontSizeChanged: fixFontSize()
-        width: parent.parent.parent.width
+
+    function fixFontSize() {
+        smallfontSize = textFontSize * 0.8
+    }
+
+    id: item
+    height: column.height + 20
+    width: parent.parent.parent.width
+
+    Rectangle {
+        anchors.fill: parent
+        color: "transparent"
 
         Rectangle {
             anchors.fill: parent
+            anchors.leftMargin: 15
+            anchors.rightMargin: 15
+            anchors.topMargin: 10
+            anchors.bottomMargin: 10
             color: "transparent"
 
-            Rectangle {
+            Column {
-                anchors.fill: parent
+                id: column
-                anchors.leftMargin: 15
+                width: parent.width
-                anchors.rightMargin: 15
-                anchors.topMargin: 10
-                anchors.bottomMargin: 10
-                color: "transparent"
 
-                Column {
+                Row {
-                    id: column
+                    spacing: 10
-                    width: parent.width
-
-                    Row {
-                        spacing: 10
-                        Label {
-                            text: feedTitle
-                            font.pointSize: smallfontSize
-                            textFormat: Text.PlainText
-                            color: "gray"
-                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                            renderType: Text.NativeRendering
-                        }
-                        Label {
-                            text: date.toLocaleString(Qt.locale(), Locale.ShortFormat)
-                            font.pointSize: smallfontSize
-                            textFormat: Text.PlainText
-                            color: "gray"
-                            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                            renderType: Text.NativeRendering
-                        }
-                    }
                     Label {
-                        text: title
+                        text: feedTitle
-                        color: read ? "gray" : "black"
-                        font.pointSize: headLinefontSize
-                        textFormat: Text.RichText
-                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                        renderType: Text.NativeRendering
-                        width: parent.width
-                    }
-                    Label {
-                        text: excerpt
                         font.pointSize: smallfontSize
-                        textFormat: Text.RichText
+                        textFormat: Text.PlainText
+                        color: "gray"
+                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                        renderType: Text.NativeRendering
+                    }
+                    Label {
+                        text: date.toLocaleString(Qt.locale(), Locale.ShortFormat)
+                        font.pointSize: smallfontSize
+                        textFormat: Text.PlainText
                         color: "gray"
                         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                         renderType: Text.NativeRendering
-                        width: parent.width
                     }
                 }
-            }
+                Label {
-
+                    text: title
-            Rectangle {
+                    color: read ? "gray" : "black"
-                anchors.top: parent.bottom
+                    font.pointSize: textFontSize
-                width: parent.width
+                    textFormat: Text.RichText
-                height: 1
+                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                color: "lightgray"
+                    renderType: Text.NativeRendering
+                    width: parent.width
+                }
+                Label {
+                    text: excerpt
+                    font.pointSize: smallfontSize
+                    textFormat: Text.RichText
+                    color: "gray"
+                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                    renderType: Text.NativeRendering
+                    width: parent.width
+                }
             }
         }
 
-        MouseArea {
+        Rectangle {
-            anchors.fill: parent
+            anchors.top: parent.bottom
-            onClicked: {
+            width: parent.width
-                parent.parent.parent.currentIndex = index
+            height: 1
-            }
+            color: "lightgray"
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            parent.parent.parent.currentIndex = index
         }
     }
 }

Sidebar.qml

@@ -10,6 +10,7 @@ ScrollView {
     property Server server
     property Content content
     property Post previousPost
+    property int textFontSize: 14
 
     style: ScrollViewStyle {
         transientScrollBars: true
@@ -35,7 +36,11 @@ ScrollView {
         spacing: 1
         model: item.server.posts
 
-        delegate: PostListItem {}
+        delegate: Component {
+            PostListItem {
+                textFontSize: item.textFontSize
+            }
+        }
 
         highlightFollowsCurrentItem: false
         highlight: Component {

TheMenuBar.qml

@@ -84,17 +84,20 @@ MenuBar {
         MenuItem {
             text: qsTr("Zoom In")
             shortcut: "Ctrl++"
-            enabled: false
+            enabled: true
+            onTriggered: app.zoomIn()
         }
         MenuItem {
             text: qsTr("Zoom Out")
             shortcut: "Ctrl+-"
-            enabled: false
+            enabled: true
+            onTriggered: app.zoomOut()
         }
         MenuItem {
             text: qsTr("Reset")
             shortcut: "Ctrl+0"
-            enabled: false
+            enabled: true
+            onTriggered: app.zoomReset()
         }
     }
 

content.css

@@ -8,6 +8,7 @@ body {
 
 h1 {
     font-weight: lighter;
+    font-size: 1.4em;
     margin: 0;
     padding: 0;
 }

content.js

@@ -45,5 +45,5 @@ function setArticle(article) {
 
 function setFont(font, size) {
     document.body.style.fontFamily = font;
-    //document.body.style.fontSize = size + "pt";
+    document.body.style.fontSize = size + "pt";
 }

main.qml

@@ -19,6 +19,9 @@ ApplicationWindow {
     property Sidebar sidebar: sidebar
     property Content content: content
 
+    property int defaultTextFontSize: 13
+    property int textFontSize: defaultTextFontSize
+
     Settings {
         category: "window"
         property alias x: app.x
@@ -26,6 +29,7 @@ ApplicationWindow {
         property alias width: app.width
         property alias height: app.height
         property alias sidebarWidth: sidebar.width
+        //property alias textFontSize: app.textFontSize
     }
 
     property TheMenuBar menu: TheMenuBar {
@@ -41,6 +45,18 @@ ApplicationWindow {
         server.initialize(serverLogin.serverUrl, serverLogin.sessionId);
     }
 
+    function zoomIn() {
+        textFontSize *= 1.2
+    }
+
+    function zoomOut() {
+        textFontSize *= 0.8
+    }
+
+    function zoomReset() {
+        textFontSize = defaultTextFontSize
+    }
+
     function keyPressed(event) {
         switch (event.key) {
         case Qt.Key_Right:
@@ -94,6 +110,7 @@ ApplicationWindow {
 
             Layout.minimumWidth: 200
             implicitWidth: 300
+            textFontSize: app.textFontSize
         }
 
         Content {
@@ -102,6 +119,7 @@ ApplicationWindow {
 
             Layout.minimumWidth: 200
             implicitWidth: 624
+            textFontSize: app.textFontSize
         }
 
         Keys.onPressed: keyPressed(event)