Fix animation of carousel

Instead of doing multiple overlays, do a single overlay containing all buttons as type=overlay children. This makes the carousel span the window from start to end.
parent 818705c0
......@@ -15,23 +15,46 @@
</object>
</child>
<child>
<object class="GtkBox">
<property name="margin-start">12</property>
<property name="margin-end">12</property>
<child>
<object class="GtkOverlay" id="previous_overlay">
<object class="GtkOverlay" id="previous_overlay">
<property name="valign">center</property>
<child type="overlay">
<object class="GtkButton" id="previous_btn">
<property name="margin-start">12</property>
<property name="icon-name">left-large-symbolic</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="action-name">app.previous-page</property>
<property name="tooltip-text" translatable="yes">Previous</property>
<style>
<class name="circular" />
</style>
</object>
</child>
<child type="overlay">
<object class="GtkButton" id="next_btn">
<property name="margin-end">12</property>
<property name="icon-name">right-large-symbolic</property>
<property name="halign">end</property>
<property name="valign">center</property>
<child>
<object class="GtkButton" id="previous_btn">
<property name="icon-name">left-large-symbolic</property>
<property name="valign">center</property>
<property name="action-name">app.previous-page</property>
<property name="tooltip-text" translatable="yes">Previous</property>
<style>
<class name="circular" />
</style>
</object>
</child>
<property name="action-name">app.next-page</property>
<property name="tooltip-text" translatable="yes">Next</property>
<style>
<class name="circular" />
</style>
</object>
</child>
<child type="overlay">
<object class="GtkButton" id="start_btn">
<property name="margin-end">12</property>
<property name="icon-name">right-large-symbolic</property>
<property name="halign">end</property>
<property name="valign">center</property>
<property name="action-name">app.start-tour</property>
<property name="tooltip-text" translatable="yes">Start</property>
<style>
<class name="suggested-action" />
<class name="circular" />
</style>
</object>
</child>
<child>
......@@ -40,40 +63,6 @@
<property name="vexpand">True</property>
</object>
</child>
<child>
<object class="GtkOverlay" id="start_overlay">
<property name="valign">center</property>
<child>
<object class="GtkButton" id="start_btn">
<property name="icon-name">right-large-symbolic</property>
<property name="valign">center</property>
<property name="action-name">app.start-tour</property>
<property name="tooltip-text" translatable="yes">Start</property>
<style>
<class name="suggested-action" />
<class name="circular" />
</style>
</object>
</child>
<child type="overlay">
<object class="GtkOverlay" id="next_overlay">
<property name="valign">center</property>
<property name="can-target">false</property>
<child>
<object class="GtkButton" id="next_btn">
<property name="icon-name">right-large-symbolic</property>
<property name="valign">center</property>
<property name="action-name">app.next-page</property>
<property name="tooltip-text" translatable="yes">Next</property>
<style>
<class name="circular" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</template>
......
......@@ -17,8 +17,6 @@ mod imp {
pub(super) pages: RefCell<Vec<gtk::Widget>>,
pub(super) current_page: Cell<u32>,
#[template_child]
pub(super) next_overlay: TemplateChild<gtk::Overlay>,
#[template_child]
pub(super) next_btn: TemplateChild<gtk::Button>,
#[template_child]
pub(super) start_btn: TemplateChild<gtk::Button>,
......@@ -31,7 +29,6 @@ mod imp {
Self {
carousel: TemplateChild::default(),
start_btn: TemplateChild::default(),
next_overlay: TemplateChild::default(),
next_btn: TemplateChild::default(),
previous_btn: TemplateChild::default(),
pages: RefCell::new(Vec::new()),
......@@ -142,9 +139,9 @@ impl PaginatorWidget {
let (opacity_previous, opacity_start, opacity_next) = if (0.0..1.0).contains(&position) {
if position == 0.0 {
(position, 1.0, position)
(position, 1.0 - position, position)
} else {
(position, 1.0, position)
(position, 1.0 - position, position)
}
} else if (0.0 <= position) && (position <= forelast_page) {
(1.0, 0.0, 1.0)
......@@ -156,12 +153,18 @@ impl PaginatorWidget {
panic!("Position of the carousel is outside the allowed range");
};
// While transitioning to the last page the next button is still visible
// pressing it would crash the app so we make it not targetable.
let can_target_start = opacity_next < f64::EPSILON;
let can_target_next = opacity_next > 0_f64 && position < forelast_page;
imp.start_btn.set_opacity(opacity_start);
imp.start_btn.set_visible(opacity_start > 0_f64);
imp.start_btn.set_can_target(can_target_start);
imp.next_btn.set_opacity(opacity_next);
imp.next_btn.set_visible(opacity_next > 0_f64);
imp.next_overlay.set_can_target(opacity_next > 0_f64);
imp.next_btn.set_can_target(can_target_next);
imp.previous_btn.set_opacity(opacity_previous);
imp.previous_btn.set_visible(opacity_previous > 0_f64);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment