breadbar: give the wifi add-network dialog proper CSD + rounded corners
Was a bare gtk4::Window with no titlebar — GTK4's own minimal CSD fallback for that case is a flat bar with plain system-font title text and square corners, which is what actually made this look like a stray window from a different decade next to the rest of the (rounded, borderless) ecosystem. Now sets a real HeaderBar (which picks up the window's existing title automatically) and gives the dialog + headerbar matching rounded corners and dark theming via the existing .wifi-add-dialog CSS class. Also switched the Connect button off "suggested-action": GTK4's bundled theme special-cases that exact class name for a native OS-accent-colour feature that isn't a normal CSS rule and doesn't yield to any background-color override this stylesheet adds, confirmed empirically (a much more specific selector had zero effect). Moved to "confirm-button", the same accent-button convention breadman/breadpad already use. Known residual issue, not resolved here: the Connect button still doesn't render the accent colour even via "confirm-button" — narrowed down to *some* button-specific styling quirk in this one dialog (window- level rules like the rounded corners and dark background apply correctly; a maximally-obvious magenta test rule on the same selector also failed to render, ruling out a color-value mistake specifically), but not root-caused further. Left as a known follow-up rather than blocking the CSD fix, which was the actual ask. Also removed two `cursor: pointer` CSS properties (on .clickable and .media-widget) that GTK4 doesn't support as a CSS property at all — was logging "Theme parser error: No property named cursor" on every startup, doing nothing functionally either way.
This commit is contained in:
parent
872e7e1589
commit
c53d504208
2 changed files with 25 additions and 4 deletions
18
src/main.rs
18
src/main.rs
|
|
@ -1350,6 +1350,15 @@ fn show_add_network_dialog(anchor: &impl IsA<gtk4::Widget>, ssid: String, on_bui
|
||||||
dialog.set_title(Some(&format!("Add “{ssid}”")));
|
dialog.set_title(Some(&format!("Add “{ssid}”")));
|
||||||
dialog.set_resizable(false);
|
dialog.set_resizable(false);
|
||||||
dialog.add_css_class("wifi-add-dialog");
|
dialog.add_css_class("wifi-add-dialog");
|
||||||
|
// A bare gtk4::Window with no titlebar set falls back to GTK's own
|
||||||
|
// minimal CSD: a flat bar with plain system-font title text and no
|
||||||
|
// rounding — which is what actually made this look like a stray window
|
||||||
|
// from a different decade next to the rest of the (rounded, borderless,
|
||||||
|
// shadowed) ecosystem. A real HeaderBar picks up the window's own title
|
||||||
|
// automatically and gets the same `.wifi-add-dialog` theming below.
|
||||||
|
let header = gtk4::HeaderBar::new();
|
||||||
|
header.set_show_title_buttons(true);
|
||||||
|
dialog.set_titlebar(Some(&header));
|
||||||
if let Some(root) = anchor.root() {
|
if let Some(root) = anchor.root() {
|
||||||
if let Ok(win) = root.downcast::<gtk4::Window>() {
|
if let Ok(win) = root.downcast::<gtk4::Window>() {
|
||||||
dialog.set_transient_for(Some(&win));
|
dialog.set_transient_for(Some(&win));
|
||||||
|
|
@ -1375,7 +1384,14 @@ fn show_add_network_dialog(anchor: &impl IsA<gtk4::Widget>, ssid: String, on_bui
|
||||||
btn_row.set_halign(gtk4::Align::End);
|
btn_row.set_halign(gtk4::Align::End);
|
||||||
let cancel_btn = gtk4::Button::with_label("Cancel");
|
let cancel_btn = gtk4::Button::with_label("Cancel");
|
||||||
let connect_btn = gtk4::Button::with_label("Connect");
|
let connect_btn = gtk4::Button::with_label("Connect");
|
||||||
connect_btn.add_css_class("suggested-action");
|
// Not "suggested-action" — GTK4's own bundled theme special-cases that
|
||||||
|
// class for a newer native OS-accent-colour feature that isn't a normal
|
||||||
|
// CSS rule at all, and simply doesn't lose to any `background-color`
|
||||||
|
// override this stylesheet adds, however specific the selector (already
|
||||||
|
// confirmed empirically: adding a much more specific override rule had
|
||||||
|
// zero effect). "confirm-button" is the same ecosystem-wide accent
|
||||||
|
// button convention breadman/breadpad already use successfully.
|
||||||
|
connect_btn.add_css_class("confirm-button");
|
||||||
btn_row.append(&cancel_btn);
|
btn_row.append(&cancel_btn);
|
||||||
btn_row.append(&connect_btn);
|
btn_row.append(&connect_btn);
|
||||||
body.append(&btn_row);
|
body.append(&btn_row);
|
||||||
|
|
|
||||||
11
src/theme.rs
11
src/theme.rs
|
|
@ -48,7 +48,6 @@ fn load_css() -> String {
|
||||||
progressbar.osd-bar {{ min-height: 6px; }}\
|
progressbar.osd-bar {{ min-height: 6px; }}\
|
||||||
progressbar.osd-bar trough {{ background-image: none; background-color: {trough}; border-radius: 3px; min-height: 6px; }}\
|
progressbar.osd-bar trough {{ background-image: none; background-color: {trough}; border-radius: 3px; min-height: 6px; }}\
|
||||||
progressbar.osd-bar trough progress {{ background-image: none; background-color: {accent}; border-radius: 3px; min-height: 6px; }}\
|
progressbar.osd-bar trough progress {{ background-image: none; background-color: {accent}; border-radius: 3px; min-height: 6px; }}\
|
||||||
.clickable {{ cursor: pointer; }}\
|
|
||||||
.wifi-pair {{ border-radius: {radius_sm}; padding: 0 2px; }}\
|
.wifi-pair {{ border-radius: {radius_sm}; padding: 0 2px; }}\
|
||||||
.wifi-pair:hover {{ background: alpha({on_bg}, 0.12); }}\
|
.wifi-pair:hover {{ background: alpha({on_bg}, 0.12); }}\
|
||||||
.wifi-popover-inner {{ min-width: 200px; padding: {pad}; }}\
|
.wifi-popover-inner {{ min-width: 200px; padding: {pad}; }}\
|
||||||
|
|
@ -68,8 +67,14 @@ fn load_css() -> String {
|
||||||
.wifi-popover-row-active {{ color: {accent}; }}\
|
.wifi-popover-row-active {{ color: {accent}; }}\
|
||||||
.wifi-popover-row-unsaved {{ opacity: 0.4; }}\
|
.wifi-popover-row-unsaved {{ opacity: 0.4; }}\
|
||||||
.wifi-popover-loading {{ opacity: 0.5; padding: 8px; }}\
|
.wifi-popover-loading {{ opacity: 0.5; padding: 8px; }}\
|
||||||
window.wifi-add-dialog {{ background-color: {bg_rgba}; color: {on_bg}; min-width: 240px; }}\
|
window.wifi-add-dialog {{ background-color: {bg_rgba}; color: {on_bg}; min-width: 240px;\
|
||||||
.media-widget {{ border-radius: {radius_sm}; padding: 0 6px; cursor: pointer; }}\
|
border-radius: {radius}; }}\
|
||||||
|
window.wifi-add-dialog headerbar {{ background-color: {bg_rgba}; color: {on_bg};\
|
||||||
|
border-top-left-radius: {radius}; border-top-right-radius: {radius};\
|
||||||
|
border-bottom: 1px solid alpha({on_bg}, 0.08); box-shadow: none; }}\
|
||||||
|
.confirm-button {{ background-color: @accent; color: @on-accent; }}\
|
||||||
|
.confirm-button:hover {{ background-color: alpha(@accent, 0.85); }}\
|
||||||
|
.media-widget {{ border-radius: {radius_sm}; padding: 0 6px; }}\
|
||||||
.media-widget:hover {{ background: alpha({on_bg}, 0.10); }}\
|
.media-widget:hover {{ background: alpha({on_bg}, 0.10); }}\
|
||||||
.media-indicator {{ font-size: 11px; opacity: 0.7; margin-right: 2px; }}\
|
.media-indicator {{ font-size: 11px; opacity: 0.7; margin-right: 2px; }}\
|
||||||
.media-track-lbl {{ font-size: 12px; }}\
|
.media-track-lbl {{ font-size: 12px; }}\
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue