going back to HTML

This commit is contained in:
Jeena 2015-02-08 19:55:24 +01:00
parent 369144f03f
commit 6ffdd51bf0
8 changed files with 79 additions and 256 deletions

View file

@ -1,153 +1,65 @@
import QtWebKit 3.0
import QtWebKit.experimental 1.0
import QtQuick 2.0
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.3
import QtQuick.Controls 1.3
import TTRSS 1.0
ScrollView {
id: content
property Post post
property int headLinefontSize: 23
property int textfontSize: 14
property int scrollJump: 48
property int pageJump: parent.height
Layout.minimumWidth: 400
style: ScrollViewStyle {
transientScrollBars: true
}
function scrollDown(jump) {
smoothScrolling.enabled = true
Label { id: fontLabel }
var top = Math.max(contentItem.height - parent.height, 0);
WebView {
id: webView
url: "content.html"
// experimental.transparentBackground: true
if(jump && flickableItem.contentY < top - jump) {
flickableItem.contentY += jump
} else {
flickableItem.contentY = top
}
}
property Post post: content.post
function scrollUp(jump) {
smoothScrolling.enabled = true
if(jump && flickableItem.contentY >= jump) {
flickableItem.contentY -= jump;
} else {
flickableItem.contentY = 0;
}
}
Behavior on flickableItem.contentY {
id: smoothScrolling
enabled: false
NumberAnimation {
easing.type: Easing.OutCubic
}
}
Item {
height: column.height + 50
width: parent.parent.width
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
}
anchors.fill: parent
}
Rectangle {
anchors.fill: parent
width: parent.width
height: column.height
anchors.margins: 30
color: "transparent"
Column {
id: column
spacing: 10
width: parent.width
Label {
text: {
if(post) {
var str = post.feedTitle
if(post.author) {
str += " - " + post.author;
}
return str;
} else {
return ""
}
}
color: "gray"
font.pointSize: textfontSize
textFormat: Text.PlainText
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
width: parent.width
renderType: Text.NativeRendering
}
Label {
text: post ? post.title : ""
font.pointSize: headLinefontSize
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
width: parent.width
renderType: Text.NativeRendering
MouseArea {
anchors.fill: parent
onClicked: Qt.openUrlExternally(post.link)
}
}
Label {
text: post ? post.date.toLocaleString(Qt.locale(), Locale.LongFormat) : ""
color: "gray"
font.pointSize: textfontSize
textFormat: Text.PlainText
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
width: parent.width
renderType: Text.NativeRendering
}
Rectangle {
width: parent.width
height: 14
color: "transparent"
Rectangle {
width: parent.width
height: 1
anchors.top: parent.top
anchors.topMargin: 15
color: "lightgray"
visible: {
if(post) {
return true;
}
return false;
}
}
}
Rectangle {
height: contentLabel.height + 20
width: parent.width
color: "transparent"
RescalingRichText {
id: contentLabel
text: post ? post.content : ""
fontSize: textfontSize * 1.3
width: parent.width
anchors.top: parent.top
anchors.topMargin: 0
lineHeight: 1.3
}
}
function setPost() {
if(post) {
experimental.evaluateJavaScript("setArticle(" + post.jsonString + ")")
}
}
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';");
}
// Enable communication between QML and WebKit
experimental.preferences.navigatorQtObjectEnabled: true;
onNavigationRequested: {
if (request.navigationType != WebView.LinkClickedNavigation) {
request.action = WebView.AcceptRequest;
} else {
request.action = WebView.IgnoreRequest;
Qt.openUrlExternally(request.url);
}
}
onLoadingChanged: {
if(loadRequest.status === WebView.LoadSucceededStatus) {
setDefaults()
}
}
onPostChanged: setPost()
}
}

View file

@ -8,7 +8,8 @@ SOURCES += main.cpp \
post.cpp
RESOURCES += qml.qrc \
images.qrc
images.qrc \
html.qrc
RC_FILE = Icon.icns

View file

@ -1,96 +0,0 @@
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);
}
}
}

View file

@ -1,14 +1,15 @@
body {
font-family: sans-serif;
padding: 1em 1.5em;
font-weight: lighter;
background: #eee;
background: #eee;
font-family: sans-serif;
padding: 1em 1.5em;
font-weight: lighter;
font-size: 1em;
}
h1 {
font-weight: lighter;
margin: 0;
padding: 0;
font-weight: lighter;
margin: 0;
padding: 0;
}
#date:not(:empty) {
@ -19,25 +20,25 @@ h1 {
}
.starred:after {
content: "*";
content: "*";
}
header p {
color: #aaa;
margin: 0;
padding: 0
color: #aaa;
margin: 0;
padding: 0
}
a {
color: #333;
text-decoration: none;
color: #333;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
max-width: 100%;
height: auto;
}
article {
line-height: 1.6;
line-height: 1.6;
}

View file

@ -1,18 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TTRSS</title>
<link href="content.css" media="all" rel="stylesheet" />
<script type="text/javascript" src="content.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="utf-8">
<title>TTRSS</title>
<link href="content.css" media="all" rel="stylesheet">
<script type="text/javascript" src="content.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body class=''>
<header>
<p><span id="feed_title"></span> <span id="author"></span></p>
<h1><a id="title" href=""></a></h1>
<p><timedate id="date"></timedate></p>
</header>
<article id="article"></article>
<header>
<p><span id="feed_title"></span> <span id="author"></span></p>
<h1><a id="title" href=""></a></h1>
<p><timedate id="date"></timedate></p>
</header>
<article id="article"></article>
</body>
</html>

View file

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

View file

@ -50,6 +50,7 @@ ApplicationWindow {
Keys.onRightPressed: sidebar.next()
Keys.onLeftPressed: sidebar.previous()
/*
Keys.onDownPressed: content.scrollDown(content.scrollJump)
Keys.onUpPressed: content.scrollUp(content.scrollJump)
Keys.onSpacePressed: content.scrollDown(content.pageJump)
@ -65,7 +66,7 @@ ApplicationWindow {
} else if (event.key === Qt.Key_PageDown) {
content.scrollDown(content.pageJump)
}
}
}*/
}
Login {

View file

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