[ui] GraphEditor: Graph Editor gets the toggle based search

Search bar is now placed in the bottom pane of the Graph Editor making it non-obstructing for navigating nodes across Graph Editor

meshroom/ui/qml/GraphEditor/GraphEditor.qml

@@ -1005,7 +1005,11 @@ Item {
         padding: 2
         anchors.bottom: parent.bottom
         RowLayout {
+            id: navigation
             spacing: 4
+
+            // Default index for search
+            property int currentIndex: -1
             // Fit
             MaterialToolButton {
                 text: MaterialIcons.fullscreen
@@ -1044,7 +1048,7 @@ Item {
                         ComboBox {
                             flat: true
                             model: ['Minimum', 'Maximum']
-                            implicitWidth: 80
+                            implicitWidth: 85
                             currentIndex: uigraph ? uigraph.layout.depthMode : -1
                             onActivated: {
                                 uigraph.layout.depthMode = currentIndex
@@ -1071,26 +1075,29 @@ Item {
                     uigraph.setSelectedNodesColor(color)
                 }
             }
-        }
+
+            // Separator
+            Rectangle {
+                Layout.fillHeight: true
+                Layout.margins: 2
+                implicitWidth: 1
+                color: activePalette.window
             }
 
-    // Graph Nodes Search
-    FloatingPane {
-        id: navigation
-        padding: 2
-        anchors.top: parent.top
-
-        property int currentIndex: -1
-
-        RowLayout {
-            spacing: 0
-
+            // Search nodes in the graph
             SearchBar {
                 id: graphSearchBar
-                Layout.minimumWidth: 150
-                width: 150
+  
+                toggle: true // enable toggling the actual text field by the search button
+                Layout.minimumWidth: graphSearchBar.width
+                maxWidth: 150
+
                 textField.background.opacity: 0.5
                 textField.onTextChanged: navigation.currentIndex = -1
+
+                onAccepted: {
+                    nextArrow.clicked()
+                }
             }
 
             MaterialToolButton {
@@ -1124,8 +1131,6 @@ Item {
                 visible: graphSearchBar.text !== ""
             }
 
-        }
-
             Repeater {
                 id: filteredNodes
                 model: SortFilterDelegateModel {
@@ -1133,6 +1138,7 @@ Item {
                     sortRole: "label"
                     filters: [{role: "label", value: graphSearchBar.text}]
                     delegate: Item {
+                        visible: false  // Hide the items to not affect the layout as the nodes model gets changes
                         property var index_: index
                     }
                     function modelData(item, roleName_) {
@@ -1152,6 +1158,7 @@ Item {
                 draggable.y = bbox.y*draggable.scale * -1 + (root.height - bbox.height * draggable.scale) * 0.5
             }
         }
+    }
 
     function registerAttributePin(attribute, pin) {
         root._attributeToDelegate[attribute] = pin