Moved similar code to a new component PageThumbUrl.

The delegates of TabsPanel and TopSitesPanel share a lot of things
in common, most of those things are those pesky little details like
margin, font, color, and even an identical regular expression.
Stuff like that should be in the same place.

In addition, the margin and font problems of the thumbnail url texts
reported in the design review, were fixed.

Reviewed-by: Hugo Parente Lima

5 files changed, 60 insertions, 40 deletions

diff --git a/src/main.pro b/src/main.pro
index c7ae1ac..6cba8aa 100644
--- a/src/main.pro
+++ b/src/main.pro
@@ -60,6 +60,7 @@ OTHER_FILES += \
     mobile/qml/PanelToggleButton.qml \
     mobile/qml/PagedGrid.qml \
     mobile/qml/PageFillGrid.qml \
+    mobile/qml/PageThumbUrl.qml \
     mobile/qml/StatusBarIndicator.qml \
     mobile/qml/SnowshoeWebView.qml \
     mobile/qml/UiConstants.js \
diff --git a/src/mobile/qml/PageThumbUrl.qml b/src/mobile/qml/PageThumbUrl.qml
new file mode 100644
index 0000000..37254e9
--- /dev/null
+++ b/src/mobile/qml/PageThumbUrl.qml
@@ -0,0 +1,51 @@
+/****************************************************************************
+ *   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
+    property string url: ''
+    property alias urlFadeImage: urlFade.source
+    property bool shouldFadeUrl: false
+    Text {
+        id: displayUrl
+        text: root.url.replace(/(https?|file):\/\/\/?(www\.)?/, "").replace(/\/.*/, "");
+        color: "#515050"
+        font.pixelSize: 20
+        font.family: UiConstants.DefaultFontFamily
+        font.weight: Font.Light
+        horizontalAlignment: shouldFadeUrl ? Text.AlignLeft : Text.AlignHCenter
+        verticalAlignment: Text.AlignBottom
+        anchors {
+            fill: parent
+            bottomMargin: 9
+            leftMargin: 14
+            rightMargin: 14
+        }
+        onWidthChanged: shouldFadeUrl = paintedWidth > width
+        onPaintedWidthChanged: shouldFadeUrl = paintedWidth > width
+    }
+    Image {
+        id: urlFade
+        visible: shouldFadeUrl
+        anchors {
+            bottom: parent.bottom
+            right: parent.right
+        }
+    }
+}
diff --git a/src/mobile/qml/TabsPanel.qml b/src/mobile/qml/TabsPanel.qml
index bd1a585..d8c04dd 100644
--- a/src/mobile/qml/TabsPanel.qml
+++ b/src/mobile/qml/TabsPanel.qml
@@ -37,7 +37,6 @@ Item {
         id: pagedItemDelegate
         Image {
             property string url: model.url
-            property bool fadeUrl: false
             source: model.thumbnail
             height: UiConstants.PagedGridSizeTable[1]
             fillMode: Image.Pad
@@ -63,30 +62,14 @@ Item {
                 }
             }
 
-            Text {
+            PageThumbUrl {
                 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"
+                url: model.url
+                urlFadeImage: "qrc:///mobile/grid/overlayer_tabs_url"
                 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
                 }
             }
         }
diff --git a/src/mobile/qml/TopSitesPanel.qml b/src/mobile/qml/TopSitesPanel.qml
index 2d12928..b75febe 100644
--- a/src/mobile/qml/TopSitesPanel.qml
+++ b/src/mobile/qml/TopSitesPanel.qml
@@ -39,7 +39,6 @@ Item {
         id: pagedItemDelegate
         Image {
             property string url: model.url
-            property bool fadeUrl: false
             source: model.thumbnail
             height: UiConstants.PagedGridSizeTable[1]
             fillMode: Image.Pad
@@ -65,32 +64,17 @@ Item {
                 }
             }
 
-            Text {
+            PageThumbUrl {
                 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"
+                url: model.url
+                urlFadeImage: "qrc:///mobile/grid/overlayer_mysites_url"
                 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_mysites_url"
-                visible: fadeUrl
-                anchors {
-                    bottom: parent.bottom
-                    right: parent.right
                 }
             }
+
             Image {
                 id: pinButton
                 source: "qrc:///mobile/grid/btn_pin_pressed"
diff --git a/src/mobile/snowshoe-mobile.qrc b/src/mobile/snowshoe-mobile.qrc
index 914dd95..9d18697 100644
--- a/src/mobile/snowshoe-mobile.qrc
+++ b/src/mobile/snowshoe-mobile.qrc
@@ -15,6 +15,7 @@
         <file>qml/PanelToggle.qml</file>
         <file>qml/PagedGrid.qml</file>
         <file>qml/PageFillGrid.qml</file>
+        <file>qml/PageThumbUrl.qml</file>
         <file>qml/UrlInputPanel.qml</file>
         <file>qml/UrlSuggestions.qml</file>
         <file>qml/SuggestionItem.qml</file>