Updated Panel Button Styling

[isantop]

Update Panel button styling to match the latest mockups.

Should give all of the panel buttons a pill style when active similar to the current style for the Workspaces and Applications buttons.

[jacobgkau]

Panel buttons are now in the pill style:

However, I'm no longer able to click in the very top-left or top-right of the screen to activate the respective buttons. I'm not able to click any of the panel buttons when the mouse is at the top edge of the screen. Is it possible to apply this styling without affecting the click hitbox? (GNOME 40 on Fedora has pill button styling, but I'm still able to click along the top edge and in the corners.)

[bflanagin]

The left hand side of the clock when centered and DnD is active expands properly but looks unbalanced.

[isantop]

The left hand side of the clock when centered and DnD is active expands properly but looks unbalanced.

I can look into this, but I don't know if it can be solved. The button includes both the DnD icon and the unread notifications dot, but they aren't centered in the button (only the clock text is).

[isantop]

@jacobgkau I have updated this PR with a solution. Instead of drawing a margin around the buttons (which prevents the actual button widget from extending to the screen edge, causing them to be unclickable from the edges/corners), we now draw a border around the buttons which is the same color as the panel background. This simulates the effect of a margin but still makes the button extend to the edges/corners of the screen.

Problems with this approach: The buttons look weird against a transparent panel (because the "margin" no longer matches the background color.

The only time a transparent panel occurs in stock Pop_OS is on the lock screen and login screen, where we mitigate this issue by removing the borders in those contexts. This means the button styling doesn't match as well with the logged-in environment, but because the panel isn't visible the visual look is still good.

It's a bigger issue if a user installs an extension which turns the panel transparent. It's not the worst look though, and it's still very usable. It's just not really correct.

Here's an example of what it looks like:

[bflanagin]

@isantop I'm guessing there is no alpha channel for the border? If there is a way to have a transparent border, or even a near transparent one, I think it would look better.

[isantop]

@bflanagin you can definitely have an alpha channel. But the border is on top of the background, and if the border is transparent, it doesn't cover up the background.

[isantop]

To add a bit more context here:

We need the border to be opaque in this instance because we're covering up the background. If we cover up the outer portion of the button background with the same color as the panel, it looks just like the button has a margin and is set away from the panel edge, but the button actually extends to the edge of the screen, making it clickable. If the border is not fully opaque (or if it is any color other than the panel color), then the effect doesn't work and it looks bad in every theme.

[jacobgkau]

I was still unclear about why a fully transparent border wouldn't work. Once again, here is what an active button looks like with an opaque border:

And here is what it looks like with a transparent border, by setting this line to transparent:

So I suppose the issue is that the "pill" is extending to the edges of the panel, since the area underneath the border gets the button's background color. For comparison, GNOME 40 is achieving what we're attempting to achieve, without having an opaque border:

They're doing it in Adwaita by using a box-shadow instead of background-color. Using box-shadow: inset 0 0 0 100px rgba($panel_fg_color, 0.3);, we get what we're looking for:

@isantop Can we take this approach, or does this cause other problems that you know of?

[isantop]

So I suppose the issue is that the "pill" is extending to the edges of the panel, since the area underneath the border gets the button's background color.

Yes, the idea is to not extend the visual of the button to the edge of the screen, but to allow the button widget itself to extend. Borders are always drawn on top of whatever is the background, so having a fully transparent border is visually equivalent to having no border at all.

They're doing it in Adwaita by using a box-shadow instead of background-color. Using box-shadow: inset 0 0 0 100px rgba($panel_fg_color, 0.3);, we get what we're looking for:

I'll take a look at this. My initial thought it that it might cause issues with things moving around, but I can try that out and see if it will work.

[isantop]

@jacobgkau Can you post the .panel_button style block that you modified? When I replace the background with the box shadow on my machine (or on a VM with a fresh install), it breaks the background and there is no longer any background whatsoever when the button is active.

[jacobgkau]

@isantop Here's the whole file: _panel.scss.txt

The section I modified is:

    &:active, &:overview, &:focus, &:checked {
      //border-color: transparent;
      color: lighten($panel_fg_color, 20%);
      //background-color: rgba($panel_fg_color, 0.3);
      box-shadow: inset 0 0 0 100px rgba($panel_fg_color, 0.3);
    }

[isantop]

That's exactly what I had, but the problem still happens when I try it.

@bflanagin Can you test the latest commit 7b13b4b in this branch and confirm if button backgrounds are present when panel buttons are clicked?

[isantop]

@jacobgkau I think I figured it out. There's a bug in GNOME shell where you can't draw a box shadow without having a background.

Additionally, I would like to continue using orange underlines to indicate focus states, where the panel is being navigated via the keyboard. I don't know if GNOME Shell properly supports multiple box-shadows correctly or not. Nevermind this point, since the buttons are curved, the underline is too. It also looks like GNOME Shell automatically applies :focus when a button is active, instead of just :active, so I can't separate them out. It's also unclear if it supports the :not() thing.

[isantop]

The left hand side of the clock when centered and DnD is active expands properly but looks unbalanced.

@bflanagin I also modified the clock button so that only the text is within the pill. The D-N-D bell and the notification dot are not within the pill.

[bflanagin]

@isantop all backgrounds are working as expected. I think I like the D-N-D bell and dot outside the pill, though I'll leave it up to someone else to make the final call.