[vlc-devel] [PATCH 27/33] QML: change the topbar sort control
Adrien Maglo
magsoft at videolan.org
Wed Jun 12 14:01:34 CEST 2019
---
modules/gui/qt/Makefile.am | 1 +
modules/gui/qt/pixmaps/VLCIcons.json | 3 +-
modules/gui/qt/pixmaps/VLCIcons.ttf | Bin 22680 -> 22808 bytes
modules/gui/qt/pixmaps/topbar/sort.svg | 80 ++++++++++++
modules/gui/qt/qml/BannerSources.qml | 15 ++-
modules/gui/qt/qml/style/VLCIcons.qml | 1 +
modules/gui/qt/qml/utils/SortControl.qml | 154 +++++++++++++++++++++++
modules/gui/qt/vlc.qrc | 2 +
8 files changed, 247 insertions(+), 9 deletions(-)
create mode 100644 modules/gui/qt/pixmaps/topbar/sort.svg
create mode 100644 modules/gui/qt/qml/utils/SortControl.qml
diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index ccc107fa1e..dd7aa10997 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -551,6 +551,7 @@ libqt_plugin_la_QML = \
gui/qt/qml/utils/StackViewExt.qml \
gui/qt/qml/utils/ScanProgressBar.qml \
gui/qt/qml/utils/SearchBox.qml \
+ gui/qt/qml/utils/SortControl.qml \
gui/qt/qml/menus/CheckableModelSubMenu.qml \
gui/qt/qml/menus/AudioMenu.qml \
gui/qt/qml/menus/HelpMenu.qml \
diff --git a/modules/gui/qt/pixmaps/VLCIcons.json b/modules/gui/qt/pixmaps/VLCIcons.json
index f166a6d826..8ab30cd235 100644
--- a/modules/gui/qt/pixmaps/VLCIcons.json
+++ b/modules/gui/qt/pixmaps/VLCIcons.json
@@ -127,6 +127,7 @@
{"key":"topbar_network", "path": "./topbar/network.svg"},
{"key":"topbar_previous", "path": "./topbar/previous.svg"},
{"key":"topbar_next", "path": "./topbar/next.svg"},
- {"key":"topbar_filter", "path": "./topbar/filter.svg"}
+ {"key":"topbar_filter", "path": "./topbar/filter.svg"},
+ {"key":"topbar_sort", "path": "./topbar/sort.svg"}
]
}
diff --git a/modules/gui/qt/pixmaps/VLCIcons.ttf b/modules/gui/qt/pixmaps/VLCIcons.ttf
index 4859feec2e069ed123c708f7a7948d84da1ea359..da1cef560d7bcd3580ccc964e1c472fdc8ad2651 100644
GIT binary patch
delta 526
zcmbQSk#WW*MjHl31_lORh6V;^h5$FW5Z|svD+(DHBK`nHW&DHnjZABNQWzK*BY^yb
z<lMx9Pjf#7GB7ah0b-kpHq!N9fD#<(IhASWq!x!WFt7qOdhf_cO-vDt3rq*f-2q~=
z44?or%bzBoK_WoDN=9x;#W~g!H-Y>eK+KYppPbmuQ2v2|fdypozud%%0*2R2Y(O~+
zAYUObF*o(#@!y*m7y`EdE!HT=FD~hMlqku-pcM?XfK?Ri3!qOVIyU#l^V at u7;AVaS
z)W~pCf$c4fp2TR&SU1^@F_y7r^BhJwM!o+MKq+P at mH`{Vz-R^(0R at Q+0}G=RkY)iw
zApb$l<`+zyjEuFLKQOa1PX5XApG6gD^X4C{p5FCL|HT=K8D28AGVn7f0^O&?CMu||
z$H>Ph&txiSB5Y*GXeuZ!$7si>&m<}+A{H(sq{|^C%*>HuzLJBV1I89&N*3b%_sD{i
zSwM=b)-{r`ocEs#P at Yi^F7&UHR|x1P1_nNcbrAOg*~*&(0xg+<Uh4|}1*A5&guG)m
i07XebhM|!OSUCgZ|Njh3Kqkm%3^$TyO#{)$fdc at QjCphb
delta 379
zcmbQSiE+k8MjHl31_lORh6V;^h5$FW5Z|sv%hxk7MAQI9W&DHnjZABNk{K8nBY^yb
z<lMx9_o83J85o%M0I}6X8|nHIpae&HPG#Di1*WbH46HvG7`#0)QWH}I;{uif<?aBn
zSq4ymndMIt&>#^YUnL{Aq~aXQ$%8=t4j^XA$xlv9RVn|#z`*hcDE}unv7&(C6%!j!
z&H~6+$V<#kJ$U^0CI*H;2cX3o1^LA#haK(#`C7plKufv6z5x2<Vb3I~cz&C&4BX5w
zfEpQYDzNpy=t+#WjJ1>P7-Jc$H_u^|W7Gpl0KE;tGGHSZ7)^j8pdgW9U}2O1(kws-
z<Ugq1{DO&-ar0+pHpb20Sr{2N|6%p?-n=!?g9&Kpzu;e+e}%kbRs(7Py7~Wq1||><
O;@n7 at H4Q`~y95A*EnKhw
diff --git a/modules/gui/qt/pixmaps/topbar/sort.svg b/modules/gui/qt/pixmaps/topbar/sort.svg
new file mode 100644
index 0000000000..e137111e7b
--- /dev/null
+++ b/modules/gui/qt/pixmaps/topbar/sort.svg
@@ -0,0 +1,80 @@
+<?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.4 (5da689c313, 2019-01-14)"
+ sodipodi:docname="sort.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="-2.3422952"
+ inkscape:cy="26.720147"
+ 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="1026"
+ inkscape:window-x="0"
+ 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)">
+ <g
+ id="g823"
+ transform="translate(-2.000004)">
+ <path
+ inkscape:connector-curvature="0"
+ id="path4519"
+ d="m 114.45953,128.56071 v 30 l -8,-10"
+ style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path4519-3"
+ d="m 130.45953,160.56071 v -30 l 8,10"
+ style="fill:none;stroke:#000000;stroke-width:5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+ </g>
+</svg>
diff --git a/modules/gui/qt/qml/BannerSources.qml b/modules/gui/qt/qml/BannerSources.qml
index 7fb8a61da7..ec7f4babee 100644
--- a/modules/gui/qt/qml/BannerSources.qml
+++ b/modules/gui/qt/qml/BannerSources.qml
@@ -38,7 +38,7 @@ Utils.NavigableFocusScope {
signal itemClicked(int index)
signal subItemClicked(int index)
- property alias sortModel: combo.model
+ property alias sortModel: sort_control.model
property var contentModel
property alias model: pLBannerSources.model
@@ -309,17 +309,16 @@ Utils.NavigableFocusScope {
Layout.preferredHeight: VLCStyle.icon_normal
contentModel: root.contentModel
- KeyNavigation.right: combo
+ KeyNavigation.right: sort_control
KeyNavigation.up: buttonView
}
- /* Selector to choose a specific sorting operation */
- Utils.ComboBoxExt {
- id: combo
+ Utils.SortControl {
+ id: sort_control
- Layout.preferredWidth: VLCStyle.widthSortBox
- Layout.preferredHeight: VLCStyle.heightInput
textRole: "text"
+ listWidth: VLCStyle.widthSortBox
+
onCurrentIndexChanged: {
if (model !== undefined && contentModel !== undefined) {
var sorting = model.get(currentIndex);
@@ -337,7 +336,7 @@ Utils.NavigableFocusScope {
Layout.preferredHeight: VLCStyle.icon_normal
//Layout.preferredWidth: VLCStyle.icon_normal * 3
Layout.alignment: Qt.AlignRight
- background: Item{
+ background: Item {
width: parent.implicitWidth
height: parent.implicitHeight
}
diff --git a/modules/gui/qt/qml/style/VLCIcons.qml b/modules/gui/qt/qml/style/VLCIcons.qml
index 8d2bb7e2ae..ab3663e153 100644
--- a/modules/gui/qt/qml/style/VLCIcons.qml
+++ b/modules/gui/qt/qml/style/VLCIcons.qml
@@ -154,4 +154,5 @@ Item {
property string topbar_previous: "\ue079"
property string topbar_next: "\ue07a"
property string topbar_filter: "\ue07b"
+ property string topbar_sort: "\ue07c"
}
diff --git a/modules/gui/qt/qml/utils/SortControl.qml b/modules/gui/qt/qml/utils/SortControl.qml
new file mode 100644
index 0000000000..6350b3ef7f
--- /dev/null
+++ b/modules/gui/qt/qml/utils/SortControl.qml
@@ -0,0 +1,154 @@
+/*****************************************************************************
+ * Copyright (C) 2019 VLC authors and VideoLAN
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program 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 General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+
+import "qrc:///style/"
+import "qrc:///utils/" as Utils
+
+Utils.NavigableFocusScope {
+ id: root
+
+ width: childrenRect.width
+ height: childrenRect.height
+
+ property variant model
+ property string textRole
+
+ property int listWidth
+ property alias currentIndex: list.currentIndex
+
+ onFocusChanged: {
+ if (!focus)
+ popup.close()
+ }
+
+ Utils.IconToolButton {
+ id: button
+
+ size: VLCStyle.icon_normal
+ text: VLCIcons.topbar_sort
+
+ focus: true
+
+ onClicked: {
+ if (popup.opened)
+ popup.close()
+ else
+ popup.open()
+ }
+ }
+
+ Popup {
+ id: popup
+
+ y: root.height - 1
+ x: button.width - width
+ width: root.listWidth
+ implicitHeight: contentItem.implicitHeight + padding * 2
+ padding: 1
+
+ onOpened: {
+ button.KeyNavigation.down = list
+ button.highlighted = true
+ list.forceActiveFocus()
+ }
+
+ onClosed: {
+ button.KeyNavigation.down = null
+ button.highlighted = false
+ button.forceActiveFocus()
+ }
+
+ contentItem: ListView {
+ id: list
+
+ clip: true
+ implicitHeight: contentHeight
+ model: root.model
+ spacing: 0
+
+ highlight: Rectangle {
+ color: VLCStyle.colors.accent
+ }
+
+ Rectangle {
+ z: 10
+ width: parent.width
+ height: parent.height
+ color: "transparent"
+ border.color: VLCStyle.colors.accent
+ }
+
+ ScrollIndicator.vertical: ScrollIndicator { }
+
+ delegate: ItemDelegate {
+ id: itemDelegate
+
+ anchors.left: parent.left
+ anchors.right: parent.right
+ padding: 0
+
+ background: Item {}
+ contentItem: Item {
+ implicitHeight: itemText.implicitHeight
+
+ Rectangle {
+ anchors.fill: parent
+ color: VLCStyle.colors.accent
+ visible: mouseArea.containsMouse
+ }
+
+ Text {
+ id: itemText
+ text: root.textRole ? (Array.isArray(root.model) ? modelData[root.textRole] : model[root.textRole]) : modelData
+ anchors.fill: parent
+ topPadding: VLCStyle.margin_xxsmall
+ bottomPadding: VLCStyle.margin_xxsmall
+ leftPadding: VLCStyle.margin_xsmall
+ rightPadding: VLCStyle.margin_xsmall
+ color: VLCStyle.colors.buttonText
+ elide: Text.ElideRight
+ verticalAlignment: Text.AlignVCenter
+ }
+
+ MouseArea {
+ id: mouseArea
+ anchors.fill: parent
+ hoverEnabled: true
+ onClicked: itemDelegate.clicked(mouse)
+ }
+ }
+
+ onClicked: {
+ root.currentIndex = index
+ popup.close()
+ }
+ }
+ }
+
+ background: Rectangle {
+ color: VLCStyle.colors.button
+ border.color: VLCStyle.colors.buttonBorder
+ }
+ }
+}
+
+
+
+
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index f25a80f874..f8a92890ad 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -103,6 +103,7 @@
<file alias="noart_artist.svg">pixmaps/noart_artist.svg</file>
<file alias="noart_artist_small.svg">pixmaps/noart_artist_small.svg</file>
<file>qml/utils/SearchBox.qml</file>
+ <file>qml/utils/SortControl.qml</file>
</qresource>
<qresource prefix="/prefsmenu">
<file alias="cone_audio_64.png">pixmaps/prefs/spref_cone_Audio_64.png</file>
@@ -190,6 +191,7 @@
<file alias="ExpandGridView.qml">qml/utils/ExpandGridView.qml</file>
<file alias="ScanProgressBar.qml">qml/utils/ScanProgressBar.qml</file>
<file alias="SearchBox.qml">qml/utils/SearchBox.qml</file>
+ <file alias="SortControl.qml">qml/utils/SortControl.qml</file>
</qresource>
<qresource prefix="/mediacenter">
<file alias="MCMusicDisplay.qml">qml/mediacenter/MCMusicDisplay.qml</file>
--
2.20.1
More information about the vlc-devel
mailing list