vlc | branch: master | Adrien Maglo <[email protected]> | 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 <[email protected]> > 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> _______________________________________________ vlc-commits mailing list [email protected] https://mailman.videolan.org/listinfo/vlc-commits
