GNOME Bugzilla – Bug 707153
Add style for stack switcher items with the needs-attention property
Last modified: 2014-07-16 17:52:12 UTC
The child property is watched by the StackSwicther which in turns sets a needs-attention css class on the corresponding button, so that the theme can for instance show a throbbing animation if one of the hidden pages needs the user attention.
Created attachment 253656 [details] [review] Add a needs-attention child property to GtkStack
Created attachment 253657 [details] [review] Add a throbbing animation for stack switcher pages
Created attachment 253658 [details] [review] Set "needs-attention" when the timer is running
The adwaita patch definitely needs tweaking by the designers (try different colors, maybe also change the text color etc) The Clocks patch is for testing, if this gets in I'll do the same also for the stopwatch
Review of attachment 253656 [details] [review]: ::: gtk/gtkstack.c @@ +419,3 @@ -1, G_MAXINT, 0, GTK_PARAM_READWRITE)); + Neeeds some documentation here. It should say when it is appropriate to set needs-attention on a page, "Since: 3.10", and also, it should explain the special 'auto-unset' semantics that you've implemented here. @@ +888,3 @@ + child_info->needs_attention = FALSE; + gtk_container_child_notify (GTK_CONTAINER (stack), child_info->widget, "needs-attention"); + } Not sure if this is the best way to go. You only clear needs-attention when the user enters the page. If it gets set again while the user is on the page, the button will start throbbing again. Might be cleaner to leave it to the app to clear the flag, and just stop the throbbing in the stack switcher when the button is active. ::: gtk/gtkstackswitcher.c @@ +170,3 @@ + } + else + gtk_style_context_remove_class (context, "needs-attention"); Should probably have a define for this.
Created attachment 253674 [details] [review] Add a needs-attention child property to GtkStack The child property is watched by the StackSwicther which in turns sets a needs-attention css class on the corresponding button, so that the theme can for instance show a throbbing animation if one of the hidden pages needs the user attention.
Created attachment 253675 [details] [review] Set "needs-attention" when the timer is running
Created attachment 253676 [details] [review] Set "needs-attention" when the timer and stopwatcg are running
Review of attachment 253674 [details] [review]: Thanks, looks basically as I would expect it now. But lets keep it for the next cycle, at this point.
Attachment 253674 [details] pushed as e59c287 - Add a needs-attention child property to GtkStack
Reopening and reassigning to gnome-themes-standard to add the style bits to adwaita. Patch in comment #2
Totem's browser plugin (also copy/pasted in epiphany) does this: https://git.gnome.org/browse/totem/tree/browser-plugin/totem-glow-button.c#n46 It would be great if it could be a separate class to apply to the widget.
I'd need something to test the style against, do we have a test?
(In reply to comment #13) > I'd need something to test the style against, do we have a test? You can apply the patch in comment #8 to clocks
I would like to defer this 'till labels are able to draw a background we can use to draw a little round of squareish indicator, will we get that before the release?
https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/theming/experiments/tabs4.png shows the kind of dot we ended up liking for the 'updated content'/'needs attention' that goes well together with the explicit counter we already use in Software.
to be clear, atm the GtkLabel draws a background, but it's just underneat the text, if I set a padding there it works like a margin w/o expanding the background (which is something we need to draw the thingy)
What if instead of the label you match the GtkRadioButton?
Paolo, the decoration have to be accuratelly positioned wrt the text, so I can't rely on button box size, it needs to be done on the label itself.
Created attachment 280550 [details] GtkLabel in stack switcher problem Today GtkLabel background behaves, I still have a problem in the stack switcher tho. The yellow area is the label background box (both yellow buttons have the needs-attention class applied), as you can see I cannot position generally position the circle correctly. My idea would have been to add say 4px left and right padding to labels inside stack switcher buttons then set left padding to 0 and right to 8px to fit the circle in in case of needs attention class, but having the label background spanning the whole button padding box that's impossible do to.
P.S. background-clip: content-box; doesn't work. In case it will it won't help since it... ehm clips the background
fixed in master, closing