[Tray] Text not displayed correctly in pop ups

Question

[Tray] Text not displayed correctly in pop ups

Closed this issue 17 days ago · 1 comments

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;
}

Answer 1 · 2024-11-06T13:44:53.000Z

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.