From 16f75edb13334ee3882f377a859e9e591bcae0ad Mon Sep 17 00:00:00 2001 From: The_miro Date: Sun, 5 Jul 2026 20:48:52 +0200 Subject: [PATCH] style(astal-menu): fixed-shape switches, inset close button, shorter panel, uniform expand icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Switches: give them a fixed pill with a bordered round knob (the reset theme left them shapeless). - Close (x) button: inset with a margin so it no longer overlaps the drawn border. - Height: the panel overflowed the monitor. Trim the map compact height, quad min-height, card padding, grid/panel spacing, top margin, and drawer strip so it fits (≈1600 -> ≈1310 logical on a 1440 display). - App drawer expand button: use the same nf-fa-expand/compress glyphs as the module expand buttons instead of chevrons, so all expand controls look uniform. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01XUWCXM4KhjRkwheaA3X7bP --- .../hyprlua/astal-menu/modules/location.py | 2 +- .../hyprlua/astal-menu/style/style.css | 33 +++++++++++++++---- .../hyprlua/astal-menu/ui/appdrawer.py | 8 ++--- desktopenvs/hyprlua/astal-menu/ui/quadgrid.py | 2 +- desktopenvs/hyprlua/astal-menu/window.py | 4 +-- 5 files changed, 34 insertions(+), 15 deletions(-) diff --git a/desktopenvs/hyprlua/astal-menu/modules/location.py b/desktopenvs/hyprlua/astal-menu/modules/location.py index 5d1ac84..0a6eeba 100644 --- a/desktopenvs/hyprlua/astal-menu/modules/location.py +++ b/desktopenvs/hyprlua/astal-menu/modules/location.py @@ -80,7 +80,7 @@ def build(ctx: ModuleContext) -> ModuleInstance: if not ctx.feature("ip_locate", True): return ModuleInstance(compact=_placeholder(), expanded=None) ctx.services.location.get() # kick off geolocation (traceroute → API) if not started - compact = _MapView(ctx, zoom=12, size=(640, 340), tag="compact", show_info=False) + compact = _MapView(ctx, zoom=12, size=(620, 150), tag="compact", show_info=False) expanded = _MapView(ctx, zoom=13, size=(1100, 620), tag="expanded", show_info=True) return ModuleInstance(compact=compact, expanded=expanded, scroll_expanded=False) diff --git a/desktopenvs/hyprlua/astal-menu/style/style.css b/desktopenvs/hyprlua/astal-menu/style/style.css index 63a3c7c..101cb90 100644 --- a/desktopenvs/hyprlua/astal-menu/style/style.css +++ b/desktopenvs/hyprlua/astal-menu/style/style.css @@ -42,7 +42,7 @@ drawingarea { opacity: 0.15; } -.quad-card { min-height: 190px; } +.quad-card { min-height: 100px; } .section-title { color: @text; font-weight: bold; opacity: 0.85; } /* The single module border + background is drawn with Cairo by bordered(fill_bg=True) @@ -54,7 +54,7 @@ drawingarea { .appdrawer, .taskbar, .favorites { - padding: 12px 14px; + padding: 8px 12px; } .quad-header, @@ -175,9 +175,9 @@ button:checked.quad-action { background: @accent; color: @bg; border-color: @acc /* ---- bluetooth / network shared rows -------------------------------- */ .bt-row, .net-row { - padding: 8px 6px; + padding: 4px 6px; border-radius: 12px; - min-height: 40px; + min-height: 30px; } .bt-row:hover, .net-row:hover { background: alpha(@violet, 0.15); } @@ -198,8 +198,26 @@ button:checked.quad-action { background: @accent; color: @bg; border-color: @acc .net-entry:focus-within { border-color: @accent; } .pubip { color: @accent; font-size: 15pt; } -/* switches / scrollbars pick up the accent */ -switch:checked { background: @accent; } +/* switches: fixed pill with a bordered round knob (the reset theme leaves them + * shapeless otherwise) */ +switch { + min-width: 48px; + min-height: 26px; + border: 2px solid @violet; + border-radius: 15px; + background: @bg; + padding: 0; +} +switch:checked { background: @accent; border-color: @accent; } +switch > slider { + min-width: 18px; + min-height: 18px; + margin: 2px; + border-radius: 50%; + border: 1px solid @violet; + background: @text; +} +switch:checked > slider { border-color: @accent; } scrollbar slider { background: @violet; border-radius: 8px; min-width: 6px; } scrollbar slider:hover { background: @accent; } @@ -212,6 +230,7 @@ scrollbar slider:hover { background: @accent; } .close-btn { color: @text; background: @bg; border: none; border-radius: 20px; - min-width: 34px; min-height: 34px; margin: 2px 4px; + min-width: 34px; min-height: 34px; + margin: 16px 20px; /* keep it clear of the module's drawn border */ } .close-btn:hover { background: @accent; color: @bg; } diff --git a/desktopenvs/hyprlua/astal-menu/ui/appdrawer.py b/desktopenvs/hyprlua/astal-menu/ui/appdrawer.py index a7cbbb8..58a9976 100644 --- a/desktopenvs/hyprlua/astal-menu/ui/appdrawer.py +++ b/desktopenvs/hyprlua/astal-menu/ui/appdrawer.py @@ -15,7 +15,7 @@ from gi.repository import AstalApps, Gtk # noqa: E402 from ui.favorites import Favorites -_STRIP_HEIGHT = 190 # collapsed grid height (logical px) +_STRIP_HEIGHT = 150 # collapsed grid height (logical px) class AppDrawer(Gtk.Box): @@ -62,7 +62,7 @@ class AppDrawer(Gtk.Box): title = Gtk.Label(label="Applications", xalign=0.0) title.add_css_class("section-title") header.set_start_widget(title) - self._expand_btn = Gtk.Button(label="") # chevron up + self._expand_btn = Gtk.Button(label="") # nf-fa-expand (uniform with quad expand) self._expand_btn.add_css_class("quad-action") self._expand_btn.set_tooltip_text("Expand") self._expand_btn.connect("clicked", lambda *_: self._toggle_expand()) @@ -75,12 +75,12 @@ class AppDrawer(Gtk.Box): self.set_vexpand(True) self._scroll.set_min_content_height(_STRIP_HEIGHT) self._scroll.set_max_content_height(100000) - self._expand_btn.set_label("") # chevron down + self._expand_btn.set_label("") # nf-fa-compress else: self.set_vexpand(False) self._scroll.set_min_content_height(_STRIP_HEIGHT) self._scroll.set_max_content_height(_STRIP_HEIGHT) - self._expand_btn.set_label("") # chevron up + self._expand_btn.set_label("") # nf-fa-expand def _toggle_expand(self) -> None: self._expanded = not self._expanded diff --git a/desktopenvs/hyprlua/astal-menu/ui/quadgrid.py b/desktopenvs/hyprlua/astal-menu/ui/quadgrid.py index 3b4475c..80796df 100644 --- a/desktopenvs/hyprlua/astal-menu/ui/quadgrid.py +++ b/desktopenvs/hyprlua/astal-menu/ui/quadgrid.py @@ -32,7 +32,7 @@ class QuadGrid(Gtk.Overlay): self._expanded_id: str | None = None self.grid = Gtk.Grid(column_homogeneous=True, row_homogeneous=True, - column_spacing=14, row_spacing=14) + column_spacing=10, row_spacing=10) self.grid.add_css_class("quad-grid") self.set_child(self.grid) diff --git a/desktopenvs/hyprlua/astal-menu/window.py b/desktopenvs/hyprlua/astal-menu/window.py index 471d500..125a0c3 100644 --- a/desktopenvs/hyprlua/astal-menu/window.py +++ b/desktopenvs/hyprlua/astal-menu/window.py @@ -35,7 +35,7 @@ from ui.taskbar import Taskbar PANEL_WIDTH_FRACTION = 0.5 # of the monitor width... MAX_PANEL_WIDTH = 1100 # ...clamped to this -TOP_MARGIN = 46 # gap below the top bar +TOP_MARGIN = 28 # gap below the top bar BOTTOM_MARGIN = 34 # gap from the screen bottom when expanded @@ -50,7 +50,7 @@ class MenuWindow(Gtk.ApplicationWindow): self._init_layer_shell() - self.root = Gtk.Box(orientation=Gtk.Orientation.VERTICAL, spacing=12) + self.root = Gtk.Box(orientation=Gtk.Orientation.VERTICAL, spacing=8) self.root.set_name("panel-root") self.root.add_css_class("panel")