Move buttons inside of the game cover

data/gtk/game.blp

@@ -9,15 +9,63 @@ template $Game : Box {
 
   Adw.Clamp {
     maximum-size: 200;
+
     Box {
       orientation: vertical;
+
+      Overlay {
+        [overlay]
+        Box {
+          halign: start;
+          valign: end;
+
+          Revealer play_revealer {
+            transition-type: slide_up;
+            valign: end;
+
+            Button play_button {
+              icon-name: "media-playback-start-symbolic";
+              margin-start: 6;
+              margin-bottom: 6;
+              margin-top: 3;
+
+              styles [
+                "circular",
+                "osd",
+              ]
+            }
+          }
+
+          Revealer menu_revealer {
+            transition-type: slide_up;
+            valign: end;
+
+            MenuButton menu_button {
+              icon-name: "view-more-symbolic";
+              margin-start: 6;
+              margin-bottom: 6;
+              margin-top: 3;
+              margin-end: 3;
+              direction: up;
+
+              styles [
+                "circular",
+                "osd",
+              ]
+            }
+          }
+        }
+
         Button cover_button {
+          name: "cover_button";
+
           Overlay {
             [overlay]
             Spinner spinner {
               margin-start: 72;
               margin-end: 72;
             }
+
             Picture cover {
               width-request: 200;
               height-request: 300;
@@ -31,38 +79,8 @@ template $Game : Box {
             "flat",
           ]
         }
-      Overlay overlay {
-        [overlay]
-        Revealer play_revealer {
-          reveal-child: false;
-          transition-type: crossfade;
-          Box {
-            Button play_button {
-              halign: start;
-              margin-start: 6;
-              margin-end: 6;
-              margin-top: 6;
-              margin-bottom: 6;
       }
-            MenuButton menu_button {
-              icon-name: "view-more-symbolic";
-              margin-top: 6;
-              margin-bottom: 6;
-              margin-end: 6;
-              margin-start: 6;
-              hexpand: true;
-              halign: end;
 
-              styles [
-                "flat",
-              ]
-            }
-          }
-        }
-        Revealer title_revealer {
-          transition-type: slide_down;
-          reveal-child: true;
-          valign: start;
       Label title {
         label: _("Title");
         ellipsize: end;
@@ -75,8 +93,6 @@ template $Game : Box {
       }
     }
   }
-    }
-  }
 
   styles [
     "card",

data/gtk/preferences.blp

@@ -90,7 +90,7 @@ template $PreferencesWindow : Adw.PreferencesWindow {
           subtitle: _("Select other directories where you have Steam games installed");
 
           Revealer steam_clear_button_revealer {
-            reveal-child: false;
+
             transition-type: slide_left;
             Button steam_clear_button {
               label: _("Clear");

data/gtk/style.css

@@ -10,3 +10,9 @@
     background-color: @dark_5;
     opacity: 0.8;
 }
+
+/* The HIG claims another victim... */
+#cover_button {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}

src/game.py

@@ -30,7 +30,6 @@ from .game_cover import GameCover
 class Game(Gtk.Box):
     __gtype_name__ = "Game"
 
-    overlay = Gtk.Template.Child()
     title = Gtk.Template.Child()
     play_button = Gtk.Template.Child()
     cover = Gtk.Template.Child()
@@ -38,7 +37,7 @@ class Game(Gtk.Box):
     cover_button = Gtk.Template.Child()
     menu_button = Gtk.Template.Child()
     play_revealer = Gtk.Template.Child()
-    title_revealer = Gtk.Template.Child()
+    menu_revealer = Gtk.Template.Child()
     game_options = Gtk.Template.Child()
     hidden_game_options = Gtk.Template.Child()
 
@@ -67,8 +66,7 @@ class Game(Gtk.Box):
 
         self.win.games[self.game_id] = self
 
-        self.set_play_label()
+        self.set_play_icon()
-        self.overlay.set_measure_overlay(self.play_revealer, True)
 
         self.event_contoller_motion = Gtk.EventControllerMotion.new()
         self.add_controller(self.event_contoller_motion)
@@ -228,8 +226,8 @@ class Game(Gtk.Box):
 
     def toggle_play(self, _widget, _prop1, _prop2, state=True):
         if not self.menu_button.get_active():
-            self.title_revealer.set_reveal_child(state)
             self.play_revealer.set_reveal_child(not state)
+            GLib.timeout_add(40, self.menu_revealer.set_reveal_child, not state)
 
     def main_button_clicked(self, _widget, button):
         if self.win.schema.get_boolean("cover-launches-game") ^ button:
@@ -237,13 +235,13 @@ class Game(Gtk.Box):
         else:
             self.win.show_details_view(self)
 
-    def set_play_label(self):
+    def set_play_icon(self):
-        self.play_button.set_label(
+        self.play_button.set_icon_name(
-            _("Details")
+            "help-about-symbolic"
             if self.win.schema.get_boolean("cover-launches-game")
-            else _("Play")
+            else "media-playback-start-symbolic"
         )
 
     def schema_changed(self, _settings, key):
         if key == "cover-launches-game":
-            self.set_play_label()
+            self.set_play_icon()