Expand Bracket on Click

[i-ilak]

Im currently working on a group of items (enclosed by brackets, gif below) and Im struggling to get the intended behaviour. The goal is to have a single icon visible by default and then once clicked on that item for the brackets to expand to show some other items.

My current approach

assume we have an item, lets call it "system_icon" and we only assign it an icon and make sure that it executes the function toggle_detail when clicked on it. The corresponding plugin script would look something like this

#!/bin/bash

source "$CONFIG_DIR/icons.sh"
WIDTH=100
ICON_CLOSE_DETAILS="􀆊"
ICON_SHOW_DETAILS="􀙗"

detail_on() {
    sketchybar --animate tanh 30    --set system_icon icon="$ICON_CLOSE_DETAILS"                    \
                                    --set cpu.percent icon="" label.width=30 --set memory label.width=30 icon="􀪇"
}

detail_off() {
    sketchybar --animate tanh 30    --set system_icon icon="$ICON_SHOW_DETAILS" icon.width=0        \
                                    --set cpu.percent label.width=0 icon="" width=0                 \
                                    --set memory label.width=0 icon="" width=0
}

toggle_detail() {
  CURRENT_ICON=$(sketchybar --query system_icon | jq -r ".icon.value")
  if [ "$CURRENT_ICON" = "$ICON_CLOSE_DETAILS" ]; then
    detail_off
  else
    detail_on
  fi
}

toggle_detail

Questions

1. As you can see from the gif, the brackets don't contract completely, i.e. they keep roughly the width that they should have when all the icons are visible. Is it possible to make the brackets to only fit the size of the system_info icon when it gets contracted?
2. While the animation of the expansion is happening, it animates it on a per item basis. Is it possible to animate it for a collection of items, i.e. such that the RAM and CPU statistics would expand as a whole?

[FelixKratz]

Instead of setting the width to zero, you could set the drawing property to off. This completely disables those items and they will no longer contribute to the width of the bracket. Currently toggling the drawing property can not be animated however.

This snippet does exactly what you want (without animations):

sketchybar --add item c.control right \
           --set c.control icon="<>" label=Toggle \
                                     click_script="sketchybar --set '/c\.[0-9]/' drawing=toggle" \
           --add item c.1 right --set c.1 icon=1 label=one \
           --add item c.2 right --set c.2 icon=2 label=two \
           --add item c.3 right --set c.3 icon=3 label=three

sketchybar --add bracket collection '/c\..*/' \
           --set collection background.height=25 background.color=0xffff0000

The best way to animate this would probably be to add an animation handler for the drawing property in the source code of sketchybar. Other boolean properties havesuch an animation handler already so it could be a worthwhile improvement.

You could of course hack the animation in anyways by using key-frame animation steps where you chain together multiple animations but I think this gets out of hand quickly.

[i-ilak]

Worked like a charm, thanks a lot for the help!

Regarding the animation, thanks a lot for the hints. I was planning on taking a look at the source code anyways for some experiments with the graph component.