[Feature Request] Top and Bottom padding or separators

[khaneliman]

I'm trying to extend my apple menu to contain some more functionality and would like a visual way to separate items. I tried adding an item with a horizontal line to separate them but it has the line height too large. I can't seem to find a way to shrink the vertical space between items. There is no padding_top and padding_bottom and item.height / item.icon.height / item.icon.background.height dont seem to do anything. Y offset only shifts an item within the height drawn.

[FelixKratz]

I think the popup system needs a rework some time in the future, it will have to be coupled with the vertical bar update #240, where exactly these annoyances surface as well. I am still not really sure how to handle the vertical configuration properly though.

There is a sketchy way to achieve what you want however... I have implemented popups such that the cell height is controlled by popup.height of the parent item, BUT if the content of the item is larger (in height) than the configured cell height, it will use the items height as a cell height for that item instead... SO the trick here is to set the popup.height=0 and then change the item height by giving the members of the popup a transparent background with the desired height, i.e.:

background.color=0x00000000
background.height=30
background.drawing=on

now we can add a divider line and it will have smaller bounds, e.g.:

apple_divider=(
  icon.drawing=off
  label.drawing=off
  background.color=$WHITE
  background.height=1
  padding_left=7
  padding_right=7
  width=110
  background.drawing=on
)

This is the result:

Full example config:

apple.sh

#!/bin/bash

POPUP_OFF="sketchybar --set apple.logo popup.drawing=off"
POPUP_CLICK_SCRIPT="sketchybar --set \$NAME popup.drawing=toggle"

apple_logo=(
  icon=$APPLE
  icon.font="$FONT:Black:16.0"
  icon.color=$GREEN
  padding_right=15
  label.drawing=off
  click_script="$POPUP_CLICK_SCRIPT"
  popup.height=0
)

apple_prefs=(
  icon=$PREFERENCES
  label="Preferences"
  background.color=0x00000000
  background.height=30
  background.drawing=on
  click_script="open -a 'System Preferences'; $POPUP_OFF"
)

apple_activity=(
  icon=$ACTIVITY
  label="Activity"
  background.color=0x00000000
  background.height=30
  background.drawing=on
  click_script="open -a 'Activity Monitor'; $POPUP_OFF"
)

apple_divider=(
  icon.drawing=off
  label.drawing=off
  background.color=$WHITE
  background.height=1
  padding_left=7
  padding_right=7
  width=110
  background.drawing=on
)

apple_lock=(
  icon=$LOCK
  label="Lock Screen"
  background.color=0x00000000
  background.height=30
  background.drawing=on
  click_script="pmset displaysleepnow; $POPUP_OFF"
)

sketchybar --add item apple.logo left                  \
           --set apple.logo "${apple_logo[@]}"         \
                                                       \
           --add item apple.prefs popup.apple.logo     \
           --set apple.prefs "${apple_prefs[@]}"       \
                                                       \
           --add item apple.activity popup.apple.logo  \
           --set apple.activity "${apple_activity[@]}" \
                                                       \
           --add item apple.divider popup.apple.logo   \
           --set apple.divider "${apple_divider[@]}"   \
                                                       \
           --add item apple.lock popup.apple.logo      \
           --set apple.lock "${apple_lock[@]}"

[khaneliman]

Alright, sounds good. Thank you for the example of how to make it work for this case. I also like how clean it looks using the bash arrays for the item configs. Gonna have to update my code like that. Appreciate your work!

[FelixKratz]

I will close this for now but I have this on my list of things that should be included in the new popup system

[khaneliman]

This is what worked for me using your example.

apple.sh

Item

#!/usr/bin/env bash

POPUP_OFF="sketchybar --set apple.logo popup.drawing=off"
POPUP_CLICK_SCRIPT="sketchybar --set \$NAME popup.drawing=toggle"

apple_logo=(
	icon="$APPLE"
	icon.font="$FONT:Black:16.0"
	icon.color="$BLUE"
	padding_right=15
	label.drawing=off
	click_script="$POPUP_CLICK_SCRIPT"
	popup.height=0
)

apple_prefs=(
	icon="$PREFERENCES"
	label="Preferences"
	background.color=0x00000000
	background.height=30
	background.drawing=on
	click_script="open -a 'System Preferences'; $POPUP_OFF"
)

apple_activity=(
	icon="$ACTIVITY"
	label="Activity"
	background.color=0x00000000
	background.height=30
	background.drawing=on
	click_script="kitty --single-instance -e btop; $POPUP_OFF"
)

apple_divider=(
	icon.drawing=off
	label.drawing=off
	background.color="$BLUE"
	background.height=1
	padding_left=7
	padding_right=7
	width=110
	background.drawing=on
)

apple_lock=(
	icon="$LOCK"
	label="Lock Screen"
	background.color=0x00000000
	background.height=30
	background.drawing=on
	click_script="osascript -e 'tell application \
              \"System Events\" to keystroke \"q\" \
                using {command down,control down}';
                $POPUP_OFF"
)

apple_logout=(
	icon="$LOGOUT"
	icon.padding_left=7
	label="Logout"
	background.color=0x00000000
	background.height=30
	background.drawing=on
	click_script="osascript -e 'tell application \
              \"System Events\" to keystroke \"q\" \
                using {command down,shift down}';
                $POPUP_OFF"
)

apple_sleep=(
	icon="$SLEEP"
	icon.padding_left=5
	background.color=0x00000000
	background.height=30
	background.drawing=on
	label="Sleep"
	click_script="osascript -e 'tell app \"System Events\" to sleep'; $POPUP_OFF"
)

apple_reboot=(
	icon="$REBOOT"
	icon.padding_left=5
	background.color=0x00000000
	background.height=30
	background.drawing=on
	label="Reboot"
	click_script="osascript -e 'tell app \"loginwindow\" to «event aevtrrst»'; $POPUP_OFF"
)

apple_shutdown=(
	icon="$POWER"
	icon.padding_left=5
	background.color=0x00000000
	background.height=30
	background.drawing=on
	label="Shutdown"
	click_script="osascript -e 'tell app \"loginwindow\" to «event aevtrsdn»'; $POPUP_OFF"
)

sketchybar --add item apple.logo left                  \
           --set apple.logo "${apple_logo[@]}"         \
                                                       \
           --add item apple.prefs popup.apple.logo     \
           --set apple.prefs "${apple_prefs[@]}"       \
                                                       \
           --add item apple.activity popup.apple.logo  \
           --set apple.activity "${apple_activity[@]}" \
                                                       \
           --add item apple.divider popup.apple.logo   \
           --set apple.divider "${apple_divider[@]}"   \
                                                       \
           --add item apple.sleep popup.apple.logo     \
           --set apple.sleep "${apple_sleep[@]}"       \
                                                       \
           --add item apple.reboot popup.apple.logo    \
           --set apple.reboot "${apple_reboot[@]}"     \
                                                       \
           --add item apple.shutdown popup.apple.logo  \
           --set apple.shutdown "${apple_shutdown[@]}" \
                                                       \
           --add item apple.divider2 popup.apple.logo  \
           --set apple.divider2 "${apple_divider[@]}"  \
                                                       \
           --add item apple.lock popup.apple.logo      \
           --set apple.lock "${apple_lock[@]}"         \
                                                       \
           --add item apple.logout popup.apple.logo    \
           --set apple.logout "${apple_logout[@]}"     \