Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

vlc tray icon not respecting icon_size #809

Open
salahoued opened this issue Dec 9, 2024 · 8 comments · May be fixed by #812
Open

vlc tray icon not respecting icon_size #809

salahoued opened this issue Dec 9, 2024 · 8 comments · May be fixed by #812
Labels
bug Something isn't working

Comments

@salahoued
Copy link

Describe the bug

A clear and concise description of what the bug is.

I'm not sure if this is an ironbar issue or a vlc one, but when vlc (flatpak) is launched, its tray icon is shown in ironbar too big which causes the bar height to grow big

To Reproduce
Steps to reproduce the behavior:

  1. open vlc
  2. observe the tray icon

Expected behavior

A clear and concise description of what you expected to happen.

tray icons should respect the icon_size option in the config, or if not declared should respect the bar height

System information:

  • Distro: openSUSE Tumblweed
  • Compositor: Hyprland
  • Ironbar version: 0.16.1

Configuration

Share your bar configuration and stylesheet as applicable:

Config 
let {
  $position = "top"
  $height = 20
  $margin = {
    top = 0
    left = 0
    right = 0
  }
  
  $clock = {
    type = "clock"
    name = "time-widget"
    format = "<span font-weight='bold'>%H:%M</span>, %a %d-%m-%y"
  }

  $launcher = {
    type = "launcher"
    show_names = false
    show_icons = true
    icon_size = 16
    reversed = false
  }

  $focused = {
    name = "focused-window"
    type = "focused"
    show_icon = true
    show_title = true
    icon_size = 16
    truncate = "middle"
  }

  $sys_info = {
    type = "sys_info"

    interval.memory = 10
    interval.cpu = 1
    interval.temps = 5
    interval.networks = 3


    format = [
      "C: {cpu_percent}%"
      "R: {memory_percent}%"
      "T: {temp_c:coretemp-Package-id-0}°C"
    ]
  }

  $upower = {
    type = "upower"
    icon_size = 16
  }

  $clipboard = {
      type = "clipboard"
      icon = "icon:edit-paste"
      icon_size = 16
      max_items = 10
      truncate.mode = "end"
      truncate.length = 50
    }

  $tray = {
    type = "tray"
    icon_size = 16
  }

  $notifs = {
    type = "notifications"
    show_count = true

    icons.closed_none = "󰍥"
    icons.closed_some = "󱥂"
    icons.closed_dnd = "󱅯"
    icons.open_none = "󰍡"
    icons.open_some = "󱥁"
    icons.open_dnd = "󱅮"

  }

  $logimage = {
    type = "image"
    src = "system-shutdown"
    name = "logimage"
    size = 20
  }

  $logbutton = {
    type = "button"
    name = "logbutton"
    widgets = [$logimage]
    on_click = "!wleave"
  }

  $logout = {
    type = "custom"
    bar = [$logbutton]
  }

  $center = []
  $end = [$sys_info $notifs $clipboard $upower $tray $clock $logout ]
} in {
  monitors.eDP-1 = {
    position = $position
    height = $height
    margin = $margin
    name = "ironbar-top"
    popup_gap = 0
    icon_theme = "breeze"
    start = [
      {
        type = "workspaces"
      }
      $launcher
      $focused
    ]
    center = $center
    end = $end
  }
}
Styles 

* {
  font-family: "Noto Sans Regular";
  font-size: 12px;
  border: none;
  border-radius: 0;
  padding: 0;
}

.background {
  background: transparent;
}

/* -- workspaces -- */

.workspaces {
  margin-left: 2px;
  margin-right: 5px;
}

.workspaces .item {
  background: alpha(@theme_bg_color, 0.33);
  border: 0;
  border-radius: 10px;
  color: @theme_selected_fg_color;
  padding: 2px 5px;
  margin: 4px 2px;
}

.workspaces .item.visible {
  background: transparent;
  color: @theme_bg_color;
}

/*.workspaces .item.inactive {
}*/

.workspaces .item.focused {
  background: alpha(@theme_selected_bg_color, 0.666);
  color: @theme_selected_fg_color;
}

/* -- launcher -- */

.launcher {
  background: @theme_bg_color;
  border: 1px solid @borders;
  border-radius: 5px;
  margin: 1px 0;
  padding: 0;
}

.launcher .item {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.launcher .item image {
  padding: 3px 7px;
}

.launcher .item:hover {
  background-color: alpha(@theme_selected_bg_color, 0.333);
  border-bottom: 2px solid @theme_selected_bg_color;
}

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

.launcher .open {
  border-bottom: 2px solid @theme_bg_color;
}

.launcher .focused {
  border-bottom: 2px solid @theme_selected_bg_color;
}

.launcher .focused image {
  background-color: alpha(@theme_selected_bg_color, 0.333);
}

.launcher .urgent {
  border-bottom-color: alpha(red, 0.333);
}

.popup-launcher {
  padding: 0;
  background: @theme_bg_color;
  border: 1px solid @borders;
  border-radius: 5px;
}

.popup-launcher .popup-item {
  border-bottom: 2px solid @theme_bg_color;
}

.popup-launcher .popup-item:hover {
  border-bottom: 2px solid @theme_selected_bg_color;
  background-color: alpha(@theme_selected_bg_color, 0.33);
}

/* -- focused -- */

#focused-window {
  color: @theme_selected_fg_color;
  background-color: alpha(@theme_selected_bg_color, 0.5);
  border: 1px solid @theme_selected_bg_color;
  border-radius: 5px;
  padding: 0 7px;
  margin: 1px 5px;
}

/* -- sysinfo -- */

.sysinfo {
  border: 1px solid @theme_selected_bg_color;
  border-radius: 10px;
  background: alpha(@theme_selected_bg_color, 0.5);
  padding: 0 7px;
/*   margin: 1px 5px 1px 0; */
  margin: 1px 0;
}

.sysinfo .item {
  color: @theme_selected_fg_color;

}

/* -- clipboard -- */

.clipboard {
  font-size: 1em;
  /*background: @theme_bg_color;*/
  background: transparent;
  border: 0;
  border-radius: 0 ;
  margin: 1px 0;
}

.popup-clipboard {
  background: @theme_bg_color;
  border: 1px solid @borders;
  border-radius: 5px;
  padding: 5px 7px;

}

.popup-clipboard .item {
/*   padding-bottom: 0.3em; */
  border-left: 3px solid @borders;
  background: @theme_bg_color;
  padding: 5px;
}

.popup-clipboard .item .btn-remove {
  border: 1px solid @borders;
  padding: 5px;
}

.popup-clipboard .item .btn-remove:hover {
  border: 1px solid @theme_selected_bg_color;
  background: alpha( @theme_selected_bg_color, 0.333);
}

/* notifications */

.notifications button {
  font-size: 1rem;
  color: @theme_bg_color;
  margin: 1px 0 1px 5px;
  /*background: @theme_bg_color;*/
  background: transparent;
  border: 0;
  border-radius: 5px 0 0 5px;
  padding: 0 5px 0 7px;
}

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

/* -- Upower -- */

.upower {
/*   margin: 0 3px; */
  margin: 1px 0;
  padding: 0;
/*   background: @theme_bg_color; */
  background: transparent;
  border: 0;
  border-radius: 0;
  color: @theme_bg_color;

}

.popup-upower {
  border-radius: 5px;
}

/* -- tray -- */

.tray {
/*   margin: 0 5px; */
  margin: 1px 0;
  padding: 0 5px;
  border-radius: 0 5px 5px 0;
/*   background: @theme_bg_color; */
  background: transparent;
}

.tray .item {
  padding: 0;
  margin: 0;
}

.tray .item:hover {
  background-color: @theme_selected_bg_color;
}


/* -- Date & Time -- */

.clock {
  background: alpha(@theme_bg_color, 0.8);

  color: @theme_fg_color;
  border: 1px solid @borders;
  border-radius: 5px;
  padding: 0 7px;
  margin: 1px 5px;
}

.popup-clock {
  background: @theme_bg_color;
  border: 1px solid @borders;
  border-radius: 5px;

  padding: 5px 7px;
}
.popup-clock .calendar-clock {
  font-size: 1em;
  font-weight: bold;
  padding: 5px;
}

.popup-clock .calendar {
  border: 1px solid @borders;
  border-radius: 5px;

  padding: 5px;
}

.popup-clock .calendar .header {
  border-radius: 0;
}

.popup-clock .calendar:selected {
/*   background-color: alpha(@theme_selected_bg_color, 0.333); */
  border: 1px solid @theme_selected_bg_color;
  border-radius: 0;
}

/* -- Logout button -- */

#logbutton {
  background: alpha(red, 0.666);
  border: 1px solid alpha(red, 0.666);
  border-radius: 5px;
  padding: 0 4px;
  margin: 1px 2px 1px 0;
}

Additional context

Add any other context about the problem here.

Screenshots

If applicable, add screenshots to help explain your problem.

2024-12-09-153425_hyprshot
@salahoued salahoued added the bug Something isn't working label Dec 9, 2024
@salahoued salahoued mentioned this issue Dec 10, 2024
Open
@ToxicMushroom
Copy link

I noticed the same with fcitx5

@JakeStanger
Copy link
Owner

@ToxicMushroom what package manager did you use to install it? I was suspicious of Flatpak but that might blow that out the window

@ToxicMushroom
Copy link

Pacman 1 extra/fcitx5 5.1.11-1 [0 B 17.25 MiB] [Installed] (fcitx5-im)

@JakeStanger
Copy link
Owner

Right, well it's not Flatpak then. New theory is that when the tray provides its on pixmap that's not being scaled down (properly).

@salahoued
Copy link
Author

@JakeStanger , It may have something to do with the icon_theme used.

when using breeze or breeze-dark
2024-12-11-202545_hyprshot

when using Breeze-Dark with capital letters it falls back to the default one and it works fine the icon (vlc's) shows correctly
2024-12-11-202504_hyprshot

the same for Papirus-Dark it worked fine too
2024-12-11-202014_hyprshot

@ogios
Copy link

ogios commented Dec 12, 2024 •
edited
Loading

we can force scale it ourself.
scale = icon_size / actual_height, and use image surface to redraw it or some other way.

use height/width for horizontal/vetical bar.
this is an example

@ogios ogios linked a pull request Dec 13, 2024 that will close this issue
Open
@JakeStanger
Copy link
Owner

@JakeStanger , It may have something to do with the icon_theme used.

Hm yeah, buggy icon themes could be a problem. It may be possible to perform a check on the size of the loaded image and scale that, as I don't think the above PR will account for icons from the theme.

@ogios
Copy link

ogios commented Dec 16, 2024

some theme don't have the size we wanted, and the difference can be big

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Force scaling icon ogios/ironbar
4 participants
@JakeStanger @salahoued @ToxicMushroom @ogios