Add tabEditBar for PageView

7 files changed, 115 insertions, 18 deletions

diff --git a/src/qml/BrowserWindow.qml b/src/qml/BrowserWindow.qml
index 18cf917..6fedbc1 100644
--- a/src/qml/BrowserWindow.qml
+++ b/src/qml/BrowserWindow.qml
@@ -62,6 +62,8 @@ Item {
     property string buttonHighlightColor: "#e6e6e6"
     property string uiSelectionColor: "#fad84a"
 
+    property int animationDuration: 200
+
     width: 1024
     height: 600
     visible: true
@@ -97,12 +99,13 @@ Item {
         }
     }
     Action {
+        id: newTabAction
         shortcut: "Ctrl+T"
         onTriggered: {
             tabs.createEmptyTab()
-            tabs.currentIndex = tabs.count - 1
             navigation.addressBar.forceActiveFocus();
             navigation.addressBar.selectAll();
+            tabs.makeCurrent(tabs.count - 1)
         }
     }
     Action {
@@ -110,6 +113,91 @@ Item {
         onTriggered: tabs.remove(tabs.currentIndex)
     }
 
+
+    ToolBar {
+        id: tabEditBar
+
+        height: toolBarHeight
+
+        style: ToolBarStyle {
+            background: Rectangle {
+                color: uiColor
+            }
+        }
+
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+        }
+
+        visible: opacity != 0.0
+        opacity: tabs.viewState == "list" ? 1.0 : 0.0
+
+        RowLayout {
+            anchors.fill: parent
+            UIButton {
+                id: newTabButton
+                source: "qrc:///newtab"
+                onClicked: newTabAction.trigger()
+            }
+            Rectangle {
+                width: 1
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                }
+                color: uiBorderColor
+            }
+            Rectangle {
+                width: 50
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                }
+                color: uiColor
+            }
+            Rectangle {
+                color: uiColor
+                Layout.fillWidth: true
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                }
+                Rectangle {
+                    color: "transparent"
+                    border.color: "white"
+                    border.width: 2
+                    width: 40
+                    height: 30
+                    anchors.centerIn: parent
+                    Text {
+                        anchors.centerIn: parent
+                        text: tabs.count
+                        color: "white"
+                        font.family: "Sans"
+                        font.pixelSize: 20
+                    }
+                }
+            }
+            Rectangle {
+                width: 1
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                }
+                color: uiBorderColor
+            }
+            UIButton {
+                id:doneButton
+                source: "qrc:///done"
+                width: 120
+                onClicked: {
+                    tabs.viewState = "page"
+                }
+            }
+        }
+    }
     NavigationBar {
         id: navigation
         anchors {
diff --git a/src/qml/NavigationBar.qml b/src/qml/NavigationBar.qml
index 59a5b39..a72f750 100644
--- a/src/qml/NavigationBar.qml
+++ b/src/qml/NavigationBar.qml
@@ -14,6 +14,9 @@ ToolBar {
 
     height: toolBarHeight
 
+    visible: opacity != 0.0
+    opacity: tabs.viewState == "page" ? 1.0 : 0.0
+
     style: ToolBarStyle {
         background: Rectangle {
             color: uiColor
diff --git a/src/qml/PageView.qml b/src/qml/PageView.qml
index e057274..a13e220 100644
--- a/src/qml/PageView.qml
+++ b/src/qml/PageView.qml
@@ -45,7 +45,7 @@ import QtGraphicalEffects 1.0
 
 Rectangle {
     id: root
-    property int animationDuration: 200
+
     property int itemWidth: root.width * 0.6
     property int itemHeight: root.height * 0.6
 
@@ -84,7 +84,7 @@ Rectangle {
             visible: opacity != 0.0
 
             Behavior on opacity {
-                NumberAnimation { duration: animationDuration / 2; easing.type: Easing.OutBounce }
+                NumberAnimation { duration: animationDuration }
             }
 
             anchors.fill: parent
@@ -151,11 +151,13 @@ Rectangle {
                         print("Warning: Blocked a popup window.")
                     else if (request.destination == WebEngineView.NewViewInTab) {
                         tab = tabs.createEmptyTab()
-                        pathView.positionViewAtIndex(tabs.count - 1, PathView.SnapPosition)
+                        pathView.positionViewAtIndex(tabs.count - 1, PathView.Center)
                         request.openIn(tab.webView)
                     } else if (request.destination == WebEngineView.NewViewInBackgroundTab) {
+                        var index = pathView.currentIndex
                         tab = tabs.createEmptyTab()
                         request.openIn(tab.webView)
+                        pathView.positionViewAtIndex(index, PathView.Center)
                     } else if (request.destination == WebEngineView.NewViewInDialog) {
                         var dialog = tabs.createEmptyTab()
                         request.openIn(dialog.webView)
@@ -243,14 +245,20 @@ Rectangle {
         id: listModel
     }
 
+    function makeCurrent(index) {
+        pathView.positionViewAtIndex(index, PathView.Center)
+    }
+
     function createEmptyTab() {
+        if (listModel.count == 10)
+            return null
         var tab = add(tabComponent)
         return tab
     }
 
     function add(component) {
         var element = {"item": null }
-        element.item = component.createObject(root, { "width": root.width, "height": root.height })
+        element.item = component.createObject(root, { "width": root.width, "height": root.height, "opacity": 0.0 })
 
         if (element.item == null) {
             console.log("PageView::add(): Error creating object");
@@ -260,9 +268,6 @@ Rectangle {
         element.item.webView.url = "about:blank"
         element.index = listModel.count
         listModel.append(element)
-
-        pathView.positionViewAtIndex(listModel.count - 1, PathView.Center)
-
         return element.item
     }
 
@@ -303,21 +308,21 @@ Rectangle {
                     name: "page"
                     PropertyChanges { target: wrapper; width: root.width; height: root.height; visibility: 0.0 }
                     PropertyChanges { target: pathView; interactive: false }
-                    PropertyChanges { target: item; opacity: 1.0; visible: visibility < 0.1 }
+                    PropertyChanges { target: item; opacity: 1.0;  }
                 },
                 State {
                     name: "list"
                     PropertyChanges { target: wrapper; width: itemWidth; height: itemHeight; visibility: 1.0 }
                     PropertyChanges { target: pathView; interactive: true }
-                    PropertyChanges { target: item; opacity: 0.0; visible: opacity != 0.0 }
+                    PropertyChanges { target: item; }
                 }
             ]
 
             transitions: Transition {
                 ParallelAnimation {
-                    PropertyAnimation { property: "visibility"; duration: animationDuration }
-                    PropertyAnimation { properties: "x,y"; duration: animationDuration }
-                    PropertyAnimation { properties: "width,height"; duration: animationDuration}
+                    PropertyAnimation { property: "visibility"; duration: animationDuration; easing.type : Easing.InQuad }
+                    PropertyAnimation { properties: "x,y"; duration: animationDuration; easing.type : Easing.OutQuad }
+                    PropertyAnimation { properties: "width,height"; duration: animationDuration; easing.type : Easing.OutQuad }
                 }
             }
 
@@ -338,7 +343,7 @@ Rectangle {
                             root.viewState = "page"
                         return
                     }
-                    pathView.positionViewAtIndex(index, PathView.Center)
+                    pathView.currentIndex = index
                 }
             }
 
@@ -365,7 +370,7 @@ Rectangle {
                     }
                     anchors.fill: parent
                     Rectangle {
-                        opacity: wrapper.isCurrentItem && !pathView.moving && !pathView.flicking ? 1.0 : 0.0
+                        opacity: wrapper.isCurrentItem && !pathView.moving && !pathView.flicking && wrapper.visibility == 1.0 ? 1.0 : 0.0
                         visible: opacity != 0.0
                         width: 45
                         height: 45
diff --git a/src/qml/assets/UIButton.qml b/src/qml/assets/UIButton.qml
index feb5dcd..b3fd8d1 100644
--- a/src/qml/assets/UIButton.qml
+++ b/src/qml/assets/UIButton.qml
@@ -7,19 +7,18 @@ import QtQuick.Layouts 1.3
 ToolButton {
     id: root
 
-    property string source
+    property string source: ""
     property real radius: 0.0
     property string color: uiColor
     property string highlightColor: uiBorderColor
     style: ButtonStyle {
         background: Rectangle {
-            implicitWidth: 60
+            implicitWidth: Math.max(60, parent.width)
             implicitHeight: 60
             color: root.pressed ? root.highlightColor : root.color
             radius: root.radius
             Image {
                 source: root.source
-                width: Math.min(50, parent.width)
                 height: Math.min(50, parent.width)
                 anchors.centerIn: parent
             }
diff --git a/src/qml/assets/icons/done.png b/src/qml/assets/icons/done.png
new file mode 100644
index 0000000..db45ff8
--- /dev/null
+++ b/src/qml/assets/icons/done.png
diff --git a/src/qml/assets/icons/newtab.png b/src/qml/assets/icons/newtab.png
new file mode 100644
index 0000000..ad0d8a5
--- /dev/null
+++ b/src/qml/assets/icons/newtab.png
diff --git a/src/resources.qrc b/src/resources.qrc
index c5e68ac..8e30f18 100644
--- a/src/resources.qrc
+++ b/src/resources.qrc
@@ -21,5 +21,7 @@
         <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>
     </qresource>
 </RCC>