Improve home screen

7 files changed, 136 insertions, 60 deletions

diff --git a/src/main.cpp b/src/main.cpp
index f6645a2..d35578d 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -68,6 +68,10 @@ int main(int argc, char **argv)
 #endif
     QtWebEngine::initialize();
 
+    app.setOrganizationName("The Qt Company");
+    app.setOrganizationDomain("qt.io");
+    app.setApplicationName("qtbrowser");
+
     qmlRegisterType<TouchTracker>("io.qt.browser", 1, 0, "TouchTracker");
 
     BrowserWindow window;
diff --git a/src/qml/BrowserWindow.qml b/src/qml/BrowserWindow.qml
index 7e6a5e4..9dc7b2a 100644
--- a/src/qml/BrowserWindow.qml
+++ b/src/qml/BrowserWindow.qml
@@ -69,7 +69,7 @@ Item {
     property string defaultFontFamily: "Open Sans"
 
     property int animationDuration: 200
-    property int velocityThreshold: 500
+    property int velocityThreshold: 400
     property int velocityY: 0
     property real touchY: 0
     property real touchReference: 0
@@ -116,7 +116,7 @@ Item {
             tabView.createEmptyTab()
             navigation.addressBar.forceActiveFocus();
             navigation.addressBar.selectAll();
-            tabView.currentIndex = tabView.count - 1
+            tabView.makeCurrent(tabView.count - 1)
         }
     }
     Action {
@@ -228,48 +228,6 @@ Item {
     NavigationBar {
         id: navigation
 
-        Behavior on y {
-            NumberAnimation { duration: animationDuration }
-        }
-
-        y: {
-            var diff = touchReference - touchY
-
-            if (velocityY > velocityThreshold) {
-                if (diff > 0)
-                    return -toolBarSize
-                else
-                    return 0
-            }
-
-            if (!touchGesture || diff == 0) {
-                if (y < -toolBarSize / 2)
-                    return -toolBarSize
-                else
-                    return 0
-            }
-
-            if (diff > toolBarSize)
-                return -toolBarSize
-
-            if (diff > 0) {
-                if (y == -toolBarSize)
-                    return -toolBarSize
-                return -diff
-            }
-
-            // diff < 0
-
-            if (y == 0)
-                return 0
-
-            diff = Math.abs(diff)
-            if (diff >= toolBarSize)
-                return 0
-
-            return -toolBarSize + diff
-        }
-
         anchors {
             left: parent.left
             right: parent.right
diff --git a/src/qml/HomeScreen.qml b/src/qml/HomeScreen.qml
index 881fcb4..44d15f0 100644
--- a/src/qml/HomeScreen.qml
+++ b/src/qml/HomeScreen.qml
@@ -43,6 +43,13 @@ Rectangle {
 
     property int padding: 60
     property int cellSize: width / 5 - padding
+    property alias count: gridView.count
+    property alias currentIndex: gridView.currentIndex
+
+    function set(index) {
+        currentIndex = index
+        gridView.snapToPage()
+    }
 
     state: "disabled"
 
@@ -60,11 +67,6 @@ Rectangle {
         return -1;
     }
 
-    function select(index) {
-        gridView.positionViewAtIndex(index, GridView.Contain)
-        gridView.draggingChanged()
-    }
-
     states: [
         State {
             name: "enabled"
@@ -107,18 +109,13 @@ Rectangle {
         boundsBehavior: Flickable.StopAtBounds
         maximumFlickVelocity: 0
         contentHeight: parent.height
-        displayMarginEnd: 3 * page
         rightMargin: (parent.width - 4 * gridView.cellWidth - homeScreen.padding) / 2
 
         Behavior on contentX {
             NumberAnimation { duration: 1.5 * animationDuration; easing.type : Easing.InSine}
         }
 
-        anchors {
-            topMargin: toolBarSize
-            leftMargin: (parent.width - 4 * gridView.cellWidth + homeScreen.padding) / 2
-        }
-        onDraggingChanged: {
+        function snapToPage() {
             if (dragging) {
                 dragStart = contentX
                 return
@@ -144,6 +141,13 @@ Rectangle {
             contentX = 0
         }
 
+        onDraggingChanged: snapToPage()
+
+        anchors {
+            topMargin: toolBarSize
+            leftMargin: (parent.width - 4 * gridView.cellWidth + homeScreen.padding) / 2
+        }
+
         delegate: Rectangle {
             id: square
             property string iconColor: "white"
@@ -282,9 +286,9 @@ Rectangle {
                     }
                     homeScreen.state = "edit"
                 }
-                onPressed: {
+                onClicked: {
                     console.log("index="+ index +" | title=" + title + " | url=" + url + " | iconUrl=" + iconUrl + " | fallbackColor=" + fallbackColor)
-                    // TODO: open bookmark
+                    navigation.load(url)
                 }
             }
             Rectangle {
@@ -413,4 +417,20 @@ Rectangle {
             }
         }
     }
+    Rectangle {
+        visible: gridView.count == 0
+        color: "transparent"
+        anchors.centerIn: parent
+        width: 500
+        height: 100
+        Text {
+            anchors.centerIn: parent
+            color: placeholderColor
+            font.family: defaultFontFamily
+            font.pixelSize: 28
+            text: "No bookmarks have been saved so far."
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+        }
+    }
 }
diff --git a/src/qml/NavigationBar.qml b/src/qml/NavigationBar.qml
index ce0b80b..1089cd7 100644
--- a/src/qml/NavigationBar.qml
+++ b/src/qml/NavigationBar.qml
@@ -15,6 +15,13 @@ ToolBar {
     visible: opacity != 0.0
     opacity: tabView.viewState == "page" ? 1.0 : 0.0
 
+    function load(url) {
+        webView.url = url
+        homeScreen.state = "disabled"
+    }
+
+    state: "enabled"
+
     style: ToolBarStyle {
         background: Rectangle {
             color: uiColor
@@ -28,6 +35,70 @@ ToolBar {
         }
     }
 
+    Behavior on y {
+        NumberAnimation { duration: animationDuration }
+    }
+
+    states: [
+        State {
+            name: "enabled"
+            PropertyChanges {
+                target: root
+                y: 0
+            }
+        },
+        State {
+            name: "tracking"
+            PropertyChanges {
+                target: root
+                y: {
+                    var diff = touchReference - touchY
+
+                    if (velocityY > velocityThreshold) {
+                        if (diff > 0)
+                            return -toolBarSize
+                        else
+                            return 0
+                    }
+
+                    if (!touchGesture || diff == 0) {
+                        if (y < -toolBarSize / 2)
+                            return -toolBarSize
+                        else
+                            return 0
+                    }
+
+                    if (diff > toolBarSize)
+                        return -toolBarSize
+
+                    if (diff > 0) {
+                        if (y == -toolBarSize)
+                            return -toolBarSize
+                        return -diff
+                    }
+
+                    // diff < 0
+
+                    if (y == 0)
+                        return 0
+
+                    diff = Math.abs(diff)
+                    if (diff >= toolBarSize)
+                        return 0
+
+                    return -toolBarSize + diff
+                }
+            }
+        },
+        State {
+            name: "disabled"
+            PropertyChanges {
+                target: root
+                y: -toolBarSize
+            }
+        }
+    ]
+
     RowLayout {
         height: toolBarSize - 2
         anchors {
@@ -209,10 +280,11 @@ ToolBar {
                 var idx = homeScreen.contains(webView.url.toString())
                 if (idx != -1) {
                     homeScreen.state = "enabled"
-                    homeScreen.select(idx)
+                    homeScreen.currentIndex = idx
                     return
                 }
-                homeScreen.add(webView.title, webView.url, webView.icon, engine.randomColor())
+                var icon = webView.loading ? "" : webView.icon
+                homeScreen.add(webView.title, webView.url, icon, engine.randomColor())
             }
         }
         Rectangle {
diff --git a/src/qml/PageView.qml b/src/qml/PageView.qml
index 3552a0b..792de19 100644
--- a/src/qml/PageView.qml
+++ b/src/qml/PageView.qml
@@ -36,7 +36,7 @@
 ****************************************************************************/
 
 import QtQuick 2.5
-import QtWebEngine 1.3
+import QtWebEngine 1.2
 import QtWebEngine.experimental 1.0
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
@@ -140,6 +140,11 @@ Rectangle {
                 settings.errorPageEnabled: appSettings.errorPageEnabled
                 settings.pluginsEnabled: appSettings.pluginsEnabled
 */
+                onLoadingChanged: {
+                    if (loading)
+                        navigation.state = "enabled"
+                }
+
                 onCertificateError: {
                     if (!acceptedCertificates.shouldAutoAccept(error)){
                         error.defer()
@@ -210,11 +215,14 @@ Rectangle {
                     browserWindow.velocityY = yVelocity
                     browserWindow.touchReference = tracker.touchY
                     browserWindow.touchGesture = true
+                    navigation.state = "tracking"
                 }
                 onTouchEnd: {
                     browserWindow.velocityY = yVelocity
                     browserWindow.touchGesture = false
+                    navigation.state = "tracking"
                 }
+                onScrollDirectionChanged: browserWindow.touchReference = tracker.touchY
             }
 
             Rectangle {
@@ -268,7 +276,9 @@ Rectangle {
     }
 
     function makeCurrent(index) {
+        viewState = "list"
         pathView.positionViewAtIndex(index, PathView.Center)
+        viewState = "page"
     }
 
     function createEmptyTab() {
diff --git a/src/touchtracker.cpp b/src/touchtracker.cpp
index 11cbb6e..81dba5c 100644
--- a/src/touchtracker.cpp
+++ b/src/touchtracker.cpp
@@ -9,6 +9,8 @@ using namespace utils;
 TouchTracker::TouchTracker(QQuickItem *parent)
     : QQuickItem(parent)
     , m_blockEvents(false)
+    , m_diff(0)
+    , m_previousY(0)
     , m_target(0)
     , m_delegate(0)
 {
@@ -78,8 +80,15 @@ bool TouchTracker::eventFilter(QObject *obj, QEvent *event)
 
     const QTouchEvent *touch = static_cast<QTouchEvent*>(event);
     const QList<QTouchEvent::TouchPoint> &points = touch->touchPoints();
+    m_previousY = m_currentPoint.y();
     m_currentPoint.pos = m_target->mapToScene(points.at(0).pos());
     m_currentPoint.ts = QDateTime::currentMSecsSinceEpoch();
+    int currentDiff = m_previousY - m_currentPoint.y();
+
+    if ((currentDiff > 0 && m_diff < 0) || (currentDiff < 0 && m_diff > 0))
+        emit scrollDirectionChanged();
+
+    m_diff = currentDiff;
 
     emit touchChanged();
     emit velocityChanged();
diff --git a/src/touchtracker.h b/src/touchtracker.h
index 9aa555a..8392e12 100644
--- a/src/touchtracker.h
+++ b/src/touchtracker.h
@@ -41,6 +41,7 @@ signals:
     void touchBegin();
     void touchEnd();
     void velocityChanged();
+    void scrollDirectionChanged();
 
 protected:
     bool eventFilter(QObject *obj, QEvent *event);
@@ -48,6 +49,8 @@ protected:
 
 private:
     bool m_blockEvents;
+    int m_diff;
+    int m_previousY;
     PositionInfo m_startPoint;
     PositionInfo m_currentPoint;
     QQuickItem *m_target;