ironbar
ironbar copied to clipboard
JakeStanger
Ironbar widgets do not adjust to changes in output
Describe the bug When my monitor orientation changes, in my case by using iio-hyprland to automatically rotate my screen when I rotate my laptop, ironbar also updates its size. However, widgets appear offscreen when I click on them so they are only accessible when my display is in landscape mode.
To Reproduce Steps to reproduce the behavior:
- Open ironbar
- Rotate display orientation in a compositor
- Click on a widget
- See error
Expected behavior Widgets such as the calendar widget to appear below the button when clicked or tapped
System information:
- Distro: EndeavourOS
- Compositor: Hyprland 0.40.0
- Ironbar version: Latest git
Configuration
Share your bar configuration and stylesheet as applicable:
Config
anchor_to_edges: true
position: top
icon_theme: Papirus-Dark
height: 24
start:
- type: workspaces
all_monitors: false
name_map:
'1': ""
'2': ""
'3': ""
'4': ""
'5': ""
'6': ""
- type: label
label: ""
class: pl-arrow-left1
end:
- type: label
label: ""
class: pl-arrow-right5
- type: tray
direction: right_to_left
# icon_size: 25
- type: clipboard
icon:
max_items: 10
truncate:
mode: end
length: 50
- type: label
label: ""
class: pl-arrow-right4
- type: "upower"
format: "{percentage}%"
name: upower-btn
- type: label
label: ""
class: pl-arrow-right3
- type: clock
- 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: 24
name: window-actions-btn-image
- 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;
margin-left: 0px;
font-size: 1.1em;
}
.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;
}
/* -- 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 -- */
.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: 33px;
margin: 0px;
}
.pl-arrow-right1 {
background-color: @shade2;
color: @shade1;
font-size: 33px;
margin: 0px;
}
.pl-arrow-right2 {
background-color: @shade3;
color: @shade2;
font-size: 33px;
margin: 0px;
}
.pl-arrow-right3 {
background-color: @shade4;
color: @shade3;
font-size: 33px;
margin: 0px;
}
.pl-arrow-right4 {
background-color: @shade5;
color: @shade4;
font-size: 33px;
margin: 0px;
}
.pl-arrow-right5 {
color: @shade5;
font-size: 33px;
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;
}
Additional context This used to work on a previous version of ironbar, can't remember which git revision sadly. Here are the logs produced. ironbar.2024-05-25.log
I can't easily test this myself. Are you able to send a screenshot of the problem please?
I've attached a video which showcases the problem
https://github.com/JakeStanger/ironbar/assets/96489361/c5ab266b-5c8c-4331-af3b-63d92982a4af
That's brilliant, thanks.
Very cool to see Ironbar on a touchscreen too.
Fix landing in git shortly. You should see with this that popups will reposition themselves on any resolution/orientation/scale changes instantly, even while open.