name-cell: Redesign search list

Move path to bottom, because it's a caption for the filename, not a title.

Move FTS snipped into a popover, to avoid changing the row layout.

Closes: https://gitlab.gnome.org/GNOME/nautilus/-/issues/2354

4 files changed, 46 insertions, 26 deletions

diff --git a/src/resources/css/Adwaita.css b/src/resources/css/Adwaita.css
index f787a197f..300394299 100644
--- a/src/resources/css/Adwaita.css
+++ b/src/resources/css/Adwaita.css
@@ -212,6 +212,17 @@
   padding: 6px;
 }
 
+.nautilus-list-view menubutton.fts-snippet > button {
+  border-radius: 100px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.nautilus-list-view menubutton.fts-snippet > popover > * {
+  padding: 18px;
+}
+
 /* Both views */
 .nautilus-list-view:drop(active),
 .nautilus-grid-view:drop(active) {
diff --git a/src/resources/icons/quotation-symbolic.svg b/src/resources/icons/quotation-symbolic.svg
new file mode 100644
index 000000000..cc92cdd3c
--- /dev/null
+++ b/src/resources/icons/quotation-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 1 3 l -1 3 v 2.5 c 0 0.277344 0.222656 0.5 0.5 0.5 h 2 c 0.277344 0 0.5 -0.222656 0.5 -0.5 v -2 c 0 -0.277344 -0.222656 -0.5 -0.5 -0.5 h -0.5 l 1 -3 z m 4 0 l -1 3 v 2.5 c 0 0.277344 0.222656 0.5 0.5 0.5 h 2 c 0.277344 0 0.5 -0.222656 0.5 -0.5 v -2 c 0 -0.277344 -0.222656 -0.5 -0.5 -0.5 h -0.5 l 1 -3 z m 4.5 4 c -0.277344 0 -0.5 0.222656 -0.5 0.5 v 2 c 0 0.277344 0.222656 0.5 0.5 0.5 h 0.5 l -1 3 h 2 l 1 -3 v -2.5 c 0 -0.277344 -0.222656 -0.5 -0.5 -0.5 z m 4 0 c -0.277344 0 -0.5 0.222656 -0.5 0.5 v 2 c 0 0.277344 0.222656 0.5 0.5 0.5 h 0.5 l -1 3 h 2 l 1 -3 v -2.5 c 0 -0.277344 -0.222656 -0.5 -0.5 -0.5 z m 0 0" fill="#222222"/></svg>
diff --git a/src/resources/nautilus.gresource.xml b/src/resources/nautilus.gresource.xml
index 3a6abce9a..cf54b6f52 100644
--- a/src/resources/nautilus.gresource.xml
+++ b/src/resources/nautilus.gresource.xml
@@ -35,6 +35,7 @@
     <file>Checkerboard.png</file>
   </gresource>
   <gresource prefix="/org/gnome/nautilus/icons/scalable/actions/">
+    <file alias="quotation-symbolic.svg" preprocess="xml-stripblanks">icons/quotation-symbolic.svg</file>
     <file alias="funnel-symbolic.svg" preprocess="xml-stripblanks">icons/funnel-symbolic.svg</file>
     <file alias="external-link-symbolic.svg" preprocess="xml-stripblanks">icons/external-link-symbolic.svg</file>
   </gresource>
diff --git a/src/resources/ui/nautilus-name-cell.ui b/src/resources/ui/nautilus-name-cell.ui
index 4313b92d6..f2105fb55 100644
--- a/src/resources/ui/nautilus-name-cell.ui
+++ b/src/resources/ui/nautilus-name-cell.ui
@@ -33,25 +33,6 @@
               <class name="column-name-labels-box"/>
             </style>
             <child>
-              <object class="GtkLabel" id="path">
-                <property name="visible">False</property>
-                <property name="ellipsize">start</property>
-                <property name="justify">left</property>
-                <property name="lines">2</property>
-                <property name="wrap">True</property>
-                <property name="wrap-mode">word-char</property>
-                <property name="halign">fill</property>
-                <property name="xalign">0.0</property>
-                <attributes>
-                  <attribute name="insert-hyphens" value="false"></attribute>
-                </attributes>
-                <style>
-                  <class name="caption"/>
-                  <class name="dim-label"/>
-                </style>
-              </object>
-            </child>
-            <child>
               <object class="GtkBox">
                 <property name="orientation">horizontal</property>
                 <property name="halign">fill</property>
@@ -80,23 +61,48 @@
               </object>
             </child>
             <child>
-              <object class="GtkLabel" id="snippet">
+              <object class="GtkLabel" id="path">
                 <property name="visible">False</property>
-                <property name="ellipsize">end</property>
+                <property name="ellipsize">start</property>
                 <property name="justify">left</property>
-                <property name="lines">2</property>
-                <property name="wrap">True</property>
-                <property name="wrap-mode">word</property>
                 <property name="halign">fill</property>
                 <property name="xalign">0.0</property>
+                <attributes>
+                  <attribute name="insert-hyphens" value="false"></attribute>
+                </attributes>
                 <style>
-                  <class name="caption-heading"/>
-                  <class name="accent"/>
+                  <class name="caption"/>
+                  <class name="dim-label"/>
                 </style>
               </object>
             </child>
           </object>
         </child>
+        <child>
+          <object class="GtkMenuButton" id="snippet_button">
+            <property name="tooltip-text" translatable="yes">Full text match</property>
+            <property name="visible">False</property>
+            <property name="icon-name">quotation-symbolic</property>
+            <property name="valign">center</property>
+            <style>
+              <class name="fts-snippet"/>
+            </style>
+            <property name="popover">
+              <object class="GtkPopover">
+                <child>
+                  <object class="GtkLabel" id="snippet">
+                    <property name="ellipsize">none</property>
+                    <property name="justify">left</property>
+                    <property name="max-width-chars">65</property>
+                    <property name="lines">10</property>
+                    <property name="wrap">True</property>
+                    <property name="wrap-mode">word</property>
+                  </object>
+                </child>
+              </object>
+            </property>
+          </object>
+        </child>
       </object>
     </child>
   </template>