Multi-column layout dynamic menus with custom walker window dimensions?

[nickjj]

I have a custom menu being presented with walker --dmenu to load around 150 items in a list. It's a list of key binds along with a description.

It looks like this, I used shell scripting to make it visually look like 2 columns.

Overall it works but what I'd really like is for this 1 specific walker menu to allow for being displayed in multiple columns and also have more height + width than everything else.

For example, having something like this:

[Key]       | [Description]  ||  [Key]       | [Description]
[Key]       | [Description]  ||  [Key]       | [Description]
[Key]       | [Description]  ||  [Key]       | [Description]

[Be at least twice the height and width as my screenshot]

In the above case || would be a walker-level column split. The left and right items would be individually selectable, sort of like what walker already does for the multi column layout on symbols. In this case || wouldn't be visible, I just added that to show it here.

For this 1 use case being able to see many items at a glance is helpful.

I know there's the --height and --width flags which works, but it would be neat if it were dynamically sized based on the display size, number of items and number of columns. Basically some way to say a max percent height / width and walker would automatically create dynamic columns based on the number of items to present things with the least amount of scroll.

This would probably be a lot of work to implement, but I'm wondering if it's something you've thought about implementing.

Here's 3 examples of other tools handling this:

• dmenu has a grid patch https://tools.suckless.org/dmenu/patches/grid/
• zsh's auto-complete does an ok job at displaying things across multiple columns
• https://github.com/p-gen/smenu handles presenting text across arbitrary columns in an unknown window size.

Maybe a quick workaround for now would be to allow --columns to be set just like --height and --width so we can create custom menus with multiple columns? I wouldn't want all menus to have 2-3 columns, just this one menu.

[abenz1267]

wouldn't this be achievable with a custom menu + custom item_<menu>.xml file? I think so.

[nickjj]

I didn't see that documented. Do you have a small end to end example to share here?

echo "A Hello\nB World" | walker --dmenu is basically what my current script does. The string being passed into walker is built up through a shell script parsing niri's config files, it is not a static menu where I can hard code the items into a config.

With the XML approach, it would be great to categorize the key bind description as sub-text so it's dimmed in color based on the theme.

[abenz1267]

https://benz.gitbook.io/walker/customization/custom-menus

or check https://github.com/abenz1267/elephant-community for more examples.

[nickjj]

I had checked the custom menu docs before but didn't see any references to what item_<menu>.xml would look like to implement. I also see no references to that in the community repo.

The shell script I have is pretty in depth since it's a KDL parser with no dependencies. I don't think I can port that to Lua.

Is there no way to have a custom menu where you pipe output into walker in a way where you want multiple columns?

[abenz1267]

there's currently no way to achieve that with dmenu, no.

[nickjj]

I'm ok with not using dmenu but how does all of this piece together?

In the custom menu docs, there's no references on how to call walker with a custom menu. Also there's no mention of XML files or what you'd need to do to make it multi-column.

[abenz1267]

You call and configure custom menus the same way you configure any other elephant provider. The only difference is that custom menu identifiers are of this format: menus:<name>.

When in doubt you can always call elephant l.

The xml files are mentioned in the themeing section, but there's nothing special to them. It's just GTK layout files. So you can layout the items however you want. Have a look at default item_<provider>.xml files.

Custom menu item layouts have this name format: item_menus-<name>.xml.

[nickjj]

Sorry, I'm not able to piece things together with that information. Ideally I'd want to use my existing theme and have this menu have 2 columns. I tried for 3 hours, then I went to AI and it said it's not possible without rewriting the menu provider.

Any chance you can put together a small end to end example as a starter that I can build off of? As in, which files need to be created, their contents and what commands to run? I'd be happy to make tutorials around this afterwards, once I understand it.

But at this point between today and yesterday, I feel like I'm at a road block.

[abenz1267]

Example ~/.config/elephant/menus/example.lua:

Name = "example"
NamePretty = "Example"
Icon = "applications-other"
Cache = false
Action = "notify-send %VALUE%"
HideFromProviderlist = false
Description = "lua example"

function GetEntries()
    local entries = {}

    table.insert(entries, {
        Text = "Entry 1",
        Subtext = "Subtext",
        Value = "value",
    })

    return entries
end

Example ~/.config/walker/themes/<theme>/item_menus-example.xml:

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <requires lib="gtk" version="4.0"></requires>
  <object class="GtkBox" id="ItemBox">
    <style>
      <class name="item-box"></class>
    </style>
    <property name="orientation">horizontal</property>
    <property name="spacing">10</property>
    <child>
      <object class="GtkLabel" id="ItemImageFont">
        <style>
          <class name="item-image-text"></class>
        </style>
        <property name="width-chars">2</property>
      </object>
    </child>
    <child>
      <object class="GtkImage" id="ItemImage">
        <style>
          <class name="item-image"></class>
        </style>
        <property name="icon-size">large</property>
      </object>
    </child>
    <child>
      <object class="GtkBox" id="ItemTextBox">
        <style>
          <class name="item-text-box"></class>
        </style>
        <property name="orientation">horizontal</property>
        <property name="vexpand">true</property>
        <property name="hexpand">true</property>
        <property name="vexpand-set">true</property>
        <property name="spacing">0</property>
        <child>
          <object class="GtkLabel" id="ItemText">
            <style>
              <class name="item-text"></class>
            </style>
            <property name="ellipsize">end</property>
            <property name="vexpand_set">true</property>
            <property name="vexpand">true</property>
            <property name="hexpand_set">true</property>
            <property name="hexpand">true</property>
            <property name="xalign">0</property>
          </object>
        </child>
        <child>
          <object class="GtkLabel" id="ItemSubtext">
            <style>
              <class name="item-subtext"></class>
            </style>
            <property name="ellipsize">end</property>
            <property name="vexpand_set">true</property>
            <property name="vexpand">true</property>
            <property name="hexpand_set">true</property>
            <property name="hexpand">true</property>
            <property name="xalign">0</property>
          </object>
        </child>
      </object>
    </child>
    <child>
      <object class="GtkLabel" id="QuickActivation">
        <style>
          <class name="item-quick-activation"></class>
        </style>
        <property name="wrap">false</property>
        <property name="valign">center</property>
        <property name="xalign">0</property>
        <property name="yalign">0.5</property>
      </object>
    </child>
  </object>
</interface>

Result:

[nickjj]

Thanks.

When I run walker show example, it shows the default walker launcher, not the menu. Am I supposed to be running a different command?

Also, how do you get this to be be displayed in 2 columns?

The goal was to have Entry 1 and its subtext be split into 2 columns within Walker so I can display many entries in 2 columns.

Like this, and each entry would be individually selectable:

Entry 1   Subtext for entry 1                 Entry 2   Subtext for entry 2
Entry 3   Subtext for entry 3                 Entry 4   Subtext for entry 4

Edit: In this case, the subtext layout is specific to the theme which is fine. In this specific case, the main goal is to have the entries be displayed across 2 columns.

[abenz1267]

I don't even know where you got walker show from. walker --help shows you all options.

You can set

// walker config.toml
[columns]
"menus:<menu>" = 2

for a simple 2 column layout without other changes.

[nickjj]

Ah, yeah it looks like walker hello world will launch Walker with any arguments without errors.

I managed to find this in an old discussion where you replied walker --provider menus:example which works.

I didn't find this in the wiki or the docs for menus. Maybe a takeaway could be to add that command there?

Setting multiple columns did work as you described.

[nickjj]

One last thing sorry, for the custom menu is there a way to make it open at a specific height and with?

I know I can add --height and --width when I call it from the CLI, but let's say I launch Walker normally and then pick it as a provider, the window ends up being the default Walker size, not the adjusted size.

In the XML file I added these lines from your example, above <property name="orientation">horizontal</property> but it had no effect.

    <property name="width-request">1024</property>
    <property name="height-request">1024</property>

I also tried a few CSS styles.

I don't know if using CSS or the XML layout is considered a best practice here.

[abenz1267]

resizing dynamically when walker is already opened ain't possible atm.

[nickjj]

Thanks, that's enough to get going.

Do you want to close this?