link
(Link Dupont)
May 17, 2023, 4:12am
#1
I have a button defined in a header bar :
Gtk.Button refresh_button {
styles ["flat"]
action-name: "app.refresh";
child: Gtk.Stack refresh_button_stack {
transition-type: crossfade;
Gtk.StackPage {
name: "sensitive";
child: Gtk.Image {
icon-name: "view-refresh-symbolic";
};
}
Gtk.StackPage {
name: "spinner";
child: Gtk.Spinner {
spinning: true;
};
}
};
}
When this button is clicked, a callback function gets called that sets the visible stack page and button sensitive state:
private void update_refresh_button () {
Application application = GLib.Application.get_default () as Application;
this.refresh_button_stack.visible_child_name = application.is_refreshing ? "spinner" : "sensitive";
this.refresh_button.sensitive = !application.is_refreshing;
}
When the GtkButton
is styled with the “flat” style, the spinner appears to shrink momentarily during visibility.
This doesn’t happen when the button style is omitted.
Can I tweak the margins of the stack or stack pages to use the flat style, but not shrink the spinner?
link
(Link Dupont)
May 17, 2023, 2:00pm
#2
I was able to “fix” this and get the visual effect I desired by switching around the parent/child relationship. Rather than embedding a GtkStack
inside a GtkButton
, I put the GtkStack
as the outermost widget and created two GtkStackPage
s: one containing the button and the other containing a clamped spinner.
diff --git a/src/window.blp b/src/window.blp
index e13cb673789fb7947feeb8e9c7a71f8ff2df453b..439766381776a4edc6ceb58efb528c379e410813 100644
--- a/src/window.blp
+++ b/src/window.blp
@@ -152,23 +152,24 @@ template DamaskWindow : Adw.ApplicationWindow {
}
[end]
- Gtk.Button refresh_button {
- action-name: "app.refresh";
- child: Gtk.Stack refresh_button_stack {
- transition-type: crossfade;
- Gtk.StackPage {
- name: "sensitive";
- child: Gtk.Image {
- icon-name: "view-refresh-symbolic";
- };
- }
- Gtk.StackPage {
- name: "spinner";
+ Gtk.Stack refresh_button_stack {
+ transition-type: crossfade;
+ Gtk.StackPage {
+ name: "sensitive";
+ child: Gtk.Button refresh_button {
+ action-name: "app.refresh";
+ icon-name: "view-refresh-symbolic";
+ };
+ }
+ Gtk.StackPage {
+ name: "spinner";
+ child: Adw.Clamp {
+ maximum-size: 16;
child: Gtk.Spinner {
spinning: true;
};
- }
- };
+ };
+ }
}
}