[vlc-commits] [Git][videolan/vlc][master] qml: refactor SearchBox

Hugo Beauzée-Luyssen (@chouquette) gitlab at videolan.org
Mon Jan 17 14:05:53 UTC 2022



Hugo Beauzée-Luyssen pushed to branch master at VideoLAN / VLC


Commits:
c5ebfdf6 by Fatih Uzunoglu at 2022-01-17T13:48:59+00:00
qml: refactor SearchBox

- - - - -


2 changed files:

- modules/gui/qt/maininterface/qml/BannerSources.qml
- modules/gui/qt/widgets/qml/SearchBox.qml


Changes:

=====================================
modules/gui/qt/maininterface/qml/BannerSources.qml
=====================================
@@ -58,7 +58,7 @@ FocusScope {
     }
 
     function search() {
-        searchBox.reqExpand()
+        searchBox.state = "expanded"
     }
 
     Binding {
@@ -395,10 +395,8 @@ FocusScope {
 
                             Widgets.SearchBox {
                                 id: searchBox
-                                visible: root.contentModel !== undefined
-                                enabled: visible
+                                visible: !!root.contentModel
                                 height: VLCStyle.bannerButton_height
-                                width: searchBox.implicitWith
                                 buttonWidth: VLCStyle.bannerButton_width
                             }
 


=====================================
modules/gui/qt/widgets/qml/SearchBox.qml
=====================================
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Copyright (C) 2019 VLC authors and VideoLAN
+ * Copyright (C) 2021 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
@@ -28,114 +28,127 @@ FocusScope {
     id: root
 
     implicitWidth: content.implicitWidth
+    implicitHeight: content.implicitHeight
+
+    property alias buttonWidth: iconButton.implicitWidth
+    property alias searchPattern: textField.text
+
+    property bool _widthOverridden: false
+    onWidthChanged: {
+        // Proper way of this would be checking if width is bound to implicitWidth
+        if (width === implicitWidth)
+            _widthOverridden = false
+        else
+            _widthOverridden = true
+    }
 
-    property alias buttonWidth: icon.width
-    property alias searchPattern: searchBox.text
-
-    property bool _expanded: false
+    states: State {
+        name: "expanded"
 
-    function reqExpand() {
-        if (visible)
-            _expanded = true
-    }
+        PropertyChanges {
+            target: textField
 
-    on_ExpandedChanged: {
-        if (_expanded) {
-            searchBox.forceActiveFocus(Qt.ShortcutFocusReason)
-            animateExpand.start()
-        } else {
-            searchBox.clear()
-            icon.focus = true
-            searchBox.focus = false
-            animateRetract.start()
+            focus: true
+            // Take care if SearchBox was set a specific width:
+            width: (root._widthOverridden ? (content.width - iconButton.width) : textField.implicitWidth)
         }
-    }
 
-    onActiveFocusChanged: {
-        if (!activeFocus && searchBox.text == "") {
-            _expanded = false
-        }
-    }
+        PropertyChanges {
+            target: iconButton
 
-    SmoothedAnimation {
-        id: animateExpand;
-        target: searchBoxRect;
-        properties: "width"
-        duration: VLCStyle.duration_faster
-        to: VLCStyle.widthSearchInput
-        easing.type: Easing.InSine
-        onStarted: {
-            searchBoxRect.visible = true
+            highlighted: true
         }
     }
 
-    SmoothedAnimation {
-        id: animateRetract;
-        target: searchBoxRect;
-        properties: "width"
-        duration: VLCStyle.duration_faster
-        to: 0
-        easing.type: Easing.OutSine
-        onStopped: {
-            searchBoxRect.visible = false
+    transitions: Transition {
+        from: ""; to: "expanded"
+        reversible: true
+
+        SequentialAnimation {
+            NumberAnimation { property: "width"; easing.type: Easing.InOutSine; duration: VLCStyle.duration_normal; }
+            PropertyAction { property: "highlighted" }
+            PropertyAction { property: "focus" }
         }
     }
 
-
     Row {
         id: content
+        anchors.fill: parent
 
-        Rectangle {
-            id: searchBoxRect
-            color: VLCStyle.colors.button
+        layoutDirection: Qt.RightToLeft // anchor iconButton to right
+
+        Widgets.IconToolButton {
+            id: iconButton
 
-            anchors.verticalCenter: parent.verticalCenter
-            visible: false
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
 
+            size: VLCStyle.banner_icon_size
+
+            iconText: VLCIcons.search
+            text: I18n.qtr("Filter")
+
+            focus: root.state === ""
+
+            Navigation.parentItem: root
+            Navigation.leftItem: textField
+
+            onClicked: {
+                textField.clear()
+                root.state = (root.state === "") ? "expanded" : ""
+            }
+        }
+
+        TextField {
+            id: textField
+
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+
+            implicitWidth: VLCStyle.widthSearchInput
             width: 0
-            implicitHeight: searchBox.height
 
-            border.color: searchBox.activeFocus ? VLCStyle.colors.accent : VLCStyle.colors.buttonBorder
+            visible: (width > 0)
 
-            TextField {
-                id: searchBox
+            padding: VLCStyle.dp(6)
+            leftPadding: padding + VLCStyle.dp(4)
+            rightPadding: (textField.width - clearButton.x)
 
-                enabled: root._expanded
+            font.pixelSize: VLCStyle.fontSize_normal
 
-                anchors.fill: searchBoxRect
-                anchors.rightMargin: clearButton.visible ? (VLCStyle.margin_xxsmall + clearButton.width) : 0
+            palette.text: VLCStyle.colors.buttonText
+            palette.highlightedText: VLCStyle.colors.bgHoverText
+            palette.base: VLCStyle.colors.button
+            palette.highlight: VLCStyle.colors.accent
+            palette.mid: VLCStyle.colors.buttonBorder
 
-                font.pixelSize: VLCStyle.fontSize_normal
+            selectByMouse: true
 
-                palette.text: VLCStyle.colors.buttonText
-                palette.highlight: VLCStyle.colors.bgHover
-                palette.highlightedText: VLCStyle.colors.bgHoverText
+            placeholderText: I18n.qtr("filter")
 
-                selectByMouse: true
+            Navigation.parentItem: root
+            Navigation.rightItem: clearButton.visible ? clearButton : iconButton
+            Navigation.cancelAction: function() { root.state = "" }
 
-                placeholderText: I18n.qtr("filter")
+            Keys.priority: Keys.AfterItem
+            Keys.onPressed: {
+                //we don't want Navigation.cancelAction to match Backspace
+                if (event.matches(StandardKey.Backspace))
+                    event.accepted = true
+                Navigation.defaultKeyAction(event)
+            }
 
-                background: Rectangle { color: "transparent" }
+            Keys.onReleased: {
+                //we don't want Navigation.cancelAction to match Backspace
+                if (event.matches(StandardKey.Backspace))
+                    event.accepted = true
+                Navigation.defaultKeyReleaseAction(event)
+            }
 
-                Navigation.parentItem: root
-                Navigation.rightItem: clearButton.visible ? clearButton : icon
-                Navigation.cancelAction: function() { _expanded = false }
-                Keys.priority: Keys.AfterItem
-                Keys.onPressed: {
-                    //we don't want Navigation.cancelAction to match Backspace
-                    if (event.matches(StandardKey.Backspace)) {
-                        return
-                    }
-                    Navigation.defaultKeyAction(event)
-                }
+            Component.onCompleted: {
+                background.border.width = Qt.binding(function() { return root.activeFocus ? VLCStyle.dp(2)
+                                                                                          : VLCStyle.dp(1) })
 
-                Keys.onReleased: {
-                    //we don't want Navigation.cancelAction to match Backspace
-                    if (event.matches(StandardKey.Backspace)) {
-                        return
-                    }
-                    Navigation.defaultKeyReleaseAction(event)
-                }
             }
 
             Widgets.IconToolButton {
@@ -148,43 +161,18 @@ FocusScope {
                 size: VLCStyle.icon_small
                 iconText: VLCIcons.close
 
-                visible: ( _expanded && searchBox.text.length > 0 )
-                enabled: visible
+                visible: (textField.text.length > 0)
 
-                onClicked: {
-                    searchBox.clear()
+                onVisibleChanged: {
+                    if (!visible && parent.visible) {
+                        parent.focus = true
+                    }
                 }
+                onClicked: textField.clear()
 
-                Navigation.parentItem: root
-                Navigation.leftItem: searchBox
-                Navigation.rightItem: icon
-                Keys.priority: Keys.AfterItem
-                Keys.onPressed: Navigation.defaultKeyAction(event)
-            }
-        }
-
-        Widgets.IconToolButton {
-            id: icon
-
-            height: root.height
-
-            size: VLCStyle.banner_icon_size
-
-            iconText: VLCIcons.search
-            text: I18n.qtr("Filter")
-
-            focus: true
-
-            Keys.priority: Keys.AfterItem
-            Keys.onPressed: Navigation.defaultKeyAction(event)
-
-            Navigation.parentItem: root
-            Navigation.leftItem: (_expanded) ? searchBox : null
-
-            onClicked: {
-                searchBox.clear();
-
-                _expanded = !_expanded;
+                Navigation.parentItem: textField
+                Navigation.leftItem: textField
+                Navigation.rightItem: iconButton
             }
         }
     }



View it on GitLab: https://code.videolan.org/videolan/vlc/-/commit/c5ebfdf63e919b81931981f2efe29a80b608e428

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/commit/c5ebfdf63e919b81931981f2efe29a80b608e428
You're receiving this email because of your account on code.videolan.org.




More information about the vlc-commits mailing list