diff options
author | Alexander Mikhaylenko <alexm@gnome.org> | 2021-02-01 18:13:49 +0500 |
---|---|---|
committer | Alexander Mikhaylenko <alexm@gnome.org> | 2021-02-01 18:59:39 +0500 |
commit | 7403bdc4b6f8d7f590eefc8e2bb4212d2b4ac63f (patch) | |
tree | 98bb79c03f9fb5c5c3d7e05d2310032c7daad3c8 /src | |
parent | 00856d894a7dfd45878d9254704b0205de3fb2be (diff) | |
download | epiphany-7403bdc4b6f8d7f590eefc8e2bb4212d2b4ac63f.tar.gz |
web-extensions-dialog: Polish the UIwip/exalm/extensions
* 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
Diffstat (limited to 'src')
-rw-r--r-- | src/ephy-web-extension-dialog.c | 46 | ||||
-rw-r--r-- | src/resources/ephy-open-link-symbolic.svg | 46 | ||||
-rw-r--r-- | src/resources/epiphany.gresource.xml | 1 | ||||
-rw-r--r-- | 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;vector-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;vector-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> |