Feature Request: The Ability To Set Widget Alignment Inside Boxes

Problem Statement

When creating complex layouts with multiple widgets inside boxes, it can be challenging to achieve the desired alignment. In particular, when using vertically oriented box widgets inside a popup with multiple horizontally oriented buttons or sliders, the widgets may not be centered as expected. This issue arises when the parent box is not the one with the most allocated space.

Example Use Case

Consider the following example code snippet:

$tools_popup = {
  type = "custom"
  name = "tools"
  bar = [
    {
      type = "button"
      label = ""
      on_click = "popup:toggle"
    }
  ]
  popup = [
    {
      type = "box"
      orientation = "vertical"
      widgets = [
        {
          type = "button"
          name = "colorPicker"
          class = "tool"
          label = "󰌁"
          on_click = "!/nix/store/1rwhmi588b839kh6mrls1qg01b2x7k0p-update_picked_color"
          tooltip = "#picked_color"
        }
        {
          type = "box"
          orientation = "horizontal"
          widgets = [
            {
              type = "button"
              name = "blueLightFilter"
              class = "tool"
              label = "#night_light_icon"
              on_click = "!/nix/store/z7srgzbscqi4j6rbhk2njicqp054mka6-hyprsunset"
              tooltip = "Night Light"
            }
            {
              type = "slider"
              name = "nightLightSlider"
              show_label = false
              show_if = "#show_night_light_slider"
              length = 100
              min = 2000
              max = 8000
              on_change="!hyprctl hyprsunset temperature ${0%.*}'; ironbar var set night_light_value ${0%.*}';"
              value = "#night_light_value"
              tooltip = "#night_light_value"
            }
          ]
        }
        {
          type = "button"
          name = "screenshotter"
          class = "tool"
          label = "󰹑"
          on_click = "!grim -g \"$(slurp -o -c $(echo $(ironbar var get base0D) | sed 's/^....\${......\}$/\\1/'))\" -t ppm - | satty --filename -"
          tooltip = "Take Screenshot"
        }
        {
          type = "box"
          orientation = "horizontal"
          widgets = [
            {
              type = "button"
              name = "wallpaperToggle"
              class = "tool"
              label = "󰸉"
              on_click = "!if [[ $(wpaperctl status | grep 'running') ]]; then wpaperctl pause; ironbar var set wallpaper_daemon_on 'false'; else wpaperctl resume; ironbar var set wallpaper_daemon_on 'true'; fi"
              tooltip = "Toggle wallpaper daemon"
            }
            {
              type = "button"
              class = "wallpaperNav"
              name = "wallpaperPrevious"
              label = ""
             _if = "#wallpaper_daemon_on"
              on_click="!wpaperctl previous;"
              tooltip = "Previous wallpaper"
            }
            {
              type = "button"
              class = "wallpaperNav"
              name = "wallpaperNext"
              label = ""
              show_if = "#wallpaper_daemon_on"
              on_click="!wpaperctl next;"
              tooltip = "Next wallpaper"
            }
          ]
        }
      ]
    }
  ]
}

In this example, the widgets inside the vertically oriented box are not centered as expected.

Solution

To solve this issue, we need to be able to set the halign property of a GtkBox to GTK_ALIGN_CENTER via some box module option. This would allow us to control the alignment of widgets inside boxes, making it easier to create complex layouts.

Alternatives Considered

We have tried finding some combination of CSS properties and nested buttons and boxes to accomplish the same look, but it doesn't seem possible. Therefore, we believe that the ability to set the halign property of a GtkBox to GTK_ALIGN_CENTER is a necessary feature to achieve the desired layout.

Benefits

By allowing us to set the halign property of a GtkBox to GTK_ALIGN_CENTER, we can create more complex and visually appealing layouts. This feature would be particularly useful for creating custom popups and toolbars with multiple widgets.

Implementation

To implement this feature, we would need to add a new option to the box module that allows us to set the halign property of a GtkBox to GTK_ALIGN_CENTER. This option could be added to the box type, and would be used to specify the alignment of widgets inside the box.

Here is an example of how the updated box module option could look:

box = {
  type = "box"
  orientation = "vertical"
  halign = "center"
  widgets = [
    {
      type = "button"
      name = "colorPicker"
      class = "tool"
      label = "󰌁"
      on_click = "!/nix/store/1rwhmi588b839kh6mrls1qg01b2x7k0p-update_picked_color"
      tooltip = "#picked_color"
    }
  ]
}

In this example, the halign property is set to "center", which would center the widgets inside the box.

Conclusion

Q: What is the current issue with widget alignment inside boxes?

A: Currently, when defining a list of vertically oriented box widgets inside a popup with multiple horizontally oriented buttons or sliders, the widgets will be left aligned instead of centered when the parent box isn't the one with the most space allocated.

Q: Can you provide an example of the issue?

A: Here is an example code snippet that demonstrates the issue:

$tools_popup = {
  type = "custom"
  name = "tools"
  bar = [
    {
      type = "button"
      label = ""
      on_click = "popup:toggle"
    }
  ]
  popup = [
    {
      type = "box"
      orientation = "vertical"
      widgets = [
        {
          type = "button"
          name = "colorPicker"
          class = "tool"
          label = "󰌁"
          on_click = "!/nix/store/1rwhmi588b839kh6mrls1qg01b2x7k0p-update_picked_color"
          tooltip = "#picked_color"
        }
        {
          type = "box"
          orientation = "horizontal"
          widgets = [
            {
              type = "button"
              name = "blueLightFilter"
              class = "tool"
              label = "#night_light_icon"
              on_click = "!/nix/store/z7srgzbscqi4j6rbhk2njicqp054mka6-hyprsunset"
              tooltip = "Night Light"
            }
            {
              type = "slider"
              name = "nightLightSlider"
              show_label = false
              show_if = "#show_night_light_slider"
              length = 100
              min = 2000
              max = 8000
              on_change="!hyprctl hyprsunset temperature ${0%.*}'; ironbar var set night_light_value ${0%.*}';"
              value = "#night_light_value"
              tooltip = "#night_light_value"
            }
          ]
        }
        {
          type = "button"
          name = "screenshotter"
          class = "tool"
          label = "󰹑"
          on_click = "!grim -g \"$(slurp -o -c $(echo $(ironbar var get base0D) | sed 's/^....\${......\}$/\\1/'))\" -t ppm - | satty --filename -"
          tooltip = "Take Screenshot"
        }
        {
          type = "box"
          orientation = "horizontal"
          widgets = [
            {
              type = "button"
              name = "wallpaperToggle"
              class = "tool"
              label = "󰸉"
              on_click = "!if [[ $(wpaperctl status | grep 'running') ]]; then wpaperctl pause; ironbar var set wallpaper_daemon_on 'false'; else wpaperctl resume; ironbar var set wallpaper_daemon_on 'true'; fi"
              tooltip = "Toggle wallpaper daemon"
            }
            {
              type = "button"
              class = "wallpaperNav"
              name = "wallpaperPrevious"
              label = ""
              show_if = "#wallpaper_daemon_on"
              on_click="!wpaperctl previous;"
              tooltip = "Previous wallpaper"
            }
            {
              type = "button"
              class = "wallpaperNav"
              name = "wallpaperNext"
              label = ""
              show_if = "#wallpaper_daemon_on"
              on_click="!wpaperctl next;"
              tooltip = "Next wallpaper"
            }
          ]
        }
      ]
    }
  ]
}

In this example, the widgets inside the vertically oriented box are not centered as expected.

Q: What is the proposed solution to this issue?

A: The proposed solution is to add a new option to the box module that allows us to set the halign property of a GtkBox to GTK_ALIGN_CENTER. This option would be used to specify the alignment of widgets inside the box.

Q: How would this feature be implemented?

A: To implement this feature, we would need to add a new option to the box module that allows us to set the halign property of a GtkBox to GTK_ALIGN_CENTER. This option could be added to the box type, and would be used to specify the alignment of widgets inside the box.

Here is an example of how the updated box module option could look:

box = {
  type = "box"
  orientation = "vertical"
  halign = "center"
  widgets = [
    {
      type = "button"
      name = "colorPicker"
      class = "tool"
      label = "󰌁"
      on_click = "!/nix/store/1rwhmi588b839kh6mrls1qg01b2x7k0p-update_picked_color"
      tooltip = "#picked_color"
    }
  ]
}

In this example, the halign property is set to "center", which would center the widgets inside the box.

Q: What are the benefits of this feature?

A: The benefits of this feature are that it would allow us to create more complex and visually appealing layouts. This feature would be particularly useful for creating custom popups and toolbars with multiple widgets.

Q: Are there any alternatives to this feature?

A: We have tried finding some combination of CSS properties and nested buttons and boxes to accomplish the same look, but it doesn't seem possible. Therefore, we believe that the ability to set the halign property of a GtkBox to GTK_ALIGN_CENTER is a necessary feature to achieve the desired layout.

Q: What is the next step in implementing this feature?

A: The next step in implementing this feature is to add the new option to the box module and test it to ensure that it works as expected.