From e27bba3ebaa83aa55d3dc11b01e571596dfc7e7e Mon Sep 17 00:00:00 2001 From: Alexander Mikhaylenko Date: Tue, 24 Sep 2019 20:48:12 +0500 Subject: location-entry: Rework icon layout Don't hardcode margins anywhere, instead, set them in CSS. Also don't expand the icons vertically and move tooltips to event boxes so that it still matches click area. Take margin and padding into account when calculating progress bar length, making sure it's correct (tested on Adwaita, HighContrast and elementary). Fix progress bar positioning and left padding on RTL. --- lib/widgets/ephy-location-entry.c | 100 +++++++++++++++++++++++++------------- 1 file changed, 66 insertions(+), 34 deletions(-) (limited to 'lib') diff --git a/lib/widgets/ephy-location-entry.c b/lib/widgets/ephy-location-entry.c index 972cd0e95..66ebfabf3 100644 --- a/lib/widgets/ephy-location-entry.c +++ b/lib/widgets/ephy-location-entry.c @@ -726,6 +726,45 @@ bookmark_icon_button_press_event_cb (GtkWidget *entry, return TRUE; } +static GtkBorder +get_progress_margin (EphyLocationEntry *entry) +{ + g_autoptr (GtkWidgetPath) path = NULL; + g_autoptr (GtkStyleContext) context = NULL; + GtkBorder margin; + gint pos; + + path = gtk_widget_path_copy (gtk_widget_get_path (entry->url_entry)); + + pos = gtk_widget_path_append_type (path, GTK_TYPE_WIDGET); + gtk_widget_path_iter_set_object_name (path, pos, "progress"); + + context = gtk_style_context_new (); + gtk_style_context_set_path (context, path); + + gtk_style_context_get_margin (context, gtk_style_context_get_state (context), &margin); + + return margin; +} + +static GtkBorder +get_padding (EphyLocationEntry *entry) +{ + g_autoptr (GtkWidgetPath) path = NULL; + g_autoptr (GtkStyleContext) context = NULL; + GtkBorder padding; + + path = gtk_widget_path_copy (gtk_widget_get_path (entry->url_entry)); + + /* Create a new context here, since the existing one has extra css loaded */ + context = gtk_style_context_new (); + gtk_style_context_set_path (context, path); + + gtk_style_context_get_padding (context, gtk_style_context_get_state (context), &padding); + + return padding; +} + static void button_box_size_allocated_cb (GtkWidget *widget, GdkRectangle *allocation, @@ -733,41 +772,32 @@ button_box_size_allocated_cb (GtkWidget *widget, { EphyLocationEntry *lentry = EPHY_LOCATION_ENTRY (user_data); g_autofree gchar *css = NULL; - GtkStyleContext *style_context; - GtkTextDirection text_direction; - GtkStateFlags state_flags; - GtkBorder padding; + GtkBorder margin, padding; if (lentry->allocation_width == (guint)allocation->width) return; lentry->allocation_width = allocation->width; - style_context = gtk_widget_get_style_context (widget); - text_direction = gtk_widget_get_direction (widget); - if (text_direction == GTK_TEXT_DIR_RTL) - state_flags = GTK_STATE_FLAG_DIR_RTL; - else - state_flags = GTK_STATE_FLAG_DIR_LTR; - - gtk_style_context_get_padding (style_context, state_flags, &padding); + margin = get_progress_margin (lentry); + padding = get_padding (lentry); /* We are using the CSS provider here to solve UI displaying issues: * - padding-right is used to prevent text below the icons on the right side - * of the entry (removing the icon button box width (allocation width) - * including border spacing 5). + * of the entry (removing the icon button box width (allocation width). * - progress margin-right is used to allow progress bar below icons on the * right side. * * FIXME: Loading CSS during size_allocate is ILLEGAL and BROKEN. */ - css = g_strdup_printf (".url_entry { padding-right: %dpx; }" \ - ".url_entry:dir(rtl) { padding-left: %dpx; padding-right: %dpx; }" \ - ".url_entry progress { margin-right: -%dpx; }", - lentry->allocation_width + 5, - lentry->allocation_width + 5, - padding.right + 10, - lentry->allocation_width); + css = g_strdup_printf (".url_entry:dir(ltr) { padding-right: %dpx; }" \ + ".url_entry:dir(rtl) { padding-left: %dpx; }" \ + ".url_entry:dir(ltr) progress { margin-right: %dpx; }" \ + ".url_entry:dir(rtl) progress { margin-left: %dpx; }", + lentry->allocation_width, + lentry->allocation_width, + margin.right + padding.right - lentry->allocation_width, + margin.left + padding.left - lentry->allocation_width); gtk_css_provider_load_from_data (lentry->css_provider, css, -1, NULL); } @@ -877,7 +907,7 @@ static void ephy_location_entry_construct_contents (EphyLocationEntry *entry) { GtkWidget *event; - GtkWidget *button_box; + GtkWidget *box; GtkStyleContext *context; LOG ("EphyLocationEntry constructing contents %p", entry); @@ -913,34 +943,36 @@ ephy_location_entry_construct_contents (EphyLocationEntry *entry) gtk_overlay_add_overlay (GTK_OVERLAY (entry), event); /* Button Box */ - button_box = gtk_button_box_new (GTK_ORIENTATION_HORIZONTAL); - gtk_container_add (GTK_CONTAINER (event), button_box); - gtk_box_set_homogeneous (GTK_BOX (button_box), FALSE); - g_signal_connect (G_OBJECT (button_box), "size-allocate", G_CALLBACK (button_box_size_allocated_cb), entry); - gtk_button_box_set_layout (GTK_BUTTON_BOX (button_box), GTK_BUTTONBOX_EXPAND); - gtk_widget_set_halign (button_box, GTK_ALIGN_END); - gtk_widget_set_margin_end (button_box, 5); - gtk_widget_show (button_box); + box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0); + gtk_container_add (GTK_CONTAINER (event), box); + g_signal_connect (G_OBJECT (box), "size-allocate", G_CALLBACK (button_box_size_allocated_cb), entry); + gtk_widget_set_halign (box, GTK_ALIGN_END); + gtk_widget_show (box); + + context = gtk_widget_get_style_context (box); + gtk_style_context_add_class (context, "entry_icon_box"); /* Bookmark */ entry->bookmark_event_box = gtk_event_box_new (); + gtk_widget_set_tooltip_text (entry->bookmark_event_box, _("Bookmark this page")); entry->bookmark = gtk_image_new_from_icon_name ("non-starred-symbolic", GTK_ICON_SIZE_MENU); - gtk_widget_set_tooltip_text (entry->bookmark, _("Bookmark this page")); + gtk_widget_set_valign (entry->bookmark, GTK_ALIGN_CENTER); gtk_widget_show (entry->bookmark); g_signal_connect (G_OBJECT (entry->bookmark_event_box), "button_press_event", G_CALLBACK (bookmark_icon_button_press_event_cb), entry); gtk_container_add (GTK_CONTAINER (entry->bookmark_event_box), entry->bookmark); - gtk_box_pack_end (GTK_BOX (button_box), entry->bookmark_event_box, FALSE, FALSE, 6); + gtk_box_pack_end (GTK_BOX (box), entry->bookmark_event_box, FALSE, FALSE, 0); context = gtk_widget_get_style_context (entry->bookmark); gtk_style_context_add_class (context, "entry_icon"); /* Reader Mode */ entry->reader_mode_event_box = gtk_event_box_new (); + gtk_widget_set_tooltip_text (entry->reader_mode_event_box, _("Toggle reader mode")); entry->reader_mode = gtk_image_new_from_icon_name ("ephy-reader-mode-symbolic", GTK_ICON_SIZE_MENU); - gtk_widget_set_tooltip_text (entry->reader_mode, _("Toggle reader mode")); + gtk_widget_set_valign (entry->reader_mode, GTK_ALIGN_CENTER); gtk_widget_show (entry->reader_mode); gtk_container_add (GTK_CONTAINER (entry->reader_mode_event_box), entry->reader_mode); - gtk_box_pack_end (GTK_BOX (button_box), entry->reader_mode_event_box, FALSE, FALSE, 6); + gtk_box_pack_end (GTK_BOX (box), entry->reader_mode_event_box, FALSE, FALSE, 0); context = gtk_widget_get_style_context (entry->reader_mode); gtk_style_context_add_class (context, "entry_icon"); -- cgit v1.2.1