Icons inside text entries are not centered vertically

[tonyforster]

Browse137 OS9 (and earlier)

The clear search field button (X) is too big and displaced down

[humitos]

The size button is fixed, but it seems that is not well aligned. Take a look at the screenshot. Although, it seems that I'm having another problem with the theme.

[tonyforster]

Browse140 Sugar build 21 (XO-1.75)
The button is still too big and also misaligned
Maybe you have patches that I don't

[humitos]

Replying to tonyforster:

Maybe you have patches that I don't

I tested it from sugar-build that has the latest patches from sugar-artwork.

[manuq]

Yes the big size was fixed upstream, see:

 https://bugzilla.gnome.org/show_bug.cgi?id=678087

and this gtk+ commits: b5d45a9e - 77221c18 - 37262f97 .

What is pending is the alignment.

[greenfeld]

This is a general issue with search fields in Sugar in 13.1.0 os7.

The (X) for filtering Activities or Network View also is large and offset.

[humitos]

A Gtk.Entry without padding makes the text to be vertical-center aligned but not the icon

[humitos]

I talked to garnacho and he pointed me to the {{{.image}} class for the CSS theme

•  http://developer.gnome.org/gtk3/3.5/GtkStyleContext.html#GTK-STYLE-CLASS-IMAGE:CAPS

With that class we are able to catch the images inside the entries: .entry.image. So, I wrote this rule:

.entry.image {
    padding-bottom: 6px;
}

but, for some reason, padding-top and padding-bottom does not take effect. In fact, I could change padding-left and padding-right without no problem (screenshot attached)

[humitos]

padding-left and padding-right setted with ".entry.image" class

[humitos]

test case to run inside a "make shell" (sugar-build); we can switch between run it with the sugar theme or not

[humitos]

Screenshot with 3 runs of the testcase

[manuq]

Commenting out gtk-icon-sizes from artwork settings.ini gets back the
alignment, with the icon in the wrong size.

[godiard]

Carlos, it's possible the patch to solve  https://bugzilla.gnome.org/show_bug.cgi?id=678087 need set the position x,y according to the icon size?

[manuq]

Related ticket with more information: #3569

[manuq]

Replying to manuq:

Related ticket with more information: #3569

Ups, meant to say: #3385

[manuq]

Comparison commenting out set_fonts() in sugar-session.

[manuq]

So commenting out set_fonts() in sugar-session the icon looks right. This shows that the icon inside the entry at the position Gtk.EntryIconPosition.SECONDARY depends on the font. The attached animation also shows that the other icon of position Gtk.EntryIconPosition.PRIMARY is not affected by the font.

I have added debug prints in the XO to know the font values before and after and they are:

TEST current font: 'Sans 10'
TEST new font: 'Sans Serif 7.000000'

--- a/bin/sugar-session
+++ b/bin/sugar-session
@@ -242,7 +242,11 @@ def set_fonts():
     face = client.get_string('/desktop/sugar/font/default_face')
     size = client.get_float('/desktop/sugar/font/default_size')
     settings = Gtk.Settings.get_default()
+    curfont = settings.get_property("gtk-font-name")
+    logging.debug("TEST current font: %r", curfont)
     settings.set_property("gtk-font-name", "%s %f" % (face, size))
+    newfont = settings.get_property("gtk-font-name")
+    logging.debug("TEST new font: %r", newfont)

The difference that humitos and I noticed from running a simple test script in a sugar shell was because that script is not setting the font like sugar-session or the Activity class constructor do.

[manuq]

Testing the system-search icon on both sides. This one looks right.

[manuq]

Another test, dialog-cancel in both sides. Looks like this is the only one which is wrong.

[manuq]

Workaround: scale the pixbuf before setting the icon as Carlos proposed in  http://bugs.sugarlabs.org/ticket/3385#comment:15

[manuq]

Another option, use a new icon for the X in entries.

[manuq]

After more testings I found that the icons are not scaled right by GTK+ to the size needed in the entry, if they are of 55x55 pixels.

The current dialog-cancel.svg is 55x55 because it can also be used in the standard icon size, like in toolbars. Other icons that display properly inside entries, like system-search.svg, are of size 22x22.

icon name     | size of the svgs | size of the pixbuf
dialog-cancel | 55.125 55        | 55 55
system-search | 22.156 22.156    | 22 22

"size of the pixbuf" is the size of the GdkPixbuf returned to IconEntry from _SVGLoader .

Proposal 1: add a workaround that resizes the icons if the size is not 22x22. Patch attached.

Proposal 2: add a new icon for this usage: entry-cancel.svg. proposed SVG attached.

2. has the benefit that we can remove the space around the circle, needed in the 55x55 flavour for margin around the graphic, and make the circle 22px diameter. This seems to look better to me.

[manuq]

Screenshot with the icon scaled, using the resize workaround patch.

[manuq]

Screenshot with a new icon entry-cancel.svg

[garycmartin]

Fab. From a visual standpoint, I do like the extra size provided by the new entry-canvas.svg approach. If we go this route we should keep in mind to check we do the same (doesn't need to be right now) with other icons used in the entry areas, to keep them consistent.

[garycmartin]

Replying to garycmartin:

Fab. From a visual standpoint, I do like the extra size provided by the new entry-canvas.svg approach. If we go this route we should keep in mind to check we do the same (doesn't need to be right now) with other icons used in the entry areas, to keep them consistent.

Typo, entry-canvas.svg should be entry-cancel.svg

[erikos]

From #3385:  https://bugzilla.gnome.org/show_bug.cgi?id=678087

This was the upstream bug, there are commits around:  http://git.gnome.org/browse/gtk+/commit/?id=77221c18a3e41d8ebd0754987359738b5bf6ab5d

[manuq]

Thanks Gary for your feedback.

After discussing with Simon, here is the plan I will follow.

So as an specification we can do:

• standard icons at 55px, with the corresponding margin around the SVG page
• entry icons at 22px, with no margin, the shape can touch the bounds of the SVG page

Planned changes:

• add new cancel icon for usage in entries. Name it entry-cancel.svg
• rename system-search as entry-search. Change Sugar accordingly
• make new search icon for usage in toolbars, at 55px size. Name it system-search.svg
• move Browse reload icon to entry-reload.svg to entry-refresh.svg in artwork. Change Browse accordingly
• Shell Home Activity List: "no matches" message, use new 55px system-search
• Wikipedia Activity, search subtoolbar: use search icon on the left of the entry, cancel icon on the right of the entry
• Browse Activity: remove custom browse-dialog-cancel.svg

Changes for users:

• entry-cancel.svg - 22px size, new icon, use instead of dialog-cancel to improve entries
• entry-search.svg - 22px size, renamed from system-search.svg, change your code accordingly
• dialog-cancel.svg - 55px size, stays the same, use it in toolbars
• system-search.svg - 55px size, new, use it in toolbars

[manuq]

Design: comparison of new system-search.svg and the journal icon.

[manuq]

Artwork patch following the plan.

[manuq]

Toolkit GTK3 patch: adapt to icon changes

[manuq]

Toolkit GTK2 patch: adapt to icon changes

[manuq]

Shell patch: adapt to icon changes.

[manuq]

Browse icon changes.

[manuq]

Wikipedia, improve search entry.

[manuq]

Pushed:

- artwork f3e16adf
- toolkit e36513f9
- shell 97178f9d
- browse f95ed83c

[manuq]

Artwork backport of the entry-cancel icon for sucrose-0.98 branch

[manuq]

Toolkit gtk3 backport of the entry-cancel icon for sucrose-0.98 branch