[GH-ISSUE #647] [Tray] Text not displayed correctly in pop ups #1624

New issue

Closed

opened 2026-05-22 22:53:38 +01:00 by JakeStanger · 1 comment

JakeStanger commented

2026-05-22 22:53:38 +01:00

Owner

Originally created by @ForgotMyPasswd on GitHub (Jun 23, 2024).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/647

Describe the bug
Tray icon pop ups, such as the one for network-manager-applet, often use text at different sizes or using bold text for headers. The tray does not reflect this, which makes it harder to differenciate between each section.

To Reproduce
Steps to reproduce the behavior:

Run an applet e.g nm-applet, blueman-applet etc
Click on the applet to view its context menu pop up
See error

Expected behavior
Text to be displayed correctly with dividers too

(screenshot taken from the Gentoo Wiki, options are slightly different but the font changes are still shown)

System information:

Distro: Arch Linux
Compositor: Hyprland 0.41.1
Ironbar version: Git

Configuration

Share your bar configuration and stylesheet as applicable:

Config

name: powerline-bar
position: top
icon_theme: Papirus-Dark
anchor_to_edges: true
height: 15

ironvar_defaults:
  tray-state: true
  tray-icon: ""
  layout-icon: 

start:
- type: workspaces
  all_monitors: false
  name_map:
    '1': ""
    '2': "󰈹"
    '3': ""
    '4': ""
    '5': ""
    '6': ""

- type: label
  label: ""
  class: pl-arrow-left1

center:
- type: "focused"
  show_icon: true
  show_title: true
  icon_size: 30
  truncate:
    mode: "end"
    max_length: 25

end:

- type: label
  label: ""
  class: pl-arrow-right5

- type: clipboard
  icon: "󰅍"
  max_items: 10
  show_if: "#tray-state"
  truncate:
    mode: end
    length: 50

- type: tray
  direction: right_to_left
  show_if: "#tray-state"

- type: label
  label: "#tray-icon"
  on_click_left: "bash -c '([[ $(ironbar var get tray-state | tail -n 1) = true ]] && ironbar var set tray-state false && ironbar var set tray-icon  ) || (ironbar var set tray-state true && ironbar var set tray-icon )'"
  class: tray-toggle-btn

- type: label
  label: ""
  class: pl-arrow-right4

- type: "upower"
  format: "{percentage}%"
  name: upower-btn

- type: label
  label: ""
  class: pl-arrow-right3

- type: clock
  format: "%d/%m/%Y %H:%M"
  format_popup: "%H:%M:%S"
  
- type: label
  label: ""
  class: pl-arrow-right2

- type: custom
  bar:
  - type: button
    name: window-actions-btn
    on_click: '!hyprctl dispatch layoutmsg orientationcycle'
    widgets:
    - type: image
      src: icon:view-dual-symbolic
      size: 16
      name: window-actions-btn-image

- type: custom
  class: layout-switcher
  bar:
  - type: button
    name: layout-switcher-btn
    label: "#layout-icon"
    size: 16
    on_click: popup:toggle
  popup:
  - type: box
    orientation: vertical
    class: layout-switcher-popup
    widgets:
    - type: label
      name: header
      label: Switch Layout
    - type: button
      class: layout-switcher-btn
      label:    Master Layout
      on_click: '!hyprctl keyword general:layout master && ironbar var set layout-icon '
    - type: button
      class: layout-switcher-btn
      label: 󰕴   Dwindle Layout
      on_click: '!hyprctl keyword general:layout dwindle && ironbar var set layout-icon 󰕴'

- type: label
  label: ""
  class: pl-arrow-right1

- type: notifications
  show_count: true
  icons:
    closed_none: 󰍥
    closed_some: 󱥂
    closed_dnd: 󱅯
    open_none: 󰍡
    open_some: 󱥁
    open_dnd: 󱅮

Styles

@define-color color_bg #11111b;
@define-color color_bg_alt #181825;
@define-color color_bg_hover #f5c2e7;
@define-color color_border #181825;
@define-color color_border_active #cba6f7;
@define-color color_text #cdd6f4;
@define-color color_urgent #f38ba8;

@define-color shade1 #311B92;
@define-color shade2 #4527A0;
@define-color shade3 #512DA8;
@define-color shade4 #5E35B1;
@define-color shade5 #673AB7;
@define-color shade6 #7E57C2;
@define-color shade7 #9575CD;
@define-color shade8 #B39DDB;

/* -- base styles -- */

* {
    font-family: Noto Sans Nerd Font, sans-serif;
    font-size: 16px;
    border: none;
    border-radius: 0;
}

box, menubar, button {
    background-color: @color_bg;
    background-image: none;
    box-shadow: none;
}

button, label {
    color: @color_text;
}

button:hover {
    box-shadow: inset 0 -3px;
    color: @color_text;
}

scale trough {
    min-width: 1px;
    min-height: 2px;
}

#bar {
    border-top: 0px solid @color_border;
}

.popup {
    border: 1px solid @color_border;
    padding: 1em;
}

/* -- clipboard -- */

.clipboard {
	background-color: @shade5;
}

.clipboard .btn .icon:hover {
    background-color: @color_bg_hover;
    color: @color_text;
}

.clipboard .btn .text-icon {
	background-color: @shade5;	
}

.popup-clipboard {
    background-color: @color_bg_alt;
    color: @color_text;
}

.popup-clipboard .item {
    padding-bottom: 0.3em;
    background-color: @color_bg_alt;
    border-bottom: 1px solid @color_border;
}

.popup-clipboard .item .btn-remove {
    background-color: @color_bg_alt;
    color: @color_text;
}

.popup-clipboard .item .btn-remove:hover {
    background-color: @color_bg_hover;
    color: @color_text;
}

/* -- clock -- */

.clock {
	background-color: @shade3;
    font-weight: bold;
}

.popup-clock {
    background-color: @color_bg_alt;
    color: @color_text;
}

.popup-clock .calendar-clock {
    color: @color_text;
    font-size: 2.5em;
    padding-bottom: 0.1em;
}

.popup-clock .calendar {
    background-color: @color_bg_alt;
    color: @color_text;
}

.popup-clock .calendar .header {
    padding-top: 1em;
    border-top: 1px solid @color_border;
    font-size: 1.5em;
}

.popup-clock .calendar:selected {
    background-color: @color_border_active;
}

/* -- launcher -- */

.launcher .item {
    margin-right: 4px;
}

.launcher .ifix examtem:not(.focused):hover {
    background-color: @color_bg;
}

.launcher .open {
    border-bottom: 1px solid @color_text;
}

.launcher .focused {
    border-bottom: 1px solid @color_border_active;
}

.launcher .urgent {
    border-bottom-color: @color_urgent;
}

.popup-launcher {
    padding: 0;
}

.popup-launcher .popup-item:not(:first-child) {
    border-top: 1px solid @color_border;
}


/* -- music -- */

.music:hover * {
    background-color: @color_bg_alt;
}

.popup-music .album-art {
    margin-right: 1em;
}

.popup-music .icon-box {
    margin-right: 0.4em;
}

.popup-music .title .icon, .popup-music .title .label {
    font-size: 1.7em;
}

.popup-music .controls *:disabled {
    color: @color_border;
}

.popup-music .volume .slider slider {
    border-radius: 100%;
}

.popup-music .volume .icon {
    margin-left: 4px;
}

.popup-music .progress .slider slider {
    border-radius: 100%;
}

/* notifications */

.notifications .text-button{
    background-color: @shade1;
}

.notifications .count {
    font-size: 0.6rem;
    background-color: @color_text;
    color: @color_bg;
    border-radius: 100%;
    margin-right: 3px;
    margin-top: 3px;
    padding-left: 4px;
    padding-right: 4px;
    opacity: 0.7;
}

/* -- script -- */

.script {
    padding-left: 10px;
}


/* -- sys_info -- */

.sysinfo {
    margin-left: 10px;
}

.sysinfo .item {
    margin-left: 5px;
}


/* -- tray -- */

.tray {
	background-color: @shade5;
    margin-left: 0px;
}

/* -- tray toggle -- */

.tray-toggle-btn {
	background-color: @shade5;
    padding-right: 5px;
    font-size: 20px;
}

/* -- upower -- */
/* Attempting to theme the icon + label backgrounds*/

.upower {
	background-color: @shade4;
	color: @shade4;
}

.upower .contents{
	background-color: @shade4;
	color: @shade4;
}

.popup-upower {
    background-color: @color_bg_alt;
    color: @color_text;
}


/* -- volume -- */

.volume {
	background-color: @shade5;
	color: @color_text;
}

.popup-volume .device-box {
    border-right: 1px solid @color_border;
}

/* -- workspaces -- */

.workspaces .item {
    background-color: @shade1;
}

.workspaces .item.focused {
    box-shadow: inset 0 -3px;
    background-color: @shade1;
    color: @color_border_active;
}

.workspaces .item:hover {
    box-shadow: inset 0 -3px;
}

/* -- custom: powerlines -- */

.pl-arrow-left1 {
   background-color: @color_bg;
   color: @shade1;
   font-size: 30px;
   margin: 0px;
}

.pl-arrow-right1 {
   background-color: @shade2;
   color: @shade1;
   font-size: 30px;
   margin: 0px;
}

.pl-arrow-right2 {
   background-color: @shade3;
   color: @shade2;
   font-size: 30px;
   margin: 0px;
}

.pl-arrow-right3 {
   background-color: @shade4;
   color: @shade3;
   font-size: 30px;
   margin: 0px;
}

.pl-arrow-right4 {
   background-color: @shade5;
   color: @shade4;
   font-size: 30px;
   margin: 0px;
}

.pl-arrow-right5 {
   color: @shade5;
   font-size: 30px;
   margin: 0px;
}

/* -- Virtual Keyboard --*/

.toggle-virtual-keyboard #toggle-virtual-keyboard-btn {
    background-color: @shade2;
}

.toggle-virtual-keyboard #toggle-virtual-keyboard-btn-image {
    background-color: @shade2;
}

/* -- Window Layout Management -- */

#window-actions-btn {
    background-color: @shade2;
    color: @shade2;
}

#window-actions-btn-image{
    background-color: @shade2;
    color: @shade2;
}

.popup-window-action-menu #header {
    color: @color_text;
    font-size: 1.2em;
    border-bottom: 1px solid @color_text;
    padding-bottom: 0.4em;
    margin-bottom: 0.8em;
}

/* -- Window Layout Management -- */

#layout-switcher-btn {
    background-color: @shade2;
    color: @shade2;
}

.layout-switcher-popup #header {
    color: @color_text;
    font-size: 16;
    border-bottom: 1px solid @color_text;
    padding-bottom: 0.4em;
    margin-bottom: 0.8em;
}

Originally created by @ForgotMyPasswd on GitHub (Jun 23, 2024). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/647 **Describe the bug** Tray icon pop ups, such as the one for network-manager-applet, often use text at different sizes or using bold text for headers. The tray does not reflect this, which makes it harder to differenciate between each section. ![2024-06-23-225255_hyprshot](https://github.com/JakeStanger/ironbar/assets/96489361/284b7774-dad9-43df-b298-fd11179cd803) **To Reproduce** Steps to reproduce the behavior: 1. Run an applet e.g nm-applet, blueman-applet etc 2. Click on the applet to view its context menu pop up 3. See error **Expected behavior** Text to be displayed correctly with dividers too ![image](https://github.com/JakeStanger/ironbar/assets/96489361/2e16a904-5dc5-4790-a8da-143d5e33901b) (screenshot taken from the [Gentoo Wiki](https://wiki.gentoo.org/wiki/NetworkManager), options are slightly different but the font changes are still shown) **System information:** - Distro: Arch Linux - Compositor: Hyprland 0.41.1 - Ironbar version: Git **Configuration** > Share your bar configuration and stylesheet as applicable: <details><summary>Config</summary> ``` name: powerline-bar position: top icon_theme: Papirus-Dark anchor_to_edges: true height: 15 ironvar_defaults: tray-state: true tray-icon: "" layout-icon:  start: - type: workspaces all_monitors: false name_map: '1': "" '2': "󰈹" '3': "" '4': "" '5': "" '6': "" - type: label label: "" class: pl-arrow-left1 center: - type: "focused" show_icon: true show_title: true icon_size: 30 truncate: mode: "end" max_length: 25 end: - type: label label: "" class: pl-arrow-right5 - type: clipboard icon: "󰅍" max_items: 10 show_if: "#tray-state" truncate: mode: end length: 50 - type: tray direction: right_to_left show_if: "#tray-state" - type: label label: "#tray-icon" on_click_left: "bash -c '([[ $(ironbar var get tray-state | tail -n 1) = true ]] && ironbar var set tray-state false && ironbar var set tray-icon  ) || (ironbar var set tray-state true && ironbar var set tray-icon )'" class: tray-toggle-btn - type: label label: "" class: pl-arrow-right4 - type: "upower" format: "{percentage}%" name: upower-btn - type: label label: "" class: pl-arrow-right3 - type: clock format: "%d/%m/%Y %H:%M" format_popup: "%H:%M:%S" - type: label label: "" class: pl-arrow-right2 - type: custom bar: - type: button name: window-actions-btn on_click: '!hyprctl dispatch layoutmsg orientationcycle' widgets: - type: image src: icon:view-dual-symbolic size: 16 name: window-actions-btn-image - type: custom class: layout-switcher bar: - type: button name: layout-switcher-btn label: "#layout-icon" size: 16 on_click: popup:toggle popup: - type: box orientation: vertical class: layout-switcher-popup widgets: - type: label name: header label: Switch Layout - type: button class: layout-switcher-btn label:  Master Layout on_click: '!hyprctl keyword general:layout master && ironbar var set layout-icon ' - type: button class: layout-switcher-btn label: 󰕴 Dwindle Layout on_click: '!hyprctl keyword general:layout dwindle && ironbar var set layout-icon 󰕴' - type: label label: "" class: pl-arrow-right1 - type: notifications show_count: true icons: closed_none: 󰍥 closed_some: 󱥂 closed_dnd: 󱅯 open_none: 󰍡 open_some: 󱥁 open_dnd: 󱅮 ``` </details> <details><summary>Styles</summary> ```css @define-color color_bg #11111b; @define-color color_bg_alt #181825; @define-color color_bg_hover #f5c2e7; @define-color color_border #181825; @define-color color_border_active #cba6f7; @define-color color_text #cdd6f4; @define-color color_urgent #f38ba8; @define-color shade1 #311B92; @define-color shade2 #4527A0; @define-color shade3 #512DA8; @define-color shade4 #5E35B1; @define-color shade5 #673AB7; @define-color shade6 #7E57C2; @define-color shade7 #9575CD; @define-color shade8 #B39DDB; /* -- base styles -- */ * { font-family: Noto Sans Nerd Font, sans-serif; font-size: 16px; border: none; border-radius: 0; } box, menubar, button { background-color: @color_bg; background-image: none; box-shadow: none; } button, label { color: @color_text; } button:hover { box-shadow: inset 0 -3px; color: @color_text; } scale trough { min-width: 1px; min-height: 2px; } #bar { border-top: 0px solid @color_border; } .popup { border: 1px solid @color_border; padding: 1em; } /* -- clipboard -- */ .clipboard { background-color: @shade5; } .clipboard .btn .icon:hover { background-color: @color_bg_hover; color: @color_text; } .clipboard .btn .text-icon { background-color: @shade5; } .popup-clipboard { background-color: @color_bg_alt; color: @color_text; } .popup-clipboard .item { padding-bottom: 0.3em; background-color: @color_bg_alt; border-bottom: 1px solid @color_border; } .popup-clipboard .item .btn-remove { background-color: @color_bg_alt; color: @color_text; } .popup-clipboard .item .btn-remove:hover { background-color: @color_bg_hover; color: @color_text; } /* -- clock -- */ .clock { background-color: @shade3; font-weight: bold; } .popup-clock { background-color: @color_bg_alt; color: @color_text; } .popup-clock .calendar-clock { color: @color_text; font-size: 2.5em; padding-bottom: 0.1em; } .popup-clock .calendar { background-color: @color_bg_alt; color: @color_text; } .popup-clock .calendar .header { padding-top: 1em; border-top: 1px solid @color_border; font-size: 1.5em; } .popup-clock .calendar:selected { background-color: @color_border_active; } /* -- launcher -- */ .launcher .item { margin-right: 4px; } .launcher .ifix examtem:not(.focused):hover { background-color: @color_bg; } .launcher .open { border-bottom: 1px solid @color_text; } .launcher .focused { border-bottom: 1px solid @color_border_active; } .launcher .urgent { border-bottom-color: @color_urgent; } .popup-launcher { padding: 0; } .popup-launcher .popup-item:not(:first-child) { border-top: 1px solid @color_border; } /* -- music -- */ .music:hover * { background-color: @color_bg_alt; } .popup-music .album-art { margin-right: 1em; } .popup-music .icon-box { margin-right: 0.4em; } .popup-music .title .icon, .popup-music .title .label { font-size: 1.7em; } .popup-music .controls *:disabled { color: @color_border; } .popup-music .volume .slider slider { border-radius: 100%; } .popup-music .volume .icon { margin-left: 4px; } .popup-music .progress .slider slider { border-radius: 100%; } /* notifications */ .notifications .text-button{ background-color: @shade1; } .notifications .count { font-size: 0.6rem; background-color: @color_text; color: @color_bg; border-radius: 100%; margin-right: 3px; margin-top: 3px; padding-left: 4px; padding-right: 4px; opacity: 0.7; } /* -- script -- */ .script { padding-left: 10px; } /* -- sys_info -- */ .sysinfo { margin-left: 10px; } .sysinfo .item { margin-left: 5px; } /* -- tray -- */ .tray { background-color: @shade5; margin-left: 0px; } /* -- tray toggle -- */ .tray-toggle-btn { background-color: @shade5; padding-right: 5px; font-size: 20px; } /* -- upower -- */ /* Attempting to theme the icon + label backgrounds*/ .upower { background-color: @shade4; color: @shade4; } .upower .contents{ background-color: @shade4; color: @shade4; } .popup-upower { background-color: @color_bg_alt; color: @color_text; } /* -- volume -- */ .volume { background-color: @shade5; color: @color_text; } .popup-volume .device-box { border-right: 1px solid @color_border; } /* -- workspaces -- */ .workspaces .item { background-color: @shade1; } .workspaces .item.focused { box-shadow: inset 0 -3px; background-color: @shade1; color: @color_border_active; } .workspaces .item:hover { box-shadow: inset 0 -3px; } /* -- custom: powerlines -- */ .pl-arrow-left1 { background-color: @color_bg; color: @shade1; font-size: 30px; margin: 0px; } .pl-arrow-right1 { background-color: @shade2; color: @shade1; font-size: 30px; margin: 0px; } .pl-arrow-right2 { background-color: @shade3; color: @shade2; font-size: 30px; margin: 0px; } .pl-arrow-right3 { background-color: @shade4; color: @shade3; font-size: 30px; margin: 0px; } .pl-arrow-right4 { background-color: @shade5; color: @shade4; font-size: 30px; margin: 0px; } .pl-arrow-right5 { color: @shade5; font-size: 30px; margin: 0px; } /* -- Virtual Keyboard --*/ .toggle-virtual-keyboard #toggle-virtual-keyboard-btn { background-color: @shade2; } .toggle-virtual-keyboard #toggle-virtual-keyboard-btn-image { background-color: @shade2; } /* -- Window Layout Management -- */ #window-actions-btn { background-color: @shade2; color: @shade2; } #window-actions-btn-image{ background-color: @shade2; color: @shade2; } .popup-window-action-menu #header { color: @color_text; font-size: 1.2em; border-bottom: 1px solid @color_text; padding-bottom: 0.4em; margin-bottom: 0.8em; } /* -- Window Layout Management -- */ #layout-switcher-btn { background-color: @shade2; color: @shade2; } .layout-switcher-popup #header { color: @color_text; font-size: 16; border-bottom: 1px solid @color_text; padding-bottom: 0.4em; margin-bottom: 0.8em; } ``` </details>

JakeStanger closed this issue

2026-05-22 22:53:38 +01:00

JakeStanger commented

2026-05-22 22:53:38 +01:00

Author

Owner

@JakeStanger commented on GitHub (Nov 6, 2024):

I think the attached image is outdated, or at least taken from the Unity days when another (version of?) protocol was used. From what I can see at least, the text formatting info just does not exist in data sent across and isn't documented in the protocol. I've checked against Waybar and KDE too.

The separators are supposed to be there, so a fix for those is on the way. I'm looking into the images too.

@JakeStanger commented on GitHub (Nov 6, 2024): I think the attached image is outdated, or at least taken from the Unity days when another (version of?) protocol was used. From what I can see at least, the text formatting info just does not exist in data sent across and isn't documented in the protocol. I've checked against Waybar and KDE too. The separators are supposed to be there, so a fix for those is on the way. I'm looking into the images too.