[lightsoff/arnaudb/rework-ui: 22/29] Adapt new UI to small screens.

[Robert Roth <robertroth src gnome org>]

commit ba9e0456bc6ee11eea52ef42306e49787a408d87
Author: Arnaud Bonatti <arnaud bonatti gmail com>
Date:   Sat Oct 31 13:18:29 2020 +0100

    Adapt new UI to small screens.

 data/lightsoff.css        | 21 +++++++++++++++++++
 data/lightsoff.ui         | 52 ++++++++++++++++++++++++++++++++++++++++-------
 src/lightsoff-window.vala | 42 ++++++++++++++++++++++++++++++++------
 src/managed-window.vala   | 32 +++++++++++++++++++++++++++++
 4 files changed, 134 insertions(+), 13 deletions(-)
---
diff --git a/data/lightsoff.css b/data/lightsoff.css
index 80b9821..1fe5615 100644
--- a/data/lightsoff.css
+++ b/data/lightsoff.css
@@ -43,3 +43,24 @@
 .aspect {
   background-color: black;
 }
+
+/*\
+* * actionbar
+\*/
+
+actionbar {
+  min-height: 47px; /* TODO calc() exactly; corresponds to the height of an actionbar with a GtkButton in 
it, in usual Adwaita conditions */
+}
+/* TODO move in game-window.css */
+label.level-label:dir(ltr) {
+  margin-left : 12px;
+}
+label.level-label:dir(rtl) {
+  margin-right: 12px;
+}
+label.score-label:dir(rtl) {
+  margin-left : 6px;
+}
+label.score-label:dir(ltr) {
+  margin-right: 6px;
+}
diff --git a/data/lightsoff.ui b/data/lightsoff.ui
index 4e10fb8..894903d 100644
--- a/data/lightsoff.ui
+++ b/data/lightsoff.ui
@@ -48,7 +48,7 @@
           </object>
         </child>
         <child>
-          <object class="GtkLabel" id="score_label">
+          <object class="GtkLabel" id="score_label_1">
             <property name="visible">True</property>
             <property name="label" translatable="no">0</property>
           </object>
@@ -79,13 +79,51 @@
       </object>
     </child>
     <child>
-      <object class="GtkAspectFrame" id="aspect_frame">
+      <object class="GtkGrid">
         <property name="visible">True</property>
-        <property name="obey_child">False</property>
-        <property name="shadow_type">none</property>
-        <style>
-          <class name="aspect"/>
-        </style>
+        <property name="orientation">vertical</property>
+        <child>
+          <object class="GtkAspectFrame" id="aspect_frame">
+            <property name="visible">True</property>
+            <property name="obey_child">False</property>
+            <property name="shadow_type">none</property>
+            <style>
+              <class name="aspect"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkRevealer" id="revealer">
+            <property name="visible">True</property>
+            <property name="reveal-child">False</property>
+            <child>
+              <object class="GtkActionBar">
+                <property name="visible">True</property>
+                <child>
+                  <object class="GtkLabel" id="level_label">
+                    <property name="visible">True</property>
+                    <property name="label" translatable="no">Puzzle X</property>
+                    <style>
+                      <class name="level-label"/>
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="score_label_2">
+                    <property name="visible">True</property>
+                    <property name="label" translatable="no">0</property>
+                    <style>
+                      <class name="score-label"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="pack_type">end</property>
+                  </packing>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
       </object>
     </child>
   </template>
diff --git a/src/lightsoff-window.vala b/src/lightsoff-window.vala
index 67ba221..5aa1e8c 100644
--- a/src/lightsoff-window.vala
+++ b/src/lightsoff-window.vala
@@ -17,14 +17,19 @@ private class LightsoffWindow : ManagedWindow
 {
     [GtkChild] private HeaderBar    headerbar;
     [GtkChild] private MenuButton   menu_button;
-    [GtkChild] private Label        score_label;
+    [GtkChild] private Label        level_label;
+    [GtkChild] private Label        score_label_1;
+    [GtkChild] private Label        score_label_2;
     [GtkChild] private AspectFrame  aspect_frame;
+    [GtkChild] private Revealer     revealer;
 
     private GLib.Settings settings;
     private GameView game_view;
     private SimpleAction previous_level;
     private EventControllerKey key_controller;
 
+    private string custom_title = "";
+
     private const GLib.ActionEntry[] window_actions =
     {
         { "new-game",       new_game_cb },
@@ -41,6 +46,8 @@ private class LightsoffWindow : ManagedWindow
     private inline void populate_game_container (int level)
     {
         GtkGameView gtk_game_view = new GtkGameView (level);
+        gtk_game_view.hexpand = true;
+        gtk_game_view.vexpand = true;
         gtk_game_view.show ();
 
         aspect_frame.add (gtk_game_view);
@@ -77,13 +84,16 @@ private class LightsoffWindow : ManagedWindow
 
     private void update_subtitle (int moves)
     {
-        score_label.set_label (moves.to_string ());
+        string moves_string = moves.to_string ();
+        score_label_1.set_label (moves_string);
+        score_label_2.set_label (moves_string);
     }
 
-    private void update_title (int level)
+    private void update_title ()
     {
-        /* Translators: the title of the window, %d is the level number */
-        headerbar.title = _("Puzzle %d").printf (level);
+        if (large_window_size)
+            headerbar.set_title (custom_title);
+        level_label.set_label (custom_title);
         update_subtitle (0);
     }
 
@@ -100,7 +110,9 @@ private class LightsoffWindow : ManagedWindow
     private void level_changed_cb (int level)
     {
         previous_level.set_enabled (level > 1);
-        update_title (level);
+        /* Translators: the title of the window, %d is the level number */
+        custom_title = _("Puzzle %d").printf (level);
+        update_title ();
         set_focus_visible (false);
         if (level != settings.get_int ("level"))
             settings.set_int ("level", level);
@@ -134,4 +146,22 @@ private class LightsoffWindow : ManagedWindow
     {
         game_view.reset_game ();
     }
+
+    bool large_window_size = true;
+    protected override void change_window_size (bool large)
+    {
+        large_window_size = large;
+        if (large)
+        {
+            score_label_1.show ();
+            headerbar.set_title (custom_title);
+            revealer.set_reveal_child (false);
+        }
+        else
+        {
+            score_label_1.hide ();
+            headerbar.set_title (null);
+            revealer.set_reveal_child (true);
+        }
+    }
 }
diff --git a/src/managed-window.vala b/src/managed-window.vala
index 791f356..bfe8dbd 100644
--- a/src/managed-window.vala
+++ b/src/managed-window.vala
@@ -67,6 +67,8 @@ private class ManagedWindow : ApplicationWindow
             return;
         window_width = (!) _window_width;
         window_height = (!) _window_height;
+
+        update_adaptative_children ();
     }
 
     private inline void on_destroy ()
@@ -75,6 +77,36 @@ private class ManagedWindow : ApplicationWindow
         base.destroy ();
     }
 
+    /*\
+    * * adaptative stuff
+    \*/
+
+    private enum WindowSize
+    {
+        START,
+        SMALL,
+        LARGE
+    }
+    private WindowSize window_size = WindowSize.START;
+
+    private void update_adaptative_children ()
+    {
+        if (window_width < 590)
+            _change_window_size (WindowSize.SMALL);
+        else
+            _change_window_size (WindowSize.LARGE);
+    }
+
+    private void _change_window_size (WindowSize new_window_size)
+    {
+        if (window_size == new_window_size)
+            return;
+        window_size = new_window_size;
+        change_window_size (window_size == WindowSize.LARGE);
+    }
+
+    protected virtual void change_window_size (bool large) {}
+
     /*\
     * * manage window state
     \*/