GNOME.org
 

[gnome-text-editor] openpopover: implement updated popover designs

commit 4b15dc2f7056dde60740f59e9cda38e81352bfc9
Author: Christian Hergert <chergert redhat com>
Date:   Mon Nov 29 23:13:28 2021 -0800

    openpopover: implement updated popover designs
    
     * New layout
     * Make Down work
     * Show some sort of indicator of focus w/ list rows and keyboard nav
     * Constrain width of popover to be consistent
     * Clear search terms when displaying
     * Scroll to top of list when displaying
     * Make directory ellipsizing work
     * Remove age from row
     * Fix CSS styling for row borders
     * Empty state for search results
    
    Fixes #229

 src/TextEditor.css         |  18 +++++--
 src/editor-open-popover.c  |  75 ++++++++++++++++++++++----
 src/editor-open-popover.ui | 127 ++++++++++++++++++++++++---------------------
 src/editor-sidebar-row.ui  |  14 +++--
 4 files changed, 156 insertions(+), 78 deletions(-)
---
diff --git a/src/TextEditor.css b/src/TextEditor.css
index 3632e76..e59dd54 100644
--- a/src/TextEditor.css
+++ b/src/TextEditor.css
@@ -82,18 +82,28 @@
 
 /* EditorOpenPopover */
 
-.org-gnome-TextEditor .open-popover listview row {
+.org-gnome-TextEditor .open-popover contents {
+  padding: 0;
+}
+.org-gnome-TextEditor .open-popover scrolledwindow scrollbar.vertical {
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+.org-gnome-TextEditor .open-popover list row {
   border-bottom: 1px solid alpha(@borders, 0.4);
 }
-.org-gnome-TextEditor .open-popover listview row:last-child {
-  border-bottom: 1px solid transparent;
+.org-gnome-TextEditor .open-popover list row:last-child {
+  border-bottom: none;
 }
-.org-gnome-TextEditor .open-popover listview row button {
+.org-gnome-TextEditor .open-popover list row button {
   padding: 3px;
   margin: 0;
   min-height: 24px;
   min-width: 24px;
 }
+.org-gnome-TextEditor .open-popover list row:focus {
+  background: alpha(currentColor, .07);
+}
 
 
 /* EditorSearchBar */
diff --git a/src/editor-open-popover.c b/src/editor-open-popover.c
index e7705cc..1b47fc5 100644
--- a/src/editor-open-popover.c
+++ b/src/editor-open-popover.c
@@ -27,21 +27,21 @@
 #include "editor-session-private.h"
 #include "editor-sidebar-item-private.h"
 #include "editor-sidebar-row-private.h"
-#include "editor-window.h"
+#include "editor-window-private.h"
 
 struct _EditorOpenPopover
 {
-  GtkPopover      parent_instance;
+  GtkPopover         parent_instance;
 
-  GListModel     *model;
-  GListModel     *filtered_model;
+  GListModel        *model;
+  GListModel        *filtered_model;
 
-  GtkListBox     *list_box;
-  GtkWidget      *box;
-  GtkSearchEntry *search_entry;
-  GtkStack       *stack;
-  GtkWidget      *empty;
-  GtkWidget      *recent;
+  GtkListBox        *list_box;
+  GtkWidget         *box;
+  GtkSearchEntry    *search_entry;
+  GtkStack          *stack;
+  GtkWidget         *empty;
+  GtkScrolledWindow *recent;
 };
 
 G_DEFINE_TYPE (EditorOpenPopover, editor_open_popover, GTK_TYPE_POPOVER)
@@ -211,6 +211,46 @@ on_search_entry_stop_search_cb (EditorOpenPopover *self,
     }
 }
 
+static void
+editor_open_popover_show (GtkWidget *widget)
+{
+  EditorOpenPopover *self = (EditorOpenPopover *)widget;
+  GtkAdjustment *adj;
+
+  g_assert (EDITOR_IS_OPEN_POPOVER (self));
+
+  adj = gtk_scrolled_window_get_vadjustment (self->recent);
+  gtk_adjustment_set_value (adj, 0);
+
+  gtk_editable_set_text (GTK_EDITABLE (self->search_entry), "");
+
+  GTK_WIDGET_CLASS (editor_open_popover_parent_class)->show (widget);
+}
+
+static gboolean
+on_search_key_pressed_cb (EditorOpenPopover     *self,
+                          guint                  keyval,
+                          guint                  keycode,
+                          GdkModifierType        state,
+                          GtkEventControllerKey *key)
+{
+  g_assert (EDITOR_IS_OPEN_POPOVER (self));
+  g_assert (GTK_IS_EVENT_CONTROLLER_KEY (key));
+
+  if (keyval == GDK_KEY_Down || keyval == GDK_KEY_KP_Down)
+    {
+      GtkListBoxRow *row = gtk_list_box_get_row_at_index (self->list_box, 0);
+
+      if (row != NULL)
+        {
+          gtk_widget_grab_focus (GTK_WIDGET (row));
+          return TRUE;
+        }
+    }
+
+  return FALSE;
+}
+
 static void
 editor_open_popover_dispose (GObject *object)
 {
@@ -271,6 +311,8 @@ editor_open_popover_class_init (EditorOpenPopoverClass *klass)
   object_class->get_property = editor_open_popover_get_property;
   object_class->set_property = editor_open_popover_set_property;
 
+  widget_class->show = editor_open_popover_show;
+
   properties [PROP_MODEL] =
     g_param_spec_object ("model",
                          "Model",
@@ -296,7 +338,18 @@ editor_open_popover_class_init (EditorOpenPopoverClass *klass)
 static void
 editor_open_popover_init (EditorOpenPopover *self)
 {
+  GtkEventController *controller;
+
   gtk_widget_init_template (GTK_WIDGET (self));
+
+  controller = gtk_event_controller_key_new ();
+  g_signal_connect_object (controller,
+                           "key-pressed",
+                           G_CALLBACK (on_search_key_pressed_cb),
+                           self,
+                           G_CONNECT_SWAPPED);
+  gtk_event_controller_set_propagation_phase (controller, GTK_PHASE_CAPTURE);
+  gtk_widget_add_controller (GTK_WIDGET (self->search_entry), controller);
 }
 
 GListModel *
@@ -318,7 +371,7 @@ editor_open_popover_items_changed_cb (EditorOpenPopover *self,
   g_assert (G_IS_LIST_MODEL (model));
 
   if (added || g_list_model_get_n_items (model))
-    child = self->recent;
+    child = GTK_WIDGET (self->recent);
   else
     child = self->empty;
 
diff --git a/src/editor-open-popover.ui b/src/editor-open-popover.ui
index 34bd410..71b04ea 100644
--- a/src/editor-open-popover.ui
+++ b/src/editor-open-popover.ui
@@ -6,63 +6,88 @@
     </style>
     <property name="halign">start</property>
     <property name="valign">end</property>
+    <property name="width-request">320</property>
     <child>
       <object class="GtkBox" id="box">
-        <property name="margin-top">3</property>
-        <property name="margin-start">3</property>
-        <property name="margin-end">3</property>
-        <property name="margin-bottom">3</property>
         <property name="orientation">vertical</property>
         <child>
-          <object class="GtkLabel">
-            <property name="margin-top">3</property>
-            <property name="hexpand">true</property>
-            <property name="xalign">0</property>
-            <property name="label" translatable="yes">Recent Documents</property>
-            <attributes>
-              <attribute name="weight" value="bold"/>
-            </attributes>
+          <object class="GtkBox">
+            <property name="orientation">horizontal</property>
+            <property name="spacing">6</property>
+            <property name="margin-top">12</property>
+            <property name="margin-bottom">12</property>
+            <property name="margin-start">12</property>
+            <property name="margin-end">12</property>
+            <child>
+              <object class="GtkSearchEntry" id="search_entry">
+                <property name="hexpand">True</property>
+                <signal name="changed" handler="on_search_entry_changed_cb" swapped="true" 
object="EditorOpenPopover"/>
+                <signal name="activate" handler="on_search_entry_activate_cb" swapped="true" 
object="EditorOpenPopover"/>
+                <signal name="stop-search" handler="on_search_entry_stop_search_cb" swapped="true" 
object="EditorOpenPopover"/>
+              </object>
+            </child>
+            <child>
+              <object class="GtkButton">
+                <property name="icon-name">document-open-symbolic</property>
+                <property name="action-name">win.open</property>
+              </object>
+            </child>
           </object>
         </child>
         <child>
-          <object class="GtkSearchEntry" id="search_entry">
-            <property name="margin-top">9</property>
-            <property name="margin-bottom">9</property>
-            <property name="width-chars">25</property>
-            <signal name="changed" handler="on_search_entry_changed_cb" swapped="true" 
object="EditorOpenPopover"/>
-            <signal name="activate" handler="on_search_entry_activate_cb" swapped="true" 
object="EditorOpenPopover"/>
-            <signal name="stop-search" handler="on_search_entry_stop_search_cb" swapped="true" 
object="EditorOpenPopover"/>
+          <object class="GtkSeparator">
+            <property name="orientation">horizontal</property>
           </object>
         </child>
         <child>
-          <object class="GtkFrame">
+          <object class="GtkStack" id="stack">
+            <property name="vhomogeneous">false</property>
+            <property name="hhomogeneous">false</property>
             <child>
-              <object class="GtkStack" id="stack">
-                <property name="vhomogeneous">false</property>
-                <property name="hhomogeneous">false</property>
-                <child>
-                  <object class="GtkLabel" id="empty">
-                    <property name="label" translatable="yes">No Recent Documents</property>
-                    <property name="margin-start">6</property>
-                    <property name="margin-top">42</property>
-                    <property name="margin-bottom">42</property>
-                    <property name="margin-end">6</property>
-                  </object>
-                </child>
+              <object class="GtkLabel" id="empty">
+                <property name="label" translatable="yes">No Recent Documents</property>
+                <property name="margin-start">6</property>
+                <property name="margin-top">42</property>
+                <property name="margin-bottom">42</property>
+                <property name="margin-end">6</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkScrolledWindow" id="recent">
+                <property name="hexpand">True</property>
+                <property name="hscrollbar-policy">never</property>
+                <property name="max-content-height">600</property>
+                <property name="max-content-width">250</property>
+                <property name="min-content-width">250</property>
+                <property name="propagate-natural-height">True</property>
+                <property name="vexpand">True</property>
                 <child>
-                  <object class="GtkScrolledWindow" id="recent">
-                    <property name="hexpand">True</property>
-                    <property name="hscrollbar-policy">never</property>
-                    <property name="max-content-height">600</property>
-                    <property name="max-content-width">500</property>
-                    <property name="propagate-natural-height">True</property>
-                    <property name="propagate-natural-width">True</property>
-                    <property name="vexpand">True</property>
+                  <object class="GtkViewport">
                     <child>
-                      <object class="GtkListBox" id="list_box">
-                        <signal name="row-activated" handler="on_list_box_row_activated_cb" swapped="true" 
object="EditorOpenPopover"/>
-                        <property name="activate-on-single-click">True</property>
-                        <property name="selection-mode">none</property>
+                      <object class="GtkFrame">
+                        <property name="margin-top">12</property>
+                        <property name="margin-bottom">12</property>
+                        <property name="margin-start">12</property>
+                        <property name="margin-end">12</property>
+                        <child>
+                          <object class="GtkListBox" id="list_box">
+                            <signal name="row-activated" handler="on_list_box_row_activated_cb" 
swapped="true" object="EditorOpenPopover"/>
+                            <property name="activate-on-single-click">True</property>
+                            <property name="selection-mode">none</property>
+                            <child type="placeholder">
+                              <object class="GtkLabel">
+                                <property name="label" translatable="yes">No Results Found</property>
+                                <property name="margin-start">6</property>
+                                <property name="margin-top">42</property>
+                                <property name="margin-bottom">42</property>
+                                <property name="margin-end">6</property>
+                                <style>
+                                  <class name="dim-label"/>
+                                </style>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
                       </object>
                     </child>
                   </object>
@@ -71,20 +96,6 @@
             </child>
           </object>
         </child>
-        <child>
-          <object class="GtkSeparator">
-            <property name="margin-top">9</property>
-            <property name="margin-bottom">9</property>
-            <property name="orientation">horizontal</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkButton">
-            <property name="label" translatable="yes">Br_owse Files…</property>
-            <property name="use-underline">True</property>
-            <property name="action-name">win.open</property>
-          </object>
-        </child>
       </object>
     </child>
   </template>
diff --git a/src/editor-sidebar-row.ui b/src/editor-sidebar-row.ui
index 847090f..f7a2082 100644
--- a/src/editor-sidebar-row.ui
+++ b/src/editor-sidebar-row.ui
@@ -30,7 +30,7 @@
         <child>
           <object class="GtkLabel" id="title">
             <property name="halign">start</property>
-            <property name="ellipsize">end</property>
+            <property name="ellipsize">start</property>
             <property name="hexpand">true</property>
             <layout>
               <property name="column">1</property>
@@ -40,9 +40,12 @@
         </child>
         <child>
           <object class="GtkLabel" id="subtitle">
-            <property name="halign">start</property>
-            <property name="ellipsize">middle</property>
+            <property name="ellipsize">end</property>
+            <property name="width-chars">25</property>
+            <property name="max-width-chars">25</property>
             <property name="hexpand">true</property>
+            <property name="single-line-mode">True</property>
+            <property name="xalign">0</property>
             <style>
               <class name="dim-label"/>
             </style>
@@ -51,7 +54,7 @@
             </attributes>
             <layout>
               <property name="row">1</property>
-              <property name="column">2</property>
+              <property name="column">1</property>
             </layout>
           </object>
         </child>
@@ -59,6 +62,7 @@
           <object class="GtkLabel" id="age">
             <property name="valign">center</property>
             <property name="halign">end</property>
+            <property name="visible">false</property>
             <attributes>
               <attribute name="scale" value="0.8333"/>
             </attributes>
@@ -66,7 +70,7 @@
               <class name="dim-label"/>
             </style>
             <layout>
-              <property name="column">1</property>
+              <property name="column">2</property>
               <property name="row">1</property>
             </layout>
           </object>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]