Fine-tune button behaviour to give better visual feedback

Disable the bookmark button if the current page is already bookmarked
to make the state unambigous for the user.

4 files changed, 61 insertions, 25 deletions

diff --git a/src/qml/BrowserWindow.qml b/src/qml/BrowserWindow.qml
index 9dc7b2a..5577d8d 100644
--- a/src/qml/BrowserWindow.qml
+++ b/src/qml/BrowserWindow.qml
@@ -65,7 +65,8 @@ Item {
     property string inactivePagerColor: "#bcbdbe"
     property string textFieldStrokeColor: "#3882ae"
     property string placeholderColor: "#a0a1a2"
-    property string iconStrokeColor: "#0e202c"
+    property string iconOverlayColor: "#0e202c"
+    property string iconStrokeColor: "#d6d6d6"
     property string defaultFontFamily: "Open Sans"
 
     property int animationDuration: 200
@@ -107,16 +108,19 @@ Item {
         onTriggered: {
             if (currentWebView)
                 currentWebView.reload()
+            navigation.addressBar.forceActiveFocus()
         }
     }
     Action {
         id: newTabAction
         shortcut: "Ctrl+T"
         onTriggered: {
+            tabView.get(tabView.currentIndex).item.webView.takeSnapshot()
             tabView.createEmptyTab()
             navigation.addressBar.forceActiveFocus();
             navigation.addressBar.selectAll();
             tabView.makeCurrent(tabView.count - 1)
+            navigation.addressBar.forceActiveFocus()
         }
     }
     Action {
diff --git a/src/qml/HomeScreen.qml b/src/qml/HomeScreen.qml
index 46cb33d..d277bc2 100644
--- a/src/qml/HomeScreen.qml
+++ b/src/qml/HomeScreen.qml
@@ -59,6 +59,17 @@ Rectangle {
         listModel.append(element)
     }
 
+    signal remove(string url, int idx)
+    onRemove: {
+        var index = idx < 0 ? contains(url) : idx
+        if (index < 0)
+            return
+
+        listModel.remove(index)
+        gridView.forceLayout()
+        navigation.refresh()
+    }
+
     function get(index) {
         return listModel.get(index)
     }
@@ -106,6 +117,7 @@ Rectangle {
             for (var i = 0; i < list.length; ++i) {
                 listModel.append(list[i])
             }
+            navigation.refresh()
         }
         Component.onDestruction: {
             var list = []
@@ -133,6 +145,12 @@ Rectangle {
         maximumFlickVelocity: 0
         contentHeight: parent.height
 
+        MouseArea {
+            enabled: homeScreen.state == "edit"
+            anchors.fill: parent
+            onClicked: homeScreen.state = "enabled"
+        }
+
         rightMargin: {
             var margin = (parent.width - 4 * gridView.cellWidth - homeScreen.padding) / 2
             var padding = gridView.page - Math.round(gridView.count % 8 / 2) * gridView.cellWidth
@@ -295,7 +313,7 @@ Rectangle {
                 id: overlay
                 visible: opacity != 0.0
                 anchors.fill: parent
-                color: iconStrokeColor
+                color: iconOverlayColor
                 opacity: {
                     if (iconMouse.pressed) {
                         if (homeScreen.state != "edit")
@@ -312,13 +330,16 @@ Rectangle {
                 anchors.fill: parent
                 onPressAndHold: {
                     if (homeScreen.state == "edit") {
-                        homeScreen.state = "visible"
+                        homeScreen.state = "enabled"
                         return
                     }
                     homeScreen.state = "edit"
                 }
                 onClicked: {
-                    console.log("index="+ index +" | title=" + title + " | url=" + url + " | iconUrl=" + iconUrl + " | fallbackColor=" + fallbackColor)
+                    if (homeScreen.state == "edit") {
+                        homeScreen.state = "enabled"
+                        return
+                    }
                     navigation.load(url)
                 }
             }
@@ -328,7 +349,7 @@ Rectangle {
                 width: image.sourceSize.width
                 height: image.sourceSize.height - 2
                 radius: width / 2
-                color: iconStrokeColor
+                color: iconOverlayColor
                 anchors {
                     horizontalCenter: parent.right
                     verticalCenter: parent.top
@@ -350,8 +371,7 @@ Rectangle {
                         anchors.fill: parent
                         onClicked: {
                             mouse.accepted = true
-                            listModel.remove(index)
-                            gridView.forceLayout()
+                            remove(url, index)
                         }
                     }
                 }
@@ -371,7 +391,7 @@ Rectangle {
         MouseArea {
             enabled: homeScreen.state == "edit"
             anchors.fill: parent
-            onPressed: homeScreen.state = "visible"
+            onClicked: homeScreen.state = "enabled"
         }
     }
     Rectangle {
@@ -384,7 +404,7 @@ Rectangle {
         MouseArea {
             enabled: homeScreen.state == "edit"
             anchors.fill: parent
-            onPressed: homeScreen.state = "visible"
+            onClicked: homeScreen.state = "enabled"
         }
     }
     Rectangle {
@@ -401,7 +421,7 @@ Rectangle {
             width: enabled && active ? 10 : 8
             height: width
             radius: width / 2
-            color: active ? iconStrokeColor : uiColor
+            color: active ? iconOverlayColor : uiColor
             anchors.verticalCenter: parent.verticalCenter
             x: parent.width / 4 - width / 2
             MouseArea {
@@ -419,7 +439,7 @@ Rectangle {
                 if (!enabled)
                     return inactivePagerColor
 
-                return active ? iconStrokeColor : uiColor
+                return active ? iconOverlayColor : uiColor
             }
             anchors.verticalCenter: parent.verticalCenter
             x: parent.width / 2 - width / 2
@@ -438,7 +458,7 @@ Rectangle {
                 if (!enabled)
                     return inactivePagerColor
 
-                return active ? iconStrokeColor : uiColor
+                return active ? iconOverlayColor : uiColor
             }
             anchors.verticalCenter: parent.verticalCenter
             x: 3 * parent.width / 4 - width / 2
diff --git a/src/qml/NavigationBar.qml b/src/qml/NavigationBar.qml
index 0bf0b78..867a037 100644
--- a/src/qml/NavigationBar.qml
+++ b/src/qml/NavigationBar.qml
@@ -9,7 +9,6 @@ ToolBar {
     id: root
 
     property alias addressBar: urlBar
-
     property Item webView: null
 
     visible: opacity != 0.0
@@ -20,6 +19,10 @@ ToolBar {
         homeScreen.state = "disabled"
     }
 
+    function refresh() {
+        bookmarksButton.enabled = homeScreen.contains(urlBar.text) === -1
+    }
+
     state: "enabled"
 
     style: ToolBarStyle {
@@ -153,6 +156,13 @@ ToolBar {
             placeholderText: qsTr("Search or type a URL")
             focus: !webView.focus
 
+            onActiveFocusChanged: {
+                if (activeFocus)
+                    root.state = "enabled"
+                else
+                    root.state = "tracking"
+            }
+
             UIButton {
                 id: reloadButton
                 source: webView && webView.loading ? "qrc:///stop" : "qrc:///refresh"
@@ -191,6 +201,8 @@ ToolBar {
                 homeScreen.state = "disabled"
                 tabView.viewState = "page"
             }
+
+            onTextChanged: refresh()
             onEditingFinished: selectAll()
             onFocusChanged: {
                 if (focus) {
@@ -276,18 +288,11 @@ ToolBar {
             onClicked: {
                 if (!webView)
                     return
-
-                console.log(webView.loading)
                 var icon = webView.loading ? "" : webView.icon
-                var idx = homeScreen.contains(webView.url.toString())
-                if (idx != -1) {
-                    homeScreen.get(idx).iconUrl = icon.toString()
-                    homeScreen.state = "enabled"
-                    homeScreen.set(idx)
-                    return
-                }
                 homeScreen.add(webView.title, webView.url, icon, engine.randomColor())
+                enabled = false
             }
+            Component.onCompleted: refresh()
         }
         Rectangle {
             width: 1
diff --git a/src/qml/PageView.qml b/src/qml/PageView.qml
index 792de19..5406a1d 100644
--- a/src/qml/PageView.qml
+++ b/src/qml/PageView.qml
@@ -134,6 +134,9 @@ Rectangle {
                     });
                 }
 
+                // Trigger a refresh to check if the new url is bookmarked.
+                onUrlChanged: navigation.refresh()
+
 /*
                 settings.autoLoadImages: appSettings.autoLoadImages
                 settings.javascriptEnabled: appSettings.javaScriptEnabled
@@ -155,6 +158,7 @@ Rectangle {
                 }
 
                 onNewViewRequested: {
+                    webEngineView.takeSnapshot()
                     var tab
                     if (!request.userInitiated)
                         print("Warning: Blocked a popup window.")
@@ -222,7 +226,10 @@ Rectangle {
                     browserWindow.touchGesture = false
                     navigation.state = "tracking"
                 }
-                onScrollDirectionChanged: browserWindow.touchReference = tracker.touchY
+                onScrollDirectionChanged: {
+                    browserWindow.velocityY = 0
+                    browserWindow.touchReference = tracker.touchY
+                }
             }
 
             Rectangle {
@@ -418,7 +425,7 @@ Rectangle {
                     topMargin: 9
                     horizontalCenter: parent.horizontalCenter
                 }
-                color: iconStrokeColor
+                color: iconOverlayColor
                 radius: size / 2
                 width: snapshot.width
                 height: snapshot.height
@@ -451,7 +458,7 @@ Rectangle {
                         width: image.sourceSize.width
                         height: image.sourceSize.height - 2
                         radius: width / 2
-                        color: iconStrokeColor
+                        color: iconOverlayColor
                         anchors {
                             horizontalCenter: parent.right
                             verticalCenter: parent.top