Yaru: buttons in buttonbox not styled

[Feichtmeier]

Glade uses a strange box for buttons which seems to be styled wrong - compared to other buttons.

Adwaita styles them exactly like normal buttons:

[Paz-it]

I don't have glade installed but It seems this kind of style is the same in logs :

and in Adwaita :

[clobrano]

@Paz-it sorry I don't understand your comment. Logs seems fine in both communitheme and adwaita, which are the similarities with glade?

[Paz-it]

@clobrano sorry for not explaining it better. I meant that the type of the tool bar is the same style so it will be (maybe) easier spot on.

[Feichtmeier]

The problem is that we styled buttonbox.linked like the stackswicthers.

We did this because some apps use a buttonbox as a "fake" stackswitcher, for example gnome-software. (tbh I didn't find any other O.o)

So this is rather problematic, because buttonboxes will be probably used more often in apps other than glade.

We should unstyle the buttonbox.linked to look like normal buttons, but then we need a solution for gnome-software again.

They have a styleclass .toolbar-primary-buttons-software
So it's probably possible.

[Feichtmeier]

@madsrh
Concerning glade:

That buttonbox with its open and save buttons... There is an arrow close to it.
Should I remove the border of this specific save/open buttons ( they have an ID yay) or should I add the border to the arrow buttons?

Edit:

[clobrano]

So basically, are we going to have squared buttons in gnome-software headerbar?

[Feichtmeier]

Well I am working on emulating the stackswitcher. (no idea if I succeed) But we styled the buttonbox like a stackswitcher at the moment and that could become really problematic if more apps use that buttonbox :|

[Feichtmeier]

:see_no_evil:

Well :man_shrugging: I can't say this would look bad, but somehow it doesn't look right.
I think one of the reasons for this complex hierarchy instead of a stackswitcher could be that there are also the counter-labels for the update/install counts

Edit: okay, partly succeeding. Only the marging is left:

Pushed the branch already maybe you have some ideas

[clobrano]

I remember that all the quest about stackswitcher started from those curly underlines :D

[Feichtmeier]

Okay to sum it up:

• we have a very good style for stackswitchers! They are very often used and are in almost every "modern" / newer GNOME app - we should stick to this style for stackswitchers
• we found that gnome-software uses a similiar tooling in its headerbar named "buttonbox" (But it is made with different UI elements) so we styled it GLOBALLY the same way as stackswitchers. This is a problem, since NORMALLY buttonboxes can pop up everywhere since they are just that: a box for buttons
• gnome-software has not many individual style classes nor IDs, thus we are dependent on the global styling of buttonboxes

Options (@madsrh @luxamman please decide):

• Quick-and-dirty-solution: glade has a style class for its window
  

where we can follow its hierarchy and style the buttonbox individually and fix this issue for glade ONLY. If a buttonbox pops up anywhere else, we have the same problem again

• long term solution: remove the global buttonbox styling and end up with this:
  https://user-images.githubusercontent.com/15329494/43684719-84db72f0-98a5-11e8-971a-e907c3ac513d.gif and live with the fact that it is a different UI element for a similiar solution (switching between UI layers/ stacks)

[clobrano]

About long term solution, we slightly improved the style (still buggy, but just to give an idea)

[Feichtmeier]

I think it's a bit problematic now that we would then end up with 3 different button styles (not talking about true stackswitchers or the window controls) in the headerbar then

• regular headerbar buttons (no border, gray hover, black box shadow at the top)
• headerbar text.buttons (super subtle border (inkstone), black box shadow at the top)
  
• headerbar buttonbox buttons (super subtle border (inkstone), mixed box shadow at top)
  

The difference between headerbar buttons and textbuttons is also discussed in aarons issue but we could maybe find a solution for everything here. (prbly dreaming :D but who knows?)

My brain hurts... too many options... halp pl0x

Edit: maybe we should "give up" on this extra ordinary buttons alltogether and go with this solution for ALL buttons (exept window controls ofc [stackswitchers are not buttons so those ofc neither])

Adwaita has 1 solution for all buttons, too :man_shrugging:
And @godlyranchdressing would be pleased, too :D

[clobrano]

What about this (no internal separation inside a buttonbox)?

conceptually is similar to stackswitcher, which is a whole object, but styled as a headerbar button

[Feichtmeier]

@clobrano concerning the buttonbox in software I would prefer this indeed. But not for that "comboboxes" :thinking:

On topic of the "great button problem" (the other issue would be prbly more fitting but maybe we can do it all in this one)
It's funny that I am trying to like the subtle inkstone border for all headerbar buttons (well, why not change my mind?):

[clobrano]

I believe that having a border for any icon would make the headerbar quite messy :(

[Feichtmeier]

Yes I am torn, too...
The current one looks very elegant and modern.
Yet, I remember my father didn't realize that those icons in the headerbar are something you can click :/

Edit: sorry for this offtopic, I created a seperate branch to test the border. I keep on topic now with the buttonbox =)

[Feichtmeier]

@clobrano even if we prbly keep the current headerbar buttons, we would still need (imho) a solution for the different press effects. We now have a press effect for the buttons inside buttonboxes in the headerbar and one for "normal" buttons in the headerbar

[clobrano]

We now have a press effect for the buttons inside buttonboxes in the headerbar and one for "normal" buttons in the headerbar

No we don't. The press effect is the same, just the border is always visible

[Feichtmeier]

Hmmmm but there are situations where it is quiet visible, for example this one:

[clobrano]

Because the bright border masks the dark press effect

[Feichtmeier]

Okay - I understood, sorry for the slowness.

Yet it is a visual mismatch, don't you think? The normal button looks "harder" or "deeper" pressed

[clobrano]

Yet it is a visual mismatch, don't you think? The normal button looks "harder" or "deeper" pressed

I agree on that. I'll try to come up with a generic solution

[Feichtmeier]

Nice! I think the idea to leave out the border between elements of the buttonbox is actually quiet good - changed my mind about that after using it a bit

[clobrano]

[Feichtmeier]

Imho this looks good =D don't know what others say