From 1d2fbf8719d67ea6f872ddd0927795b263414b3d Mon Sep 17 00:00:00 2001
From: Jens Bache-Wiig <jens.bache-wiig@digia.com>
Date: Sun, 13 Jan 2013 15:57:10 +0100
Subject: [PATCH] Make TabBar private

Just like ScrollBar, we do not need to expose the tabbar
directly. This also merges the styling attributes and
improves the styling API.

Change-Id: I3ea10fa943e10661fbeca7fd5aae96fde83c6b14
Reviewed-by: Jens Bache-Wiig <jens.bache-wiig@digia.com>
---
 examples/Gallery.qml                   |   1 -
 examples/content/Styles.qml            |  46 ++++++++++++--
 examples/images/tab.png                | Bin 0 -> 9877 bytes
 examples/images/tab_selected.png       | Bin 0 -> 10184 bytes
 src/qtdesktop/TabFrame.qml             |  23 +++++--
 src/qtdesktop/{ => private}/TabBar.qml |  74 +++++++++++-----------
 src/qtdesktop/qmldir                   |   1 -
 src/qtdesktop/qtdesktop.pro            |   2 +-
 src/styles/Desktop/TabBarStyle.qml     |  81 -------------------------
 src/styles/Desktop/TabFrameStyle.qml   |  72 ++++++++++++++++------
 src/styles/TabBarStyle.qml             |  76 -----------------------
 src/styles/TabFrameStyle.qml           |  64 ++++++++++++++++---
 src/styles/styles.pro                  |   2 -
 13 files changed, 206 insertions(+), 236 deletions(-)
 create mode 100644 examples/images/tab.png
 create mode 100644 examples/images/tab_selected.png
 rename src/qtdesktop/{ => private}/TabBar.qml (73%)
 delete mode 100644 src/styles/Desktop/TabBarStyle.qml
 delete mode 100644 src/styles/TabBarStyle.qml

diff --git a/examples/Gallery.qml b/examples/Gallery.qml
index 7d8b67bd4..b332e280d 100644
--- a/examples/Gallery.qml
+++ b/examples/Gallery.qml
@@ -208,7 +208,6 @@ ApplicationWindow {
             Controls { id: controlPage }
         }
         Tab {
-            id:mytab
             title: "Itemviews"
             ModelView { }
         }
diff --git a/examples/content/Styles.qml b/examples/content/Styles.qml
index d322bafb4..3f3ea1fec 100644
--- a/examples/content/Styles.qml
+++ b/examples/content/Styles.qml
@@ -43,6 +43,7 @@ import QtDesktop 1.0
 import QtDesktop.Styles 1.0
 
 Item {
+    id: root
     width: 300
     height: 200
 
@@ -138,11 +139,13 @@ Item {
 
         Row {
             TabFrame {
-                width: 300
-                height: 60
-                Tab { title: "One" }
-                Tab { title: "Two" }
-                frame: false
+                width: 400
+                height: 30
+                Tab { title: "One" ; Item {}}
+                Tab { title: "Two" ; Item {}}
+                Tab { title: "Three" ; Item {}}
+                Tab { title: "Four" ; Item {}}
+                style: tabFrameStyle
             }
         }
     }
@@ -216,5 +219,38 @@ Item {
             radius: height/2
         }
     }
+    property Component tabFrameStyle: TabFrameStyle {
+        tabOverlap: 16
+        leftMargin: 12
+
+        frame: Item {
+            Rectangle {
+                gradient: Gradient{
+                    GradientStop { color: "#e5e5e5" ; position: 0 }
+                    GradientStop { color: "#e0e0e0" ; position: 1 }
+                }
+                anchors.fill: parent
+                anchors.topMargin: -4
+                border.color: "#898989"
+                 Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
+            }
+        }
+        tab: Item {
+            implicitWidth: image.sourceSize.width
+            implicitHeight: image.sourceSize.height
+            BorderImage {
+                id: image
+                anchors.fill: parent
+                source: tab.selected ? "../images/tab_selected.png" : "../images/tab.png"
+                border.left: 50
+                smooth: false
+                border.right: 50
+            }
+            Text {
+                text: tab.title
+                anchors.centerIn: parent
+            }
+        }
+    }
 }
 
diff --git a/examples/images/tab.png b/examples/images/tab.png
new file mode 100644
index 0000000000000000000000000000000000000000..74fefab78a719e4883756d2bcc1b968835dd4fa0
GIT binary patch
literal 9877
zcmb_>WmH_-vUMW?f(CbJ+%>`7-QC@#aSQJ54nYD5?(Qx@0}1Zh5ZoO;a?X|W&VAo|
ze_oHVyZ4?ot7@%TwQ7v+j!=}BK!V4E2LJ#_Qj(&|ub)P*7Xcj1>$_v?R678GLuVx-
zq9`RI0#tMYnOoVK0RWnBE3_;$F=XnF7urV|jlOY#vy-;7$*IH)wVcq>fPs;p{h@_K
zQ6nHB(V#Kjq9q#w#NzWvVFX3Rl!OKZ+o2>Txz;XL9!@4M#>U!aKpGkvS1uYikln5^
zXsD=>hR{HI-pE};bL#coP8q-hq#yud-k($PvmzN8;^AR=&x@yzA7b5xjjWr@+>6x1
z8bZ4F6KM%R(9NMH4n)p|I5-CoY*Zq%R08BRT}B+nMb7sY8IB1DAqAfeFc6$#+b{L<
z`)%~t#U=%zj%C0ABnlNRApr4MhAo1KY=Bu21!#Z>@(mJvSlQcd%``m8vp4>u_`Acw
zAxA5{xXh`icWF8Pen#*EV9+NF>F%}Ls?Kh<jnJ4NQZiv0*harcKmK0f0wX^=1Mkx$
z9NbOIH(d*cT?5KAl(Eda{*LB(xgl2|PczZv{63JUg<^6DdbF0|goj~$%LV9>k-L8Z
zFvwf&&0tzJgGGFe9!R!qQN$4ajTtLn9IvNy%^D#e3wv+-KFj3jz`_>N!~=t5+43Xd
z^C=XW3Bk+o)+S_(+w%sj3VqY29LmKH>JK<}OF_dI2y9E%8gQv|VxkLn3oSFViXM9t
zYd%8l*F_ojj*Z)Nz6ncDE42*FwBNrGr1r6s;TBlR>ku@@NfNyPRS<Cc8c8rAt#<vk
z?@{xYOz<kBTt18O*xm_24?g>DOz7}0Cl=i)M>lyRJV0x~$wIvO?oWIQv0+FA2e2`O
zj`kCHW9Z3AUl7;<#OSnwMD&yX4*E{Er?DroXLb2QfVFuSL<9%f$^0xc*Y&H<N#Y$W
zf3NnF;CAk;qAs;wGW!Ug@2|clG-;?WcSW|A`K}u%&vrHdU5)D|`@Xf=p>Djnm(%t@
zG%LT;6K;OLxm!?{Y>&-66oelRd;|Oiyp7+lmmen4ZwGNqVp#?xNfm%u@$LzH!w{xa
zwU}@~5b08U&~PQg<5HzSg`(lNRE<Vng16;{O!onMM+O^yiw`JFVlU&j6#@E@`k0*E
z4ZT8ex>%R)2#ibWuuo~JmgyT%O*n|o70<Clpf*M0YIilIP-?>Y$?7;ITWUsNlyU%{
zz5jHONglk+OT?z%wK&!-=p&DL8xzSo(sEoib=N$#2R%eV2P&+k5JZ3yB+RMpJ{6fE
zs(eZks-m)@DvXZv2^Oq>74niZZ9n^CT(mNr|Dq$Hn*C+C*9pQ>Gf3cW%+GXl2jD;i
zk@qbCPcCXf9ad3?=>re|b6d6!?JbBS*-fMbX)TDq2Ze6<);0j$0XF9p2N~L^df=f)
z$N_^q$i)FZ`^{Y*baIf)I%_k$wh+}GgnPHo={sJ?$?gy7P{iG&x5(-waJ|Ch;kcW@
zw<JoEc*=nvfO^BwwV?z+_hEc^|K5DdJ)jGsbeO!zog$4Yl3qZi2;X<W2S~mU^E}Tz
zg!({1(r`E|XeMDqlDO}JIKc9E^5J~pfPQ{af=y0R^n@^Kk)I^m@A$$W!X?73`eFN7
z(SZB$wvs}H^vY0H!S!Ot!uMoW!+paaOc`qtwc>2UhBk4W@LK#ILwfVll_06LI1_iN
zEif<}P+W0R0!AeCgd6hg^9L2*7mNLb$qe2Vk|}8Tj%CT=0`L;x#{CpkDaug*>RY=Y
zxaWZhGU^LA`MEK59Q$^#--MM}EFDIc!yNj3l-8heO}3_0Ir1!)OpmxxQVqDqbv|oe
z>5$->Di(PtPNg?v(`}>IF``*l7wH(r9^(e9Dbk`pYO~?A(Zk>o!W-+Ew3AREI=8P1
zEgfzXnlKQZB;6r7UZR+4nUa^v`%6Iq`sW{obwvoDd4$s><|OA7I7DuuBq^m)W5S90
zEsZH_BIo72r5~k96Z$3Z3-t=Al_^Uye@b{s-Ahf%GD(1hPGoWg4FuPO1*BghASQt$
zhTZGm-VMc%e(z@<tL_fBz%cn>T*yphPH)&gaU1NI5s@L4@GX@lnkJ|u)XIOK5LX6^
zEGypU+t9b2ZT@rm_la8R3*i|f-qClY7k0Z`Scp-aQEz0JWw=MpQb|(9)LF~m%Mfhn
zZ6Iv04?f^0%0-U{G9)uZ9nmhCG-A5xyFs}LT&rGtT`OG^6D$+l6ZjHX5g-x7ajJ8^
z;gsVP;jH7*;WBW@Z!T;;Y`J#EbY9ujUN_&E-TmrR<Y=&yvn_NgdB%C#f02BFcus$D
zewKMAewqV5+R|G$+4=!S*yZVS4+7=nW*DRigufuZ$UWacmP5io=0kcyHbG;(@q`|K
zQ}9OSO&GLBNPkFn2wDhUus$4mFkA3b$RykiJX7Rp)O<JrMhRvH#z2&HI80;?dI#OT
zh^+3I8ogM#+Tkb8u;vhtY>$dt=eLQ$IsN<*tPze<(S@O=;id`OA~eCtrK)+V0Y9rh
z2y4r6OSVdSiNY`x(4aG_P+o|pQriIW$#m#=$c88_7}BWcXm6zSMSat}8z1%Vklv_;
zD27DAPhxzFOpT0)Jc=|(E=(?#ej~j#LT;wA1HHq(LxE|9DUf2E@>b1U4Sxn>Mt{bY
z&6O=vyJNAvHN3USEB_uH2@8oQ1~JB0uKsJjd7ydGE)xS=1$9N4c5Z`NgGjwi{o2vH
zwT-5&%~&l$62eINl8O3C|H`K0H!D_rLVS_>8LM<YMm`2l(oan=i7-7dt}wZXn21)P
z<Dml4_0h<<uJ~jz<Iz8&!(@jkCn)bIndCxbp=533u*X%$H^*DYr*_qM7j_lsJs66y
zX0W1Cf2D@egS1d92rAAi^tEKPev~iSy<<;h=VG69k32?PTd+p3Ww3R&HJFcBI;uOU
z9-3cTz@G1NRCM9obC^q5m>R7aJZnqJS4sWx-r_CT60DC6gN>4Aokm<aSXrc3w6eW|
z+_K^hc0zFiErqP?)RsBTo!cj^Sh!Dm7JHF@<Xt7}q;i||r%JOZwn)Pc!X7C5hJSSQ
zOK+<~yyi=?QmPNVH@pv4iTF?FpD3O8ofh8UCznV0hmNbcGl8QQMnNhdl_9?(6ElYc
z$uKpwfF;d5Z!`I=M7W)#+OT=Cjim?<;~3AO7bh1l`Qxm9XGhIP3DQEcM6$0pR!2N-
zpagTVvglya8_`Cwnr^9M!+KE{<xAOUds(5e$tT8#EaMF0J`-3JNkU1!Q}&4um83+N
z3Na^q)E=jMJsBb}VbUlfVLr$=lyFo83h6w?ZrjsJy;Jc8C}@~y3RJ#4yI$o_oF`{w
zLl#M6iPlN`Nmkz!l<QTb<@4mBKjBEL$@As5ChTUpG3k-;ariI<WjdY|ZhmV|%F1}o
z5Ye*M8Yp5e>Q&&Im>unO$=r8Y-d`Zd%1(U`X)!(F&2!-D2GpQv+9uf0y=>X%J!o&d
zAO$OYG8jb}^HVj{{H{2xlCFJQFx+HWui4ey8QetPVY(yyJtRW8ZaS5<rgqs$)>HN_
zD~b{OMBP$VRl`Z`t45_ph=!bjQ?pB%c1LS#Xc1)@mJ+@mj{#We=Ct-~r_pQSej27R
z^iupg&dTj`<W0(uMn&Z{yVZvo1N08{`LX5fS;z(gOD$U@+fVk+Ap914&yFU&wvHB&
z%7Rjr>bktB2D$^7jlnbgERHREMt2Dprc3C{v1_j@{sZR&{4O&;o4v-Fqi3G4?)S%d
z%N+|<Ki0VN*c_g620LaStZ#H+)L^rSi}@{yl<}=`)rsvt7T;C-m<|ocD0NKbux!=v
zY+-HP5FdGeIG?{e>qn2H`hnhwev%W)ua_B}q3h$e&2{g&h%kuV!sMx+Dkmk+CR--w
zK8`bq*y-ebWt+<Vu;IFW(9p64k_0)eop)9E7F||4uev;MJgl66`9-}o^(3E%FKbSd
z`ipFGuLMvSTNx%8rc&9vOucs=wXfuMbWUnl&PPv-)-?PIpSB-8_tOTe+UP3jKpHny
zMsw%06mv@)<?K12P&<2ZMa$$PUBFub)aPe_cS+!l*fD@v0NP*hWp33n3!<p)-Ppne
zj^+kI4+4h2dpvD2JOhyTU6LeiyRW|J$6mTMg+u5{;xz>i$(!ukPdWX06U|{X5xPUX
zBei4V=GZ&mw||0JH`uq8*3G~oryXEo>^-z{)Dd)fbS`>nbOf}UM28fY6sHuolm&(Z
zDr`zWK@v3<gA(}`1v6<^wNH8`VY~JfL5oFh82dkeHSS;iLcy2C^<~w5Pm*z-L6eEE
zIj;kwIiO>)pn7Oq*8$?N>DnCLCO<9*Z|>q9rGi&G4(eb}h-4;ls+>;3`29<_54O_4
z0$7sRrl{GdtVDyDMD<N3#2Hvvo=n=bl+G`jhee$4COs6l<425=pxelDB%siO;-+FH
z$lp*sd}+?DmQ|D6Qjqx4HIBonmEcKkGf5L<Tk>Q32OU?P#c^&&s*c04rvAL=oOc1_
zo$xWK_f*v;3WW;xpbYG&eVV(TZB=oxY$bfhwq}JAnPODglP-s2OI2rQejdvm{86b!
z(m30Zc?s5py30XYW68nIQW-ZIw_fY^h7yl^T~k{#*rCcI_nBd8sc>o3-TWB&W(~)(
zUBj`<ff?Krk^j`^i*h94BK~Etd9Y?{G;WpG_tDhw^TmG3w^9p=$;pmkPfsUWpZk8<
z^RnoL!?~he<uw8?{5wX=ob#M>5<?O!B7=e`VVM?#FP$CF&$r-TzgCfI#^pGlHGy!4
zf{eGwRzg&Hb8yb0_{!*9;pY-R@<ArbHEoWW9uScDgd7QB<Z@M$>)$;5Y2uc9c_+>@
zkg9(;J2=5RojKO^(4Fh78g(8#et|3rOc2H}f<;AFGGlq`sQ(s5DiK2-FEPM$%E`ks
z5weW5DKWh^GqU6tV}s$9XpD0vo3=&+zWdJu-PwxSvgs=JVwQ52()X1dEyjzcv&O6T
zQ+A$9*4<vi=BD7_qvREvhZ|&>*skm;M%zj!d-dahw%C)-^{EDM1~`&~Lu_d%EAx11
zn**~O#}W+#e;MPPLY9r!9yH0%ovC9gu4?5XB0Kc_u|@%TY|tn2#TCvGCrgmK*Cjby
zl7G-6J2_ZhTj4qN{J1~rXMTOw{uOQu75aOqIs%3L-YtJV*p!Q%vE_w`Wmxe2Irjv|
z4hPmx>{)C*8hgh5_U|f-2D3`~E-YV2Yp2UbcBf;lGw?dKod_%Kx6bG8??U$nBj|!O
zKpd{RWj2iVTr*zf4A)+g4>`zf@&$|y_=y~zt+*fK`PM!PT#hf}b@9PXsvJGZL8YC{
zELRbf`#LyVI^B-Kxg}f3Ixe3kY?*XXv7l4sV9B!cw_SMe4vb*T)n7;7lqD~O&MB<D
zTea>$_*CWn;w5xzvR+gc6;6@H#I~k5+PMaL!FWk&scmok_%ulQ;P%LJN~HI0ulFH?
z_Y}@JOgE2o4?R1|AfWD$*MmblU{+k9kKFJ}^`zs12R<a!29X}OBUMDgrT;T$5LTbX
zAStEu*SKx;G14(T`bv74@_pM)+ot&v0_s>N&a^D>$hP{9Z%@)#SwGKcS|4caMJ7)^
zp0=OqQua1GJc&ANFL++dk?stHhD}~U;U}q=?3OGv@?jKa_-r_4xQKd>rkt9c?np&l
zQD3n{2}wCg=^;<Q47IYPxTSoil(4H$GA!?XX;u}ufT`kTC2#1oFd?ia`>gd_^}bl0
zhqDfXluY4HvRaXAr`(~uyN>4)Qk&3&aF~Mx6qS6D82EuPO*d&JaK+B8<QVG|=vjWG
zb?Uv(w!5ORe{J<;_Cf!0^h^P99)FK;8^;#!Ga)T8B^G0K8eO0dF<lH-BEbN`I96Xn
zE|dDDzihT~`?=6WkWAP;N*ek1*mS}jUhdp^NBRp+3MmTQtVjBtUlEt8xgR=QaxPP%
zi>P>55$di#u}+vzKD&4Ui++to)RD9>f}<}~Cr81f7{ge!*!x&IX&(CFwBxj8A>h=`
zNSze-(t9Q(HGz_hO1)y8vLc&x8`Vx@<ViY~IeB)ChGol7mJiFZ2h4l)C)zDm3wqOa
zQ`jCh_wt$op6d%wSt#Pf($UxarM}WHfzK)5+m5Svb<SQ6qHS&Dx{Dzki1bl)?;#vQ
zIg%D)0O1ml-SU9$SZMzwO2Kz7fO=LaAj?bF9Ev#*>V%;~kbW4ZVVyl4vI~eM39*U<
zBSND{;R5Rw1q5!dcdQ7BVj3exh?bHDC14KEQKPB?N|CQHi43Inj1W=U+pLGsYCcxS
zaDK4os6>tHQ#n0?#_Hwoh2o}Z#c1UaeQ!+hRso)Z?=#0&koh|kYEx4qSqotn3g(KW
ztzo*cv#~6CsdDI9TXy?KcsGh`ePoGPjcgWO7hSVu?PU|*{C4V9VScgBw#U^+I!G|I
z8uU=e=U}a19Z|Q4@+hnb+{g}0g|zr2oYd&l&E#M4*U1p9X0?O0pzY}$v+Xd9O^lcn
zj}%`T0VONtag`_yl<(DZAEu|L)K~Mr78Kc(fGdbWisqb_(acjH_-toELXGuJ+-7{8
zNk3+Xj%%Mn3o2AfE>JXNnw)N~Rwjtj_*nGyS1b4te=4r=`(63x0Q=UT6^E+7bqJvf
zSV<|BPhmc|_s90XAr>WSjnDHjrDVBkR-SelN%>iRIh=&7HL^foq%kSG>$Zal9>QwH
zqSNh8kxwxwldN<qNi83k^(o1<%WmfOI#QPbEsb9ve6r)nY^%CvUvBj-`r37`zi)V_
zxY4&c_4%xRhz7lg>L4es^O3iYtBlv;cGgyZ<7roTsAwhEBDK6z)mKk9_0j&W4{UK;
z)r~o)*1$H{kamF0F=01JEP9)51nXV-4p~`{W)Be8gC-hGPNFi5Egd|P$8U)o5Vmy^
zEh+euG>7y|lF$^R7PTc@SyU{4aSE;;^Pb)dk1UQW8g~%hq@d=;LAV*J8MXZb{~G}r
zX7c1|2yS>iCZ+6jab5D3g!?_VJ$zhp97b07_o=LJS@p<e;tw)r(%ZDkwJ5cqwESw!
zsu5}p!c1NQ-lxa}+W7MXhvk6btDsKM)@XdiI7PUC!%Q9;)WYd9w~cUe$qMxb^y0dr
z-m07Ng~{86s*&}zm-Vut<zEl8bt~Hg9zXY*4HQV{jI`1|md5{TUktxTiqRfN(Drng
zO{_>N(8<%tU$bR4y<NnyBQ>_RYg}ueHlB@~Tpar94aVoOdhkKklaH_aBGY(K*!I2h
zbY+frmN%w@wSCB&v&6U4^?BR>LWsVnNI0XH^?F*ubUHi%cj`91Tr(Bw%~>yO72&J`
z4i6qgm7GS>Cl%j9eaWVA&Cz!6k%tc&6T=J9&ODRo7qAG<k$Q}$$(@W<W#OgMrQ&m!
zvq}f3NNO4cneXQCv;!AKt0rBNUG7#f_I>Acoar88FIOg^(vDS#PmyEzWr=5qAI^%;
zBMwwHx39pfOj9ap7PbaH-k+|;*N<jAM{iURP>D4Jay5+~l+WahT8_dNCWq)c%MK1Q
zmd?N-3X(w^pe`g?A<kR+VRZhh{a}rEsKHd9an9grf@B5x!xZLer%W%EE;VlHatFMO
z3^v;x-`@frsd^!}$@Q?5{O1K(NyoqEnll^C8`_#glF}u0u{6~Zn6nv^)yP#FY=&>u
z@1pH2Zu<`Yn9%7>8z!bUWGbd3ryHZ|C6B~<qG=@OXJVna6Mh|`&12z*)yu_?>Af}-
z$+gXqE!N@MtzJQc@w?b|_k`!%?5#qtKY^IRbc8ZRv&%Nix{kGvC($p`3uwzMD!T11
z@z+|oRJ)Hk;5qcP;k8k;tS!V`RL>`E+<nhVsT~DFUM1z`zeoZZ(n$*6kNGkA^{Xsq
zP>129J}IDJ41Od)<9<AswEBGFm{7<;<F11L13`Y!qQ#7E+i(JLCuiLG+YnYg_M7DI
z2F=>Liq9>ZqL^!6Y}k%n%hL?lbz9M93V$GK!z|V=9&vxuL+6;hY`%6}&TLm%K5<vr
zd~Sjz?As^HF%jOfAlk|;<TuNq_hmf)>>c@$+sE8$_TF`B`A{d;{r-agWJ`cRNAh0s
zp&nd!PujPc^d*t0(qO;K&D;6m+K20j=i%m@7)=1)kM)uF+Ic^%ugZqbmac~GMm<A=
zPn}L(prWK|pj@qzPg|m@to)%8Tz*sGxAJbWdL?|Rc;2JArj@31zuMFCVtV&h{gLb`
zC8bdv1%QgQu{D&Im1QunUU>ciaIlb-Rc4lzb#SUhan1!;$@hCYsTCXSwzvwBXi`*|
z+fAsr>8g5xU>zHn@s}t5{eQw+2T3hw0005~_XPpS%*Fu#pjWL_HC;62WVua1c8o@*
zAY(H|4?BlfHUPlu!Tow`XXauA^suwFcjorsBmINH{d)f!W+DatL2<F+Bh{2s1d4#1
z%z$i+ER3wA{O~{^kk`r7oLgB`{2%VGPkf}7E-nt-Oib?X?u_p589`1KOe|bnTujWY
zOsuR7uM7rfPkR?54+eW@vOk0TGmfa4vx$?HgNqf&9{4-1kuk{Cg^!f<ccOp2{#>Vv
zmHEFj**pJZTdx~r`fXuiVPt0dSL|0;-rp#<vY9i;*7bLIHG3-;eiq(8$bX0bo$XIA
z5s;mOlbN&gs~bPtKV1Hb{hhD*?=<`ztp9NMEBJQ@1t%-BS3!QS>tAd7EB1H3)_<4a
zui!r%c$t2S_!m+CsMv2c{)Yc=Vw-tb{eQ&%ZTU~Jf1})rRvu=ynxa;AX7+zb$Hl?R
z^xqo(vb{g-A|P9klZu0piP>*8{to?}{YM(Df2U#P{A-%O82+zCF*W&Dr#rYh+5XYz
zrY1~gwq~z8c5!}Hh2_7tps5MBv#YVSnTg9k>+ok!|4|KLBMYX#z`RWV$^Jhp=j)08
z*V6yX(eW^H_|Ia#vbp6zrdH;jqDC%e{H)9@?-`g`7+Bt`vNCfsvv9M%o{7J4{!*jg
z77-^iBNvd9DhOoD|3|s(em??PU#G~2KYjno_#f-^rv|U{h9Cab^PjVeAHG+8F7b8x
zQA&vlsan1{${dYV8Nv!3-ADwI4+HSnfKy-FB#H~-lOWK=xlX#nVGVozVb@UsB*B7#
z5NU7WzP3Z6{YZjH5)TxGeA_Pv#9O@PKX}lnI66A&II^b_P7rQ6D%DPVF|bjaX>3~g
z^qG2^{%GP8&p??*)pU_U?%;CIp$oT(6EsO~N)s}?zTrS~jKHO9bU2+u<|Rp)iS0ry
zh22sk!_i6`$0tt5&s_Ts_WL~eB$W^P?H)Cp-nS0gy1KG$?kAOHFKQRQUAg?;xAE#4
z8b6Y#6sGro6mfLC%hC@<z-Gi4iX&FIxVWIbo~_Wyin50-uXbQ3R6@rKa}5%#_*xN3
zDV$^ne4g(P>JcnDd-dGk=nLB)%Xp6;J=?<300*A<MCbc-C17P`#r07Ie@i7W#5FU<
zY$m&FAuDhT3DCJpAjWM~Ed(X~p$&S0nOC^9Q;o%#&6+m13&#%`boI^p{>iVaNTo=g
zEtG>OWCyiup|E_!eyvmQaK46&kjJgO9Y*7-k7b$b^SjXD``8le#cI5xx;S?TMHZ`f
zYV}BcG2B0oXr1xpqjKf0_NK`6KFjCuMqK>7UQvy*J-xp=sIRU4jEf*aawV;_&^Wv|
z5;khaBM4?^|2f}E0%P*{{;TX+4eWKvdb0_cNE4wc@#AHE3lU~ZMpyxf8Bcj{s8BT2
z(Ba~vEDIdJ`*<|2NG&NLmlJu1=LJkMQUel0?|2qR)N!xyVvDl{-aLLn;yQP+@O+e%
z#}_79epy{y=~#4H7q4}C#2eh6=)e%43=jIyJ2;7Gid>J2z%1=sdQye)w~%gFGvb}i
zq(X=3)by3#e2JV@9)o=Ixn0{<Tn=U#rUcna>?~1lsaxyYZL@Q{O)=YK2GrKSY9vCJ
zlqZ*?jf6B@CNtx-3`%!K(x77!9gMwAyzQ_&|5_W)AR>SiSxkT)CHK9wx__H%*eF=Q
z!`rdwAwWhSJ|K-(37TDBTU(mRpfg+bL7Br9^?0qz;BcXi>S(cn?h2L<Gi1733d@)G
z0(qP#ODthI+JzMZ_$4oI@AL){E)!Cf#f-}4g2kYvZdkEZr_yGSg#-oMKa#njqUea4
z=7IVk_~_T8pzBM66V)ZKSEm2-=y;_~oU=tvFBm+TYolgT)MIm}eF52=y)A4cjX#v2
zF){B&p{9x{{N`LZr7}Ruv3gPrQs&D*d<`EVvESeVk@b|xNt7|#OH%Kh^o!hm&kl>3
z{MmwLi<-6Ya%hKbE~zKer`fNJy|3YaJU>04b5NK8GJ+53kq>yO-NNJpOwH}x79Gj6
zumcmElnkUw1EnCOga=q#<m@Jd@yxGbp}5rMpgQ=>!XO30nleTk44pE^CyV>5WHOzg
zIWFclPp-VId|$lpZ_mh5(U<zgnjN>qd*pDNb~^Oe5NKJ^u6wHyFtW!{y@c9tp(W>Q
z$GK@sj5Pz6<Hov+4NKGa>IhU}l~BU+({+4Di19C2#BEK4fQ~ueg*eJ`YtRHx9BExT
zJb3$U$v$2`K+VM5pY@ne)5_{X$4=LFkT}BwDDlx09pS_S!dJ~qqX>0U4K)GynMsgL
zPZ{~3o@Ad{Po<iWRYz60GcpwV`w?`vEN6}b(BS0+&5PC}Vp3Ol++(219WCYiVb^^7
zpP)sGk{upc1CGGeCQ$CDz?`I=EX-fhWI2}ld7)Xji94&Qw_EaIC+~mC&IL!{eY720
zQ#`VIYm-wX!lFEvBLAfu=3O;S^+-2zn4z<8s1R~O=wnJQNdZE;tjNk|-}%Od*(8V8
zPTKsQFA@QI`_ab$x-7^|qnw{l?3_a{@N^|imi=znI<5NRLbnKb@|jY$X%y$PA)?y)
zZp~>evYQ&ok|AA2;6$e<c;XlA*E^?PU{<z!{<zE&78cg@OqoVRWlcj)@Xg6uQGrC<
z*Q+a6)GfW^ZFp5+60=`@yqbl`La`G1*M|k0RVCN{nijXlE!tQB&KLOo>a}X(wFsny
zJI2vj;R-&GO4iD~7t`x`yL@ea5|G_b546`#rHX86;WB`B6I^|>WB(xvr;g6}&}Xlm
zX-%S@mu<;OgA}EUcUG<6{e)BEjl`Un_mJHSvVgo(h6u%+<Kfxu+(!d6*Fr|6xkbFf
z!KBm8fv9>*cW-ap0oQSN@})sMY=O7M@!t+nAUl86gP_bl%XAL%6CacL`u9M8Y&9Q?
zWvo`;wk>7M+U%2uHYpD4!2&oon$Y89Vc+JZZ0$aEqp{z9=p(z_ZO>=1k-^Aay$8Db
z?rHL2|H$=wq`A45*^=_OIo8u|B)0AJz9S{A3_65avqHoL17$1CSu>=Lc@mi~yF<gr
z#CuTJp=DnP?AdRj#bKymd^S<VXVG+c$0h`jBBXiqvu5I$U3!B=?&`sMak<=1TZ0sx
zB{2-WDRdf<L9i%a^{%6EIjpBtQ4j*9ZDf_;q+MOL$PZ@fGO~tOU7rW}G0{yER9U>U
z2Wa6RiDWy)ZQzrjJT|&Z*Hwd9>#{@d>L0B7lGEiE(wk-n981qsBzyyS9o7X~z3*y!
zp%@qEN!xuM)D5&AhNc%|*_o8$%L%y%CCJIGP@b#~10sVxdB^<=@U9nZ_VCkdIS_@+
z%Xr=Jz=0IT4qNm?xtd#v0h+Z7Ps;}WrNRzTG^aY7;K2m1%E$V|=8>OE!=%{)ew~_}
z^?4kL4GnBN6tHHZy&IKBC#CUbS@|6?PAsaZRjcnzAivhd=iq)rE`Qv9&tUR((R0?~
zQ<TXj3p^RYvYlI(>|PPD8;%@uq(imftjb4Q#`z;yxv4GwHbj~7?u%})Od2ERQWHo)
z;Ki6&<_K@FBcMAasR#|!etghIDi7`0T%vEsd$^DwOM#C!@)`9#6()CXW)qUjmIPn{
zCL(mFGHh%{G(Jvb*E}}f9!6j_9y91}FhX5FwpiiKp0n-D?Ss0)D!woOz0AGu!wnh2
zREzJE*V*lviI3FHlAoW9!11#Z2ng6&q_ONs?`|fG%jb<7JWQAiZYa4-Vjhxw4hXEt
z);8Y$K`HR|6eNs7#H;veGKbGbW3Szs!FR3SARlsPXOGUor@*qLyGhKFW^4|_Pbaua
e>j<mz1uCDut`+ZUGxPU1Kq)bK(Mn;%!2bu>i&^9V

literal 0
HcmV?d00001

diff --git a/examples/images/tab_selected.png b/examples/images/tab_selected.png
new file mode 100644
index 0000000000000000000000000000000000000000..665400ccfd2da9264fa4cf0e653e2573a8f7daf7
GIT binary patch
literal 10184
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
b^E0#tYFFn$sSL*Nmu6{k1+j7wqk#VhN-ggt

literal 0
HcmV?d00001

diff --git a/src/qtdesktop/TabFrame.qml b/src/qtdesktop/TabFrame.qml
index 7c8e75706..675e5bfcf 100644
--- a/src/qtdesktop/TabFrame.qml
+++ b/src/qtdesktop/TabFrame.qml
@@ -40,26 +40,29 @@
 
 import QtQuick 2.0
 import QtDesktop 1.0
+import "private"
 import "Styles/Settings.js" as Settings
 
 /*!
     \qmltype TabFrame
     \inqmlmodule QtDesktop 1.0
-    \brief TabFrame is doing bla...bla...
+    \brief Represents a control that contains multiple items that share the same space on the screen.
+
 */
 
 Item {
     id: tabWidget
     width: 100
     height: 100
+
     property int current: 0
     property int count: stack.children.length
     property bool frame: true
     property bool tabsVisible: true
     property string position: "North"
     default property alias tabs : stack.children
-    property Item tabBar: tabbarItem
-    property Component delegate: Qt.createComponent(Settings.THEME_PATH + "/TabFrameStyle.qml")
+    property Component style: Qt.createComponent(Settings.THEME_PATH + "/TabFrameStyle.qml")
+    property var __styleItem: loader.item
 
     onCurrentChanged: __setOpacities()
     Component.onCompleted: __setOpacities()
@@ -93,10 +96,19 @@ Item {
 
     Loader {
         id: loader
+        sourceComponent: style
+        property var control: tabWidget
+    }
+
+    Loader {
+        id: frameLoader
+
         anchors.fill: parent
         anchors.topMargin: tabbarItem && tabsVisible && position == "North" ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0
         anchors.bottomMargin: tabbarItem && tabsVisible && position == "South" ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0
-        sourceComponent: frame ? delegate : null
+        sourceComponent: frame && loader.item ? loader.item.frame : null
+        property var control: tabWidget
+
         Item {
             id: stack
             anchors.fill: parent
@@ -107,12 +119,13 @@ Item {
             property string style
             property int baseOverlap
         }
-        onLoaded: item.z = -1
+        onLoaded: { item.z = -1 }
     }
 
     TabBar {
         id: tabbarItem
         tabFrame: tabWidget
+        style: loader.item
         anchors.top: parent.top
         anchors.left: tabWidget.left
         anchors.right: tabWidget.right
diff --git a/src/qtdesktop/TabBar.qml b/src/qtdesktop/private/TabBar.qml
similarity index 73%
rename from src/qtdesktop/TabBar.qml
rename to src/qtdesktop/private/TabBar.qml
index 0c92050b9..adde6c73a 100644
--- a/src/qtdesktop/TabBar.qml
+++ b/src/qtdesktop/private/TabBar.qml
@@ -40,18 +40,12 @@
 
 import QtQuick 2.0
 import QtDesktop 1.0
-import "Styles/Settings.js" as Settings
-
-/*!
-    \qmltype TabBar
-    \inqmlmodule QtDesktop 1.0
-    \brief TabBar is doing bla...bla...
-*/
 
 Item {
     id: tabbar
-    property int tabHeight: tabrow.height
-    property int tabWidth: tabrow.width
+    height: tabrow.height
+    width: tabrow.width
+
 
     Keys.onRightPressed: {
         if (tabFrame && tabFrame.current < tabFrame.count - 1)
@@ -62,20 +56,19 @@ Item {
             tabFrame.current = tabFrame.current - 1
     }
 
-    height: tabHeight
+    onTabFrameChanged: parent = tabFrame
+    visible: tabFrame ? tabFrame.tabsVisible : true
 
 
     property Item tabFrame
-    onTabFrameChanged: parent = tabFrame
-    visible: tabFrame ? tabFrame.tabsVisible : true
+    property var style
+    property var styleItem: tabFrame.__styleItem ? tabFrame.__styleItem : null
 
-    property int __overlap :  loader.item ? loader.item.__overlap : 0
+    property string tabBarAlignment: styleItem ? styleItem.tabBarAlignment : "center"
     property string position: tabFrame ? tabFrame.position : "North"
-    property string tabBarAlignment: loader.item ? loader.item.tabBarAlignment : "Center"
-    property int tabOverlap: loader.item ? loader.item.tabOverlap : 0
-    property int tabBaseOverlap: loader.item ? loader.item.tabBaseOverlap : 0
-    property int tabHSpace: loader.item ? loader.item.tabHSpace : 0
-    property int tabVSpace: loader.item ? loader.item.tabVSpace : 0
+
+    property int tabOverlap: styleItem ? styleItem.tabOverlap : 0
+    property int tabBaseOverlap: styleItem ? styleItem.tabBaseOverlap : 0
 
     function tab(index) {
         for (var i = 0; i < tabrow.children.length; ++i) {
@@ -86,33 +79,37 @@ Item {
         return null;
     }
 
-    property Component style: Qt.createComponent(Settings.THEME_PATH + "/TabBarStyle.qml")
-
-    Loader {
-        id: loader
-        sourceComponent: style
-        property alias control: tabbar
-    }
-
     Row {
         id: tabrow
         Accessible.role: Accessible.PageTabList
-        states:
+        spacing: -tabOverlap
+
+        states: [
+            State {
+                name: "center"
+                AnchorChanges { target:tabrow ; anchors.horizontalCenter: tabbar.horizontalCenter }
+            },
             State {
-            when: tabBarAlignment == "center"
-            name: "centered"
-            AnchorChanges {
-                target:tabrow
-                anchors.horizontalCenter: tabbar.horizontalCenter
+                name: "left"
+                when: tabBarAlignment == "left"
+                AnchorChanges { target:tabrow ; anchors.left: parent.left }
+                PropertyChanges { target:tabrow ; anchors.leftMargin: styleItem ? styleItem.leftMargin : 0 }
+            },
+            State {
+                name: "right"
+                when: tabBarAlignment == "right"
+                AnchorChanges { target:tabrow ; anchors.right: parent.right }
+                PropertyChanges { target:tabrow ; anchors.rightMargin: styleItem ? styleItem.rightMargin : 0 }
             }
-        }
+        ]
+
 
         Repeater {
             id: repeater
             focus: true
             model: tabFrame ? tabFrame.tabs.length : null
             delegate: Item {
-                id: tab
+                id: tabitem
                 focus: true
 
                 property int tabindex: index
@@ -120,20 +117,24 @@ Item {
                 property bool selected : tabFrame.current == index
                 property bool hover: mousearea.containsMouse
                 property bool first: index === 0
+                property string title: tabFrame.tabs[index].title
 
-                z: selected ? 1 : -1
+                z: selected ? 1 : -index
                 implicitWidth: Math.min(tabloader.implicitWidth, tabbar.width/tabs.length) + 1
                 implicitHeight: tabloader.implicitHeight
 
                 Loader {
                     id: tabloader
+
                     sourceComponent: loader.item ? loader.item.tab : null
                     anchors.fill: parent
 
-                    property alias control: tab
+                    property Item control: tabFrame
+                    property Item tab: tabitem
                     property int index: tabindex
                     property bool nextSelected: tabFrame.current === index + 1
                     property bool previousSelected: tabFrame.current === index - 1
+                    property string title: tab.title
                 }
 
                 MouseArea {
@@ -141,6 +142,7 @@ Item {
                     anchors.fill: parent
                     hoverEnabled: true
                     onPressed: tabFrame.current = index
+                    onPressAndHold: tabitem.parent = null
                 }
                 Accessible.role: Accessible.PageTab
                 Accessible.name: tabFrame.tabs[index].title
diff --git a/src/qtdesktop/qmldir b/src/qtdesktop/qmldir
index 19df0c826..dca36d6ab 100644
--- a/src/qtdesktop/qmldir
+++ b/src/qtdesktop/qmldir
@@ -26,7 +26,6 @@ SplitterRow 1.0 SplitterRow.qml
 SplitterColumn 1.0 SplitterColumn.qml
 StatusBar 1.0 StatusBar.qml
 Tab 1.0 Tab.qml
-TabBar 1.0 TabBar.qml
 TabFrame 1.0 TabFrame.qml
 TableView 1.0 TableView.qml
 TableColumn 1.0 TableColumn.qml
diff --git a/src/qtdesktop/qtdesktop.pro b/src/qtdesktop/qtdesktop.pro
index 8395ec1ec..3c85616d6 100644
--- a/src/qtdesktop/qtdesktop.pro
+++ b/src/qtdesktop/qtdesktop.pro
@@ -33,7 +33,6 @@ QML_FILES = \
     SplitterRow.qml \
     StatusBar.qml \
     Tab.qml \
-    TabBar.qml \
     TabFrame.qml \
     TableColumn.qml \
     TableView.qml \
@@ -44,6 +43,7 @@ QML_FILES = \
 
 # private qml files
 QML_FILES += \
+    private/TabBar.qml \
     private/BasicButton.qml \
     private/ButtonBehavior.qml \
     private/ButtonGroup.js \
diff --git a/src/styles/Desktop/TabBarStyle.qml b/src/styles/Desktop/TabBarStyle.qml
deleted file mode 100644
index 4dedbfc63..000000000
--- a/src/styles/Desktop/TabBarStyle.qml
+++ /dev/null
@@ -1,81 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the Qt Components project.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
-**     of its contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.0
-import QtDesktop 1.0
-
-Item {
-    property int __overlap : styleitem.pixelMetric("tabvshift");
-    property string position: tabFrame ? tabFrame.position : "North"
-    property string tabBarAlignment: styleitem.styleHint("tabbaralignment");
-    property int tabOverlap: styleitem.pixelMetric("taboverlap");
-    property int tabBaseOverlap: styleitem.pixelMetric("tabbaseoverlap");
-    property int tabHSpace: styleitem.pixelMetric("tabhspace");
-    property int tabVSpace: styleitem.pixelMetric("tabvspace");
-
-    StyleItem { id: styleitem }
-
-    property Component tab: StyleItem {
-        id: styleitem
-        elementType: "tab"
-        anchors.fill: parent
-
-        implicitWidth: Math.max(50, textitem.width) + styleitem.pixelMetric("tabhspace") + 2
-        implicitHeight: Math.max(styleitem.font.pixelSize + styleitem.pixelMetric("tabvspace") + 6, 0)
-
-        property string tabpos: tabFrame.count === 1 ? "only" : index === 0 ? "beginning" : index === tabFrame.count - 1 ? "end" : "middle"
-        property string selectedpos: nextSelected ? "next" : previousSelected ? "previous" : ""
-
-        hint: [tabFrame.position, tabpos, selectedpos]
-        anchors.leftMargin: (selected && style == "mac") ? -1 : 0
-
-        selected: control.selected
-        info: tabbar.position
-        text:  tabFrame.tabs[index].title
-        hover: control.hover
-        hasFocus: tabbar.focus && selected
-        anchors.margins: paintMargins
-
-        Text {
-            id: textitem
-            visible: false
-            text: styleitem.text
-        }
-    }
-}
diff --git a/src/styles/Desktop/TabFrameStyle.qml b/src/styles/Desktop/TabFrameStyle.qml
index e46fa6df9..e681d0cb2 100644
--- a/src/styles/Desktop/TabFrameStyle.qml
+++ b/src/styles/Desktop/TabFrameStyle.qml
@@ -40,14 +40,26 @@
 import QtQuick 2.0
 import QtDesktop 1.0
 
-Item {
+QtObject {
+    id: root
+
+    property int leftMargin: 0
+    property int rightMargin: 0
+
+    property string tabBarAlignment: __barstyle.styleHint("tabbaralignment");
+
+    property var __framestyle: StyleItem { elementType: "tabframe" ; visible: false }
+    property var __barstyle: StyleItem { elementType: "tabbar" ; visible: false }
+
     property rect contentRect
-    property int margins: frame ? stack.frameWidth : 0
-    property int __baseOverlap: frameitem.pixelMetric("tabbaseoverlap") // add paintmargins;
-    contentRect: Qt.rect(margins, margins, 8 + margins + (frameitem.style == "mac" ? 6 : 0), margins + (frameitem.style =="mac" ? 6 : 0))
+    property int margins: control.frame ? stack.frameWidth : 0
+    property int tabOverlap: __barstyle.pixelMetric("taboverlap");
+    property int tabBaseOverlap: __barstyle.pixelMetric("tabbaseoverlap");
+    property int tabHSpace: __barstyle.pixelMetric("tabhspace");
+    property int tabVSpace: __barstyle.pixelMetric("tabvspace");
 
-    StyleItem {
-        id: frameitem
+    property Component frame: StyleItem {
+        id: styleitem
         anchors.fill: parent
         anchors.topMargin: 1//stack.baseOverlap
         z: style == "oxygen" ? 1 : 0
@@ -55,22 +67,42 @@ Item {
         info: position
         value: tabbarItem && tabsVisible && tabbarItem.tab(current) ? tabbarItem.tab(current).x : 0
         minimum: tabbarItem && tabsVisible && tabbarItem.tab(current) ? tabbarItem.tab(current).width : 0
-        maximum: tabbarItem && tabsVisible ? tabbarItem.tabWidth : width
+        maximum: tabbarItem && tabsVisible ? tabbarItem.width : width
         Component.onCompleted: {
-            stack.frameWidth = pixelMetric("defaultframewidth")
-            stack.style = style
-            stack.baseOverlap = pixelMetric("tabbaseoverlap")// add paintmargins;
+            stack.frameWidth = styleitem.pixelMetric("defaultframewidth");
+            stack.style = style;
+            stack.baseOverlap = root.tabBaseOverlap;
         }
-        states: [
-            State {
-                name: "South"
-                when: position == "South" && tabbarItem!= undefined
-                PropertyChanges {
-                    target: frameitem
-                    anchors.topMargin: 0
-                    anchors.bottomMargin: 1//stack.baseOverlap
-                }
+    }
+
+    property Component tab: Item {
+        property string tabpos: control.count === 1 ? "only" : index === 0 ? "beginning" : index === control.count - 1 ? "end" : "middle"
+        property string selectedpos: nextSelected ? "next" : previousSelected ? "previous" : ""
+        implicitWidth: Math.max(50, textitem.width) + tabHSpace + 2
+        implicitHeight: Math.max(styleitem.font.pixelSize + tabVSpace + 6, 0)
+
+        StyleItem {
+            id: styleitem
+
+            elementType: "tab"
+
+            anchors.fill: parent
+            anchors.leftMargin: (selected && style == "mac") ? -1 : 0
+
+            hint: [control.position, tabpos, selectedpos]
+
+            selected: tab.selected
+            info: control.position
+            text:  title
+            hover: tab.hover
+            hasFocus: tab.focus && selected
+            anchors.margins: paintMargins
+
+            Text {
+                id: textitem
+                visible: false
+                text: styleitem.text
             }
-        ]
+        }
     }
 }
diff --git a/src/styles/TabBarStyle.qml b/src/styles/TabBarStyle.qml
deleted file mode 100644
index 644a2730b..000000000
--- a/src/styles/TabBarStyle.qml
+++ /dev/null
@@ -1,76 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the Qt Components project.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
-**     of its contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.0
-import QtDesktop 1.0
-
-/*!
-    \qmltype TabBarStyle
-    \inqmlmodule QtDesktop.Styles 1.0
-    \brief TabBarStyle is doing bla...bla...
-*/
-
-Item {
-    width: textitem.implicitWidth + 20
-    height: textitem.implicitHeight + 4
-
-    property Component background: Rectangle {
-        anchors.fill: parent
-        gradient: Gradient{
-            GradientStop{color: control.selected ? "lightgray" : "white" ; position: 0}
-            GradientStop{color: control.selected ? "lightgray" : "lightgray" ; position: 1}
-        }
-        border.color: "#aaa"
-
-    }
-
-    Loader {
-        id: backgorundLoader
-        sourceComponent: background
-        anchors.fill: parent
-    }
-
-    Text {
-        id: textitem
-        anchors.centerIn: parent
-        // Used for size hint
-        text: tabFrame.tabs[index].title
-        renderType: Text.NativeRendering
-    }
-}
diff --git a/src/styles/TabFrameStyle.qml b/src/styles/TabFrameStyle.qml
index 84d55f1a0..d20573657 100644
--- a/src/styles/TabFrameStyle.qml
+++ b/src/styles/TabFrameStyle.qml
@@ -45,13 +45,61 @@ import QtQuick 2.0
     \brief TabFrameStyle is doing bla...bla...
 */
 
-Item {
-    property rect contentRect
-
-    Rectangle {
-        anchors.fill: parent
-        anchors.topMargin: -10
-        color: "lightgray"
-        border.color: "gray"
+QtObject {
+
+    /*! This property holds the base alignment of the tab bar.
+      The default value is "left". Supporeted alignments are
+      "left", "center" or "right".
+    */
+    property string tabBarAlignment: "left"
+
+    /*! This property holds the left margin of the tab bar.
+      It will only affect tabs \l tabBarAligment set to "right".
+    */
+    property int leftMargin: 0
+
+    /*! This property holds the right margin of the tab bar.
+      It will only affect tabs \l tabBarAligment set to "right".
+    */
+    property int rightMargin: 0
+
+    /*! This property holds the amount of overlap there are between
+      individual tab buttons. The default value is 0
+    */
+    property int tabOverlap: 0
+
+    property int tabvshift : 0
+    property int tabBaseOverlap: 0
+
+    property Component frame: Item {
+        Rectangle {
+            anchors.fill: parent
+            anchors.topMargin: -10
+            color: "lightgray"
+            border.color: "gray"
+        }
     }
+
+    property Component tab: Item {
+        implicitWidth: textitem.implicitWidth + 20
+        implicitHeight: textitem.implicitHeight + 4
+
+        Rectangle {
+            anchors.fill: parent
+            gradient: Gradient{
+                GradientStop { color: tab.selected ? "lightgray" : "white" ; position: 0}
+                GradientStop { color: tab.selected ? "lightgray" : "lightgray" ; position: 1}
+            }
+            border.color: "#aaa"
+
+        }
+
+        Text {
+            id: textitem
+            anchors.centerIn: parent
+            text: tab.title
+            renderType: Text.NativeRendering
+        }
+    }
+
 }
diff --git a/src/styles/styles.pro b/src/styles/styles.pro
index b00372d7e..fa4105578 100644
--- a/src/styles/styles.pro
+++ b/src/styles/styles.pro
@@ -13,7 +13,6 @@ QML_FILES = \
     Settings.js \
     SliderStyle.qml \
     SpinBoxStyle.qml \
-    TabBarStyle.qml \
     TabFrameStyle.qml \
     TextFieldStyle.qml \
     ToolBarStyle.qml \
@@ -32,7 +31,6 @@ QML_FILES += \
     Desktop/ScrollBarStyle.qml \
     Desktop/SliderStyle.qml \
     Desktop/SpinBoxStyle.qml \
-    Desktop/TabBarStyle.qml \
     Desktop/TabFrameStyle.qml \
     Desktop/TextFieldStyle.qml \
     Desktop/ToolBarStyle.qml \
-- 
GitLab