eww
eww copied to clipboard
[FEATURE] maximum size for window
Description of the requested feature
The ability to constrain a window/component to a maximum size.
Proposed configuration syntax
simply a field like :maxw
Additional context
Background: I want to remake and improve my statusbar with eww.
For that i want a poweroff box, which expands on hover to show options like reboot/poweroff/slepp etc.
To stay consitent with my current styling, i want that to be in an 30px x 30px box, but for some reason, i can not get it to fit that, even tho it easily could fit and i hardcoded some widths/heights. Here is an image (top is waybar, bottom eww)

eww.yuck
powermenu_ext false)
(defwindow powermenu
:class "shutdown-window"
:monitor 0
:geometry (geometry
:x "0%"
:y "0%"
:width "30px"
:height "30px"
:anchor "top right"
)
:stacking "overlay"
:exclusive false
:focusable false
(eventbox
:width "30px"
:height "30px"
:hextend true
:vextend true
:orientation "center"
:onhover "eww update powermenu_ext=true"
:onhoverlost "eww update powermenu_ext=false"
(box
:width "30px"
:height "30px"
:hextend true
:vextend true
:class "shutdown-content"
:orientation "v"
:valign "start"
:space-evenly false
(label
:width "30px"
:height "30px"
:hextend true
:vextend true
:class "shutdown-content"
:text {powermenu_ext ? "^" : ""}
)
(revealer
:transition "slidedown"
:duration "500ms"
:reveal powermenu_ext
(box
:orientation "v"
:valign "start"
(button
:class "shutdown-content"
:onclick "systemctl poweroff"
""
)
(button
:class "shutdown-content"
:onclick "systemctl reboot"
"↺"
)
)
)
)
)
)
eww.scss
@define-color tn0 #1a1b26;
@define-color tn1 #15161E;
@define-color tn2 #414868;
@define-color tn3 #a9b1d6;
@define-color tn4 #c0caf5;
@define-color tn7 #7dcfff;
@define-color tn10 #7aa2f7;
@define-color tn11 #f7768e;
@define-color tn12 #d08770;
@define-color tn13 #e0af68;
@define-color tn14 #9ece6a;
@define-color tn15 #bb9af7;
/* Simple color names */
window {
background-color: #ffffff;
}
.shutdown-window {
background-color: transparent;
}
.shutdown-content {
background-color: #f7768e;
color: #1a1b26;
border-radius: 5px;
}