Add search bar to UI

Author: wawanbreton

CuraOnshapePlugin.pyproject

@@ -37,6 +37,7 @@
         "resources/qml/SettingsDialog.qml",
         "i18n/onshape.pot",
         "i18n/fr_FR/onshape.po",
-        "resources/qml/DocumentsActions.qml"
+        "resources/qml/DocumentsActions.qml",
+        "resources/qml/SearchBar.qml"
     ]
 }

resources/qml/MainDialog.qml

@@ -18,6 +18,7 @@ Window
     height: 768 * screenScaleFactor
     minimumWidth: 800 * screenScaleFactor
     minimumHeight: 600 * screenScaleFactor
+    color: UM.Theme.getColor("main_background")
 
     UM.I18nCatalog{id: catalog; name:"onshape"}
 
@@ -26,7 +27,6 @@ Window
         sequence: "Esc"
         onActivated: root.close()
     }
-    color: UM.Theme.getColor("main_background")
 
     ConnectionItem
     {
@@ -51,6 +51,11 @@ Window
                 documentsModel: documentsListStack.currentItem.documentsModel
             }
 
+            SearchBar
+            {
+                Layout.fillWidth: true
+            }
+
             StackView
             {
                 id: documentsListStack

resources/qml/SearchBar.qml

@@ -0,0 +1,91 @@
+# Copyright (c) 2025 Erwan MATHIEU
+
+import QtQuick 2.15
+import QtQuick.Window 2.2
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.15
+
+import Cura 1.5 as Cura
+import UM 1.5 as UM
+
+
+Item
+{
+    id: root
+    implicitHeight: filter.implicitHeight + 2 * UM.Theme.getSize("default_margin").width
+
+    UM.I18nCatalog{id: catalog; name:"onshape"}
+
+    Timer
+    {
+        id: settingsSearchTimer
+        onTriggered: root.doSearch()
+        interval: 500
+        running: false
+        repeat: false
+    }
+
+    Cura.TextField
+    {
+        id: filter
+        implicitWidth: UM.Theme.getSize("print_setup_big_item").width
+        implicitHeight: UM.Theme.getSize("print_setup_big_item").height
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.margins: UM.Theme.getSize("default_margin").width
+        leftPadding: searchIcon.width + UM.Theme.getSize("default_margin").width * 2
+        placeholderText: catalog.i18nc("@textfield:placeholder", "Search")
+        font: UM.Theme.getFont("default_italic")
+
+        UM.ColorImage
+        {
+            id: searchIcon
+
+            anchors
+            {
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                leftMargin: UM.Theme.getSize("default_margin").width
+            }
+            source: UM.Theme.getIcon("Magnifier")
+            height: UM.Theme.getSize("small_button_icon").height
+            width: height
+            color: UM.Theme.getColor("text")
+        }
+
+        onTextChanged: settingsSearchTimer.restart()
+
+        onEditingFinished: root.doSearch()
+
+        Keys.onEscapePressed: filter.text = ""
+    }
+
+    UM.SimpleButton
+    {
+        id: clearFilterButton
+        iconSource: UM.Theme.getIcon("Cancel")
+        visible: filter.text !== ""
+
+        height: Math.round(filter.height * 0.4)
+        width: height
+
+        anchors.verticalCenter: filter.verticalCenter
+        anchors.right: filter.right
+        anchors.rightMargin: UM.Theme.getSize("default_margin").width
+
+        color: UM.Theme.getColor("setting_control_button")
+        hoverColor: UM.Theme.getColor("setting_control_button_hover")
+
+        onClicked:
+        {
+            filter.text = ""
+            filter.forceActiveFocus()
+            root.doSearch()
+        }
+    }
+
+    function doSearch()
+    {
+        console.debug("Search " + filter.text)
+    }
+}