[epiphany/wip/exalm/extensions: 3/3] web-extensions-dialog: Polish the UI

From: Alexander Mikhaylenko <alexm src gnome org>
To: commits-list gnome org
Cc:
Subject: [epiphany/wip/exalm/extensions: 3/3] web-extensions-dialog: Polish the UI
Date: Mon, 1 Feb 2021 14:01:27 +0000 (UTC)

commit 7403bdc4b6f8d7f590eefc8e2bb4212d2b4ac63f
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Mon Feb 1 18:13:49 2021 +0500

    web-extensions-dialog: Polish the UI
    
    * Add window title
    * Don't hardcode decoration layout
    * Use proper margins via HdyPreferencesPage
    * Add mnemonics on the Add and Remove buttons
    * Don't allow list selection to not mess up styles
    * Add an empty state
    * Use a newer link row pattern
    * Reduce extension icon size
    * Cleanups
    
    Fixes https://gitlab.gnome.org/GNOME/epiphany/-/issues/1437

 src/ephy-web-extension-dialog.c            | 46 +++++++++++++++++++++------
 src/resources/ephy-open-link-symbolic.svg  | 46 +++++++++++++++++++++++++++
 src/resources/epiphany.gresource.xml       |  1 +
 src/resources/gtk/web-extensions-dialog.ui | 51 ++++++++++++++++++------------
 4 files changed, 114 insertions(+), 30 deletions(-)
---
diff --git a/src/ephy-web-extension-dialog.c b/src/ephy-web-extension-dialog.c
index 5da67a530..2496766f3 100644
--- a/src/ephy-web-extension-dialog.c
+++ b/src/ephy-web-extension-dialog.c
@@ -34,8 +34,7 @@ struct _EphyWebExtensionDialog {
   EphyWebExtensionManager *web_extension_manager;
 
   GtkWidget *listbox;
-  GtkWidget *add_button;
-  GtkWidget *remove_button;
+  GtkStack *stack;
 };
 
 G_DEFINE_TYPE (EphyWebExtensionDialog, ephy_web_extension_dialog, HDY_TYPE_WINDOW)
@@ -63,7 +62,7 @@ on_remove_button_clicked (GtkButton *button,
   GtkWidget *widget;
   gint res;
 
-  row = gtk_list_box_get_selected_row (GTK_LIST_BOX (self->listbox));
+  row = g_object_get_data (G_OBJECT (button), "row");
   if (!row)
     return;
 
@@ -104,6 +103,23 @@ toggle_state_set_cb (GtkSwitch *widget,
   ephy_web_extension_manager_set_active (manager, web_extension, state);
 }
 
+static void
+homepage_activated_cb (HdyActionRow *row,
+                       gpointer      user_data)
+{
+  EphyWebExtensionDialog *self = EPHY_WEB_EXTENSION_DIALOG (user_data);
+  EphyWebExtension *web_extension = g_object_get_data (G_OBJECT (row), "web_extension");
+  g_autoptr (GError) error = NULL;
+
+  gtk_show_uri_on_window (GTK_WINDOW (self),
+                          ephy_web_extension_get_homepage_url (web_extension),
+                          GDK_CURRENT_TIME,
+                          &error);
+
+  if (error)
+    g_critical ("Couldn't to open homepage: %s", error->message);
+}
+
 static GtkWidget *
 create_row (EphyWebExtensionDialog *self,
             EphyWebExtension       *web_extension)
@@ -113,7 +129,7 @@ create_row (EphyWebExtensionDialog *self,
   GtkWidget *image;
   GtkWidget *toggle;
   GtkWidget *button;
-  GtkWidget *homepage;
+  GtkWidget *homepage_icon;
   GtkWidget *author;
   GtkWidget *version;
   g_autoptr (GdkPixbuf) icon = NULL;
@@ -126,8 +142,9 @@ create_row (EphyWebExtensionDialog *self,
   gtk_widget_set_tooltip_text (GTK_WIDGET (row), ephy_web_extension_get_name (web_extension));
 
   /* Icon */
-  icon = ephy_web_extension_get_icon (web_extension, 48);
-  image = icon ? gtk_image_new_from_pixbuf (icon) : gtk_image_new_from_icon_name 
("application-x-addon-symbolic", GTK_ICON_SIZE_DIALOG);
+  icon = ephy_web_extension_get_icon (web_extension, 32);
+  image = icon ? gtk_image_new_from_pixbuf (icon) : gtk_image_new_from_icon_name 
("application-x-addon-symbolic", GTK_ICON_SIZE_DND);
+  gtk_image_set_pixel_size (GTK_IMAGE (image), 32);
   hdy_expander_row_add_prefix (HDY_EXPANDER_ROW (row), image);
 
   /* Titles */
@@ -156,6 +173,7 @@ create_row (EphyWebExtensionDialog *self,
   gtk_container_add (GTK_CONTAINER (row), sub_row);
   hdy_preferences_row_set_title (HDY_PREFERENCES_ROW (sub_row), _("Version"));
   version = gtk_label_new (ephy_web_extension_get_version (web_extension));
+  dzl_gtk_widget_add_style_class (version, "dim-label");
   gtk_container_add (GTK_CONTAINER (sub_row), version);
 
   /* Homepage url */
@@ -163,20 +181,25 @@ create_row (EphyWebExtensionDialog *self,
     sub_row = hdy_action_row_new ();
     gtk_container_add (GTK_CONTAINER (row), sub_row);
     hdy_preferences_row_set_title (HDY_PREFERENCES_ROW (sub_row), _("Homepage"));
-    homepage = gtk_link_button_new_with_label (ephy_web_extension_get_homepage_url (web_extension), 
_("Open"));
-    gtk_container_add (GTK_CONTAINER (sub_row), homepage);
+    gtk_list_box_row_set_activatable (GTK_LIST_BOX_ROW (sub_row), TRUE);
+    g_signal_connect (sub_row, "activated", G_CALLBACK (homepage_activated_cb), self);
+    homepage_icon = gtk_image_new_from_icon_name ("ephy-open-link-symbolic", GTK_ICON_SIZE_BUTTON);
+    dzl_gtk_widget_add_style_class (homepage_icon, "dim-label");
+    gtk_container_add (GTK_CONTAINER (sub_row), homepage_icon);
+    g_object_set_data (G_OBJECT (sub_row), "web_extension", web_extension);
   }
 
   /* Remove button */
   sub_row = hdy_action_row_new ();
   gtk_container_add (GTK_CONTAINER (row), sub_row);
 
-  button = gtk_button_new_with_label (_("Remove"));
+  button = gtk_button_new_with_mnemonic (_("_Remove"));
   gtk_widget_set_valign (GTK_WIDGET (button), GTK_ALIGN_CENTER);
   dzl_gtk_widget_add_style_class (button, GTK_STYLE_CLASS_DESTRUCTIVE_ACTION);
   g_signal_connect (button, "clicked", G_CALLBACK (on_remove_button_clicked), self);
   gtk_widget_set_tooltip_text (button, _("Remove selected WebExtension"));
   gtk_container_add (GTK_CONTAINER (sub_row), button);
+  g_object_set_data (G_OBJECT (button), "row", row);
 
   gtk_widget_show_all (GTK_WIDGET (row));
 
@@ -187,6 +210,7 @@ static void
 ephy_web_extension_dialog_refresh_listbox (EphyWebExtensionDialog *self)
 {
   GList *extensions = ephy_web_extension_manager_get_web_extensions (self->web_extension_manager);
+  gboolean empty = TRUE;
 
   clear_listbox (self->listbox);
 
@@ -196,7 +220,10 @@ ephy_web_extension_dialog_refresh_listbox (EphyWebExtensionDialog *self)
 
     row = create_row (self, web_extension);
     gtk_list_box_insert (GTK_LIST_BOX (self->listbox), row, -1);
+    empty = FALSE;
   }
+
+  gtk_stack_set_visible_child_name (self->stack, empty ? "empty" : "list");
 }
 
 static void
@@ -262,6 +289,7 @@ ephy_web_extension_dialog_class_init (EphyWebExtensionDialogClass *klass)
                                                "/org/gnome/epiphany/gtk/web-extensions-dialog.ui");
 
   gtk_widget_class_bind_template_child (widget_class, EphyWebExtensionDialog, listbox);
+  gtk_widget_class_bind_template_child (widget_class, EphyWebExtensionDialog, stack);
 
   gtk_widget_class_bind_template_callback (widget_class, on_add_button_clicked);
 }
diff --git a/src/resources/ephy-open-link-symbolic.svg b/src/resources/ephy-open-link-symbolic.svg
new file mode 100644
index 000000000..fcb39cb26
--- /dev/null
+++ b/src/resources/ephy-open-link-symbolic.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   width="16px"
+   height="16px"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg13">
+  <metadata
+     id="metadata19">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs17" />
+  <g
+     id="g11496-6"
+     style="fill:#2e3436;fill-opacity:1"
+     transform="translate(-8981.1032,-2151.2551)">
+    <path
+       id="path11492-4"
+       d="m 8983.1032,2154.248 v 10.9994 h 11.0003 v -3.9994 h -2 v 1.9994 h -7.0003 v -6.9994 h 2.0003 v -2 
z"
+       
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;v
 
ector-effect:none;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
 />
+  </g>
+  <g
+     id="g3142"
+     style="display:inline"
+     transform="translate(-1005.8751,62.24235)">
+    <path
+       id="path12111"
+       
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;v
 
ector-effect:none;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:new;stop-color:#000000;stop-opacity:1"
+       d="m 8,1.9921875 v 1 c 0,0.5522847 0.4477153,1 1,1 h 1.574219 L 7.7949219,6.7519531 c 
-0.3915045,0.3894276 -0.3932532,1.0224778 -0.00391,1.4140625 0.3894276,0.3915045 1.0224778,0.3932532 
1.4140625,0.00391 L 12,5.3945312 v 1.5976563 c 0,0.5522847 0.447715,1 1,1 h 1 v -6 z"
+       transform="translate(1005.8751,-62.24235)" />
+  </g>
+</svg>
diff --git a/src/resources/epiphany.gresource.xml b/src/resources/epiphany.gresource.xml
index 28e9a7a0b..fe216b966 100644
--- a/src/resources/epiphany.gresource.xml
+++ b/src/resources/epiphany.gresource.xml
@@ -53,6 +53,7 @@
     <file compressed="true" 
alias="scalable/actions/ephy-reader-mode-symbolic.svg">ephy-reader-mode-symbolic.svg</file>
     <file compressed="true" 
alias="scalable/status/ephy-audio-muted-symbolic.svg">ephy-audio-muted-symbolic.svg</file>
     <file compressed="true" 
alias="scalable/status/ephy-audio-playing-symbolic.svg">ephy-audio-playing-symbolic.svg</file>
+    <file compressed="true" 
alias="scalable/status/ephy-open-link-symbolic.svg">ephy-open-link-symbolic.svg</file>
     <file compressed="true" 
alias="scalable/status/ephy-tab-counter-symbolic.svg">ephy-tab-counter-symbolic.svg</file>
     <file compressed="true" 
alias="scalable/status/ephy-tab-overflow-symbolic.svg">ephy-tab-overflow-symbolic.svg</file>
   </gresource>
diff --git a/src/resources/gtk/web-extensions-dialog.ui b/src/resources/gtk/web-extensions-dialog.ui
index ae8284869..67dd0b025 100644
--- a/src/resources/gtk/web-extensions-dialog.ui
+++ b/src/resources/gtk/web-extensions-dialog.ui
@@ -3,13 +3,13 @@
 <interface>
   <requires lib="gtk+" version="3.20"/>
   <template class="EphyWebExtensionDialog" parent="HdyWindow">
-     <property name="can-focus">False</property>
     <property name="modal">True</property>
     <property name="window-position">center-on-parent</property>
     <property name="default-width">640</property>
     <property name="default-height">400</property>
     <property name="destroy-with_parent">True</property>
     <property name="type-hint">dialog</property>
+    <property name="title" translatable="yes">Extensions</property>
     <child>
       <object class="GtkBox">
         <property name="visible">True</property>
@@ -17,45 +17,54 @@
         <child>
           <object class="HdyHeaderBar">
             <property name="visible">True</property>
-            <property name="decoration-layout">:close</property>
             <property name="show-close-button">True</property>
             <property name="title" translatable="yes">Extensions</property>
             <child>
               <object class="GtkButton" id="add_button">
                 <property name="visible">True</property>
-                <property name="can-focus">True</property>
-                <property name="receives-default">True</property>
-                <property name="label" translatable="yes">Add…</property>
-                <signal name="clicked" handler="on_add_button_clicked" object="EphyWebExtensionDialog" 
swapped="no"/>
+                <property name="use-underline">True</property>
+                <property name="label" translatable="yes">_Add…</property>
+                <signal name="clicked" handler="on_add_button_clicked"/>
               </object>
             </child>
           </object>
         </child>
         <child>
-          <object class="GtkScrolledWindow">
+          <object class="GtkStack" id="stack">
             <property name="visible">True</property>
-            <property name="can_focus">True</property>
             <property name="vexpand">True</property>
             <child>
-              <object class="HdyClamp">
+              <object class="HdyStatusPage">
+                <property name="visible">True</property>
+                <property name="icon-name">application-x-addon-symbolic</property>
+                <property name="title" translatable="yes">No Extensions Installed</property>
+                <property name="description" translatable="yes">Add some extensions to display them 
here.</property>
+              </object>
+              <packing>
+                <property name="name">empty</property>
+              </packing>
+            </child>
+            <child>
+              <object class="HdyPreferencesPage">
                 <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="margin_start">6</property>
-                <property name="margin_end">6</property>
-                <property name="maximum_size">1024</property>
                 <child>
-                  <object class="GtkListBox" id="listbox">
+                  <object class="HdyPreferencesGroup">
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="margin_top">6</property>
-                    <property name="margin_bottom">6</property>
-                    <property name="valign">start</property>
-                    <style>
-                      <class name="content"/>
-                    </style>
+                    <child>
+                      <object class="GtkListBox" id="listbox">
+                        <property name="visible">True</property>
+                        <property name="selection-mode">none</property>
+                        <style>
+                          <class name="content"/>
+                        </style>
+                      </object>
+                    </child>
                   </object>
                 </child>
               </object>
+              <packing>
+                <property name="name">list</property>
+              </packing>
             </child>
           </object>
         </child>
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]