Expose bar placement to CSS?

[Vimux]

Greetings.

It would be nice to be able to set different styles depending on the current position of the bar (top/right/bottom/left). Or maybe there is a way to do this without any modifications, I just don't know about it. Obviously not a priority, just a suggestion to discuss briefly.

Thanks for your work in maintaining and developing sfwbar.

[LBCrion]

The best approach would probably be to add a function that return a bar direction for the current widget. You can then use it in your style definition. This would be very easy to implement. What would be more difficult is to track the events where the bar changes it's direction (i.e. moves from being a bottom bar to being a right-hand bar). I could add a trigger emitted on a bar direction change, but widget value and style currently share a trigger, which would be a bit unwieldy. Perhaps it would make sense to optionally decouple the style trigger from the value trigger in the widget definition. Something like:

label {
  ...
  style = "mystyle_" + BarDirection()
  style_trigger = "bar-direction-change"
}

[Vimux]

If I understand correctly, a simple approach would cover my needs.

In the end, I want a universal config file, sfwbar.config and vertical.config in one piece. In most cases, changing the axis requires a serious style overhaul, that's the main problem. The config should not react to triggers or do super magic on the fly in real time. Ideally, I would like to have a truly universal single file config: config + layout (widgets) + styles. I prepare the style variations I want, change the -GtkWidget-direction as needed, restart sfwbar, and it works for the current placement.

What would be more difficult is to track the events where the bar changes it's direction (i.e. moves from being a bottom bar to being a right-hand bar). I could add a trigger emitted on a bar direction change, but widget value and style currently share a trigger, which would be a bit unwieldy.

I'm pretty sure the super users and active members of the sfwbar can come up with some really good uses for this, but it seems to me that in this case, simpler is better. Just my thoughts.

[LBCrion]

I added BarDir expression function in the latest git version. You can use this in the style property of a widget to set it's style based on the toplevel orientation. The function returns the name of the edge the bar is positioned against, i.e. "left", "right", "top" or "bottom". If it can't determine the edge (i.e. it's called outside of a widget) it will return "unknown".

[Vimux]

I don't seem to fully understand how it works. As a quick check, I tried changing the default clock.widget:

…
- style = "time"
+ style = BarDir()
…

No matter where I call this widget from (default vertical.config or sfwbar.config), it always returns the right value.

---

Sfwbar 0352267e2e0d102e98d9b9b9ecb60cd914f46602

Alpine Linux 3.20.1
Sway 1.9 / labwc 0.7.2

[LBCrion]

Can you try adding to your layout: label { value = BarDir() } to check if it always returns right? On my setup it returns a correct bar direction.

[LBCrion]

You could be getting "right" because your widget doesn't update it's values (i.e. has interval = 0, or a trigger defined) and the widget is declared in a module, so bardir runs before it knows it's parent bar. I added a bar-direction trigger to track updates. Can you try adding trigger = "bar-direction" to the widget to see if that helps?

[Vimux]

Can you try adding to your layout: label { value = BarDir() } to check if it always returns right? On my setup it returns a correct bar direction.

Value contains the correct BarDir value. When I use BarDir in style, it is always right. As a test, I used a minimal sfwbar.config:

function("SfwbarInit") {
  SetBarId "bar-0"
  SetLayer "top"
}

layout {
  label { value = BarDir() } # Correct BarDir value
  label {
    style = BarDir() # Incorrect BarDir value
    value = BarDir() # Correct BarDir value
  }
}

Screenshot with GTK Inspector results

 _Сomments on lines 9-10 are mixed up_

I added a bar-direction trigger to track updates. Can you try adding trigger = "bar-direction" to the widget to see if that helps?

I did a quick test(s) of the new trigger with a modified clock.widget included instead of the default clock. Nothing's changed, it seems. Maybe I'm using it wrong?

Screenshot


clock.widget

``` layout { label { style = BarDir() value = BarDir() } label { trigger = "bar-direction" style = BarDir() value = BarDir() } label { trigger = "bar-direction" style = BarDir() interval = 1000 value = Time("%k:%M") } }

[LBCrion]

Is this with the latest git version?

On Fri, 21 Jun 2024, 12:33 Vimux, @.***> wrote:

Can you try adding to your layout: label { value = BarDir() } to check if it always returns right? On my setup it returns a correct bar direction.

Value contains the correct BarDir value. When I use BarDir in style, it is always right. As a test, I used a minimal sfwbar.config:

function("SfwbarInit") { SetBarId "bar-0" SetLayer "top" }

layout { label { value = BarDir() } # Correct BarDir value label { style = BarDir() # Correct BarDir value value = BarDir() # Incorrect BarDir value } }

Screenshot with GTK Inspector results

1.png (view on web) https://github.com/LBCrion/sfwbar/assets/21033483/37f5a308-d638-4436-a021-8b7ae33ee54a

I added a bar-direction trigger to track updates. Can you try adding trigger = "bar-direction" to the widget to see if that helps?

I did a quick test of the new trigger with a modified clock.widget included instead of the default clock. Nothing's changed, it seems. Maybe I'm not using it wrong? Screenshot

2.png (view on web) https://github.com/LBCrion/sfwbar/assets/21033483/5a3bf03f-23e9-4eb7-8c1d-2e6f94521ea6 clock.widget

layout { label { style = BarDir() value = BarDir() }

label { trigger = "bar-direction" style = BarDir() value = BarDir() }

label { trigger = "bar-direction" style = BarDir() interval = 1000 value = Time("%k:%M") } }

— Reply to this email directly, view it on GitHub https://github.com/LBCrion/sfwbar/issues/191#issuecomment-2182578297, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASHPFFFULODKSJHOMNZ5CCTZIQFSJAVCNFSM6AAAAABJCM46N2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBSGU3TQMRZG4 . You are receiving this because you commented.Message ID: @.***>

[Vimux]

Yes, commit 0c2d5c5e5c68a3e22b78c0feffccc5fa8b66c438 to be exact.

[LBCrion]

Found it. The expression for style wasn't correctly linked back to the widget. This should be fixed now. Can you check if it works for you with the latest git?

[Vimux]

Yeah, it's working now. Thank you.

[LBCrion]

Would you mind sharing your config once it's ready? I'm curious to see how css would differ for different directions (in particular with respect to custom properties, since these won't be supported in gtk4 and we'll need a different approach for them).

On Sun, 23 Jun 2024, 13:46 Vimux, @.***> wrote:

Yeah, it's working now. Thank you.

— Reply to this email directly, view it on GitHub https://github.com/LBCrion/sfwbar/issues/191#issuecomment-2184975622, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASHPFFGJTPUXRUQYVOR6YOLZI27RXAVCNFSM6AAAAABJCM46N2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBUHE3TKNRSGI . You are receiving this because you commented.Message ID: @.***>

[Vimux]

So far it's a fiasco 😄. I didn't consider that I need to use rows in the taskbar for horizontal and cols for vertical. 🤦‍♂️ There may be a workaround, but I haven't found it yet.

I'm curious to see how css would differ for different directions (in particular with respect to custom properties, since these won't be supported in gtk4 and we'll need a different approach for them).

The first thing I used was a label filler:

label { style = "filler_" + BarDir() }

...

#filler_left,
#filler_right {
  -GtkWidget-vexpand: true;
}

#filler_top,
#filler_bottom {
  -GtkWidget-hexpand: true;
}

I'll probably have more specific things, but most of them just use properties for positioning right now.

[LBCrion]

Re-orienting a taskbar is a bit more fiddly, but possible (and a lot of work for this went into beta15!):

Function("SetGridOrientation") {
  Config "taskbar 'mybar' { " +
    If(BarDir()="left" | BarDir()="right", "cols=1", "rows=1") + "}"
}

Function("SfwBarInit") {
  Function "mybar", "SetGridOrientation"
}

TriggerAction "bar-direction", Function "mybar", "SetGridOrientation"

layout {
  ...
  taskbar "mybar" {
  ...
  }
}

[Vimux]

Re-orienting a taskbar is a bit more fiddly, but possible...

Thanks, it works. Now I can continue working on my theme.

---

BTW, is there any way to set CSS props for this taskbar popup?

I know how to change it for individual items (pink), but not for the whole popup. I'm a bit lost in CSS and can't seem to find the right one. GTK inspector is useless.

[LBCrion]

How are you creating the popup? Using a PopUp("MyPopupName") declaration? In that case, you probably want a window#MyPopupName css node

[Vimux]

How are you creating the popup? Using a PopUp("MyPopupName") declaration?

No, this is a taskbar group:

  taskbar {
    ...
    group = true
    group cols = 1
    group labels = true
    group icons = true
    group title_width = 22
    ...
  }

[LBCrion]

In that case you probably want window#taskbar_group element

[Vimux]

In that case you probably want window#taskbar_group element

Does not work for me. Latest git version, default w10.config.

https://github.com/LBCrion/sfwbar/blob/678e7fc5951a7fa09cc0ffa1b126f50d9a117a69/config/w10.config#L111

I've tried changing the color and it doesn't seem to work.

...
window#taskbar_group {
-  background-color: RGBA(0.2,0.2,0.2,0.5);
+  background-color: red;
}
...

[LBCrion]

That was a bug. Somewhere during the code refactoring, the name got assigned to a wrong widget. This should be fixed now. Can you try the above config with the latest git please?

[Vimux]

This should be fixed now.

Fixed. I appreciate it.