going back to HTML
This commit is contained in:
parent
369144f03f
commit
6ffdd51bf0
8 changed files with 79 additions and 256 deletions
172
Content.qml
172
Content.qml
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -8,7 +8,8 @@ SOURCES += main.cpp \
|
|||
post.cpp
|
||||
|
||||
RESOURCES += qml.qrc \
|
||||
images.qrc
|
||||
images.qrc \
|
||||
html.qrc
|
||||
|
||||
RC_FILE = Icon.icns
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
33
content.css
33
content.css
|
@ -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;
|
||||
}
|
||||
|
|
22
content.html
22
content.html
|
@ -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>
|
||||
|
|
|
@ -42,3 +42,8 @@ function setArticle(article) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setFont(font, size) {
|
||||
document.body.style.fontFamily = font;
|
||||
//document.body.style.fontSize = size + "pt";
|
||||
}
|
||||
|
|
3
main.qml
3
main.qml
|
@ -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 {
|
||||
|
|
1
qml.qrc
1
qml.qrc
|
@ -6,6 +6,5 @@
|
|||
<file>Login.qml</file>
|
||||
<file>PostListItem.qml</file>
|
||||
<file>Sidebar.qml</file>
|
||||
<file>RescalingRichText.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue