Commit d8468385 authored by Rinigus Saar's avatar Rinigus Saar Committed by Jonah Brüchert

hide navigation bar on scrolling

Fixes #4
parent 8d95f010
......@@ -30,6 +30,13 @@ import org.kde.mobile.angelfish 1.0
Item {
id: navigation
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
}
height: expandedHeight
property bool navigationShown: true
property int expandedHeight: Kirigami.Units.gridUnit * 3
......@@ -37,8 +44,6 @@ Item {
signal activateUrlEntry;
Behavior on height { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad} }
Rectangle { anchors.fill: parent; color: Kirigami.Theme.backgroundColor; }
RowLayout {
......@@ -46,7 +51,6 @@ Item {
anchors.fill: parent
anchors.leftMargin: Kirigami.Units.gridUnit / 2
anchors.rightMargin: Kirigami.Units.gridUnit / 2
visible: navigationShown
spacing: Kirigami.Units.smallSpacing
Kirigami.Theme.inherit: true
......@@ -63,16 +67,37 @@ Item {
}
Controls.ToolButton {
icon.name: "tab-duplicate"
Layout.preferredWidth: buttonSize
Layout.preferredHeight: buttonSize
Kirigami.Theme.inherit: true
Rectangle {
anchors.centerIn: parent
height: Kirigami.Units.gridUnit * 1.25
width: Kirigami.Units.gridUnit * 1.25
onClicked: {
pageStack.push(Qt.resolvedUrl("Tabs.qml"))
color: "transparent"
border.color: Kirigami.Theme.textColor
border.width: Kirigami.Units.gridUnit/10
radius: Kirigami.Units.gridUnit/5
Kirigami.Theme.inherit: true
Controls.Label {
anchors.centerIn: parent
height: Kirigami.Units.gridUnit
width: Kirigami.Units.gridUnit
fontSizeMode: Text.Fit
minimumPixelSize: 0
minimumPointSize: 0
clip: true
text: "%1".arg(tabs.count)
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
Kirigami.Theme.inherit: true
}
}
onClicked: pageStack.push(Qt.resolvedUrl("Tabs.qml"))
}
Controls.ToolButton {
......@@ -103,10 +128,10 @@ Item {
onClicked: currentWebView.goForward()
}
Item {
Controls.ToolButton {
id: labelItem
Layout.fillWidth: true
Layout.preferredHeight: layout.height
Layout.preferredHeight: buttonSize
property string scheme: UrlUtils.urlScheme(currentWebView.requestedUrl)
......@@ -128,6 +153,7 @@ Item {
implicitHeight: schemeIcon.height
color: "transparent"
}
onClicked: activateUrlEntry()
}
Controls.Label {
......@@ -148,12 +174,10 @@ Item {
textFormat: Text.StyledText
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
Kirigami.Theme.inherit: true
}
MouseArea {
anchors.fill: parent
onClicked: activateUrlEntry()
}
onClicked: activateUrlEntry()
}
Controls.ToolButton {
......@@ -192,12 +216,23 @@ Item {
State {
name: "shown"
when: navigationShown
PropertyChanges { target: navigation; height: expandedHeight}
AnchorChanges {
target: navigation
anchors.bottom: navigation.parent.bottom
anchors.top: undefined
}
},
State {
name: "hidden"
when: !navigationShown
PropertyChanges { target: navigation; height: 0}
AnchorChanges {
target: navigation
anchors.bottom: undefined
anchors.top: parent.bottom
}
}
]
transitions: Transition {
AnchorAnimation { duration: Kirigami.Units.longDuration; }
}
}
......@@ -146,25 +146,20 @@ Kirigami.ApplicationWindow {
property bool privateMode: false
// Used for automatically show or hid navigation
// bar. Set separately to combine with other options
// for navigation bar management (webapp and others)
property bool navigationAutoShow: true
ListWebView {
id: regularTabs
anchors {
top: parent.top
left: parent.left
right: parent.right
bottom: navigation.top
}
anchors.fill: parent
activeTabs: rootPage.initialized && !rootPage.privateMode
}
ListWebView {
id: privateTabs
anchors {
top: parent.top
left: parent.left
right: parent.right
bottom: navigation.top
}
anchors.fill: parent
activeTabs: rootPage.initialized && rootPage.privateMode
privateTabsMode: true
}
......@@ -199,8 +194,8 @@ Kirigami.ApplicationWindow {
height: Math.round(Kirigami.Units.gridUnit / 6)
z: navigation.z + 1
anchors {
top: tabs.bottom
topMargin: -Math.round(height / 2)
bottom: navigation.top
bottomMargin: -Math.round(height / 2)
left: tabs.left
right: tabs.right
}
......@@ -251,7 +246,6 @@ Kirigami.ApplicationWindow {
enabled: currentWebView.canGoBack
icon.name: "go-previous"
text: i18n("Go previous")
onTriggered: {
currentWebView.goBack()
}
......@@ -260,8 +254,6 @@ Kirigami.ApplicationWindow {
enabled: currentWebView.canGoForward
icon.name: "go-next"
text: i18n("Go forward")
onTriggered: {
currentWebView.goForward()
}
......@@ -269,7 +261,6 @@ Kirigami.ApplicationWindow {
Kirigami.Action {
icon.name: currentWebView.loading ? "process-stop" : "view-refresh"
text: currentWebView.loading ? i18n("Stop loading") : i18n("Refresh")
onTriggered: {
currentWebView.loading ? currentWebView.stop() : currentWebView.reload()
}
......@@ -277,7 +268,6 @@ Kirigami.ApplicationWindow {
Kirigami.Action {
icon.name: "bookmarks"
text: i18n("Add bookmark")
onTriggered: {
print("Adding bookmark");
var request = new Object;// FIXME
......@@ -296,17 +286,27 @@ Kirigami.ApplicationWindow {
onTriggered: {
currentWebView.userAgent.isMobile = !currentWebView.userAgent.isMobile;
}
},
Kirigami.Action {
icon.name: "edit-select-text"
text: rootPage.navigationAutoShow ? i18n("Hide navigation bar") : i18n("Show navigation bar")
visible: navigation.visible
onTriggered: {
if (!navigation.visible) return;
rootPage.navigationAutoShow = !rootPage.navigationAutoShow;
}
}
]
// Bottom navigation bar
Navigation {
id: navigation
navigationShown: !webappcontainer && webBrowser.visibility !== Window.FullScreen
navigationShown: visible && rootPage.navigationAutoShow
visible: !webappcontainer && webBrowser.visibility !== Window.FullScreen
Kirigami.Theme.colorSet: rootPage.privateMode ? Kirigami.Theme.Complementary : Kirigami.Theme.Window
layer.enabled: navigation.visible
layer.enabled: navigation.navigationShown
layer.effect: DropShadow {
verticalOffset: - 1
color: Kirigami.Theme.disabledTextColor
......@@ -337,6 +337,44 @@ Kirigami.ApplicationWindow {
bottom: navigation.top
right: parent.right
}
visible: navigation.navigationShown
}
// dealing with hiding and showing navigation bar
property point oldScrollPosition: "0,0"
property bool pageAlmostReady: !currentWebView.loading || currentWebView.loadProgress > 90
onPageAlmostReadyChanged: {
if (!rootPage.pageAlmostReady)
rootPage.navigationAutoShow = true;
else
rootPage.oldScrollPosition = currentWebView.scrollPosition;
}
Connections {
target: currentWebView
onScrollPositionChanged: {
var delta = 100;
if (rootPage.navigationAutoShow && rootPage.pageAlmostReady) {
if (rootPage.oldScrollPosition.y + delta < currentWebView.scrollPosition.y) {
// hide navbar
rootPage.oldScrollPosition = currentWebView.scrollPosition;
rootPage.navigationAutoShow = false;
} else if (rootPage.oldScrollPosition.y > currentWebView.scrollPosition.y) {
// navbar open and scrolling up
rootPage.oldScrollPosition = currentWebView.scrollPosition;
}
} else if (!rootPage.navigationAutoShow) {
if (rootPage.oldScrollPosition.y - delta > currentWebView.scrollPosition.y) {
// show navbar
rootPage.oldScrollPosition = currentWebView.scrollPosition;
rootPage.navigationAutoShow = true;
} else if (rootPage.oldScrollPosition.y < currentWebView.scrollPosition.y) {
// navbar closed and scrolling down
rootPage.oldScrollPosition = currentWebView.scrollPosition;
}
}
}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment