[vlc-commits] qml: replace the topbar filter control by an expanding control.

Adrien Maglo git at videolan.org
Thu Jun 13 13:11:08 CEST 2019


vlc | branch: master | Adrien Maglo <magsoft at videolan.org> | Fri Jun  7 14:19:11 2019 +0200| [399cfc5f0c073881918cd6f3491ee2511e5ff358] | committer: Thomas Guillem

qml: replace the topbar filter control by an expanding control.

Signed-off-by: Thomas Guillem <thomas at gllm.fr>

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=399cfc5f0c073881918cd6f3491ee2511e5ff358
---

 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   | 136 +++++++++++++++++++++++++++++++
 modules/gui/qt/vlc.qrc                   |   2 +
 8 files changed, 217 insertions(+), 30 deletions(-)

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 5aaf1b5c90..4859feec2e 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/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..d3b5dff03c
--- /dev/null
+++ b/modules/gui/qt/qml/utils/SearchBox.qml
@@ -0,0 +1,136 @@
+/*****************************************************************************
+ * 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.forceActiveFocus()
+            icon.KeyNavigation.right = searchBox
+            animateExpand.start()
+        }
+        else {
+            searchBox.placeholderText = ""
+            searchBox.text = ""
+            icon.forceActiveFocus()
+            icon.KeyNavigation.right = null
+            animateRetract.start()
+        }
+    }
+
+    onActiveFocusChanged: {
+        if (!activeFocus && searchBox.text == "")
+            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: icon
+
+            size: VLCStyle.icon_normal
+            text: VLCIcons.topbar_filter
+
+            onClicked: {
+                if (searchBox.text == "")
+                    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
+
+        onClicked: {
+            searchBox.forceActiveFocus()
+        }
+
+        onEntered: {
+            expanded = true
+        }
+
+        onExited: {
+            if (searchBox.text == "")
+                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>



More information about the vlc-commits mailing list