Transforms tab pager loose code into a proper component.

Previously the code for the open tabs pager was sparsely found
inside the NavigationPanel, this code was moved to a TabsPanel
component, in an imitation of the TopSitesPanel component.

The TabsPanel is now instantiated on Main, as a sibling of
NavigationPanel, instead of residing inside it.

Reviewed-by: Hugo Parente Lima
             Rafael Brandão

6 files changed, 133 insertions, 97 deletions

diff --git a/src/main.pro b/src/main.pro
index 5b40b0b..c7ae1ac 100644
--- a/src/main.pro
+++ b/src/main.pro
@@ -46,6 +46,7 @@ OTHER_FILES += \
     desktop/qml/UrlEdit.qml \
     desktop/qml/main.qml \
     mobile/qml/Button.qml \
+    mobile/qml/TabsPanel.qml \
     mobile/qml/TopSitesPanel.qml \
     mobile/qml/IndicatorRow.qml \
     mobile/qml/UrlInputPanel.qml \
diff --git a/src/mobile/qml/Main.qml b/src/mobile/qml/Main.qml
index 761448d..1991983 100644
--- a/src/mobile/qml/Main.qml
+++ b/src/mobile/qml/Main.qml
@@ -57,6 +57,17 @@ Rectangle {
         onUrlSelected: navigationPanel.openUrlInNewTab(UrlTools.fromUserInput(url))
     }
 
+    TabsPanel {
+        id: tabsPanel
+        opacity: 0
+        anchors {
+            top: panelToggle.bottom
+            left: parent.left
+            right: parent.right
+            topMargin: 32
+        }
+    }
+
     NavigationPanel {
         id: navigationPanel
         opacity: 0
@@ -154,6 +165,7 @@ Rectangle {
             PropertyChanges { target: plusButton; opacity: 1 }
             PropertyChanges { target: panelToggle; opacity: 1 }
             PropertyChanges { target: topSitesPanel; opacity: 1 }
+            PropertyChanges { target: tabsPanel; opacity: 0 }
             PropertyChanges { target: navigationPanel; opacity: 0 }
         },
         State {
@@ -162,7 +174,8 @@ Rectangle {
             PropertyChanges { target: plusButton; opacity: 1 }
             PropertyChanges { target: panelToggle; opacity: 1 }
             PropertyChanges { target: topSitesPanel; opacity: 0 }
-            PropertyChanges { target: navigationPanel; opacity: 1 }
+            PropertyChanges { target: tabsPanel; opacity: 1 }
+            PropertyChanges { target: navigationPanel; opacity: 0 }
         },
         State {
             name: "navigationFullScreen"
@@ -170,6 +183,7 @@ Rectangle {
             PropertyChanges { target: plusButton; opacity: 0 }
             PropertyChanges { target: panelToggle; opacity: 0 }
             PropertyChanges { target: topSitesPanel; opacity: 0 }
+            PropertyChanges { target: tabsPanel; opacity: 0 }
             PropertyChanges { target: navigationPanel; opacity: 1 }
         },
         State {
@@ -178,6 +192,7 @@ Rectangle {
             PropertyChanges { target: plusButton; opacity: 0 }
             PropertyChanges { target: panelToggle; opacity: 0 }
             PropertyChanges { target: topSitesPanel; opacity: 0 }
+            PropertyChanges { target: tabsPanel; opacity: 0 }
             PropertyChanges { target: navigationPanel; opacity: 0 }
         }
     ]
diff --git a/src/mobile/qml/NavigationPanel.qml b/src/mobile/qml/NavigationPanel.qml
index 7071982..cf9afa1 100644
--- a/src/mobile/qml/NavigationPanel.qml
+++ b/src/mobile/qml/NavigationPanel.qml
@@ -56,99 +56,6 @@ Item {
         verticalAlignment: Image.AlignBottom
     }
 
-    Component {
-        id: tabEntry
-        Image {
-            property string url: model.url
-            source: model.screenshot
-            height: UiConstants.PagedGridSizeTable[1]
-            width: UiConstants.PagedGridSizeTable[0]
-            clip: true
-
-            Text {
-                text: index + (tabsGrid.currentPage * 4) + 1
-                color: "#C1C2C3"
-                font.pixelSize: 30
-                font.family: "Nokia Pure Headline Light"
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-                anchors {
-                    top: parent.top
-                    bottom: parent.bottom
-                    left: parent.left
-                    right: parent.right
-                    topMargin: 108
-                    bottomMargin: 103
-                    leftMargin: 69
-                    rightMargin: 62
-                }
-            }
-
-            Text {
-                id: displayedUrl
-                text: url.replace(/(https?|file):\/\/\/?(www\.)?/, "").replace(/\/.*/, "");
-                color: "#515050"
-                horizontalAlignment: urlFade.visible ? Text.AlignLeft : Text.AlignHCenter
-                font.pixelSize: 20
-                font.family: "Nokia Pure Text Light"
-                anchors {
-                    bottom: parent.bottom
-                    left: parent.left
-                    right: parent.right
-                    bottomMargin: 10
-                    leftMargin: 14
-                    rightMargin: 14
-                }
-            }
-            Image {
-                id: urlFade
-                source: "qrc:///mobile/grid/overlayer_tabs_url"
-                visible: displayedUrl.paintedWidth > displayedUrl.width
-                anchors {
-                    bottom: parent.bottom
-                    right: parent.right
-                }
-            }
-        }
-    }
-
-    PagedGrid {
-        id: tabsGrid
-        model: TabsModel
-        delegate: tabEntry
-        visible: TabsModel.currentWebViewIndex < 0
-        emptyItemDelegate: Image { source: "qrc:///mobile/grid/thumb_empty_slot" }
-        maxPages: pageBarRow.maxItems
-
-        anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-            topMargin: UiConstants.NavigationPanelYOffset
-        }
-
-        onItemClicked: {
-            if (y < UiConstants.PagedGridCloseButtonHeight
-                && (UiConstants.PagedGridSizeTable[0] - x) <= UiConstants.PagedGridCloseButtonWidth) {
-                TabsModel.remove(index);
-            } else
-                TabsModel.currentWebViewIndex = index;
-        }
-    }
-
-    IndicatorRow {
-        id: pageBarRow
-        anchors {
-            top: tabsGrid.bottom
-            horizontalCenter: parent.horizontalCenter
-            topMargin: 25
-        }
-        itemCount: tabsGrid.pageCount
-        maxItems: UiConstants.TabsMaxPages
-        currentItem: tabsGrid.currentPage
-        visible: !tabBarRow.visible
-    }
-
     SwipeArea {
         id: overlay
         visible: false
@@ -194,7 +101,7 @@ Item {
                 bottomMargin: 27
             }
             itemCount: TabsModel.count
-            maxItems: pageBarRow.maxItems * UiConstants.PagedGridItemsPerPage
+            maxItems: UiConstants.TabsMaxPages * UiConstants.PagedGridItemsPerPage
             currentItem: Math.max(0, TabsModel.currentWebViewIndex)
             loadProgress: visibleTab != null ? visibleTab.loadProgress : 0
             blinkOnZeroProgress: true
diff --git a/src/mobile/qml/TabsPanel.qml b/src/mobile/qml/TabsPanel.qml
new file mode 100644
index 0000000..4881479
--- /dev/null
+++ b/src/mobile/qml/TabsPanel.qml
@@ -0,0 +1,114 @@
+/****************************************************************************
+ *   Copyright (C) 2012  Instituto Nokia de Tecnologia (INdT)               *
+ *                                                                          *
+ *   This file may be used under the terms of the GNU Lesser                *
+ *   General Public License version 2.1 as published by the Free Software   *
+ *   Foundation and appearing in the file LICENSE.LGPL included in the      *
+ *   packaging of this file.  Please review the following information to    *
+ *   ensure the GNU Lesser General Public License version 2.1 requirements  *
+ *   will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.   *
+ *                                                                          *
+ *   This program is distributed in the hope that it will be useful,        *
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of         *
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the          *
+ *   GNU Lesser General Public License for more details.                    *
+ ****************************************************************************/
+
+import QtQuick 2.0
+import "UiConstants.js" as UiConstants
+
+Item {
+    id: root
+    height: pagedGrid.height + 25 + indicatorRow.height
+
+    IndicatorRow {
+        id: indicatorRow
+        anchors {
+            bottom: root.bottom
+            left: root.left
+            right: root.right
+        }
+        itemCount: pagedGrid.pageCount
+        maxItems: UiConstants.TabsMaxPages
+        currentItem: pagedGrid.currentPage
+    }
+
+    Component {
+        id: pagedItemDelegate
+        Image {
+            property string url: model.url
+            property bool fadeUrl: false
+            source: model.screenshot
+            height: UiConstants.PagedGridSizeTable[1]
+            fillMode: Image.Pad
+            verticalAlignment: Image.AlignBottom
+            clip: true
+
+            Text {
+                text: index + (pagedGrid.currentPage * 4) + 1
+                color: "#C1C2C3"
+                font.pixelSize: 30
+                font.family: "Nokia Pure Headline Light"
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                    left: parent.left
+                    right: parent.right
+                    topMargin: 108
+                    bottomMargin: 103
+                    leftMargin: 69
+                    rightMargin: 62
+                }
+            }
+
+            Text {
+                id: displayedUrl
+                text: url.replace(/(https?|file):\/\/\/?(www\.)?/, "").replace(/\/.*/, "");
+                color: "#515050"
+                horizontalAlignment: fadeUrl ? Text.AlignLeft : Text.AlignHCenter
+                font.pixelSize: 20
+                font.family: "Nokia Pure Text Light"
+                anchors {
+                    bottom: parent.bottom
+                    left: parent.left
+                    right: parent.right
+                    bottomMargin: 10
+                    leftMargin: 14
+                    rightMargin: 14
+                }
+                onWidthChanged: fadeUrl = paintedWidth > width
+            }
+            Image {
+                id: urlFade
+                source: "qrc:///mobile/grid/overlayer_tabs_url"
+                visible: fadeUrl
+                anchors {
+                    bottom: parent.bottom
+                    right: parent.right
+                }
+            }
+        }
+    }
+
+    PagedGrid {
+        id: pagedGrid
+        model: TabsModel
+        delegate: pagedItemDelegate
+        emptyItemDelegate: Image { source: "qrc:///mobile/grid/thumb_empty_slot" }
+        maxPages: indicatorRow.maxItems
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+        }
+        onItemClicked: {
+            if (y < UiConstants.PagedGridCloseButtonHeight
+                && (UiConstants.PagedGridSizeTable[0] - x) <= UiConstants.PagedGridCloseButtonWidth) {
+                TabsModel.remove(index);
+            } else
+                TabsModel.currentWebViewIndex = index;
+        }
+    }
+}
diff --git a/src/mobile/qml/UiConstants.js b/src/mobile/qml/UiConstants.js
index 1e17a40..7673e14 100644
--- a/src/mobile/qml/UiConstants.js
+++ b/src/mobile/qml/UiConstants.js
@@ -37,8 +37,6 @@ var PortraitWidth = 480
 var LandscapeHeight = 854
 var LandscapeWidth = 480 - StatusBarHeight
 
-var NavigationPanelYOffset = 32 * 2 + /*BUTTON HEIGHT*/ 56;
-
 // Paged grid constants
 // [width, height, horizontalspacing, verticalspacing], the table index refers to the grid size
 var PagedGridSizeTable = [192, 263, 16, 16]; // 4 tabs in a grid
diff --git a/src/mobile/snowshoe-mobile.qrc b/src/mobile/snowshoe-mobile.qrc
index e90014c..cbf186a 100644
--- a/src/mobile/snowshoe-mobile.qrc
+++ b/src/mobile/snowshoe-mobile.qrc
@@ -19,6 +19,7 @@
         <file>qml/UrlSuggestions.qml</file>
         <file>qml/SuggestionItem.qml</file>
         <file>qml/Scrollbar.qml</file>
+        <file>qml/TabsPanel.qml</file>
         <file>qml/TopSitesPanel.qml</file>
         <file alias="app/bg_image">images/app_bg.png</file>
         <file alias="app/side_shadow">images/overlayer.png</file>