vlc | branch: master | Adrien Maglo <[email protected]> | Mon May 13 18:30:54 2019 +0200| [80cc2636039690d51622bba2289d86f6232b93a5] | committer: Thomas Guillem
qml: use a two lines layout for BannerSources Signed-off-by: Thomas Guillem <[email protected]> > http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=80cc2636039690d51622bba2289d86f6232b93a5 --- 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 +++++++++++++---------- modules/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(-) 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 9c45496f77..c20da679f6 100644 Binary files a/modules/gui/qt/pixmaps/VLCIcons.ttf and b/modules/gui/qt/pixmaps/VLCIcons.ttf differ 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; _______________________________________________ vlc-commits mailing list [email protected] https://mailman.videolan.org/listinfo/vlc-commits
