[Sailfish] Dark tool bar

This commit is contained in:
Muki 2016-11-20 13:16:18 +01:00
parent 84dee548e3
commit 4e2431492e
11 changed files with 70 additions and 563 deletions

View file

@ -48,7 +48,7 @@ Page {
fetcher.update();
}
if (pageStack.depth==3) {
if (pageStack.depth===3) {
pageStack.replaceAbove(null,Qt.resolvedUrl("FirstPage.qml"));
} else {
pageStack.pop();
@ -75,7 +75,6 @@ Page {
SilicaWebView {
id: view
//anchors { top: parent.top; left: parent.left; right: parent.right; bottom: parent.bottom }
anchors {left: parent.left; right: parent.right}
height: controlbar.open ? parent.height - controlbar.height : parent.height
url: root.url
@ -90,7 +89,7 @@ Page {
onLoadingChanged: {
switch (loadRequest.status) {
case WebView.LoadStartedStatus:
proggressPanel.text = qsTr("Loading page content");
proggressPanel.text = qsTr("Loading page content...");
proggressPanel.open = true;
break;
case WebView.LoadSucceededStatus:
@ -118,16 +117,15 @@ Page {
}
}
ControlBarWebPreview {
IconBar {
id: controlbar
flick: view
canBack: true
canStar: false
canOpenBrowser: false
canReader: false
stared: false
transparent: false
onBackClicked: pageStack.pop()
flickable: view
theme: "black"
IconBarItem {
text: qsTr("Back")
icon: "image://theme/icon-m-back"
onClicked: view.canGoBack ? view.goBack() : pageStack.pop()
}
}
ProgressPanel {
@ -135,7 +133,6 @@ Page {
transparent: false
anchors.left: parent.left
anchors.bottom: parent.bottom
height: isPortrait ? app.panelHeightPortrait : app.panelHeightLandscape
cancelable: true
onCloseClicked: view.stop()
}

View file

@ -261,7 +261,9 @@ Item {
visible: opacity > 0.0
Behavior on opacity { FadeAnimation {} }
opacity: pageStack.currentPage.objectName === "entries" ? 1.0 : 0.0
opacity: (pageStack.currentPage.objectName === "entries" &&
settings.viewMode !==4 && settings.viewMode !==6 &&
settings.viewMode !==7) ? 1.0 : 0.0
icon.source: "image://icons/icon-m-filter-" + settings.filter + "?" + root.iconColor
onClicked: {
@ -402,6 +404,12 @@ Item {
visible: root.cancelable
}
}
Image {
anchors.fill: parent
source: "image://theme/graphic-gradient-edge"
opacity: 0.5
}
}
MouseArea {

View file

@ -1,271 +0,0 @@
/*
Copyright (C) 2014 Michal Kosciesza <michal@mkiol.net>
This file is part of Kaktus.
Kaktus is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Kaktus is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Kaktus. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.0
import Sailfish.Silica 1.0
Item {
id: root
property bool canBack: false
property bool canMarkRead: false
property bool canReader: false
property bool canStar: false
property bool canOpenWebview: false
property bool canOpenBrowser: false
property bool canFontUp: false
property bool canFontDown: false
property bool canClipboard: false
property bool stared: false
property bool read: false
property bool open: false
property int showTime: 6000
property bool transparent: true
property real barShowMoveWidth: 20
property Flickable flick: null
property bool isPortrait: app.orientation==Orientation.Portrait
function getSpacing() {
var count = 0;
if (canBack)
count++;
if (canMarkRead)
count++;
if (canReader)
count++;
if (canStar)
count++;
if (canOpenWebview)
count++;
if (canOpenBrowser)
count++;
if (canFontUp)
count++;
if (canFontDown)
count++;
if (canClipboard)
count++;
return (root.width - (back.width * (count))) / count-1;
}
signal backClicked()
signal markReadClicked()
signal starClicked()
signal browserClicked()
signal webviewClicked()
signal offlineClicked()
signal readerClicked()
signal fontUpClicked()
signal fontDownClicked()
signal clipboardClicked()
width: parent.width
height: isPortrait ? app.panelHeightPortrait : app.panelHeightLandscape
anchors.bottom: parent.bottom
anchors.left: parent.left
opacity: root.open ? 1.0 : 0.0
Behavior on opacity { FadeAnimation {duration: 300} }
function show() {
if (!open)
root.open = true;
timer.restart();
}
function hide() {
if (open) {
root.open = false;
timer.stop();
}
}
Rectangle {
anchors.fill: parent
visible: root.transparent
color: Theme.rgba(Theme.highlightColor, 0.2)
}
Rectangle {
anchors.fill: parent
visible: !root.transparent
color: Theme.highlightBackgroundColor
}
Image {
anchors.fill: parent
//fillMode: Image.PreserveAspectFit
source: "image://theme/graphic-gradient-edge"
visible: root.transparent
}
Item {
anchors.fill: parent
MouseArea {
enabled: root.opacity > 0.0
anchors.fill: parent
onClicked: root.hide()
}
Row {
id: toolbarRow
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
spacing: root.getSpacing()
IconButton {
id: back
visible: root.canBack
icon.source: "image://theme/icon-m-back?"+(root.transparent ? Theme.highlightColor : Theme.highlightDimmerColor)
onClicked: {root.backClicked();show();}
}
IconButton {
visible: root.canMarkRead
icon.source: root.read ?
"image://icons/icon-m-read?"+(root.transparent ? Theme.highlightColor : Theme.highlightDimmerColor)
: "image://icons/icon-m-read-selected?"+(root.transparent ? Theme.highlightColor : Theme.highlightDimmerColor)
onClicked: {root.markReadClicked();show();}
}
IconButton {
visible: root.canStar
icon.source: root.stared ?
"image://theme/icon-m-favorite-selected?"+(root.transparent ? Theme.highlightColor : Theme.highlightDimmerColor)
: "image://theme/icon-m-favorite?"+(root.transparent ? Theme.highlightColor : Theme.highlightDimmerColor)
onClicked: {root.starClicked();show();}
}
IconButton {
width: back.width; height: back.height
visible: root.canClipboard
icon.source: "image://theme/icon-m-clipboard?"+(root.transparent ? Theme.highlightColor : Theme.highlightDimmerColor)
onClicked: {root.clipboardClicked();show();}
}
IconButton {
width: back.width; height: back.height
visible: root.canOpenWebview
icon.source: "image://icons/icon-m-webview?"+(root.transparent ? Theme.highlightColor : Theme.highlightDimmerColor)
onClicked: {root.webviewClicked();show();}
}
IconButton {
width: back.width; height: back.height
visible: root.canOpenBrowser
icon.source: "image://icons/icon-m-browser?"+(root.transparent ? Theme.highlightColor : Theme.highlightDimmerColor)
onClicked: {root.browserClicked();show();}
}
IconButton {
width: back.width; height: back.height
visible: root.canFontUp
icon.source: "image://icons/icon-m-fontup?"+(root.transparent ? Theme.highlightColor : Theme.highlightDimmerColor)
onClicked: {root.fontUpClicked();show();}
}
IconButton {
width: back.width; height: back.height
visible: root.canFontDown
icon.source: "image://icons/icon-m-fontdown?"+(root.transparent ? Theme.highlightColor : Theme.highlightDimmerColor)
onClicked: {root.fontDownClicked();show();}
}
IconButton {
visible: root.canReader
width: back.width; height: back.height
/*icon.source: settings.readerMode ? "image://theme/icon-m-document?"+(root.transparent ? Theme.highlightColor : Theme.highlightDimmerColor)
: "image://theme/icon-m-document?"+(root.transparent ? Qt.darker(Theme.highlightColor,3.5) : Qt.lighter(Theme.highlightDimmerColor,3.5))
*/
icon.source: settings.readerMode ? "image://icons/icon-m-reader-selected?"+(root.transparent ? Theme.highlightColor : Theme.highlightDimmerColor)
: "image://icons/icon-m-reader?"+(root.transparent ? Theme.highlightColor : Theme.highlightDimmerColor)
onClicked: {
settings.readerMode = !settings.readerMode;
root.readerClicked();
show();
}
}
}
MouseArea {
enabled: root.opacity == 0.0
anchors.fill: parent
onClicked: root.show();
}
}
Timer {
id: timer
interval: root.showTime
onTriggered: hide();
}
QtObject {
id: m
property real initialContentY: 0.0
property real lastContentY: 0.0
property int vector: 0
}
Connections {
target: flick
onMovementStarted: {
m.vector = 0;
m.lastContentY = 0.0;
m.initialContentY=flick.contentY;
}
onContentYChanged: {
if (flick.moving) {
var dInit = flick.contentY-m.initialContentY;
var dLast = flick.contentY-m.lastContentY;
var lastV = m.vector;
if (dInit<-barShowMoveWidth)
root.show();
if (dInit>barShowMoveWidth)
root.hide();
if (dLast>barShowMoveWidth)
root.hide();
if (m.lastContentY!=0) {
if (dLast<0)
m.vector = -1;
if (dLast>0)
m.vector = 1;
if (dLast==0)
m.vector = 0;
}
if (lastV==-1 && m.vector==1)
m.initialContentY=flick.contentY;
if (lastV==1 && m.vector==-1)
m.initialContentY=flick.contentY;
m.lastContentY = flick.contentY;
}
}
}
}

View file

@ -1,235 +0,0 @@
/*
Copyright (C) 2016 Michal Kosciesza <michal@mkiol.net>
This file is part of Kaktus.
Kaktus is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Kaktus is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Kaktus. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.0
import Sailfish.Silica 1.0
Page {
id: root
property bool showBar: false
property string title
property string content
property string entryId
property string offlineUrl
property string onlineUrl
property bool stared
property bool read
property int index
property int feedindex
property bool cached
allowedOrientations: {
switch (settings.allowedOrientations) {
case 1:
return Orientation.Portrait;
case 2:
return Orientation.Landscape;
}
return Orientation.Landscape | Orientation.Portrait;
}
Component.onCompleted: {
bar.hide();
controlbar.show();
}
function check() {
// Not allowed while Syncing
if (dm.busy || fetcher.busy || dm.removerBusy) {
notification.show(qsTr("Wait until current task is complete."));
return false;
}
// Entry not cached and offline mode enabled
if (settings.offlineMode && !cached) {
notification.show(qsTr("Offline version not available."));
return false;
}
// Switch to Offline mode if no network
if (!settings.offlineMode && !dm.online) {
if (cached) {
// Entry cached
notification.show(qsTr("Enabling offline mode because network is disconnected."));
settings.offlineMode = true;
} else {
// Entry not cached
notification.show(qsTr("Network is disconnected."));
return false;
}
}
return true;
}
function openEntryInBrowser() {
entryModel.setData(index, "read", 1, "");
notification.show(qsTr("Launching an external browser."));
Qt.openUrlExternally(settings.offlineMode ? offlineUrl : onlineUrl);
}
function openEntryInViewer() {
// (!dm.online && settings.offlineMode) -> WORKAROUND for https://github.com/mkiol/kaktus/issues/14
if (!dm.online && settings.offlineMode) {
openEntryInBrowser();
return;
}
pageStack.replace(Qt.resolvedUrl("WebPreviewPage.qml"),
{"entryId": entryId,
"onlineUrl": onlineUrl,
"offlineUrl": offlineUrl,
"title": title,
"stared": stared,
"index": index,
"feedindex": feedindex,
"read" : read,
"cached" : cached
});
}
function openEntry() {
if (!check()) {
return;
}
if (settings.clickBehavior === 1) {
openEntryInBrowser();
return;
}
openEntryInViewer();
}
SilicaFlickable {
id: view
anchors.fill: parent
contentHeight: column.height
contentWidth: parent.width
Column {
id: column
anchors.left: parent.left; anchors.right: parent.right
spacing: Theme.paddingLarge
PageHeader {
title: root.title
}
Label {
anchors.left: parent.left; anchors.right: parent.right;
anchors.leftMargin: Theme.horizontalPageMargin ; anchors.rightMargin: Theme.horizontalPageMargin
text: root.content
wrapMode: Text.Wrap
textFormat: Text.StyledText
linkColor: Theme.highlightColor
font.pixelSize: Theme.fontSizeSmall
}
Item {
height: 2 * Theme.paddingLarge
width: parent.width
}
/*Button {
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("Open")
onClicked: {
openEntry();
}
}
Item {
height: Theme.paddingLarge
width: parent.width
}*/
}
VerticalScrollDecorator {}
}
ControlBarWebPreview {
id: controlbar
flick: view
canBack: false
canMarkRead: true
canStar: true
canClipboard: true
canReader: false
canOpenWebview: true
canOpenBrowser: !settings.openInBrowser
stared: root.stared
read: root.read
transparent: false
onBackClicked: pageStack.pop()
onMarkReadClicked: {
if (read) {
read=false;
entryModel.setData(root.index, "readr", 0, "");
} else {
read=true;
entryModel.setData(root.index, "read", 1, "");
}
}
onStarClicked: {
if (stared) {
stared=false;
entryModel.setData(root.index, "readlater", 0, "");
} else {
stared=true;
entryModel.setData(root.index, "readlater", 1, "");
}
}
onWebviewClicked: {
if (!check()) {
return;
}
openEntryInViewer();
}
onBrowserClicked: {
openEntryInBrowser();
}
onFontDownClicked: {
if (settings.fontSize>0)
settings.fontSize -= 1;
}
onFontUpClicked: {
if (settings.fontSize<2)
settings.fontSize += 1;
}
onClipboardClicked: {
notification.show(qsTr("URL was copied to the clipboard."));
Clipboard.text = root.onlineUrl;
}
}
}

View file

@ -126,12 +126,12 @@ Page {
function openEntryInBrowser() {
entryModel.setData(index, "read", 1, "");
notification.show(qsTr("Launching an external browser."));
notification.show(qsTr("Launching an external browser..."));
Qt.openUrlExternally(settings.offlineMode ? offlineUrl : onlineUrl);
}
function openUrlEntryInBrowser(url) {
notification.show(qsTr("Launching an external browser."));
notification.show(qsTr("Launching an external browser..."));
Qt.openUrlExternally(url);
}
@ -342,7 +342,7 @@ Page {
IconBar {
id: controlbar
flickable: view
transparent: false
theme: "dimmer"
IconBarItem {
text: qsTr("Back")

View file

@ -42,16 +42,8 @@ Dialog {
SilicaFlickable {
anchors {left: parent.left; right: parent.right }
anchors {top: parent.top; bottom: parent.bottom }
anchors.bottomMargin: {
var size = 0;
var d = app.orientation===Orientation.Portrait ? app.panelHeightPortrait : app.panelHeightLandscape;
if (bar.open)
size += d;
if (progressPanel.open||progressPanelRemover.open||progressPanelDm.open)
size += d;
return size;
}
anchors {top: parent.top}
height: app.flickHeight
clip: true
contentHeight: content.height
@ -65,7 +57,7 @@ Dialog {
spacing: Theme.paddingSmall
DialogHeader {
acceptText : qsTr("Sign In")
acceptText : qsTr("Sign in")
}
Item {

View file

@ -24,7 +24,7 @@ Item {
id: root
default property alias children: container.children
property bool transparent: false
property string theme: "dimmer"
property bool open: false
property bool openable: true
@ -39,14 +39,17 @@ Item {
width: parent.width
//height: isPortrait ? app.panelHeightPortrait : app.panelHeightLandscape
height: Theme.itemSizeMedium
anchors.bottom: parent.bottom
//anchors.bottom: parent.bottom
anchors.left: parent.left
enabled: showable
visible: showable
clip: true
opacity: root.open ? 1.0 : 0.0
Behavior on opacity { FadeAnimation {duration: 300} }
Behavior on opacity { FadeAnimation {duration: 200} }
Behavior on y {NumberAnimation { duration: 250; easing.type: Easing.OutQuad }}
y: open ? parent.height - height : parent.height - height/4
function show() {
if (!showable)
@ -71,19 +74,23 @@ Item {
Rectangle {
anchors.fill: parent
color: root.transparent ? Theme.rgba(Theme.highlightColor, 0.2) : Theme.highlightBackgroundColor
color: root.theme === "transparent" ? Theme.rgba(Theme.highlightColor, 0.2) :
root.theme === "black" ? "black" : root.theme === "highlighted" ? Theme.highlightBackgroundColor :
root.theme === "dimmer" ? Theme.highlightDimmerColor :
Theme.highlightDimmerColor
}
Image {
anchors.fill: parent
source: "image://theme/graphic-gradient-edge"
visible: root.transparent
opacity: root.theme !== "black" ? 0.7 : 0.5
}
MouseArea {
enabled: root.showable
anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
height: root.open ? parent.height : parent.height / 3
//height: root.open ? parent.height : parent.height / 3
height: parent.height
onClicked: root.show();
}
@ -93,7 +100,12 @@ Item {
// Right
Rectangle {
color: root.transparent ? Theme.secondaryColor : Theme.highlightDimmerColor
color: root.theme === "transparent" ? Theme.secondaryColor :
root.theme === "black" ? Theme.secondaryColor :
root.theme === "highlighted" ? Theme.highlightBackgroundColor :
root.theme === "dimmer" ? Theme.secondaryColor :
Theme.secondaryColor
height: parent.height
width: Theme.paddingSmall
opacity: flick.contentX < (flick.contentWidth - flick.width - Theme.paddingLarge) ? 0.5 : 0.0
@ -106,7 +118,12 @@ Item {
// Left
Rectangle {
color: root.transparent ? Theme.secondaryColor : Theme.highlightDimmerColor
color: root.theme === "transparent" ? Theme.secondaryColor :
root.theme === "black" ? Theme.secondaryColor :
root.theme === "highlighted" ? Theme.highlightBackgroundColor :
root.theme === "dimmer" ? Theme.secondaryColor :
Theme.secondaryColor
height: parent.height
width: Theme.paddingSmall
opacity: flick.contentX > Theme.paddingLarge ? 0.5 : 0.0
@ -129,7 +146,7 @@ Item {
Flow {
id: container
property alias transparent: root.transparent
property alias theme: root.theme
property alias open: root.open
function show() {root.show()}

View file

@ -26,11 +26,12 @@ Item {
property string icon: "image://icons/item"
property alias enabled: iconButton.enabled
property alias text: lbl.text
property string theme: "invert"
property string iconColor: theme === "black" ? Theme.primaryColor :
theme === "invert" ? Theme.highlightDimmerColor :
Theme.primaryColor
property string iconColor: root.theme === "transparent" ? Theme.secondaryColor :
root.theme === "black" ? Theme.secondaryColor :
root.theme === "highlighted" ? Theme.highlightBackgroundColor :
root.theme === "dimmer" ? Theme.secondaryColor :
Theme.secondaryColor
width: iconButton.width
height: iconButton.height
@ -55,7 +56,7 @@ Item {
horizontalCenter: parent.horizontalCenter
}
color: iconColor
color: Theme.secondaryHighlightColor //iconColor
font.pixelSize: Theme.fontSizeTiny
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignHCenter
@ -67,5 +68,6 @@ Item {
onClicked: root.clicked()
onDownChanged: { if (down){ root.downed() } }
enabled: root.enabled
//icon.onSourceChanged: console.log(icon.source)
}
}

View file

@ -42,8 +42,8 @@ Dialog {
SilicaFlickable {
anchors {left: parent.left; right: parent.right }
anchors {top: parent.top; bottom: parent.bottom }
anchors.bottomMargin: app.barHeight
anchors {top: parent.top}
height: app.flickHeight
clip: true
contentHeight: content.height
@ -57,7 +57,7 @@ Dialog {
spacing: Theme.paddingSmall
DialogHeader {
acceptText : qsTr("Sign In")
acceptText : qsTr("Sign in")
}
Item {

View file

@ -64,12 +64,6 @@ Item {
color: Theme.highlightBackgroundColor
}
Image {
anchors.left: parent.left; anchors.right: parent.right
source: "image://theme/graphic-gradient-edge?"+Theme.highlightBackgroundColor
visible: root.transparent
}
Rectangle {
id: progressRect
height: parent.height - 0
@ -84,6 +78,11 @@ Item {
}
}
Image {
anchors.fill: parent
source: "image://theme/graphic-gradient-edge"
}
Item {
anchors.left: parent.left; anchors.right: parent.right
anchors.bottom: parent.bottom; height: parent.height - 0

View file

@ -51,7 +51,7 @@ Page {
property bool autoReaderMode: settings.readerMode
function openUrlEntryInBrowser(url) {
notification.show(qsTr("Launching an external browser."))
notification.show(qsTr("Launching an external browser..."))
Qt.openUrlExternally(url)
}
@ -336,7 +336,7 @@ Page {
IconBar {
id: controlbar
flickable: view
transparent: false
theme: "black"
showable: !hideToolbarTimer.running
IconBarItem {
@ -398,7 +398,7 @@ Page {
text: qsTr("Browser")
icon: "image://icons/icon-m-browser"
onClicked: {
notification.show(qsTr("Launching an external browser."));
notification.show(qsTr("Launching an external browser..."));
Qt.openUrlExternally(onlineUrl);
}
}
@ -466,11 +466,9 @@ Page {
id: proggressPanel
transparent: false
anchors.left: parent.left
anchors.bottom: parent.bottom
cancelable: true
onCloseClicked: view.stop()
y: controlbar.open ? root.height-height-controlbar.height : root.height-height
Behavior on y { NumberAnimation { duration: 200;easing.type: Easing.OutQuad } }
}
Timer {