[gnome-tour/bilelmoussaoui/fixes: 3/4] Fix animation of carousel

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 552e4e309c75ad63bc9ba80ab898be19cd0ea9de
Author: Maximiliano Sandoval R <msandova gnome org>
Date:   Mon Jan 17 14:45:23 2022 +0100

    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.

 data/resources/ui/paginator.ui | 89 ++++++++++++++++++------------------------
 src/widgets/paginator.rs       | 15 ++++---
 2 files changed, 48 insertions(+), 56 deletions(-)
---
diff --git a/data/resources/ui/paginator.ui b/data/resources/ui/paginator.ui
index 64c2da3..92d4929 100644
--- a/data/resources/ui/paginator.ui
+++ b/data/resources/ui/paginator.ui
@@ -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>
diff --git a/src/widgets/paginator.rs b/src/widgets/paginator.rs
index 00290e9..d2bcbfa 100644
--- a/src/widgets/paginator.rs
+++ b/src/widgets/paginator.rs
@@ -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);