search

JakeStanger / ironbar

Customisable Wayland gtk bar written in Rust.
https://crates.io/crates/ironbar
MIT License
640 stars 55 forks source link

[Tray] Text not displayed correctly in pop ups #647

Closed ForgotMyPasswd closed 1 week ago

ForgotMyPasswd commented 4 months ago

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

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 (screenshot taken from the Gentoo Wiki, options are slightly different but the font changes are still shown)

System information:

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 ```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; } ```
JakeStanger commented 1 week ago

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.