NotificationEntry: replace Deck with Carousel (#301)

Author: danirabbit

data/NotificationEntry.css

@@ -3,29 +3,31 @@ notification .card {
     padding: 6px;
     /* Box shadow is clipped to the margin area */
     margin: 0.75em 1em;
+    /*Make sure notification always fills width*/
+    min-width: calc(360px - 1em);
 }
 
 notification .title {
     font-weight: bold;
 }
 
-.delete-affordance {
+delete-affordance {
     background-color: mix(@theme_bg_color, @STRAWBERRY_500, 0.3);
     padding: 12px;
 }
 
-.delete-affordance.left {
+delete-affordance.left {
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
 }
 
-.delete-affordance.right {
+delete-affordance.right {
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
 }
 
-.delete-affordance image,
-.delete-affordance label {
+delete-affordance image,
+delete-affordance label {
     color: mix(@theme_fg_color, @error_color, 0.6);
     font-weight: 600;
 }
@@ -41,12 +43,12 @@ notification .close {
             @BLACK_500
         );
     box-shadow:
-        inset 0 0 0 1px alpha (#fff, 0.02),
-        inset 0 1px 0 0 alpha (#fff, 0.07),
-        inset 0 -1px 0 0 alpha (#fff, 0.01),
-        0 0 0 1px alpha (#000, 0.7),
-        0 1px 2px alpha (#000, 0.16),
-        0 2px 3px alpha (#000, 0.23);
+        inset 0 0 0 1px alpha(#fff, 0.02),
+        inset 0 1px 0 0 alpha(#fff, 0.07),
+        inset 0 -1px 0 0 alpha(#fff, 0.01),
+        0 0 0 1px alpha(#000, 0.7),
+        0 1px 2px alpha(#000, 0.16),
+        0 2px 3px alpha(#000, 0.23);
     margin: 3px;
 }
 

src/Widgets/NotificationEntry.vala

@@ -208,18 +208,18 @@ public class Notifications.NotificationEntry : Gtk.ListBoxRow {
         };
         overlay.add_overlay (delete_revealer);
 
-        var deck = new Hdy.Deck () {
-            can_swipe_back = true,
-            can_swipe_forward = true,
-            transition_type = Hdy.DeckTransitionType.SLIDE
+        var carousel = new Hdy.Carousel () {
+            allow_scroll_wheel = false,
+            // Eliminate race between packing widgets and page_changed
+            reveal_duration = 0
         };
-        deck.add (delete_left);
-        deck.add (overlay);
-        deck.add (delete_right);
-        deck.visible_child = overlay;
+        carousel.add (delete_left);
+        carousel.add (overlay);
+        carousel.add (delete_right);
+        carousel.scroll_to (overlay);
 
         revealer = new Gtk.Revealer () {
-            child = deck,
+            child = carousel,
             reveal_child = true,
             transition_duration = 200,
             transition_type = SLIDE_UP
@@ -252,14 +252,8 @@ public class Notifications.NotificationEntry : Gtk.ListBoxRow {
             return GLib.Source.CONTINUE;
         });
 
-        deck.notify["visible-child"].connect (() => {
-            if (deck.transition_running == false && deck.visible_child != overlay) {
-                clear ();
-            }
-        });
-
-        deck.notify["transition-running"].connect (() => {
-            if (deck.transition_running == false && deck.visible_child != overlay) {
+        carousel.page_changed.connect (() => {
+            if (carousel.position != 1) {
                 clear ();
             }
         });
@@ -285,32 +279,33 @@ public class Notifications.NotificationEntry : Gtk.ListBoxRow {
         }
     }
 
-    private class DeleteAffordance : Gtk.Bin {
+    private class DeleteAffordance : Gtk.Box {
         public Gtk.Align alignment { get; construct; }
 
         public DeleteAffordance (Gtk.Align alignment) {
             Object (alignment: alignment);
         }
 
+        class construct {
+           set_css_name ("delete-affordance");
+        }
+
         construct {
             var image = new Gtk.Image.from_icon_name ("edit-delete-symbolic", Gtk.IconSize.MENU);
 
             var label = new Gtk.Label (_("Delete"));
             label.get_style_context ().add_class (Granite.STYLE_CLASS_SMALL_LABEL);
 
-            var delete_internal_grid = new Gtk.Grid () {
+            var box = new Gtk.Box (VERTICAL, 3) {
                 halign = alignment,
                 hexpand = true,
-                row_spacing = 3,
                 valign = CENTER,
                 vexpand = true
             };
-            delete_internal_grid.attach (image, 0, 0);
-            delete_internal_grid.attach (label, 0, 1);
-
-            child = delete_internal_grid;
+            box.add (image);
+            box.add (label);
 
-            get_style_context ().add_class ("delete-affordance");
+            add (box);
         }
     }