Added flickable TabBar with corner items.

Change-Id: Iea558f3ed5d7fbc297d5f5c616469ba6d77de4e5
Reviewed-by: Tomasz Olszak <olszak.tomasz@gmail.com>

diff --git a/src/styles/DefaultSettings.js b/src/styles/DefaultSettings.js
index b0563ca..c7d9c4b 100644 (file)
--- a/src/styles/DefaultSettings.js
+++ b/src/styles/DefaultSettings.js
@@ -893,6 +893,13 @@ var tabBar = {
     color: colors.W0813,
     source: images.img_00_category_panel_bg,
     effectSource: images.img_00_category_panel_bg_ef,
+
+    arrow: {
+        color: colors.F031L3,
+        sourceLeft: images.img_00_arrow_left,
+        sourceRight: images.img_00_arrow_right,
+        margin:8
+    },
     tab: {
         color: {
             normal:colors.W0813,
@@ -908,12 +915,6 @@ var tabBar = {
             },
             margin:10
         },
-        arrow: {
-            color: colors.F031L3,
-            sourceLeft: images.img_00_arrow_left,
-            sourceRight: images.img_00_arrow_right,
-            margin:8
-        },
         source: {
             normal: images.img_00_category_button,
             pressed: images.img_00_category_button_focus,
@@ -929,6 +930,7 @@ var tabBar = {
         sideMargin:54
     },
     height: 90
+
 }
 
 var detailButton = {

diff --git a/src/styles/TabViewStyle.qml b/src/styles/TabViewStyle.qml
index 0a653c6..ee8642e 100644 (file)
--- a/src/styles/TabViewStyle.qml
+++ b/src/styles/TabViewStyle.qml
@@ -1,50 +1,102 @@
-import QtQuick 2.0
+/*
+ * Copyright (C) 2013 Tomasz Olszak <olszak.tomasz@gmail.com>
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Library General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library 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
+ * Library General Public License for more details.
+ *
+ * You should have received a copy of the GNU Library General Public License
+ * along with this library; see the file COPYING.LIB.  If not, write to
+ * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA 02110-1301, USA.
+ */
+
+import QtQuick 2.1
 import QtQuick.Controls 1.0
 import QtQuick.Controls.Styles 1.0
 import "DefaultSettings.js" as Theme
 TabViewStyle {
     id:root
     tabsAlignment: Qt.AlignLeft
-    tabsLeftPadding: 0
-    tabsRightPadding: 0
     tabOverlap: 0
     frameOverlap: 0
 
     frame: Panel {
-        anchors.fill:parent
+        anchors.fill: parent
+    }
+
+    leftCorner: Item {
+        implicitWidth: 40
+        implicitHeight: Theme.tabBar.height
+        visible:leftVisible
+        TizenBorderImage {
+            anchors.centerIn: parent
+            source: Theme.tabBar.arrow.sourceLeft
+            backgroundColor: Theme.tabBar.arrow.color
+        }
+    }
+    rightCorner: Item {
+        implicitWidth: 40
+        implicitHeight: Theme.tabBar.height
+        visible:rightVisible
+        TizenBorderImage {
+            anchors.centerIn: parent
+            source: Theme.tabBar.arrow.sourceRight
+            backgroundColor: Theme.tabBar.arrow.color
+        }
+    }
+
+    tabBar: TizenBorderImage {
+        id: background
+        source: Theme.tabBar.source
+        backgroundColor: Theme.tabBar.color
+        effectSource: Theme.tabBar.effectSource
+    }
+    property bool leftVisible: false
+    property bool rightVisible: false
+    property Item listView : null
+
+    onListViewChanged: {
+        listView.interactive = true
+        listView.clip = true
+        leftVisible = Qt.binding(function() {return !listView.atXBeginning })
+        rightVisible = Qt.binding(function() {return !listView.atXEnd })
     }
 
     tab: Item {
+        id:tab
         scale: control.tabPosition === Qt.TopEdge ? 1 : -1
 
         implicitWidth: Math.min(Math.max(textitem.contentWidth, Theme.tabBar.tab.minWidth)+2*Theme.tabBar.tab.margin,Theme.tabBar.tab.maxWidth)
         implicitHeight: Theme.tabBar.height
-
-        TizenBorderImage {
-            id: background
-            anchors.fill: parent
-            source: Theme.tabBar.source
-            backgroundColor: Theme.tabBar.color
-            //effectSource: Theme.tabBar.effectSource
-            //foregroundColor: (tab.selected) ? Theme.tabBar.tab.color.selected: Theme.tabBar.tab.color.normal
+        property bool pressed: parent.parent.pressed
+        Component.onCompleted: {
+            listView = parent.parent.ListView.view
         }
         TizenBorderImage {
-            anchors.verticalCenter: background.verticalCenter
+            id: highlight
+            anchors.verticalCenter: parent.verticalCenter
 
             height: Theme.tabBar.tab.height
-            anchors.left: background.left
-            anchors.right: background.right
+            anchors.left: parent.left
+            anchors.right: parent.right
             anchors.leftMargin: Theme.tabBar.tab.margin
             anchors.rightMargin: Theme.tabBar.tab.margin
-            source: Theme.tabBar.tab.source.normal
-            backgroundColor: (tab.selected) ? Theme.tabBar.tab.color.selected: Theme.tabBar.tab.color.normal
+            source: pressed ? Theme.tabBar.tab.source.pressed : Theme.tabBar.tab.source.normal
+            backgroundColor: (styleData.selected || pressed) ? Theme.tabBar.tab.color.selected: Theme.tabBar.tab.color.normal
             Text {
                 id: textitem
                 anchors.fill: parent
-                text: tab.title
+                text: styleData.title
                 renderType: Text.NativeRendering
                 scale: control.tabPosition === Qt.TopEdge ? 1 : -1
-                color: tab.selected ? Theme.tabBar.tab.text.color.selected : Theme.tabBar.tab.text.color.normal
+                color: styleData.selected ? Theme.tabBar.tab.text.color.selected : Theme.tabBar.tab.text.color.normal
                 font.pixelSize: Theme.tabBar.tab.font.pixelSize
                 verticalAlignment: Text.AlignVCenter
                 horizontalAlignment: Text.AlignHCenter