Implement the toolbar relayout.

The new toolbar goes below navigation bar.
Buttons added: "Share" and "Settings"
Buttons modified: "Favorite" becomes "Pin"

Reviewed by: Rafael Brandao

19 files changed, 102 insertions, 70 deletions

diff --git a/src/core/BookmarkModel.cpp b/src/core/BookmarkModel.cpp
index 8e29c70..4780614 100644
--- a/src/core/BookmarkModel.cpp
+++ b/src/core/BookmarkModel.cpp
@@ -91,7 +91,7 @@ void BookmarkModel::remove(const QString& url)
     }
 }
 
-void BookmarkModel::toggleFavorite(const QString& url)
+void BookmarkModel::togglePin(const QString& url)
 {
     if (contains(url))
         remove(url);
diff --git a/src/core/BookmarkModel.h b/src/core/BookmarkModel.h
index c1c917f..b0a07b1 100644
--- a/src/core/BookmarkModel.h
+++ b/src/core/BookmarkModel.h
@@ -37,7 +37,7 @@ public:
     Q_INVOKABLE void remove(const QString& url);
     Q_INVOKABLE void update(int index, const QString& name, const QString& url);
     Q_INVOKABLE bool contains(const QString& url);
-    Q_INVOKABLE void toggleFavorite(const QString& url);
+    Q_INVOKABLE void togglePin(const QString& url);
 
 Q_SIGNALS:
     void countChanged();
diff --git a/src/mobile/images/button_favorite_pressed.png b/src/mobile/images/button_favorite_pressed.png
deleted file mode 100644
index e2b39f4..0000000
--- a/src/mobile/images/button_favorite_pressed.png
+++ /dev/null
diff --git a/src/mobile/images/button_favorite_unpressed.png b/src/mobile/images/button_favorite_unpressed.png
deleted file mode 100644
index 2d79228..0000000
--- a/src/mobile/images/button_favorite_unpressed.png
+++ /dev/null
diff --git a/src/mobile/images/button_pin_pressed.png b/src/mobile/images/button_pin_pressed.png
new file mode 100644
index 0000000..8d17d9f
--- /dev/null
+++ b/src/mobile/images/button_pin_pressed.png
diff --git a/src/mobile/images/button_pin_unpressed.png b/src/mobile/images/button_pin_unpressed.png
new file mode 100644
index 0000000..65603f0
--- /dev/null
+++ b/src/mobile/images/button_pin_unpressed.png
diff --git a/src/mobile/images/button_settings_pressed.png b/src/mobile/images/button_settings_pressed.png
new file mode 100644
index 0000000..4dc92f3
--- /dev/null
+++ b/src/mobile/images/button_settings_pressed.png
diff --git a/src/mobile/images/button_settings_unpressed.png b/src/mobile/images/button_settings_unpressed.png
new file mode 100644
index 0000000..8738b4d
--- /dev/null
+++ b/src/mobile/images/button_settings_unpressed.png
diff --git a/src/mobile/images/button_share_pressed.png b/src/mobile/images/button_share_pressed.png
new file mode 100644
index 0000000..68aba5e
--- /dev/null
+++ b/src/mobile/images/button_share_pressed.png
diff --git a/src/mobile/images/button_share_unpressed.png b/src/mobile/images/button_share_unpressed.png
new file mode 100644
index 0000000..aafa16e
--- /dev/null
+++ b/src/mobile/images/button_share_unpressed.png
diff --git a/src/mobile/images/thumb_favorite_pressed.png b/src/mobile/images/thumb_favorite_pressed.png
deleted file mode 100644
index 5f3400b..0000000
--- a/src/mobile/images/thumb_favorite_pressed.png
+++ /dev/null
diff --git a/src/mobile/images/thumb_favorite_unpressed.png b/src/mobile/images/thumb_favorite_unpressed.png
deleted file mode 100644
index 1cffbf0..0000000
--- a/src/mobile/images/thumb_favorite_unpressed.png
+++ /dev/null
diff --git a/src/mobile/images/thumb_pin_pressed.png b/src/mobile/images/thumb_pin_pressed.png
new file mode 100644
index 0000000..7804ee9
--- /dev/null
+++ b/src/mobile/images/thumb_pin_pressed.png
diff --git a/src/mobile/images/thumb_pin_unpressed.png b/src/mobile/images/thumb_pin_unpressed.png
new file mode 100644
index 0000000..262f7b0
--- /dev/null
+++ b/src/mobile/images/thumb_pin_unpressed.png
diff --git a/src/mobile/qml/NavigationPanel.qml b/src/mobile/qml/NavigationPanel.qml
index 636f01f..4c219ac 100644
--- a/src/mobile/qml/NavigationPanel.qml
+++ b/src/mobile/qml/NavigationPanel.qml
@@ -180,31 +180,35 @@ Item {
         onClicked: overlay.dismiss()
     }
 
-    OverlayBar {
-        id: overlayBar
-        visible: overlay.visible
-        anchors {
-            top: navigationBar.top
-            left: parent.left
-            right: parent.right
-            bottomMargin: 27
-        }
+    Item {
+        id: tabBar
+        width: UiConstants.PortraitWidth
+        height: UiConstants.TabBarHeight
+        anchors.top: barsBackground.top
+        anchors.left: parent.left
+        anchors.right: parent.right
 
-        onShowThumbnails: {
-            navigationPanel.state = "";
-            TabsModel.currentWebViewIndex = -1;
+        IndicatorRow {
+            id: tabBarRow
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+                horizontalCenter: parent.horizontalCenter
+                topMargin: 25
+                bottomMargin: 27
+            }
+            itemCount: TabsModel.count
+            maxItems: pageBarRow.maxItems * UiConstants.PagedGridItemsPerPage
+            currentItem: Math.max(0, TabsModel.currentWebViewIndex)
+            loadProgress: visibleTab != null ? visibleTab.loadProgress : 0
+            blinkOnZeroProgress: true
         }
 
-        onOpenNewTab: navigationPanel.newTabRequested()
-
-        onFavoriteToggled: BookmarkModel.toggleFavorite(visibleTab.url);
-
-        Connections {
-            target: BookmarkModel
-            onCountChanged: {
-                if (visibleTab)
-                    overlayBar.favorite = BookmarkModel.contains(visibleTab.url);
-            }
+        SwipeArea {
+            anchors.fill: parent
+            onSwipeLeft: overlay.goToNextTab()
+            onSwipeRight: overlay.goToPreviousTab()
+            onClicked: navigationPanel.state = "withNavigationBarAndOverlay";
         }
     }
 
@@ -236,45 +240,41 @@ Item {
             }
         }
 
-        onUrlChanged: overlayBar.favorite = BookmarkModel.contains(url);
+        onUrlChanged: overlayBar.pin = BookmarkModel.contains(url);
     }
 
-    Item {
-        id: tabBar
-        width: UiConstants.PortraitWidth
-        height: UiConstants.TabBarHeight
-        anchors.bottom: overlayBar.top
-        anchors.left: parent.left
-        anchors.right: parent.right
+    OverlayBar {
+        id: overlayBar
+        visible: overlay.visible
+        anchors {
+            top: parent.bottom
+            left: parent.left
+            right: parent.right
+            bottomMargin: 31
+        }
 
-        IndicatorRow {
-            id: tabBarRow
-            anchors {
-                top: parent.top
-                bottom: parent.bottom
-                horizontalCenter: parent.horizontalCenter
-                topMargin: 25
-                bottomMargin: 27
-            }
-            itemCount: TabsModel.count
-            maxItems: pageBarRow.maxItems * UiConstants.PagedGridItemsPerPage
-            currentItem: Math.max(0, TabsModel.currentWebViewIndex)
-            loadProgress: visibleTab != null ? visibleTab.loadProgress : 0
-            blinkOnZeroProgress: true
+        onShowThumbnails: {
+            navigationPanel.state = "";
+            TabsModel.currentWebViewIndex = -1;
         }
 
-        SwipeArea {
-            anchors.fill: parent
-            onSwipeLeft: overlay.goToNextTab()
-            onSwipeRight: overlay.goToPreviousTab()
-            onClicked: navigationPanel.state = "withNavigationBarAndOverlay";
+        onOpenNewTab: navigationPanel.newTabRequested()
+
+        onPinToggled: BookmarkModel.togglePin(visibleTab.url);
+
+        Connections {
+            target: BookmarkModel
+            onCountChanged: {
+                if (visibleTab)
+                    overlayBar.pin = BookmarkModel.contains(visibleTab.url);
+            }
         }
     }
 
     states: [
         State {
             name: "withNavigationBar"
-            AnchorChanges { target: navigationBar; anchors.top: undefined; anchors.bottom: parent.bottom }
+            AnchorChanges { target: navigationBar; anchors.top: undefined; anchors.bottom: overlayBar.top }
             PropertyChanges {
                 target: barsBackground
                 height: tabBar.height + tabBar.anchors.topMargin + tabBar.anchors.bottomMargin
@@ -293,7 +293,7 @@ Item {
             name: "withNavigationBarAndOverlay"
             extend: "withNavigationBar"
             PropertyChanges { target: overlay; visible: true }
-            AnchorChanges { target: overlayBar; anchors.top: undefined; anchors.bottom: navigationBar.top }
+            AnchorChanges { target: overlayBar; anchors.top: undefined; anchors.bottom: parent.bottom }
             StateChangeScript { script: navigationBarHidingTimer.stop() }
             PropertyChanges {
                 target: barsBackground
diff --git a/src/mobile/qml/OverlayBar.qml b/src/mobile/qml/OverlayBar.qml
index e391d0a..8482f3f 100644
--- a/src/mobile/qml/OverlayBar.qml
+++ b/src/mobile/qml/OverlayBar.qml
@@ -21,11 +21,11 @@ Item {
     id: overlayBar
     height: UiConstants.OverlayBarHeight
 
-    property bool favorite: false
+    property bool pin: false
 
     signal showThumbnails()
     signal openNewTab()
-    signal favoriteToggled()
+    signal pinToggled()
 
     Item {
         id: overlayBarBase
@@ -35,7 +35,7 @@ Item {
             id: buttonThumbview
             anchors {
                 left: parent.left
-                leftMargin: UiConstants.OverlayBarLongMargin
+                leftMargin: UiConstants.OverlayBarSideMargin
             }
             pressedImage: "qrc:///mobile/overlaybar/btn_thumbview_pressed"
             unpressedImage: "qrc:///mobile/overlaybar/btn_thumbview_unpressed"
@@ -43,22 +43,50 @@ Item {
         }
 
         Button {
+            id: buttonShare
+            anchors {
+                left: buttonThumbview.right
+                margins: UiConstants.OverlayBarInsideMargin
+            }
+            pressedImage: "qrc:///mobile/overlaybar/btn_share_pressed"
+            unpressedImage: "qrc:///mobile/overlaybar/btn_share_unpressed"
+            onClicked: null
+        }
+
+        Button {
             id: buttonPlus
-            anchors.horizontalCenter: parent.horizontalCenter
+            anchors {
+                left: buttonShare.right
+                margins: UiConstants.OverlayBarInsideMargin
+            }
             pressedImage: "qrc:///mobile/overlaybar/btn_plus_pressed"
             unpressedImage: "qrc:///mobile/overlaybar/btn_plus_unpressed"
             onClicked: overlayBar.openNewTab()
         }
 
         Button {
-            id: buttonFavorites
+            id: buttonPin
+            anchors {
+                left: buttonPlus.right
+                margins: UiConstants.OverlayBarInsideMargin
+            }
+            pressedImage: pin ? "qrc:///mobile/overlaybar/btn_pin_unpressed" : "qrc:///mobile/overlaybar/btn_pin_pressed"
+            unpressedImage: pin ? "qrc:///mobile/overlaybar/btn_pin_pressed" : "qrc:///mobile/overlaybar/btn_pin_unpressed"
+            onClicked: {
+                overlayBar.pinToggled();
+                pin = !pin;
+            }
+        }
+
+        Button {
+            id: buttonSettings
             anchors {
                 right: parent.right
-                rightMargin: UiConstants.OverlayBarLongMargin
+                rightMargin: UiConstants.OverlayBarSideMargin
             }
-            pressedImage: favorite ? "qrc:///mobile/overlaybar/btn_favorite_unpressed" : "qrc:///mobile/overlaybar/btn_favorite_pressed"
-            unpressedImage: favorite ? "qrc:///mobile/overlaybar/btn_favorite_pressed" : "qrc:///mobile/overlaybar/btn_favorite_unpressed"
-            onClicked: overlayBar.favoriteToggled()
+            pressedImage: "qrc:///mobile/overlaybar/btn_settings_pressed"
+            unpressedImage: "qrc:///mobile/overlaybar/btn_settings_unpressed"
+            onClicked: null
         }
     }
 }
diff --git a/src/mobile/qml/TopSitesPanel.qml b/src/mobile/qml/TopSitesPanel.qml
index 6664b38..b3ac8e1 100644
--- a/src/mobile/qml/TopSitesPanel.qml
+++ b/src/mobile/qml/TopSitesPanel.qml
@@ -74,9 +74,8 @@ Item {
                 }
             }
             Image {
-                id: favoriteButton
-                property bool enabled
-                source: enabled ? "qrc:///mobile/grid/btn_favorite_pressed" : "qrc:///mobile/grid/btn_favorite_unpressed"
+                id: pinButton
+                source: "qrc:///mobile/grid/btn_pin_pressed"
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 anchors.topMargin: 186
diff --git a/src/mobile/qml/UiConstants.js b/src/mobile/qml/UiConstants.js
index aba8c4f..8df0cdd 100644
--- a/src/mobile/qml/UiConstants.js
+++ b/src/mobile/qml/UiConstants.js
@@ -27,7 +27,8 @@ var InterfaceColor = "#efefef"
 var DefaultSwipeLenght = 50
 var NavBarLongMargin = 16
 var NavBarShortMargin = 8
-var OverlayBarLongMargin = 128
+var OverlayBarSideMargin = 16
+var OverlayBarInsideMargin = 42
 var OverlayBarHeight = 64
 var StatusBarHeight = 30
 var TabBarHeight = 25 + 27 + 21
diff --git a/src/mobile/snowshoe-mobile.qrc b/src/mobile/snowshoe-mobile.qrc
index baecd61..ce54189 100644
--- a/src/mobile/snowshoe-mobile.qrc
+++ b/src/mobile/snowshoe-mobile.qrc
@@ -69,10 +69,14 @@
         <file alias="overlaybar/bg_image">images/tabbar_bg.png</file>
         <file alias="overlaybar/btn_thumbview_unpressed">images/button_thumbview_unpressed.png</file>
         <file alias="overlaybar/btn_thumbview_pressed">images/button_thumbview_pressed.png</file>
+        <file alias="overlaybar/btn_share_unpressed">images/button_share_unpressed.png</file>
+        <file alias="overlaybar/btn_share_pressed">images/button_share_pressed.png</file>
         <file alias="overlaybar/btn_plus_unpressed">images/button_plus_unpressed.png</file>
         <file alias="overlaybar/btn_plus_pressed">images/button_plus_pressed.png</file>
-        <file alias="overlaybar/btn_favorite_unpressed">images/button_favorite_unpressed.png</file>
-        <file alias="overlaybar/btn_favorite_pressed">images/button_favorite_pressed.png</file>
+        <file alias="overlaybar/btn_pin_unpressed">images/button_pin_unpressed.png</file>
+        <file alias="overlaybar/btn_pin_pressed">images/button_pin_pressed.png</file>
+	<file alias="overlaybar/btn_settings_unpressed">images/button_settings_unpressed.png</file>
+        <file alias="overlaybar/btn_settings_pressed">images/button_settings_pressed.png</file>
         <file alias="scrollbar/bg_image">images/scrollbar_base.png</file>
         <file alias="scrollbar/btn_google_search">images/button_google_search.png</file>
         <file alias="scrollbar/btn_url_suggestion">images/button_url_suggestion.png</file>
@@ -87,8 +91,8 @@
         <file alias="url/btn_cancel_unpressed">images/button_cancel_unpressed.png</file>
         <file alias="url/btn_cancel_pressed">images/button_cancel_pressed.png</file>
         <file alias="grid/overlayer">images/thumb_overlayer.png</file>
-        <file alias="grid/btn_favorite_pressed">images/thumb_favorite_pressed.png</file>
-        <file alias="grid/btn_favorite_unpressed">images/thumb_favorite_unpressed.png</file>
+        <file alias="grid/btn_pin_pressed">images/thumb_pin_pressed.png</file>
+        <file alias="grid/btn_pin_unpressed">images/thumb_pin_unpressed.png</file>
         <file alias="grid/mask0">images/thumb_mask_01.png</file>
         <file alias="grid/mask1">images/thumb_mask_02.png</file>
         <file alias="grid/mask2">images/thumb_mask_03.png</file>