[gnome-sudoku] Responsive layout: stack replaced with squeezer



commit 7f73657f42a6326fd55a5e09fb9cf66036fc2032
Author: lajonss <l3n1 dupaw eu>
Date:   Sat Nov 21 05:50:47 2020 +0100

    Responsive layout: stack replaced with squeezer

 data/gnome-sudoku.ui  | 290 ++++++++++++++++++++++++++++++--------------------
 src/gnome-sudoku.vala |  45 +++++---
 src/main-menu.vala    |   1 -
 3 files changed, 206 insertions(+), 130 deletions(-)
---
diff --git a/data/gnome-sudoku.ui b/data/gnome-sudoku.ui
index 04589406..1560265b 100644
--- a/data/gnome-sudoku.ui
+++ b/data/gnome-sudoku.ui
@@ -165,15 +165,15 @@
         <property name="orientation">vertical</property>
         <property name="visible">True</property>
         <child>
-          <object class="GtkStack" id="main_stack">
+          <object class="HdySqueezer" id="main_squeezer">
             <property name="visible">True</property>
-            <property name="homogeneous">True</property>
             <property name="margin">25</property>
-            <property name="expand">True</property>
+            <property name="homogeneous">False</property>
+            <property name="transition-type">crossfade</property>
             <child>
-              <object class="GtkBox"> <!-- start_box -->
-                <property name="orientation">vertical</property>
+              <object class="GtkBox" id="start_box">
                 <property name="visible">True</property>
+                <property name="orientation">vertical</property>
                 <property name="halign">center</property>
                 <property name="valign">center</property>
                 <property name="margin">0</property>
@@ -190,6 +190,7 @@
                             <property name="label" translatable="yes">_Easy</property>
                             <property name="action-name">app.start-game</property>
                             <property name="action-target">1</property>  <!-- 1 corresponds to enum 
DifficultyCategory.EASY -->
+                            <property name="height-request">80</property>
                           </object>
                         </child>
                         <child>
@@ -197,6 +198,7 @@
                             <property name="label" translatable="yes">_Medium</property>
                             <property name="action-name">app.start-game</property>
                             <property name="action-target">2</property>  <!-- 2 corresponds to enum 
DifficultyCategory.MEDIUM -->
+                            <property name="height-request">80</property>
                           </object>
                         </child>
                         <child>
@@ -204,6 +206,7 @@
                             <property name="label" translatable="yes">_Hard</property>
                             <property name="action-name">app.start-game</property>
                             <property name="action-target">3</property>  <!-- 3 corresponds to enum 
DifficultyCategory.HARD -->
+                            <property name="height-request">80</property>
                           </object>
                         </child>
                         <child>
@@ -211,6 +214,7 @@
                             <property name="label" translatable="yes">_Very Hard</property>
                             <property name="action-name">app.start-game</property>
                             <property name="action-target">4</property>  <!-- 4 corresponds to enum 
DifficultyCategory.VERY_HARD -->
+                            <property name="height-request">80</property>
                           </object>
                         </child>
                         <child>
@@ -218,6 +222,7 @@
                             <property name="label" translatable="yes">_Create your own puzzle</property>
                             <property name="action-name">app.create-game</property>
                             <property name="has-separator">True</property>
+                            <property name="height-request">80</property>
                           </object>
                         </child>
                       </object>
@@ -230,140 +235,195 @@
                   </packing>
                 </child>
               </object> <!-- End of start_box -->
-              <packing>
-                <property name="name">start_box</property>
-              </packing>
             </child>
             <child>
-              <object class="HdySqueezer" id="squeezer">
+              <object class="GtkBox" id="start_box_s">
+                <property name="visible">True</property>
+                <property name="orientation">vertical</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+                <property name="margin">0</property>
+                <property name="width-request">200</property>
+                <property name="height-request">200</property>
+                <child>
+                  <object class="GtkFrame">
+                    <property name="visible">True</property>
+                    <property name="shadow-type">GTK_SHADOW_IN</property>
+                    <child>
+                      <object class="SudokuMainMenu">
+                        <child>
+                          <object class="SudokuMainMenuItem">
+                            <property name="label" translatable="yes">_Easy</property>
+                            <property name="action-name">app.start-game</property>
+                            <property name="action-target">1</property>  <!-- 1 corresponds to enum 
DifficultyCategory.EASY -->
+                            <property name="height-request">40</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="SudokuMainMenuItem">
+                            <property name="label" translatable="yes">_Medium</property>
+                            <property name="action-name">app.start-game</property>
+                            <property name="action-target">2</property>  <!-- 2 corresponds to enum 
DifficultyCategory.MEDIUM -->
+                            <property name="height-request">40</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="SudokuMainMenuItem">
+                            <property name="label" translatable="yes">_Hard</property>
+                            <property name="action-name">app.start-game</property>
+                            <property name="action-target">3</property>  <!-- 3 corresponds to enum 
DifficultyCategory.HARD -->
+                            <property name="height-request">40</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="SudokuMainMenuItem">
+                            <property name="label" translatable="yes">_Very Hard</property>
+                            <property name="action-name">app.start-game</property>
+                            <property name="action-target">4</property>  <!-- 4 corresponds to enum 
DifficultyCategory.VERY_HARD -->
+                            <property name="height-request">40</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="SudokuMainMenuItem">
+                            <property name="label" translatable="yes">_Create your own puzzle</property>
+                            <property name="action-name">app.create-game</property>
+                            <property name="has-separator">True</property>
+                            <property name="height-request">40</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="expand">True</property>
+                    <property name="fill">True</property>
+                    <property name="position">0</property>
+                  </packing>
+                </child>
+              </object> <!-- End of start_box_s -->
+            </child>
+            <child>
+              <object class="GtkAspectFrame" id="frame_h">
                 <property name="visible">True</property>
-                <property name="transition-type">crossfade</property>
+                <property name="shadow-type">GTK_SHADOW_NONE</property>
+                <property name="obey-child">False</property>
+                <property name="ratio">1.4</property>
                 <child>
-                  <object class="GtkAspectFrame" id="frame_h">
+                  <object class="GtkBox" id="game_box">
                     <property name="visible">True</property>
-                    <property name="shadow-type">GTK_SHADOW_NONE</property>
-                    <property name="obey-child">False</property>
-                    <property name="ratio">1.4</property>
+                    <property name="spacing">25</property>
                     <child>
-                      <object class="GtkBox" id="game_box">
+                      <object class="GtkButtonBox" id="controls_box">
                         <property name="visible">True</property>
-                        <property name="spacing">25</property>
+                        <property name="halign">end</property>
+                        <property name="valign">end</property>
+                        <property name="can-focus">False</property>
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">6</property>
                         <child>
-                          <object class="GtkButtonBox" id="controls_box">
+                          <object class="GtkButton" id="play_pause_button">
                             <property name="visible">True</property>
-                            <property name="halign">end</property>
-                            <property name="valign">end</property>
-                            <property name="can-focus">False</property>
-                            <property name="orientation">vertical</property>
-                            <property name="spacing">6</property>
-                            <child>
-                              <object class="GtkButton" id="play_pause_button">
-                                <property name="visible">True</property>
-                                <property name="can-focus">True</property>
-                                <property name="receives-default">True</property>
-                                <property name="action-name">app.pause</property>
-                                <property name="use-underline">True</property>
-                                <property name="width-request">120</property>
-                                <property name="height-request">60</property>
-                                <child>
-                                  <object class="GtkLabel" id="play_pause_label">
-                                    <property name="visible">True</property>
-                                    <property name="can-focus">False</property>
-                                    <property name="margin">12</property>
-                                    <property name="label" translatable="yes">_Pause</property>
-                                    <property name="use-underline">True</property>
-                                  </object>
-                                </child>
-                              </object>
-                              <packing>
-                                <property name="expand">False</property>
-                                <property name="fill">True</property>
-                                <property name="pack-type">end</property>
-                                <property name="position">0</property>
-                              </packing>
-                            </child>
+                            <property name="can-focus">True</property>
+                            <property name="receives-default">True</property>
+                            <property name="action-name">app.pause</property>
+                            <property name="use-underline">True</property>
+                            <property name="width-request">120</property>
+                            <property name="height-request">60</property>
                             <child>
-                              <object class="GtkButton">
+                              <object class="GtkLabel" id="play_pause_label">
                                 <property name="visible">True</property>
+                                <property name="can-focus">False</property>
+                                <property name="margin">12</property>
+                                <property name="label" translatable="yes">_Pause</property>
                                 <property name="use-underline">True</property>
-                                <property name="label" translatable="yes">_Clear Board</property>
-                                <property name="halign">fill</property>
-                                <property name="valign">center</property>
-                                <property name="action-name">app.reset</property>
-                                <property name="tooltip-text" translatable="yes">Reset the board to its 
original state</property>
-                                <property name="width-request">120</property>
-                                <property name="height-request">60</property>
                               </object>
-                              <packing>
-                                <property name="expand">True</property>
-                                <property name="fill">True</property>
-                                <property name="position">1</property>
-                              </packing>
                             </child>
-                            <child>
-                              <object class="GtkButton">
-                                <property name="visible">True</property>
-                                <property name="use-underline">True</property>
-                                <property name="label" translatable="yes">_New Puzzle</property>
-                                <property name="halign">fill</property>
-                                <property name="valign">center</property>
-                                <property name="action-name">app.new-game</property>
-                                <property name="tooltip-text" translatable="yes">Start a new 
puzzle</property>
-                                <property name="width-request">120</property>
-                                <property name="height-request">60</property>
-                              </object>
-                              <packing>
-                                <property name="expand">False</property>
-                                <property name="fill">False</property>
-                                <property name="position">2</property>
-                              </packing>
-                            </child>
-                            <child>
-                              <object class="GtkButton" id="play_custom_game_button">
-                                <property name="visible">False</property>
-                                <property name="use-underline">True</property>
-                                <property name="label" translatable="yes">_Start Playing</property>
-                                <property name="halign">fill</property>
-                                <property name="valign">center</property>
-                                <property name="action-name">app.play-custom-game</property>
-                                <property name="tooltip-text" translatable="yes">Start playing the custom 
puzzle you have created</property>
-                                <property name="width-request">120</property>
-                                <property name="height-request">60</property>
-                              </object>
-                              <packing>
-                                <property name="expand">True</property>
-                                <property name="fill">True</property>
-                                <property name="position">3</property>
-                              </packing>
-                            </child>
-                          </object>  <!-- End of controls_box -->
+                          </object>
                           <packing>
                             <property name="expand">False</property>
                             <property name="fill">True</property>
                             <property name="pack-type">end</property>
-                            <property name="padding">0</property>
+                            <property name="position">0</property>
                           </packing>
                         </child>
-                      </object> <!-- End of game_box -->
+                        <child>
+                          <object class="GtkButton">
+                            <property name="visible">True</property>
+                            <property name="use-underline">True</property>
+                            <property name="label" translatable="yes">_Clear Board</property>
+                            <property name="halign">fill</property>
+                            <property name="valign">center</property>
+                            <property name="action-name">app.reset</property>
+                            <property name="tooltip-text" translatable="yes">Reset the board to its original 
state</property>
+                            <property name="width-request">120</property>
+                            <property name="height-request">60</property>
+                          </object>
+                          <packing>
+                            <property name="expand">True</property>
+                            <property name="fill">True</property>
+                            <property name="position">1</property>
+                          </packing>
+                        </child>
+                        <child>
+                          <object class="GtkButton">
+                            <property name="visible">True</property>
+                            <property name="use-underline">True</property>
+                            <property name="label" translatable="yes">_New Puzzle</property>
+                            <property name="halign">fill</property>
+                            <property name="valign">center</property>
+                            <property name="action-name">app.new-game</property>
+                            <property name="tooltip-text" translatable="yes">Start a new puzzle</property>
+                            <property name="width-request">120</property>
+                            <property name="height-request">60</property>
+                          </object>
+                          <packing>
+                            <property name="expand">False</property>
+                            <property name="fill">False</property>
+                            <property name="position">2</property>
+                          </packing>
+                        </child>
+                        <child>
+                          <object class="GtkButton" id="play_custom_game_button">
+                            <property name="visible">False</property>
+                            <property name="use-underline">True</property>
+                            <property name="label" translatable="yes">_Start Playing</property>
+                            <property name="halign">fill</property>
+                            <property name="valign">center</property>
+                            <property name="action-name">app.play-custom-game</property>
+                            <property name="tooltip-text" translatable="yes">Start playing the custom puzzle 
you have created</property>
+                            <property name="width-request">120</property>
+                            <property name="height-request">60</property>
+                          </object>
+                          <packing>
+                            <property name="expand">True</property>
+                            <property name="fill">True</property>
+                            <property name="position">3</property>
+                          </packing>
+                        </child>
+                      </object>  <!-- End of controls_box -->
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="pack-type">end</property>
+                        <property name="padding">0</property>
+                      </packing>
                     </child>
-                  </object> <!-- End of frame_h -->
-                </child>
-                <child>
-                  <object class="GtkAspectFrame" id="frame_v">
-                    <property name="visible">True</property>
-                    <property name="shadow-type">GTK_SHADOW_NONE</property>
-                    <property name="obey-child">False</property>
-                    <property name="ratio">0.9</property>
-                  </object> <!-- End of frame_v -->
+                  </object> <!-- End of game_box -->
                 </child>
-              </object> <!-- End of squeezer -->
-              <packing>
-                <property name="name">squeezer</property>
-              </packing>
+              </object> <!-- End of frame_h -->
+            </child>
+            <child>
+              <object class="GtkAspectFrame" id="frame_v">
+                <property name="visible">True</property>
+                <property name="shadow-type">GTK_SHADOW_NONE</property>
+                <property name="obey-child">False</property>
+                <property name="ratio">0.9</property>
+              </object> <!-- End of frame_v -->
             </child>
-          </object> <!-- End of main_stack -->
+          </object> <!-- End of main_squeezer -->
           <packing>
-            <property name="pack-type">end</property>
+            <property name="pack-type">center</property>
+            <property name="expand">True</property>
           </packing>
         </child>
       </object> <!-- End of vbox -->
diff --git a/src/gnome-sudoku.vala b/src/gnome-sudoku.vala
index 623d811b..3b0051d8 100644
--- a/src/gnome-sudoku.vala
+++ b/src/gnome-sudoku.vala
@@ -41,8 +41,9 @@ public class Sudoku : Gtk.Application
     private SudokuView? view;
 
     private HeaderBar headerbar;
-    private Stack main_stack;
-    private Hdy.Squeezer squeezer;
+    private Hdy.Squeezer main_squeezer;
+    private Box start_box;
+    private Box start_box_s;
     private AspectFrame frame_v;
     private AspectFrame frame_h;
     private Box game_box; // Holds the view
@@ -172,10 +173,11 @@ public class Sudoku : Gtk.Application
         add_window (window);
 
         headerbar = (HeaderBar) builder.get_object ("headerbar");
-        main_stack = (Stack) builder.get_object ("main_stack");
+        main_squeezer = (Hdy.Squeezer) builder.get_object ("main_squeezer");
+        main_squeezer.draw.connect (draw_cb);
 
-        squeezer = (Hdy.Squeezer) builder.get_object ("squeezer");
-        squeezer.draw.connect (draw_cb);
+        start_box = (Box) builder.get_object ("start_box");
+        start_box_s = (Box) builder.get_object ("start_box_s");
 
         frame_h = (AspectFrame) builder.get_object ("frame_h");
         frame_v = (AspectFrame) builder.get_object ("frame_v");
@@ -448,7 +450,7 @@ public class Sudoku : Gtk.Application
 
     private void show_new_game_screen ()
     {
-        main_stack.set_visible_child_name ("start_box");
+        set_board_visible (false);
         back_button.visible = game != null;
         undo_redo_box.visible = false;
         headerbar.title = _("Select Difficulty");
@@ -525,7 +527,7 @@ public class Sudoku : Gtk.Application
 
     private void show_game_view ()
     {
-        main_stack.set_visible_child_name ("squeezer");
+        set_board_visible (true);
         back_button.visible = false;
         undo_redo_box.visible = true;
         print_action.set_enabled (true);
@@ -565,7 +567,7 @@ public class Sudoku : Gtk.Application
 
     private void undo_cb ()
     {
-        if (main_stack.get_visible_child_name () != "squeezer")
+        if (!is_board_visible ())
             return;
         game.undo ();
         undo_action.set_enabled (!game.is_undostack_null ());
@@ -575,7 +577,7 @@ public class Sudoku : Gtk.Application
 
     private void redo_cb ()
     {
-        if (main_stack.get_visible_child_name () != "squeezer")
+        if (!is_board_visible ())
             return;
         game.redo ();
         redo_action.set_enabled (!game.is_redostack_null ());
@@ -585,7 +587,7 @@ public class Sudoku : Gtk.Application
 
     private void print_cb ()
     {
-        if (main_stack.get_visible_child_name () != "squeezer")
+        if (!is_board_visible ())
             return;
         print_action.set_enabled (false);
         print_multiple_action.set_enabled (false);
@@ -605,7 +607,7 @@ public class Sudoku : Gtk.Application
         print_multiple_action.set_enabled (false);
         var print_dialog = new PrintDialog (saver, window);
         print_dialog.destroy.connect (() => {
-            this.print_action.set_enabled (main_stack.get_visible_child_name () == "squeezer");
+            this.print_action.set_enabled (is_board_visible ());
             this.print_multiple_action.set_enabled (true);
         });
         print_dialog.run ();
@@ -651,13 +653,15 @@ public class Sudoku : Gtk.Application
 
     private void prepare_layout ()
     {
-        var main_stack_m = main_stack.margin;
+        var main_squeezer_m = main_squeezer.margin;
         var game_box_s = game_box.spacing;
         var controls_box_s = controls_box.spacing;
         var button_w = play_pause_button.width_request;
+        var button_h = play_pause_button.height_request;
 
-        var board_and_spacing = board_size + 3 * game_box_s + 2 * controls_box_s + 2 * main_stack_m;
+        var board_and_spacing = board_size + 3 * game_box_s + 2 * controls_box_s + 2 * main_squeezer_m;
         frame_h.width_request = board_and_spacing + button_w;
+        frame_v.height_request = board_and_spacing + button_h + 50;
     }
 
     private bool draw_cb ()
@@ -676,7 +680,7 @@ public class Sudoku : Gtk.Application
 
     private Orientation get_window_orientation ()
     {
-        var is_vertical = squeezer.visible_child == frame_v;
+        var is_vertical = main_squeezer.visible_child == frame_v;
         return is_vertical ? Orientation.VERTICAL : Orientation.HORIZONTAL;
     }
 
@@ -701,6 +705,19 @@ public class Sudoku : Gtk.Application
         next.add (game_box);
     }
 
+    private void set_board_visible (bool value)
+    {
+        start_box.visible = !value;
+        start_box_s.visible = !value;
+        frame_h.visible = value;
+        frame_v.visible = value;
+    }
+
+    private bool is_board_visible ()
+    {
+        return frame_h.visible;
+    }
+
     public static int main (string[] args)
     {
         return new Sudoku ().run (args);
diff --git a/src/main-menu.vala b/src/main-menu.vala
index a1aa7cc3..f99e5020 100644
--- a/src/main-menu.vala
+++ b/src/main-menu.vala
@@ -45,7 +45,6 @@ private class SudokuMainMenuItem : ListBoxRow
 
     construct
     {
-        height_request = 80;
         visible = true;
         can_focus = true;
 


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]