leaflet: Add the over and under mode transitions

This allows the mode transition animation to match the semantic of the over and under child transitions.

mentioned in merge request !233 (closed)

@guido.gunther: Can you review this please? We need it merged so @exalm can rebase !226 (merged) on it.

added 7 commits

• aea49898...dd470f4a - 4 commits from branch Librem5:master
• 48985810 - leaflet: Clip children when drawing unfolded
• fa3a76d6 - leaflet: Clip the end surface when drawing folded
• 538bea30 - leaflet: Add the over and under mode transition animations

Compare with previous version

It would be cool if @exalm would review it then since he likely understands that part better than I do!

@guido.gunther mode transitions are completely different from child transitions, so nope. :) But it's pretty straightforward (and messy at the same time), since it's just drawing.

The bottom child moves a bit when the transition starts.

The issue you are mentionning is orthogonal (it was already there and visible with the sliding animation) and is solved by !240 (merged).

added 8 commits

• 538bea30...96c040ca - 5 commits from branch Librem5:master
• c71bc355 - leaflet: Clip children when drawing unfolded
• 5de466ee - leaflet: Clip the end surface when drawing folded
• a9a3e196 - leaflet: Add the over and under mode transition animations

Compare with previous version

@exalm: I will merge this MR if you approve it.

@adrien.plazas nope. I should have attached an animation. This is with this MR applied on top of !240 (merged).

This is over transition. The left pane should not move here.

under:

it's hard to see here, it seems the issue is there as well, but just less consistent.

slide is fine because both panes move anyway. :)

changed milestone to %1.0

added 13 commits

• a9a3e196...56b0aa62 - 10 commits from branch Librem5:master
• afb0c9f0 - leaflet: Clip children when drawing unfolded
• 40a979ff - leaflet: Clip the end surface when drawing folded
• 37ce1b9c - leaflet: Add the over and under mode transition animations

Compare with previous version

mentioned in issue #154 (closed)

Ok, so this indeed happens because the first draw(), where start/end surfaces are filled, is done already after the first allocation in transition. Either it needs to be done earlier, or it should specifically shift the widgets back, since e.g. alloc.x of the startmost child is not 0 at that point.

A crude way to fix it:

diff --git a/src/hdy-leaflet.c b/src/hdy-leaflet.c
index 31aea12..c3c3419 100644
--- a/src/hdy-leaflet.c
+++ b/src/hdy-leaflet.c
@@ -1508,13 +1508,11 @@ hdy_leaflet_size_allocate_folded (GtkWidget     *widget,
               (mode_transition_type == HDY_LEAFLET_MODE_TRANSITION_TYPE_UNDER && direction == GTK_TEXT_DIR_RTL);
       priv->mode_transition.start_surface_allocation.width = under ? remaining_size : start_size;
       priv->mode_transition.start_surface_allocation.height = allocation->height;
-      priv->mode_transition.start_surface_allocation.x = under ? 0 : remaining_start_size - start_size;
+      priv->mode_transition.start_surface_allocation.x = remaining_start_size - start_size;
       priv->mode_transition.start_surface_allocation.y = 0;
-      under = (mode_transition_type == HDY_LEAFLET_MODE_TRANSITION_TYPE_UNDER && direction == GTK_TEXT_DIR_LTR) ||
-              (mode_transition_type == HDY_LEAFLET_MODE_TRANSITION_TYPE_OVER && direction == GTK_TEXT_DIR_RTL);
       priv->mode_transition.end_surface_allocation.width = end_size;
       priv->mode_transition.end_surface_allocation.height = allocation->height;
-      priv->mode_transition.end_surface_allocation.x = under ? allocation->width - end_size : remaining_start_size + visible_size;
+      priv->mode_transition.end_surface_allocation.x = remaining_start_size + visible_size;
       priv->mode_transition.end_surface_allocation.y = 0;
       priv->mode_transition.end_surface_clip.width = end_size;
       priv->mode_transition.end_surface_clip.height = priv->mode_transition.end_surface_allocation.height;
@@ -1526,8 +1524,7 @@ hdy_leaflet_size_allocate_folded (GtkWidget     *widget,
       priv->mode_transition.start_surface_allocation.width = allocation->width;
       priv->mode_transition.start_surface_allocation.height = under ? remaining_size : start_size;
       priv->mode_transition.start_surface_allocation.x = 0;
-      priv->mode_transition.start_surface_allocation.y = under ? 0 : remaining_start_size - start_size;
-      under = mode_transition_type == HDY_LEAFLET_MODE_TRANSITION_TYPE_UNDER;
+      priv->mode_transition.start_surface_allocation.y = remaining_start_size - start_size;
       priv->mode_transition.end_surface_allocation.width = allocation->width;
       priv->mode_transition.end_surface_allocation.height = end_size;
       priv->mode_transition.end_surface_allocation.x = 0;
@@ -2280,6 +2277,12 @@ hdy_leaflet_draw (GtkWidget *widget,
   if (priv->visible_child) {
     if (gtk_progress_tracker_get_state (&priv->mode_transition.tracker) != GTK_PROGRESS_STATE_AFTER &&
         priv->fold == HDY_FOLD_FOLDED) {
+      GtkTextDirection direction;
+      gboolean is_horizontal;
+
+      is_horizontal = gtk_orientable_get_orientation (GTK_ORIENTABLE (widget)) == GTK_ORIENTATION_HORIZONTAL;
+      direction = gtk_widget_get_direction (widget);
+
       if (priv->mode_transition.start_surface == NULL &&
           priv->mode_transition.start_surface_allocation.width != 0 &&
           priv->mode_transition.start_surface_allocation.height != 0) {
@@ -2350,30 +2353,54 @@ hdy_leaflet_draw (GtkWidget *widget,
 
       cairo_save (cr);
       if (priv->mode_transition.start_surface != NULL) {
-        cairo_rectangle (cr,
-                         priv->mode_transition.start_surface_allocation.x,
-                         priv->mode_transition.start_surface_allocation.y,
+        gint x, y;
+
+        x = priv->mode_transition.start_surface_allocation.x;
+        y = priv->mode_transition.start_surface_allocation.y;
+
+        if (is_horizontal) {
+          if ((priv->mode_transition.type == HDY_LEAFLET_MODE_TRANSITION_TYPE_OVER && direction == GTK_TEXT_DIR_LTR) ||
+              (priv->mode_transition.type == HDY_LEAFLET_MODE_TRANSITION_TYPE_UNDER && direction == GTK_TEXT_DIR_RTL))
+            x = 0;
+        } else {
+          if (priv->mode_transition.type == HDY_LEAFLET_MODE_TRANSITION_TYPE_UNDER)
+            y = 0;
+        }
+
+        cairo_rectangle (cr, x, y,
                          priv->mode_transition.start_surface_allocation.width,
                          priv->mode_transition.start_surface_allocation.height);
         cairo_clip (cr);
-        cairo_set_source_surface (cr, priv->mode_transition.start_surface,
-                                  priv->mode_transition.start_surface_allocation.x,
-                                  priv->mode_transition.start_surface_allocation.y);
+        cairo_set_source_surface (cr, priv->mode_transition.start_surface, x, y);
         cairo_paint (cr);
       }
       cairo_restore (cr);
 
       cairo_save (cr);
       if (priv->mode_transition.end_surface != NULL) {
+        gint x, y;
+        GtkAllocation alloc;
+
+        x = priv->mode_transition.end_surface_allocation.x;
+        y = priv->mode_transition.end_surface_allocation.y;
+        gtk_widget_get_allocation (widget, &alloc);
+
+        if (is_horizontal) {
+          if ((priv->mode_transition.type == HDY_LEAFLET_MODE_TRANSITION_TYPE_UNDER && direction == GTK_TEXT_DIR_LTR) ||
+              (priv->mode_transition.type == HDY_LEAFLET_MODE_TRANSITION_TYPE_OVER && direction == GTK_TEXT_DIR_RTL))
+            x = alloc.width - priv->mode_transition.end_surface_allocation.width;
+        } else {
+          if (priv->mode_transition.type == HDY_LEAFLET_MODE_TRANSITION_TYPE_OVER)
+            y = alloc.height - priv->mode_transition.end_surface_allocation.height;
+        }
+
         cairo_rectangle (cr,
                          priv->mode_transition.end_surface_clip.x,
                          priv->mode_transition.end_surface_clip.y,
                          priv->mode_transition.end_surface_clip.width,
                          priv->mode_transition.end_surface_clip.height);
         cairo_clip (cr);
-        cairo_set_source_surface (cr, priv->mode_transition.end_surface,
-                                  priv->mode_transition.end_surface_allocation.x,
-                                  priv->mode_transition.end_surface_allocation.y);
+        cairo_set_source_surface (cr, priv->mode_transition.end_surface, x, y);
         cairo_paint (cr);
       }
       cairo_restore (cr);

mentioned in merge request !324 (closed)

added 129 commits

• 37ce1b9c...9ecbf214 - 126 commits from branch Librem5:master
• cb9b8d6a - leaflet: Clip children when drawing unfolded
• e474eafa - leaflet: Clip the end surface when drawing folded
• 19baf6a5 - leaflet: Add the over and under mode transition animations

Compare with previous version

Rebased.

added 2 commits

• 8573f56d - leaflet: Fix the folding sliding children padding
• 886be959 - leaflet: Add the over and under mode transition animations

Compare with previous version

@exalm: I applied your patch as a separate commit, what do you think? I'd be happy to merge it that way. :)

added 2 commits

• 7af1ad3d - leaflet: Fix the folding sliding children padding
• 9c6e1b76 - leaflet: Add the over and under mode transition animations

Compare with previous version

resolved all threads

merged