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

5 files changed, 51 insertions, 52 deletions

diff --git a/src/nautilus-name-cell.c b/src/nautilus-name-cell.c
index c758f1312..553628bd4 100644
--- a/src/nautilus-name-cell.c
+++ b/src/nautilus-name-cell.c
@@ -20,6 +20,7 @@ struct _NautilusNameCell
     GtkWidget *icon;
     GtkWidget *label;
     GtkWidget *emblems_box;
+    GtkWidget *snippet_button;
     GtkWidget *snippet;
     GtkWidget *path;
 
@@ -88,29 +89,6 @@ get_path_text (NautilusFile *file,
     return g_steal_pointer (&path);
 }
 
-static gchar *
-get_fts_snippet (NautilusFile *file)
-{
-    const gchar *snippet;
-    g_autoptr (GRegex) regex = NULL;
-
-    snippet = nautilus_file_get_search_fts_snippet (file);
-    if (snippet == NULL)
-    {
-        return NULL;
-    }
-
-    /* Flatten the text by replacing new lines with spaces */
-    regex = g_regex_new ("\\R+", 0, G_REGEX_MATCH_NEWLINE_ANY, NULL);
-    return g_regex_replace (regex,
-                            snippet,
-                            -1,
-                            0,
-                            " ",
-                            G_REGEX_MATCH_NEWLINE_ANY,
-                            NULL);
-}
-
 static void
 update_labels (NautilusNameCell *self)
 {
@@ -118,7 +96,7 @@ update_labels (NautilusNameCell *self)
     NautilusFile *file;
     g_autofree gchar *display_name = NULL;
     g_autofree gchar *path_text = NULL;
-    g_autofree gchar *fts_snippet = NULL;
+    const gchar *fts_snippet = NULL;
 
     item = nautilus_view_cell_get_item (NAUTILUS_VIEW_CELL (self));
     g_return_if_fail (item != NULL);
@@ -130,7 +108,7 @@ update_labels (NautilusNameCell *self)
                                self->file_path_base_location);
     if (self->show_snippet)
     {
-        fts_snippet = get_fts_snippet (file);
+        fts_snippet = nautilus_file_get_search_fts_snippet (file);
     }
 
     gtk_label_set_text (GTK_LABEL (self->label), display_name);
@@ -138,7 +116,7 @@ update_labels (NautilusNameCell *self)
     gtk_label_set_text (GTK_LABEL (self->snippet), fts_snippet);
 
     gtk_widget_set_visible (self->path, (path_text != NULL));
-    gtk_widget_set_visible (self->snippet, (fts_snippet != NULL));
+    gtk_widget_set_visible (self->snippet_button, (fts_snippet != NULL));
 }
 
 static void
@@ -320,6 +298,7 @@ nautilus_name_cell_class_init (NautilusNameCellClass *klass)
     gtk_widget_class_bind_template_child (widget_class, NautilusNameCell, icon);
     gtk_widget_class_bind_template_child (widget_class, NautilusNameCell, label);
     gtk_widget_class_bind_template_child (widget_class, NautilusNameCell, emblems_box);
+    gtk_widget_class_bind_template_child (widget_class, NautilusNameCell, snippet_button);
     gtk_widget_class_bind_template_child (widget_class, NautilusNameCell, snippet);
     gtk_widget_class_bind_template_child (widget_class, NautilusNameCell, path);
 }
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>