[vlc-devel] [PATCH 26/33] QML: replace the topbar filter control by an expanding control.
Adrien Maglo
magsoft at videolan.org
Wed Jun 12 14:01:33 CEST 2019
---
modules/gui/qt/Makefile.am | 1 +
modules/gui/qt/pixmaps/VLCIcons.json | 3 +-
modules/gui/qt/pixmaps/VLCIcons.ttf | Bin 22560 -> 22680 bytes
modules/gui/qt/pixmaps/topbar/filter.svg | 71 ++++++++++++
modules/gui/qt/qml/BannerSources.qml | 33 +-----
modules/gui/qt/qml/style/VLCIcons.qml | 1 +
modules/gui/qt/qml/utils/SearchBox.qml | 131 +++++++++++++++++++++++
modules/gui/qt/vlc.qrc | 2 +
8 files changed, 212 insertions(+), 30 deletions(-)
create mode 100644 modules/gui/qt/pixmaps/topbar/filter.svg
create mode 100644 modules/gui/qt/qml/utils/SearchBox.qml
diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index 92373b4b22..ccc107fa1e 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -550,6 +550,7 @@ libqt_plugin_la_QML = \
gui/qt/qml/utils/ComboBoxExt.qml \
gui/qt/qml/utils/StackViewExt.qml \
gui/qt/qml/utils/ScanProgressBar.qml \
+ gui/qt/qml/utils/SearchBox.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 7e0d98880f..f166a6d826 100644
--- a/modules/gui/qt/pixmaps/VLCIcons.json
+++ b/modules/gui/qt/pixmaps/VLCIcons.json
@@ -126,6 +126,7 @@
{"key":"topbar_music", "path": "./topbar/music.svg"},
{"key":"topbar_network", "path": "./topbar/network.svg"},
{"key":"topbar_previous", "path": "./topbar/previous.svg"},
- {"key":"topbar_next", "path": "./topbar/next.svg"}
+ {"key":"topbar_next", "path": "./topbar/next.svg"},
+ {"key":"topbar_filter", "path": "./topbar/filter.svg"}
]
}
diff --git a/modules/gui/qt/pixmaps/VLCIcons.ttf b/modules/gui/qt/pixmaps/VLCIcons.ttf
index 5aaf1b5c9074f07f1f03f856bfa859e17e86c3df..4859feec2e069ed123c708f7a7948d84da1ea359 100644
GIT binary patch
delta 526
zcmZ3mfpNx0#(D-u1_lORh6V;^h5$FW5Z|sv%hxk7MAQI9W&DHnjZABNk{K8nBY^yb
z<lMx9_o83J85o%M0I^kaS&0IJB2y&;1IrJfJWG0Fal!xpK$93EN`QQh^qk7HI}1!*
z85mfB^4=a9sfj6qaREz#a(95(EF&YeK9QN_PZQ7r5ukudMs7*PIhK<Lf&3jn%#@R#
zoS3Ro{sCzAAE5l7+{B6khF45%KsgH_Um-6sH}&B0-<ud10v&)3(kRF;E;;OQ56BPB
z09wig_8icI4|^s_#q-;IW#DFh0o2EEQ-Q4qLNl at TOk%WUtetGf7|U3_c at Cotqrrcm
zgMk3(4KS7go5H|o0_1 at LONN1kQ36P_03ne7pnCHYCU!=~n$546*%>FlXZg>hx at 7YQ
z)~8<e%>P{&wlM5rvI7RNID;(EIAwW8Sw?v#TSj|EWmZLgAV=MnQJ+zfT~yt4Jr8>a
zvo}`<JI}v$jBd at 0c8vXuah*O)c3ivKS(uF2cy{jM;@!x^v_Y$liD}24Jw{zXM*smI
z!#aoyfox?44=9_Ffn)QB09_`a*W`kK0IAJlAy1jPKygx#VQ6H`F!^`53 at 0=c*m?jw
CZF`ph
delta 402
zcmbQSk#WHW#(D-u1_lORh6V;^h5$FW5Z|sv%l0uaM6duwW&DHnjZABNk{B2mBY^yb
z<lMx9PYNGTGcYji0Ah>evJwRbMW#vy29^&%d6x9V;)4JGfhIA8{{iwj(sL@)ZeL?H
zXJB9j%6mP at NKH%;jPu_Dl)D4OW*Hf&^@+?Zf0}?6hyVptGIC2Q&h0;W5Xc8wz{rr3
zpPZPg666Ck`wLM1S8ifO0mDlsHlUmZkgt%Jn45a=`0q^&3;|bw4$>&dFD~KxD(1$(
z5Cn7p%YU%vfF5+wyWJblZ}XLboB0J$AHz)rHem?O#3nL{(U!4hvK?bAW7Xz4j53Tm
zKpCJHz*q)s0t2HFkOvAV83q<cF(AzXgh2j-s?9H$*cmr}WM*TW{FCJ`69dEMAFNNk
qHaiA-FaZti3jVRVCFCiyDo_gpBQR)y3LqxlNSZYbB#3Ycn+O0B*<!!|
diff --git a/modules/gui/qt/pixmaps/topbar/filter.svg b/modules/gui/qt/pixmaps/topbar/filter.svg
new file mode 100644
index 0000000000..7491739fae
--- /dev/null
+++ b/modules/gui/qt/pixmaps/topbar/filter.svg
@@ -0,0 +1,71 @@
+<?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="previous (copy 1).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="4.2905906"
+ inkscape:cy="24.510439"
+ 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:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+ d="m 106.45953,129.56073 h 28 l -11,15 c 0,0 0,15 0,15 l -6,-4 v -11 z"
+ id="path4519"
+ inkscape:connector-curvature="0" />
+ </g>
+</svg>
diff --git a/modules/gui/qt/qml/BannerSources.qml b/modules/gui/qt/qml/BannerSources.qml
index 6caf918dc4..7fb8a61da7 100644
--- a/modules/gui/qt/qml/BannerSources.qml
+++ b/modules/gui/qt/qml/BannerSources.qml
@@ -303,34 +303,11 @@ Utils.NavigableFocusScope {
Layout.fillWidth: true
}
- TextField {
- Layout.preferredWidth: VLCStyle.widthSearchInput
- Layout.preferredHeight: VLCStyle.heightInput
- Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-
+ Utils.SearchBox {
id: searchBox
- font.pixelSize: VLCStyle.fontSize_normal
-
- color: VLCStyle.colors.buttonText
- placeholderText: qsTr("filter")
- hoverEnabled: true
-
- background: Rectangle {
- color: VLCStyle.colors.button
- border.color: {
- if ( searchBox.text.length < 3 && searchBox.text.length !== 0 )
- return VLCStyle.colors.alert
- else if ( searchBox.hovered || searchBox.activeFocus )
- return VLCStyle.colors.accent
- else
- return VLCStyle.colors.buttonBorder
- }
- }
-
- onTextChanged: {
- if (contentModel !== undefined)
- contentModel.searchPattern = text;
- }
+ Layout.minimumWidth: width
+ Layout.preferredHeight: VLCStyle.icon_normal
+ contentModel: root.contentModel
KeyNavigation.right: combo
KeyNavigation.up: buttonView
@@ -340,8 +317,6 @@ Utils.NavigableFocusScope {
Utils.ComboBoxExt {
id: combo
- //Layout.fillHeight: true
- Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
Layout.preferredWidth: VLCStyle.widthSortBox
Layout.preferredHeight: VLCStyle.heightInput
textRole: "text"
diff --git a/modules/gui/qt/qml/style/VLCIcons.qml b/modules/gui/qt/qml/style/VLCIcons.qml
index 769e5d4f2e..8d2bb7e2ae 100644
--- a/modules/gui/qt/qml/style/VLCIcons.qml
+++ b/modules/gui/qt/qml/style/VLCIcons.qml
@@ -153,4 +153,5 @@ Item {
property string topbar_network: "\ue078"
property string topbar_previous: "\ue079"
property string topbar_next: "\ue07a"
+ property string topbar_filter: "\ue07b"
}
diff --git a/modules/gui/qt/qml/utils/SearchBox.qml b/modules/gui/qt/qml/utils/SearchBox.qml
new file mode 100644
index 0000000000..b28d0715d1
--- /dev/null
+++ b/modules/gui/qt/qml/utils/SearchBox.qml
@@ -0,0 +1,131 @@
+/*****************************************************************************
+ * 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: content.width
+ height: content.height
+
+ property variant contentModel
+
+ property bool expanded: false
+
+ onExpandedChanged: {
+ if (expanded) {
+ searchBox.focus = true
+ filter.KeyNavigation.right = searchBox
+ animateExpand.start()
+ }
+ else {
+ searchBox.placeholderText = ""
+ searchBox.text = ""
+ filter.focus = true
+ filter.KeyNavigation.right = null
+ animateRetract.start()
+ }
+ }
+
+ onActiveFocusChanged: {
+ if (!activeFocus)
+ expanded = false
+ }
+
+ PropertyAnimation {
+ id: animateExpand;
+ target: searchBox;
+ properties: "width"
+ duration: 200
+ to: VLCStyle.widthSearchInput
+ onStopped: {
+ searchBox.placeholderText = qsTr("filter")
+ }
+ }
+
+ PropertyAnimation {
+ id: animateRetract;
+ target: searchBox;
+ properties: "width"
+ duration: 200
+ to: 0
+ }
+
+ Row {
+ id: content
+
+ Utils.IconToolButton {
+ id: filter
+
+ size: VLCStyle.icon_normal
+ text: VLCIcons.topbar_filter
+ focus: true
+
+ onClicked: {
+ expanded = !expanded
+ }
+ }
+
+ TextField {
+ id: searchBox
+
+ anchors.verticalCenter: parent.verticalCenter
+
+ font.pixelSize: VLCStyle.fontSize_normal
+
+ color: VLCStyle.colors.buttonText
+ width: 0
+
+ background: Rectangle {
+ color: VLCStyle.colors.button
+ border.color: {
+ if ( searchBox.text.length < 3 && searchBox.text.length !== 0 )
+ return VLCStyle.colors.alert
+ else if ( searchBox.activeFocus )
+ return VLCStyle.colors.accent
+ else
+ return VLCStyle.colors.buttonBorder
+ }
+ }
+
+ onTextChanged: {
+ if (contentModel !== undefined)
+ contentModel.searchPattern = text;
+ }
+ }
+ }
+
+ MouseArea {
+ id: mouseArea
+ hoverEnabled: true
+ anchors.fill: content
+
+ onEntered: {
+ expanded = true
+ }
+
+ onExited: {
+ expanded = false
+ }
+ }
+}
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 4cd4e3068d..f25a80f874 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -102,6 +102,7 @@
<file alias="noart_album.svg">pixmaps/noart_album.svg</file>
<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>
</qresource>
<qresource prefix="/prefsmenu">
<file alias="cone_audio_64.png">pixmaps/prefs/spref_cone_Audio_64.png</file>
@@ -188,6 +189,7 @@
<file alias="MenuItemExt.qml">qml/utils/MenuItemExt.qml</file>
<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>
</qresource>
<qresource prefix="/mediacenter">
<file alias="MCMusicDisplay.qml">qml/mediacenter/MCMusicDisplay.qml</file>
--
2.20.1
More information about the vlc-devel
mailing list