diff --git a/html/content.css b/html/content.css index 8fe7b71..51d5412 100644 --- a/html/content.css +++ b/html/content.css @@ -10,6 +10,11 @@ body { font-weight: lighter; } +body.nightmode { + background: #111; + color: #aaa; +} + h1 { font-weight: lighter; font-size: 1.4em; @@ -24,6 +29,10 @@ h1 { display: block; } +.nightmode #date { + border-bottom-color: #333; +} + .starred:after { content: "*"; } @@ -35,6 +44,10 @@ header p { font-size: 0.8em; } +.nightmode header p { + color: #888; +} + a { color: inherit; text-decoration: none; diff --git a/html/content.js b/html/content.js index 98cd8b1..44df827 100644 --- a/html/content.js +++ b/html/content.js @@ -47,3 +47,8 @@ function setFont(font, size) { document.body.style.fontFamily = font; document.body.style.fontSize = size + "pt"; } + +function setNightmode(nightmode) { + if(nightmode) document.body.className = "nightmode"; + else document.body.className = ""; +} diff --git a/qml/Content.qml b/qml/Content.qml index 017aa53..98f213d 100644 --- a/qml/Content.qml +++ b/qml/Content.qml @@ -12,10 +12,12 @@ Item { property ApplicationWindow app property int textFontSize: 14 + property bool nightmode property int scrollJump: 48 property int pageJump: parent.height Layout.minimumWidth: 400 onTextFontSizeChanged: webView.setDefaults() + onNightmodeChanged: webView.setDefaults() function scrollDown(jump) { if(!jump) { @@ -60,6 +62,7 @@ Item { var defFont = ', system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande"'; webView.runJavaScript("document.body.style.fontFamily = \"'" + fontLabel.font.family + "'" + defFont + "\";"); webView.runJavaScript("document.body.style.fontSize = '" + content.textFontSize + "pt';"); + webView.runJavaScript("setNightmode(" + (content.nightmode ? "true" : "false") + ")") } diff --git a/qml/PostListItem.qml b/qml/PostListItem.qml index a738a17..324d69c 100644 --- a/qml/PostListItem.qml +++ b/qml/PostListItem.qml @@ -4,6 +4,7 @@ import QtQuick.Controls 1.3 Item { property int textFontSize: 14 property int smallfontSize: 11 + property bool nightmode Component.onCompleted: fixFontSize() onTextFontSizeChanged: fixFontSize() @@ -16,17 +17,15 @@ Item { height: column.height + 20 width: parent.parent.parent.width - Rectangle { + Item { anchors.fill: parent - color: "transparent" - Rectangle { + Item { anchors.fill: parent anchors.leftMargin: 15 anchors.rightMargin: 15 anchors.topMargin: 10 anchors.bottomMargin: 10 - color: "transparent" Column { id: column @@ -38,7 +37,7 @@ Item { text: feedTitle font.pointSize: smallfontSize textFormat: Text.PlainText - color: "gray" + color: nightmode ? "#888" : "gray" wrapMode: Text.WrapAtWordBoundaryOrAnywhere renderType: Text.NativeRendering } @@ -46,14 +45,14 @@ Item { text: date.toLocaleString(Qt.locale(), Locale.ShortFormat) font.pointSize: smallfontSize textFormat: Text.PlainText - color: "gray" + color: nightmode ? "#888" : "gray" wrapMode: Text.WrapAtWordBoundaryOrAnywhere renderType: Text.NativeRendering } } Label { text: title - color: read ? "gray" : "black" + color: nightmode ? (read ? "#888" : "#aaa") : (read ? "gray" : "black") font.pointSize: textFontSize textFormat: Text.RichText wrapMode: Text.WrapAtWordBoundaryOrAnywhere @@ -64,7 +63,7 @@ Item { text: excerpt font.pointSize: smallfontSize textFormat: Text.RichText - color: "gray" + color: nightmode ? "#888" : "gray" wrapMode: Text.WrapAtWordBoundaryOrAnywhere renderType: Text.NativeRendering width: parent.width @@ -76,7 +75,7 @@ Item { anchors.top: parent.bottom width: parent.width height: 1 - color: "lightgray" + color: nightmode ? "#222" : "lightgray" } } diff --git a/qml/Sidebar.qml b/qml/Sidebar.qml index 56cf9ac..d1c9d10 100644 --- a/qml/Sidebar.qml +++ b/qml/Sidebar.qml @@ -11,6 +11,7 @@ ScrollView { property Content content property Post previousPost property int textFontSize: 14 + property bool nightmode style: ScrollViewStyle { transientScrollBars: true @@ -39,6 +40,7 @@ ScrollView { delegate: Component { PostListItem { textFontSize: item.textFontSize + nightmode: app.nightmode } } @@ -47,7 +49,7 @@ ScrollView { Rectangle { width: listView.currentItem.width height: listView.currentItem.height - color: "lightblue" + color: nightmode ? "#222" : "lightblue" opacity: 0.5 y: listView.currentItem.y } diff --git a/qml/TheMenuBar.qml b/qml/TheMenuBar.qml index 2daa001..ca2bf9d 100644 --- a/qml/TheMenuBar.qml +++ b/qml/TheMenuBar.qml @@ -67,6 +67,12 @@ MenuBar { Menu { visible: menuBar.visible title: qsTr("View") + MenuItem { + text: qsTr("Night mode") + shortcut: "1" + onTriggered: app.toggleNightmode() + } + MenuItem { text: qsTr("Zoom In") shortcut: "Ctrl++" diff --git a/qml/main.qml b/qml/main.qml index 49443f2..d09a645 100644 --- a/qml/main.qml +++ b/qml/main.qml @@ -9,6 +9,7 @@ ApplicationWindow { id: app title: "FeedTheMonkey" visible: true + color: nightmode ? "#111" : "#eee" minimumWidth: 480 minimumHeight: 320 @@ -26,6 +27,7 @@ ApplicationWindow { property int defaultTextFontSizeIndex: 3 property int textFontSizeIndex: defaultTextFontSizeIndex property int textFontSize: fontSizes[textFontSizeIndex] + property bool nightmode: false Settings { id: settings @@ -36,6 +38,7 @@ ApplicationWindow { property alias height: app.height property alias sidebarWidth: sidebar.width property alias textFontSizeIndex: app.textFontSizeIndex + property alias nightmode: app.nightmode } property TheMenuBar menu: TheMenuBar { @@ -61,6 +64,10 @@ ApplicationWindow { } } + function toggleNightmode() { + app.nightmode = !app.nightmode + } + function zoomIn() { if(textFontSizeIndex + 1 < fontSizes.length) { textFontSize = fontSizes[++textFontSizeIndex] @@ -95,6 +102,9 @@ ApplicationWindow { case Qt.Key_k: sidebar.previous() break + case Qt.Key_1: + toggleNightmode() + break case Qt.Key_Home: content.scrollUp() break @@ -133,6 +143,10 @@ ApplicationWindow { orientation: Qt.Horizontal visible: serverLogin.loggedIn() focus: true + handleDelegate: Rectangle { + width: 1 + color: app.nightmode ? "#333" : "#aaa" + } Sidebar { id: sidebar @@ -142,6 +156,7 @@ ApplicationWindow { Layout.minimumWidth: 200 implicitWidth: 300 textFontSize: app.textFontSize + nightmode: app.nightmode } Content { @@ -151,6 +166,7 @@ ApplicationWindow { Layout.minimumWidth: 200 implicitWidth: 624 textFontSize: app.textFontSize + nightmode: app.nightmode } Keys.onPressed: keyPressed(event)