TabViewStyle: add support for left and right corner items

Empty corner items may be used as padding, so TabViewStyle::left/rightCorner
effectively replaces TabViewStyle::left/rightPadding.

Change-Id: I01f3a1552c3395352e8953456d3956f4f8c29aed
Reviewed-by: Jens Bache-Wiig <jens.bache-wiig@digia.com>

examples/quick/controls/gallery/content/Styles.qml

@@ -240,7 +240,6 @@ Item {
 
     property Component tabViewStyle: TabViewStyle {
         tabOverlap: 16
-        tabsLeftPadding: 12
         frameOverlap: 4
         tabsMovable: true
 
@@ -269,6 +268,7 @@ Item {
                 anchors.centerIn: parent
             }
         }
+        leftCorner: Item { implicitWidth: 12 }
     }
 }
 

src/private/TabBar.qml

@@ -48,8 +48,8 @@ import QtQuick.Controls 1.0
 */
 FocusScope {
     id: tabbar
-    height: tabrow.height
-    width: tabrow.width
+    height: Math.max(tabrow.height, Math.max(leftCorner.height, rightCorner.height))
+    width: tabView.width
 
     activeFocusOnTab: true
 
@@ -77,6 +77,8 @@ FocusScope {
 
     property int elide: Text.ElideRight
 
+    property real availableWidth: tabbar.width - leftCorner.width - rightCorner.width
+
     function tab(index) {
         for (var i = 0; i < tabrow.children.length; ++i) {
             if (tabrow.children[i].tabindex == index) {
@@ -109,7 +111,7 @@ FocusScope {
         interactive: false
         focus: true
 
-        width: contentItem ? contentItem.width : 0
+        width: Math.min(availableWidth, count ? contentWidth : availableWidth)
         height: currentItem ? currentItem.height : 0
 
         displaced: Transition {
@@ -125,7 +127,7 @@ FocusScope {
                 name: "left"
                 when: tabsAlignment === Qt.AlignLeft
                 AnchorChanges { target:tabrow ; anchors.left: parent.left }
-                PropertyChanges { target:tabrow ; anchors.leftMargin: styleItem ? styleItem.tabsLeftPadding : 0 }
+                PropertyChanges { target:tabrow ; anchors.leftMargin: leftCorner.width }
             },
             State {
                 name: "center"
@@ -136,7 +138,7 @@ FocusScope {
                 name: "right"
                 when: tabsAlignment === Qt.AlignRight
                 AnchorChanges { target:tabrow ; anchors.right: parent.right }
-                PropertyChanges { target:tabrow ; anchors.rightMargin: styleItem ? styleItem.tabsRightPadding : 0 }
+                PropertyChanges { target:tabrow ; anchors.rightMargin: rightCorner.width }
             }
         ]
 
@@ -161,7 +163,7 @@ FocusScope {
             property bool previousSelected: tabView.currentIndex === index - 1
 
             z: selected ? 1 : -index
-            implicitWidth: Math.min(tabloader.implicitWidth, tabbar.width/tabrow.count) + 1
+            implicitWidth: Math.min(tabloader.implicitWidth, availableWidth/tabrow.count) + 1
             implicitHeight: tabloader.implicitHeight
 
             onPressed: {
@@ -238,6 +240,24 @@ FocusScope {
         }
     }
 
+    Loader {
+        id: leftCorner
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        sourceComponent: styleItem ? styleItem.leftCorner : undefined
+        width: item ? item.implicitWidth : 0
+        height: item ? item.implicitHeight : 0
+    }
+
+    Loader {
+        id: rightCorner
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        sourceComponent: styleItem ? styleItem.rightCorner : undefined
+        width: item ? item.implicitWidth : 0
+        height: item ? item.implicitHeight : 0
+    }
+
     DropArea {
         anchors.fill: tabrow
         keys: "application/x-tabbartab"

src/styles/Base/TabViewStyle.qml

@@ -97,12 +97,6 @@ Style {
     */
     property int tabsAlignment: Qt.AlignLeft
 
-    /*! This property holds the left padding of the tab bar.  */
-    property int tabsLeftPadding: 0
-
-    /*! This property holds the right padding of the tab bar.  */
-    property int tabsRightPadding: 0
-
     /*! This property holds the amount of overlap there are between
       individual tab buttons. */
     property int tabOverlap: 1
@@ -179,4 +173,10 @@ Style {
             color: __syspal.text
         }
     }
+
+    /*! This defines the left corner. */
+    property Component leftCorner: null
+
+    /*! This defines the right corner. */
+    property Component rightCorner: null
 }

src/styles/Desktop/TabViewStyle.qml

@@ -45,8 +45,6 @@ Style {
     id: root
 
     property bool tabsMovable: false
-    property int tabsLeftPadding: 0
-    property int tabsRightPadding: 0
     property int tabsAlignment: __barstyle.styleHint("tabbaralignment") === "center" ? Qt.AlignHCenter : Qt.AlignLeft;
     property int tabOverlap: __barstyle.pixelMetric("taboverlap");
     property int frameOverlap: __barstyle.pixelMetric("tabbaseoverlap");
@@ -98,4 +96,7 @@ Style {
             hasFocus: tabbarItem.activeFocus && selected
         }
     }
+
+    property Component leftCorner: null
+    property Component rightCorner: null
 }