[vlc-devel] [PATCH 19/33] QML: use a two lines layout for BannerSources

Adrien Maglo magsoft at videolan.org
Wed Jun 12 14:01:26 CEST 2019


---
 modules/gui/qt/pixmaps/VLCIcons.json          |   5 +-
 modules/gui/qt/pixmaps/VLCIcons.ttf           | Bin 21816 -> 22416 bytes
 modules/gui/qt/pixmaps/topbar/music.svg       |  86 +++++++++
 modules/gui/qt/pixmaps/topbar/network.svg     | 128 ++++++++++++++
 modules/gui/qt/pixmaps/topbar/video.svg       |  72 ++++++++
 modules/gui/qt/qml/BannerSources.qml          | 166 ++++++++++--------
 .../gui/qt/qml/mediacenter/MCMainDisplay.qml  |  15 +-
 modules/gui/qt/qml/style/VLCIcons.qml         |   4 +-
 modules/gui/qt/qml/style/VLCStyle.qml         |   2 +
 9 files changed, 399 insertions(+), 79 deletions(-)
 create mode 100644 modules/gui/qt/pixmaps/topbar/music.svg
 create mode 100644 modules/gui/qt/pixmaps/topbar/network.svg
 create mode 100644 modules/gui/qt/pixmaps/topbar/video.svg

diff --git a/modules/gui/qt/pixmaps/VLCIcons.json b/modules/gui/qt/pixmaps/VLCIcons.json
index 7834917e59..b1fbd221e3 100644
--- a/modules/gui/qt/pixmaps/VLCIcons.json
+++ b/modules/gui/qt/pixmaps/VLCIcons.json
@@ -121,6 +121,9 @@
 		{"key":"stream", "path": "./menus/stream_16px.svg"},
 		{"key":"valid", "path": "./valid.svg"},
 		{"key":"search_clear", "path": "./search_clear.svg"},
-		{"key":"menu", "path": "./menu.svg"}
+		{"key":"menu", "path": "./menu.svg"},
+		{"key":"topbar_video", "path": "./topbar/video.svg"},
+		{"key":"topbar_music", "path": "./topbar/music.svg"},
+		{"key":"topbar_network", "path": "./topbar/network.svg"}
 	]
 }
diff --git a/modules/gui/qt/pixmaps/VLCIcons.ttf b/modules/gui/qt/pixmaps/VLCIcons.ttf
index 9c45496f77b8476af3ed705d573d72029d26d178..c20da679f6de38e5a546c33d1410e8234909d996 100644
GIT binary patch
delta 1130
zcmYjQUuaup6hG(Q+}yj|<mUfvZ=0sKX_~fpleTG+w*I-bbJRNQl4 at Z?+`8CiNoSg*
zZO~*`Gkh8NG<QK^4#a^k6E;})&<9 at xapJ>#5u7k|1wjQJ6mf{o#dFh)c|XoMzu$Mh
z at 0|O6=Q}%B at ccDw00Mvm&H at XW+1bVUcQ1eZ9>CEm%?8phkHnL2y?7D;j}bq)yq2x(
zeX{pF0CR&RvHV6=g+8VZVEKjomV9=z(ri*BI9enw<csxFJ6AvZ5rF#%;Bd8&%dWUj
z96m?BJ0z(>A=k*VmIv=p0v}C;3v1QdH;2Ba1h_-|L9x7?oxZN!r`W#{zrU8PRp4jF
zO8!aWYAL&x`~2oV*8wv0gUnE+yjlIC at 8S}`OJ`}%udTz;0Z;$+Wpc^+^q(NI=8wYn
zD!a9B8FuReK7(fr9gkye`x1IE-khZ2B0n9ZC4p8Pz!)*}x&mN94_ONh;&*Gt9p+!|
zO{hVA`!>s?v1|E52$#Z_2A%}i{+2sFXZ#+W>r$pG>$;-o>y>FmncmeOUVfyEbS%iT
z%}MwWzPd0PYuwUwP18>+yGqb^?WT#f6D^JBS9br_ at 7;>~2e>CdXgZ+`d(0^iL4h!6
zFa`7Q3cL>B30eJapBzsm-HAb;JRa9EnTYg<B$N}W at pusZK5HnFNX2Ec{6q{BsfiJ^
z`h6Wl8njkN;u0+jvK<41Iwm56(<u9Wd<T(aB8Eg;QFy^6iY{@c+iUkbTFULV3li_{
z?2=VkRu?4BX5%DhXXjH+Z@}&qolbv%vpL*0?0W2yJmj)T<m&Cj#to5wcvlcb0ad=w
z+f9Kzq!h(1I0T1V>XqeQ*<<IsJptZs4 at M$A3-*ph)jK}o6vdun1Fru5P_J0{|AJ>7
zz83<n=&-|X at 5=Or7rUu^Ai>rB$`bB}xi&^<2=I2BFu=nHZOqaY?>{NC^an81p69 at Y
zN7~p50<N3S#BzXw&XVk71Q!(Bn4!ey+L)!ZAGNUsJSdsiN1HiNQENM_lwisD;mGj8
z8CZc0ScM#vK&4t|Ax~k;RC#m2bLC2XV>Mr>szb}eYJ7BTN>gW6Hdb>bbv~OfmNiW?
zqM06JF`eNiAPOnt)ASHK5ltE2r8kZFj7p7A%G|SJ4eNMj`_+XV_Mq9tmBQHA<RdWE
b2Julk9eqeG&zROEw_m&XzG)wK7`yc!UYFW2

delta 650
zcmYjPO=#0_6#u;>&AO>unR*a9h%%wYwXPi#C(|CpQDoD$b1<ewV~tIrT|?UH3PMHj
z<06OwPlDh at nD_y`^z2F4#e;%^hrkMYnF?b&IqFOHKgi?pe!sl$|I3qi)LEq#2*5tv
zg^bM1%%!=9>0?b`A<SRH7w3;BC-2PW0a|2!tx(aejn&OHKzh#_FWjnYI4p6z;<8^U
z>NTs^<4RaKz&uziH*Y>V`06(h_za}4n1+5M)Qrxt?>p-W(==MTto*&l4ZMU=vr=FA
zG_clV-eJC7t`_v|f#4F??lS*V(N`>VC6)arnQO~>#i;J2Qox0A9_Wx&t<_&Vczp`U
z%yQ00e>q<8^5lo9t3%UU*dzbsJbZm)ySrAh-KTV#ZaZfvPmT6-8m74C at s{v4?AHKA
zn0ZeXhC+MUDlE+1hT}>*?R8lt=ZCV@?gsMd7BGmnyLlWrf at y&XL6ilS(1-g1%Q%W}
z0xRgJ{Q?INqLjcYf^^-RLFwn3yrIB^5S9d%xNie;+z*m*9*>1X!7#kLc*y~1G$OFd
z4Kj|Jjm9jLV8CWEFy;%+R;{L8Dw=gIQiy8F at x;`aW|a)vHk{?G)t5jLF-$n?*@%)z
r#wMJ>T#ewga!2?zU*>+bpUrpVQJ$0dmykTmiZ2`IyvzP~0o(ltvR#42

diff --git a/modules/gui/qt/pixmaps/topbar/music.svg b/modules/gui/qt/pixmaps/topbar/music.svg
new file mode 100644
index 0000000000..f27dc4bf2f
--- /dev/null
+++ b/modules/gui/qt/pixmaps/topbar/music.svg
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg5502"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="music.svg">
+  <defs
+     id="defs5496" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="14.481547"
+     inkscape:cx="0.44166706"
+     inkscape:cy="22.480505"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1031"
+     inkscape:window-x="1920"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     units="px">
+    <inkscape:grid
+       type="xygrid"
+       id="grid6077" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5499">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-96.459526,-120.56071)">
+    <ellipse
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.00000286;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:4.19999981;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path7075"
+       cx="110.45953"
+       cy="156.5607"
+       rx="6.0000057"
+       ry="6.0000029" />
+    <ellipse
+       cy="152.5607"
+       cx="130.4595"
+       id="circle7077"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.00000286;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:4.19999981;stroke-opacity:1;marker:none;enable-background:accumulate"
+       rx="6.0000057"
+       ry="6.0000029" />
+    <path
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.29999995;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:4.19999981;stroke-opacity:1;marker:none;enable-background:accumulate"
+       d="m 136.45953,126.56071 -3.99999,0.99998 -14.00003,3.5 c -2.13063,0.53269 -3.99999,2.79088 -3.99999,5.00001 v 3.99999 16.50003 l 2.00001,-1e-5 v -19 l 18,-5 v 20 c 2.58245,-6e-5 0.66667,2e-5 2,2e-5 v -18.00001 z"
+       id="rect6549"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccsccccccccc" />
+  </g>
+</svg>
diff --git a/modules/gui/qt/pixmaps/topbar/network.svg b/modules/gui/qt/pixmaps/topbar/network.svg
new file mode 100644
index 0000000000..d4d2156478
--- /dev/null
+++ b/modules/gui/qt/pixmaps/topbar/network.svg
@@ -0,0 +1,128 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg5502"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="network.svg">
+  <defs
+     id="defs5496" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="14.481547"
+     inkscape:cx="7.3715065"
+     inkscape:cy="25.477187"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1031"
+     inkscape:window-x="1920"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     units="px">
+    <inkscape:grid
+       type="xygrid"
+       id="grid6077" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5499">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-96.459526,-120.56071)">
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 120.45953,141.56071 0,23"
+       id="path819"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.29999995;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path821"
+       cx="120.45953"
+       cy="138.35356"
+       r="3" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path823"
+       sodipodi:type="arc"
+       sodipodi:cx="118.09026"
+       sodipodi:cy="138.37599"
+       sodipodi:rx="7"
+       sodipodi:ry="7"
+       sodipodi:start="2.456324"
+       sodipodi:end="3.8307419"
+       d="m 112.67052,142.80616 a 7,7 0 0 1 0.0172,-8.88133"
+       sodipodi:open="true" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path823-2"
+       sodipodi:type="arc"
+       sodipodi:cx="118.72097"
+       sodipodi:cy="138.19128"
+       sodipodi:rx="16"
+       sodipodi:ry="18"
+       sodipodi:start="2.4099422"
+       sodipodi:end="3.8307419"
+       d="m 106.81581,150.21706 a 16,18 0 0 1 -0.44344,-23.47163"
+       sodipodi:open="true" />
+    <path
+       sodipodi:open="true"
+       d="m -128.24852,142.80616 a 7,7 0 0 1 0.0172,-8.88133"
+       sodipodi:end="3.8307419"
+       sodipodi:start="2.456324"
+       sodipodi:ry="7"
+       sodipodi:rx="7"
+       sodipodi:cy="138.37599"
+       sodipodi:cx="-122.82878"
+       sodipodi:type="arc"
+       id="path840"
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       transform="scale(-1,1)" />
+    <path
+       sodipodi:open="true"
+       d="m -134.10334,148.88076 a 16,16 0 0 1 -0.44334,-20.86357"
+       sodipodi:end="3.8307419"
+       sodipodi:start="2.4099506"
+       sodipodi:ry="16"
+       sodipodi:rx="16"
+       sodipodi:cy="138.19128"
+       sodipodi:cx="-122.19808"
+       sodipodi:type="arc"
+       id="path842"
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       transform="scale(-1,1)" />
+  </g>
+</svg>
diff --git a/modules/gui/qt/pixmaps/topbar/video.svg b/modules/gui/qt/pixmaps/topbar/video.svg
new file mode 100644
index 0000000000..f12ded4387
--- /dev/null
+++ b/modules/gui/qt/pixmaps/topbar/video.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg5502"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="movie.svg">
+  <defs
+     id="defs5496" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="14.481547"
+     inkscape:cx="3.0968881"
+     inkscape:cy="25.413739"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1031"
+     inkscape:window-x="1920"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     units="px">
+    <inkscape:grid
+       type="xygrid"
+       id="grid6077" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5499">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-96.459526,-120.56071)">
+    <path
+       sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccccccccccccccc"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.00000024;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.70000005;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       d="m 104.45953,128.56071 v 32 h 2 v -4 l 5.00002,1e-5 v 3.99999 h 9 9 v -3.99999 l 4.99998,-1e-5 v 3.99999 l 2,1e-5 v -32 h -2 v 4 l -4.99998,-1e-5 v -3.99999 h -9 -9.00002 v 4 h -5 v -4 z m 2,7 h 5 v 4 h -5 z m 23.00002,-1e-5 4.99998,1e-5 v 4 l -4.99998,-2e-5 z m -23.00002,7.00001 5.00002,-1e-5 v 4.00002 l -5.00002,-1e-5 z m 23.00002,-1e-5 4.99998,1e-5 v 4 l -4.99998,1e-5 z m -23.00002,7.00001 5.00002,2e-5 v 3.99999 l -5.00002,-1e-5 z m 23.00002,2e-5 4.99998,-2e-5 v 4 l -4.99998,1e-5 z"
+       id="path11061"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/modules/gui/qt/qml/BannerSources.qml b/modules/gui/qt/qml/BannerSources.qml
index 193ffdfe3e..cf437cc22e 100644
--- a/modules/gui/qt/qml/BannerSources.qml
+++ b/modules/gui/qt/qml/BannerSources.qml
@@ -29,7 +29,8 @@ import "qrc:///menus/" as Menus
 
 Utils.NavigableFocusScope {
     id: root
-    height: VLCStyle.icon_normal + VLCStyle.margin_small
+
+    height: pLBannerSources.height
 
     property int selectedIndex: 0
     property alias model: pLBannerSources.model
@@ -43,37 +44,42 @@ Utils.NavigableFocusScope {
     Rectangle {
         id: pLBannerSources
 
-        anchors.fill: parent
+        anchors {
+            left: parent.left
+            right: parent.right
+        }
+        height: col.height
 
         color: VLCStyle.colors.banner
         property alias model: buttonView.model
 
-        RowLayout {
-            anchors.fill: parent
-
-            Utils.IconToolButton {
-                id: history_back
-                size: VLCStyle.icon_normal
-                text: VLCIcons.dvd_prev
-
-                focus: true
-                KeyNavigation.right: buttonView
-                onClicked: history.pop(History.Go)
+        Column
+        {
+            id: col
+            anchors {
+                left: parent.left
+                right: parent.right
             }
 
             /* Button for the sources */
             TabBar {
                 id: buttonView
 
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                }
+
                 focusPolicy: Qt.StrongFocus
 
                 Layout.preferredHeight: VLCStyle.icon_normal
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
+                spacing: VLCStyle.margin_small
+
                 KeyNavigation.left: history_back
 
                 Component.onCompleted: {
-                    buttonView.contentItem.focus= true
+                    buttonView.contentItem.focus = true
                 }
 
                 background: Rectangle {
@@ -101,10 +107,10 @@ Utils.NavigableFocusScope {
                             }
                         }
 
-                        checkable: true
                         padding: 0
+                        width: contentItem.implicitWidth
+
                         onClicked: {
-                            checked =  !control.checked;
                             root.selectedIndex = model.index
                         }
 
@@ -117,84 +123,106 @@ Utils.NavigableFocusScope {
                             color: VLCStyle.colors.banner
                         }
 
-                        contentItem: Row {
-                            Image {
-                                id: icon
-                                anchors {
-                                    verticalCenter: parent.verticalCenter
-                                    rightMargin: VLCStyle.margin_xsmall
-                                    leftMargin: VLCStyle.margin_small
-                                }
-                                height: VLCStyle.icon_normal
-                                width: VLCStyle.icon_normal
-                                source: model.pic
-                                fillMode: Image.PreserveAspectFit
-                            }
+                        contentItem: Item {
+                            implicitWidth: tabRow.width
+                            implicitHeight: tabRow.height
+                            Row {
+                                id: tabRow
+                                padding: VLCStyle.margin_xxsmall
+                                spacing: VLCStyle.margin_xxsmall
 
-                            Label {
-                                text: control.text
-                                font: control.font
-                                color: control.hovered ?  VLCStyle.colors.textActiveSource : VLCStyle.colors.text
-                                verticalAlignment: Text.AlignVCenter
-                                horizontalAlignment: Text.AlignHCenter
+                                Label {
+                                    id: icon
+                                    anchors {
+                                        verticalCenter: parent.verticalCenter
+                                    }
+                                    color: VLCStyle.colors.buttonText
 
-                                anchors {
-                                    verticalCenter: parent.verticalCenter
-                                    rightMargin: VLCStyle.margin_xsmall
-                                    leftMargin: VLCStyle.margin_small
+                                    font.pixelSize: VLCStyle.icon_topbar
+                                    font.family: VLCIcons.fontFamily
+                                    horizontalAlignment: Text.AlignHCenter
+                                    leftPadding: VLCStyle.margin_xsmall
+                                    rightPadding: VLCStyle.margin_xsmall
+
+                                    text: model.icon
                                 }
 
-                                Rectangle {
+                                Label {
+                                    text: control.text
+                                    font: control.font
+                                    color: VLCStyle.colors.text
+                                    padding: VLCStyle.margin_xxsmall
+
                                     anchors {
-                                        left: parent.left
-                                        right: parent.right
                                         bottom: parent.bottom
                                     }
-                                    height: 2
-                                    visible: control.activeFocus || control.checked
-                                    color: control.activeFocus ? VLCStyle.colors.accent  : VLCStyle.colors.bgHover
                                 }
                             }
+
+                            Rectangle {
+                                anchors {
+                                    left: tabRow.left
+                                    right: tabRow.right
+                                    bottom: tabRow.bottom
+                                }
+                                height: 2
+                                visible: root.selectedIndex === model.index || control.activeFocus || control.hovered
+                                color: "transparent"
+                                border.color: VLCStyle.colors.accent
+                            }
                         }
                     }
                 }
             }
 
+            RowLayout {
+                width: parent.width
 
-            ToolBar {
-                Layout.preferredHeight: VLCStyle.icon_normal
-                //Layout.preferredWidth: VLCStyle.icon_normal * 3
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-                background: Item{
-                    width: parent.implicitWidth
-                    height: parent.implicitHeight
+                Utils.IconToolButton {
+                    id: history_back
+                    size: VLCStyle.icon_normal
+                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+                    text: VLCIcons.dvd_prev
+                    focus: true
+                    KeyNavigation.right: buttonView
+                    onClicked: history.pop(History.Go)
                 }
 
-                Row {
-                    Utils.IconToolButton {
-                        id: playlist_btn
+                ToolBar {
+                    Layout.preferredHeight: VLCStyle.icon_normal
+                    //Layout.preferredWidth: VLCStyle.icon_normal * 3
+                    Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+                    background: Item{
+                        width: parent.implicitWidth
+                        height: parent.implicitHeight
+                    }
 
-                        size: VLCStyle.icon_normal
-                        text: VLCIcons.playlist
+                    Row {
+                        Utils.IconToolButton {
+                            id: playlist_btn
 
-                        KeyNavigation.left: buttonView
+                            size: VLCStyle.icon_normal
+                            text: VLCIcons.playlist
 
-                        onClicked: root.toogleMenu()
-                    }
+                            KeyNavigation.left: buttonView
 
-                    Utils.IconToolButton {
-                        id: menu_selector
+                            onClicked: root.toogleMenu()
+                        }
+
+                        Utils.IconToolButton {
+                            id: menu_selector
 
-                        size: VLCStyle.icon_normal
-                        text: VLCIcons.menu
+                            size: VLCStyle.icon_normal
+                            text: VLCIcons.menu
 
-                        KeyNavigation.left: playlist_btn
+                            KeyNavigation.left: playlist_btn
 
-                        onClicked: mainMenu.openBelow(this)
+                            onClicked: mainMenu.openBelow(this)
 
-                        Menus.MainDropdownMenu {
-                            id: mainMenu
-                            onClosed: menu_selector.forceActiveFocus()
+                            Menus.MainDropdownMenu {
+                                id: mainMenu
+                                onClosed: menu_selector.forceActiveFocus()
+                            }
                         }
                     }
                 }
diff --git a/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml b/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
index 72487fbe18..086f9ac2c4 100644
--- a/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
@@ -51,17 +51,17 @@ Utils.NavigableFocusScope {
     readonly property var pageModel: [
         {
             displayText: qsTr("Video"),
-            pic: "qrc:///sidebar/movie.svg",
+            icon: VLCIcons.topbar_video,
             name: "video",
             component: videoComp
         }, {
             displayText: qsTr("Music"),
-            pic: "qrc:///sidebar/music.svg",
+            icon: VLCIcons.topbar_music,
             name: "music",
             component: musicComp
         }, {
             displayText: qsTr("Network"),
-            pic: "qrc:///sidebar/screen.svg",
+            icon: VLCIcons.topbar_network,
             name: "network",
             component: networkComp
         }
@@ -72,11 +72,10 @@ Utils.NavigableFocusScope {
         Component.onCompleted: {
             pageModel.forEach(function(e) {
                 append({
-                           displayText: e.displayText,
-                           pic: e.pic,
-                           name: e.name,
-                           selected: (e.name === root.view)
-                       })
+                   displayText: e.displayText,
+                   icon: e.icon,
+                   name: e.name,
+               })
             })
         }
     }
diff --git a/modules/gui/qt/qml/style/VLCIcons.qml b/modules/gui/qt/qml/style/VLCIcons.qml
index 54d34f3682..8dea22e5d4 100644
--- a/modules/gui/qt/qml/style/VLCIcons.qml
+++ b/modules/gui/qt/qml/style/VLCIcons.qml
@@ -148,5 +148,7 @@ Item {
     property string valid : "\ue073"
     property string search_clear : "\ue074"
     property string menu : "\ue075"
-
+    property string topbar_video: "\ue076"
+    property string topbar_music: "\ue077"
+    property string topbar_network: "\ue078"
 }
diff --git a/modules/gui/qt/qml/style/VLCStyle.qml b/modules/gui/qt/qml/style/VLCStyle.qml
index ba418da034..e418f8ba23 100644
--- a/modules/gui/qt/qml/style/VLCStyle.qml
+++ b/modules/gui/qt/qml/style/VLCStyle.qml
@@ -72,6 +72,8 @@ Item {
     property int icon_large: 64 * scale;
     property int icon_xlarge: 128 * scale;
 
+    property int icon_topbar: 38 * scale
+
     property int cover_xxsmall: 32 * scale;
     property int cover_xsmall: 64 * scale;
     property int cover_small: 96 * scale;
-- 
2.20.1



More information about the vlc-devel mailing list