Update design according to document

19 files changed, 120 insertions, 63 deletions

diff --git a/src/qml/BrowserWindow.qml b/src/qml/BrowserWindow.qml
index 0de9d5a..b697292 100644
--- a/src/qml/BrowserWindow.qml
+++ b/src/qml/BrowserWindow.qml
@@ -56,11 +56,11 @@ Item {
         return tabs.get(tabs.currentIndex) ? tabs.get(tabs.currentIndex).item.webView : null
     }
 
-    property int toolBarHeight: 70
+    property int toolBarSize: 80
     property string uiColor: "#46a2da"
     property string uiBorderColor: "#7ebde5"
-    property string buttonHighlightColor: "#e6e6e6"
-    property string uiSelectionColor: "#fad84a"
+    property string buttonHighlightColor: "#3f91c4"
+    property string uiSelectionColor: "#fddd5c"
 
     property int animationDuration: 200
     property int velocityThreshold: 500
@@ -122,12 +122,18 @@ Item {
     ToolBar {
         id: tabEditBar
 
-        height: toolBarHeight
+        height: toolBarSize
 
         style: ToolBarStyle {
             background: Rectangle {
                 color: uiColor
             }
+            padding {
+                left: 0
+                right: 0
+                top: 0
+                bottom: 0
+            }
         }
 
         anchors {
@@ -140,6 +146,7 @@ Item {
         opacity: tabs.viewState == "list" ? 1.0 : 0.0
 
         RowLayout {
+            spacing: 0
             anchors.fill: parent
             UIButton {
                 id: newTabButton
@@ -196,7 +203,7 @@ Item {
             UIButton {
                 id:doneButton
                 source: "qrc:///done"
-                width: 120
+                implicitWidth: 125
                 onClicked: {
                     tabs.viewState = "page"
                 }
@@ -215,24 +222,24 @@ Item {
 
             if (velocityY > velocityThreshold) {
                 if (diff > 0)
-                    return -toolBarHeight
+                    return -toolBarSize
                 else
                     return 0
             }
 
             if (!touchGesture || diff == 0) {
-                if (y < -toolBarHeight / 2)
-                    return -toolBarHeight
+                if (y < -toolBarSize / 2)
+                    return -toolBarSize
                 else
                     return 0
             }
 
-            if (diff > toolBarHeight)
-                return -toolBarHeight
+            if (diff > toolBarSize)
+                return -toolBarSize
 
             if (diff > 0) {
-                if (y == -toolBarHeight)
-                    return -toolBarHeight
+                if (y == -toolBarSize)
+                    return -toolBarSize
                 return -diff
             }
 
@@ -242,10 +249,10 @@ Item {
                 return 0
 
             diff = Math.abs(diff)
-            if (diff >= toolBarHeight)
+            if (diff >= toolBarSize)
                 return 0
 
-            return -toolBarHeight + diff
+            return -toolBarSize + diff
         }
 
         anchors {
@@ -256,11 +263,12 @@ Item {
     PageView {
         id: tabs
 
+        height: parent.height
+
         anchors {
             top: navigation.bottom
             left: parent.left
             right: parent.right
-            bottom: parent.bottom
         }
 
         Component.onCompleted: {
diff --git a/src/qml/NavigationBar.qml b/src/qml/NavigationBar.qml
index a72f750..d107ab8 100644
--- a/src/qml/NavigationBar.qml
+++ b/src/qml/NavigationBar.qml
@@ -12,23 +12,29 @@ ToolBar {
 
     property Item webView: null
 
-    height: toolBarHeight
-
     visible: opacity != 0.0
     opacity: tabs.viewState == "page" ? 1.0 : 0.0
 
     style: ToolBarStyle {
         background: Rectangle {
             color: uiColor
+            implicitHeight: toolBarSize
+        }
+        padding {
+            left: 0
+            right: 0
+            top: 0
+            bottom: 0
         }
     }
 
     RowLayout {
         anchors.fill: parent
+        spacing: 0
 
         UIButton {
             id: backButton
-            source: enabled ? "qrc:///previous" : "qrc:///previous_inactive"
+            source: "qrc:///back"
             onClicked: webView.goBack()
             enabled: webView && webView.canGoBack
         }
@@ -42,7 +48,7 @@ ToolBar {
         }
         UIButton {
             id: forwardButton
-            source: enabled ? "qrc:///next" : "qrc:///next_inactive"
+            source: "qrc:///forward"
             onClicked: webView.goForward()
             enabled: webView && webView.canGoForward
         }
@@ -54,19 +60,33 @@ ToolBar {
             }
             color: uiBorderColor
         }
-
+        Rectangle {
+             Layout.fillWidth: true
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            color: uiColor
+        }
         TextField {
             id: urlBar
-            Layout.fillWidth: true
             text: webView.url
+            activeFocusOnPress: true
+            placeholderText: qsTr("Search or type a URL")
+            focus: !webView.focus
+
+            anchors {
+                leftMargin: 50
+            }
+
             UIButton {
                 id: reloadButton
                 source: webView && webView.loading ? "qrc:///stop" : "qrc:///refresh"
-                height: parent.height - 15
+                height: 34
                 width: height
                 color: "white"
                 radius: width / 2
-                highlightColor: buttonHighlightColor
+                highlightColor: "lightgrey"
                 anchors {
                     rightMargin: 10
                     right: parent.right
@@ -76,25 +96,43 @@ ToolBar {
             }
             style: TextFieldStyle {
                 textColor: "black"
-                font.family: "Helvetica"
-                font.pointSize: 16
+                font.family: "Open Sans"
+                font.pixelSize: 28
                 selectionColor: uiSelectionColor
                 selectedTextColor: "black"
+                placeholderTextColor: "#a0a1a2"
                 background: Rectangle {
-                    implicitWidth: 200
-                    implicitHeight: 50
+                    implicitWidth: 514
+                    implicitHeight: 56
                     border.color: "#3881ae"
                     border.width: 1
                 }
                 padding {
+                    left: 15
                     right: 20 + reloadButton.width
-                    left: 10
                 }
             }
             onAccepted: {
                 webView.url = engine.fromUserInput(text)
                 tabs.viewState = "page"
             }
+            onEditingFinished: selectAll()
+            onFocusChanged: {
+                if (focus)
+                    selectAll()
+                else {
+                    urlBar.cursorPosition = 0
+                    deselect()
+                }
+            }
+        }
+        Rectangle {
+             Layout.fillWidth: true
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            color: uiColor
         }
         Rectangle {
             width: 1
@@ -169,8 +207,8 @@ ToolBar {
             left: parent.left
             top: parent.bottom
             right: parent.right
-            leftMargin: -parent.leftMargin
-            rightMargin: -parent.rightMargin
+            leftMargin: -10
+            rightMargin: -10
         }
         style: ProgressBarStyle {
             background: Rectangle {
@@ -180,7 +218,7 @@ ToolBar {
                 color: uiSelectionColor
             }
         }
-        z: -2
+        z: 5
         minimumValue: 0
         maximumValue: 100
         value: (webView && webView.loadProgress < 100) ? webView.loadProgress : 0
diff --git a/src/qml/PageView.qml b/src/qml/PageView.qml
index 943ae01..2460024 100644
--- a/src/qml/PageView.qml
+++ b/src/qml/PageView.qml
@@ -237,16 +237,22 @@ Rectangle {
                     }
                     ToolButton {
                         id: findBackwardButton
-                        iconSource: "qrc:///previous"
+                        width: 20
+                        height: 20
+                        iconSource: "qrc:///back"
                         onClicked: webEngineView.findText(findTextField.text, WebEngineView.FindBackward)
                     }
                     ToolButton {
                         id: findForwardButton
-                        iconSource: "qrc:///next"
+                        width: 20
+                        height: 20
+                        iconSource: "qrc:///forward"
                         onClicked: webEngineView.findText(findTextField.text)
                     }
                     ToolButton {
                         id: findCancelButton
+                        width: 20
+                        height: 20
                         iconSource: "qrc:///stop"
                         onClicked: findBar.visible = false
                     }
@@ -287,8 +293,6 @@ Rectangle {
 
     function remove(index) {
         pathView.interactive = false
-        pathView.currentItem.visibility = 0.0
-
         // Update indices of remaining items
         for (var idx = index + 1; idx < listModel.count; ++idx)
             listModel.get(idx).index -= 1
@@ -384,21 +388,29 @@ Rectangle {
                     }
                     anchors.fill: parent
                     Rectangle {
-                        opacity: wrapper.isCurrentItem && !pathView.moving && !pathView.flicking && wrapper.visibility == 1.0 ? 1.0 : 0.0
+                        enabled: wrapper.isCurrentItem && !pathView.moving && !pathView.flicking && wrapper.visibility == 1.0
+                        opacity: enabled ? 1.0 : 0.0
                         visible: opacity != 0.0
-                        width: 45
-                        height: 45
+                        width: image.sourceSize.width
+                        height: image.sourceSize.height - 2
                         radius: width / 2
-                        color: closeButton.pressed ? buttonHighlightColor : "white"
-                        border.width: 1
-                        border.color: "black"
+                        color: "darkgrey"
                         anchors {
                             horizontalCenter: parent.right
                             verticalCenter: parent.top
                         }
                         Image {
-                            anchors.fill: parent
-                            source: "qrc:///close"
+                            id: image
+                            opacity: {
+                                if (closeButton.pressed)
+                                    return 0.70
+                                return 1.0
+                            }
+                            anchors {
+                                top: parent.top
+                                left: parent.left
+                            }
+                            source: "qrc:///delete"
                             MouseArea {
                                 id: closeButton
                                 anchors.fill: parent
@@ -463,8 +475,8 @@ Rectangle {
             if (fewTabs)
                 return viewWidth / 4
             if (count == 4)
-                return 2 * toolBarHeight
-            return toolBarHeight
+                return 2 * toolBarSize
+            return toolBarSize
         }
 
         focus: interactive
@@ -472,20 +484,19 @@ Rectangle {
         path: Path {
             id: path
             startX: pathView.margin ; startY: root.height / 2
-            PathAttribute { name: "itemScale"; value: pathView.fewTabs ? 0.5 : 0.25 }
+            PathAttribute { name: "itemScale"; value: pathView.fewTabs ? 0.5 : 0.2 }
             PathAttribute { name: "itemZ"; value: 0 }
-            PathLine { relativeX: viewWidth / 6 ; y: root.height / 2 }
-            PathAttribute { name: "itemScale"; value: 0.35 }
+            PathLine { relativeX: viewWidth / 6 - 10; y: root.height / 2 }
+            PathAttribute { name: "itemScale"; value: 0.30 }
             PathAttribute { name: "itemZ"; value: 3 }
-            PathLine { x: viewWidth / 2 - pathView.offset; y: root.height / 2 }
+            PathLine { x: viewWidth / 2; y: root.height / 2 }
             PathAttribute { name: "itemScale"; value: 1.0 }
             PathAttribute { name: "itemZ"; value: 6 }
-            PathLine { x: viewWidth / 2 + pathView.offset; y: root.height / 2 }
-            PathLine { x: root.width - pathView.margin - viewWidth / 6; y: root.height / 2 }
-            PathAttribute { name: "itemScale"; value: 0.42 }
+            PathLine { x: root.width - pathView.margin - viewWidth / 6 + 10; y: root.height / 2 }
+            PathAttribute { name: "itemScale"; value: 0.40 }
             PathAttribute { name: "itemZ"; value: 4 }
             PathLine { x: root.width - pathView.margin; y: root.height / 2 }
-            PathAttribute { name: "itemScale"; value: pathView.fewTabs ? 0.5 : 0.2 }
+            PathAttribute { name: "itemScale"; value: pathView.fewTabs ? 0.3 : 0.15 }
             PathAttribute { name: "itemZ"; value: 2 }
         }
 
diff --git a/src/qml/assets/UIButton.qml b/src/qml/assets/UIButton.qml
index b3fd8d1..66aec7b 100644
--- a/src/qml/assets/UIButton.qml
+++ b/src/qml/assets/UIButton.qml
@@ -6,20 +6,22 @@ import QtQuick.Layouts 1.3
 
 ToolButton {
     id: root
+    implicitHeight: toolBarSize
+    implicitWidth: toolBarSize
 
     property string source: ""
     property real radius: 0.0
     property string color: uiColor
-    property string highlightColor: uiBorderColor
+    property string highlightColor: buttonHighlightColor
     style: ButtonStyle {
         background: Rectangle {
-            implicitWidth: Math.max(60, parent.width)
-            implicitHeight: 60
+            opacity: root.enabled ? 1.0 : 0.3
             color: root.pressed ? root.highlightColor : root.color
             radius: root.radius
             Image {
                 source: root.source
-                height: Math.min(50, parent.width)
+                width: Math.min(sourceSize.width, root.width)
+                height: Math.min(sourceSize.height, root.height)
                 anchors.centerIn: parent
             }
         }
diff --git a/src/qml/assets/icons/back.png b/src/qml/assets/icons/back.png
new file mode 100644
index 0000000..562c9f6
--- /dev/null
+++ b/src/qml/assets/icons/back.png
diff --git a/src/qml/assets/icons/bookmark.png b/src/qml/assets/icons/bookmark.png
new file mode 100644
index 0000000..fc286cc
--- /dev/null
+++ b/src/qml/assets/icons/bookmark.png
diff --git a/src/qml/assets/icons/close.png b/src/qml/assets/icons/close.png
deleted file mode 100644
index 54351ab..0000000
--- a/src/qml/assets/icons/close.png
+++ /dev/null
diff --git a/src/qml/assets/icons/delete.png b/src/qml/assets/icons/delete.png
new file mode 100644
index 0000000..2010838
--- /dev/null
+++ b/src/qml/assets/icons/delete.png
diff --git a/src/qml/assets/icons/forward.png b/src/qml/assets/icons/forward.png
new file mode 100644
index 0000000..e4c96f8
--- /dev/null
+++ b/src/qml/assets/icons/forward.png
diff --git a/src/qml/assets/icons/home.png b/src/qml/assets/icons/home.png
index 42b8cac..40f6e76 100644
--- a/src/qml/assets/icons/home.png
+++ b/src/qml/assets/icons/home.png
diff --git a/src/qml/assets/icons/newtab.png b/src/qml/assets/icons/newtab.png
index ad0d8a5..51e85ba 100644
--- a/src/qml/assets/icons/newtab.png
+++ b/src/qml/assets/icons/newtab.png
diff --git a/src/qml/assets/icons/next.png b/src/qml/assets/icons/next.png
deleted file mode 100644
index 56f543c..0000000
--- a/src/qml/assets/icons/next.png
+++ /dev/null
diff --git a/src/qml/assets/icons/next_inactive.png b/src/qml/assets/icons/next_inactive.png
deleted file mode 100644
index 1903032..0000000
--- a/src/qml/assets/icons/next_inactive.png
+++ /dev/null
diff --git a/src/qml/assets/icons/previous.png b/src/qml/assets/icons/previous.png
deleted file mode 100644
index a4a2451..0000000
--- a/src/qml/assets/icons/previous.png
+++ /dev/null
diff --git a/src/qml/assets/icons/previous_incative.png b/src/qml/assets/icons/previous_incative.png
deleted file mode 100644
index a790bfd..0000000
--- a/src/qml/assets/icons/previous_incative.png
+++ /dev/null
diff --git a/src/qml/assets/icons/settings.png b/src/qml/assets/icons/settings.png
index fbea69d..33d7400 100644
--- a/src/qml/assets/icons/settings.png
+++ b/src/qml/assets/icons/settings.png
diff --git a/src/qml/assets/icons/star.png b/src/qml/assets/icons/star.png
deleted file mode 100644
index 3c4ead9..0000000
--- a/src/qml/assets/icons/star.png
+++ /dev/null
diff --git a/src/qml/assets/icons/tabs.png b/src/qml/assets/icons/tabs.png
index e8e0b7d..5ea0709 100644
--- a/src/qml/assets/icons/tabs.png
+++ b/src/qml/assets/icons/tabs.png
diff --git a/src/resources.qrc b/src/resources.qrc
index 8e30f18..5a80e84 100644
--- a/src/resources.qrc
+++ b/src/resources.qrc
@@ -9,17 +9,15 @@
         <file>qml/assets/UIButton.qml</file>
         <file alias="home">qml/assets/icons/home.png</file>
         <file alias="tabs">qml/assets/icons/tabs.png</file>
-        <file alias="next">qml/assets/icons/next.png</file>
-        <file alias="previous">qml/assets/icons/previous.png</file>
+        <file alias="forward">qml/assets/icons/forward.png</file>
+        <file alias="back">qml/assets/icons/back.png</file>
         <file alias="refresh">qml/assets/icons/refresh.png</file>
         <file alias="stop">qml/assets/icons/stop.png</file>
         <file alias="touchpoint">qml/assets/icons/touchpoint.png</file>
         <file alias="icon">qml/assets/icons/icon.png</file>
-        <file alias="close">qml/assets/icons/close.png</file>
-        <file alias="star">qml/assets/icons/star.png</file>
+        <file alias="delete">qml/assets/icons/delete.png</file>
+        <file alias="star">qml/assets/icons/bookmark.png</file>
         <file alias="settings">qml/assets/icons/settings.png</file>
-        <file alias="previous_inactive">qml/assets/icons/previous_incative.png</file>
-        <file alias="next_inactive">qml/assets/icons/next_inactive.png</file>
         <file alias="about">qml/assets/icons/about_blank.png</file>
         <file alias="newtab">qml/assets/icons/newtab.png</file>
         <file alias="done">qml/assets/icons/done.png</file>