Factor out UIToolBar

This simple toolbar will be used for settings as well

5 files changed, 227 insertions, 90 deletions

diff --git a/src/qml/BrowserWindow.qml b/src/qml/BrowserWindow.qml
index ec49775..3cf2b15 100644
--- a/src/qml/BrowserWindow.qml
+++ b/src/qml/BrowserWindow.qml
@@ -59,7 +59,7 @@ Item {
     property int toolBarSize: 80
     property string uiColor: "#46a2da"
     property string uiSeparatorColor: "#7ebee5"
-    property string tabEditSeparatorColor: "#a3d1ed"
+    property string toolBarSeparatorColor: "#a3d1ed"
     property string buttonPressedColor: "#3f91c4"
     property string uiHighlightColor: "#fddd5c"
     property string inactivePagerColor: "#bcbdbe"
@@ -135,23 +135,11 @@ Item {
         onTriggered: tabView.remove(tabView.currentIndex)
     }
 
+    UIToolBar {
+        id: tabEditToolBar
 
-    ToolBar {
-        id: tabEditBar
-
-        height: toolBarSize
-
-        style: ToolBarStyle {
-            background: Rectangle {
-                color: uiSeparatorColor
-            }
-            padding {
-                left: 0
-                right: 0
-                top: 0
-                bottom: 0
-            }
-        }
+        source: "qrc:///newtab"
+        indicator: tabView.count
 
         anchors {
             left: parent.left
@@ -161,79 +149,10 @@ Item {
 
         visible: opacity != 0.0
         opacity: tabView.viewState == "list" ? 1.0 : 0.0
+        onDoneClicked: tabView.viewState = "page"
+        onOptionClicked: newTabAction.trigger()
+    }
 
-        RowLayout {
-            spacing: 0
-            height: toolBarSize - 2
-            anchors.fill: parent
-            UIButton {
-                color: uiSeparatorColor
-                id: newTabButton
-                source: "qrc:///newtab"
-                onClicked: newTabAction.trigger()
-            }
-            Rectangle {
-                width: 1
-                anchors {
-                    top: parent.top
-                    bottom: parent.bottom
-                }
-                color: tabEditSeparatorColor
-            }
-            Rectangle {
-                width: 40
-                anchors {
-                    top: parent.top
-                    bottom: parent.bottom
-                }
-                color: uiSeparatorColor
-            }
-            Rectangle {
-                color: uiSeparatorColor
-                Layout.fillWidth: true
-                anchors {
-                    top: parent.top
-                    bottom: parent.bottom
-                }
-                Rectangle {
-                    color: "transparent"
-                    border.color: "white"
-                    border.width: 2
-                    width: 40
-                    height: 32
-                    anchors.centerIn: parent
-                    Text {
-                        anchors.centerIn: parent
-                        text: tabView.count
-                        color: "white"
-                        font.family: defaultFontFamily
-                        font.pixelSize: 20
-                    }
-                }
-            }
-            Rectangle {
-                width: 1
-                anchors {
-                    top: parent.top
-                    bottom: parent.bottom
-                }
-                color: tabEditSeparatorColor
-            }
-            UIButton {
-                id:doneButton
-                color: uiSeparatorColor
-                Text {
-                    color: "white"
-                    anchors.centerIn: parent
-                    text: "Done"
-                    font.family: defaultFontFamily
-                    font.pixelSize: 28
-                }
-                implicitWidth: 120
-                onClicked: {
-                    tabView.viewState = "page"
-                }
-            }
         }
     }
     NavigationBar {
@@ -322,7 +241,12 @@ Item {
 
     HomeScreen {
         id: homeScreen
-        z: 5
+        height: parent.height - toolBarSize
+        anchors {
+            top: navigation.bottom
+            left: parent.left
+            right: parent.right
+        }
         height: parent.height - toolBarSize
         anchors {
             top: navigation.bottom
diff --git a/src/qml/assets/UIButton.qml b/src/qml/assets/UIButton.qml
index 3a65c12..92afe5b 100644
--- a/src/qml/assets/UIButton.qml
+++ b/src/qml/assets/UIButton.qml
@@ -1,3 +1,40 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtBrowser project.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPLv2 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
 import QtQuick 2.5
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
diff --git a/src/qml/assets/UIToolBar.qml b/src/qml/assets/UIToolBar.qml
new file mode 100644
index 0000000..e876a20
--- /dev/null
+++ b/src/qml/assets/UIToolBar.qml
@@ -0,0 +1,174 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the QtBrowser project.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPLv2 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3.0 as published by the Free Software
+** Foundation and appearing in the file LICENSE.GPL included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 3.0 requirements will be
+** met: http://www.gnu.org/copyleft/gpl.html.
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.5
+import QtQuick.Controls 1.0
+import QtQuick.Controls.Styles 1.0
+import QtQuick.Layouts 1.0
+
+ToolBar {
+    id: root
+
+    property alias title: titleBox.text
+    property alias source: toolBarButton.source
+    property alias indicator: indicatorText.text
+
+    property int indicatorWidth: 40
+    property int indicatorHeight: 32
+
+    signal optionClicked()
+    signal doneClicked()
+
+    height: toolBarSize
+
+    style: ToolBarStyle {
+        background: Rectangle {
+            color: uiSeparatorColor
+        }
+        padding {
+            left: 0
+            right: 0
+            top: 0
+            bottom: 0
+        }
+    }
+
+    RowLayout {
+        spacing: 0
+        height: toolBarSize - 2
+        anchors.fill: parent
+        Rectangle {
+            width: childrenRect.width
+            anchors {
+                left: parent.left
+                top: parent.top
+                bottom: parent.bottom
+            }
+            color: uiSeparatorColor
+            Text {
+                id: titleBox
+                visible: root.title !== ""
+                anchors {
+                    leftMargin: visible ? 30 : 0
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                }
+                color: "white"
+                font.pixelSize: 28
+                font.family: defaultFontFamily
+            }
+            Rectangle {
+                visible: toolBarButton.visible && titleBox.visible
+                width: 1
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                }
+                color: toolBarSeparatorColor
+            }
+            UIButton {
+                id: toolBarButton
+                visible: root.source !== ""
+                color: uiSeparatorColor
+                Component.onCompleted: toolBarButton.clicked.connect(root.optionClicked)
+                anchors.left: titleBox.right
+            }
+        }
+        Rectangle {
+            visible: toolBarButton.visible
+            width: 1
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            color: toolBarSeparatorColor
+        }
+        Rectangle {
+            width: indicatorWidth
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            color: uiSeparatorColor
+        }
+        Rectangle {
+            color: uiSeparatorColor
+            Layout.fillWidth: true
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            Rectangle {
+                visible: root.indicator !== ""
+                color: "transparent"
+                border.color: "white"
+                border.width: 2
+                width: indicatorWidth
+                height: indicatorHeight
+                anchors.centerIn: parent
+                Text {
+                    id: indicatorText
+                    anchors.centerIn: parent
+                    color: "white"
+                    font.family: defaultFontFamily
+                    font.pixelSize: 20
+                }
+            }
+        }
+        Rectangle {
+            width: 1
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+            color: toolBarSeparatorColor
+        }
+        UIButton {
+            id: doneButton
+            color: uiSeparatorColor
+            Text {
+                color: "white"
+                anchors.centerIn: parent
+                text: "Done"
+                font.family: defaultFontFamily
+                font.pixelSize: 28
+            }
+            implicitWidth: 120
+            Component.onCompleted: doneButton.clicked.connect(root.doneClicked)
+        }
+    }
+}
diff --git a/src/resources.qrc b/src/resources.qrc
index f0cb698..521da57 100644
--- a/src/resources.qrc
+++ b/src/resources.qrc
@@ -7,6 +7,7 @@
         <file>qml/NavigationBar.qml</file>
         <file>qml/HomeScreen.qml</file>
         <file>qml/assets/UIButton.qml</file>
+        <file>qml/assets/UIToolBar.qml</file>
         <file alias="home">qml/assets/icons/Btn_Home.png</file>
         <file alias="tabs">qml/assets/icons/Btn_Tabs.png</file>
         <file alias="forward">qml/assets/icons/Btn_Forward.png</file>
diff --git a/src/src.pro b/src/src.pro
index 898d53d..82a9f92 100644
--- a/src/src.pro
+++ b/src/src.pro
@@ -18,6 +18,7 @@ HEADERS = \
 
 OTHER_FILES = \
     qml/assets/UIButton.qml \
+    qml/assets/UIToolBar.qml \
     qml/ApplicationRoot.qml \
     qml/BrowserWindow.qml \
     qml/FeaturePermissionBar.qml \