GNOME.org
 

[gnome-taquin] Allow to run on a thin screen.

commit 2ce3c608a7d29b53ceb4743fa2b40e4fdbbcd3de
Author: Arnaud Bonatti <arnaud bonatti gmail com>
Date:   Fri Jan 18 11:40:04 2019 +0100

    Allow to run on a thin screen.
    
    That is allowed by the use of BaseWindow.

 data/taquin-screens.ui   | 57 ++++++++++++++++++++++++++++------
 data/taquin.css          | 79 ++++++++++++++++++++++++++++++++++--------------
 src/game-view.vala       | 49 +++++++++++++++++++++---------
 src/game-window.vala     | 21 +++++++++++--
 src/new-game-screen.vala | 65 ++++++++++++++++++++++++++++++++++++++-
 src/taquin-view.vala     |  1 -
 6 files changed, 222 insertions(+), 50 deletions(-)
---
diff --git a/data/taquin-screens.ui b/data/taquin-screens.ui
index 097329b..459e14a 100644
--- a/data/taquin-screens.ui
+++ b/data/taquin-screens.ui
@@ -59,9 +59,20 @@
     <property name="orientation">vertical</property>
     <property name="visible">True</property>
     <property name="spacing">6</property>
-    <property name="width-request">400</property>
     <child>
-      <object class="GtkBox">
+      <object class="GtkLabel" id="games_label">
+        <property name="visible">False</property>
+        <property name="halign">start</property>
+        <!-- Translators: when configuring a new game, header of the game type that appears on small screen 
-->
+        <property name="label" translatable="yes">Game</property>
+        <style>
+          <class name="bold-label"/>
+          <class name="section-header"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkBox" id="games_box">
         <property name="orientation">horizontal</property>
         <property name="visible">True</property>
         <property name="homogeneous">True</property>
@@ -70,7 +81,10 @@
           <object class="GtkModelButton">
             <property name="visible">True</property>
             <property name="name">radio-fifteen</property>
-            <style><class name="radio-like-toggle"/><class name="flat"/></style>
+            <style>
+              <class name="radio-like-toggle"/>
+              <class name="flat"/>
+            </style>
             <property name="focus-on-click">False</property>
             <property name="action-name">app.type</property>
             <property name="action-target">'fifteen'</property>
@@ -84,7 +98,10 @@
           <object class="GtkModelButton">
             <property name="visible">True</property>
             <property name="name">radio-sixteen</property>
-            <style><class name="radio-like-toggle"/><class name="flat"/></style>
+            <style>
+              <class name="radio-like-toggle"/>
+              <class name="flat"/>
+            </style>
             <property name="focus-on-click">False</property>
             <property name="action-name">app.type</property>
             <property name="action-target">'sixteen'</property>
@@ -101,7 +118,25 @@
       </packing>
     </child>
     <child>
-      <object class="GtkBox">
+      <object class="GtkSeparator" id="options_separator">
+        <property name="visible">False</property>
+        <property name="orientation">horizontal</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkLabel" id="options_label">
+        <property name="visible">False</property>
+        <property name="halign">start</property>
+        <!-- Translators: when configuring a new game, header of the options that appears on small screen -->
+        <property name="label" translatable="yes">Options</property>
+        <style>
+          <class name="bold-label"/>
+          <class name="section-header"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkBox" id="options_box">
         <property name="orientation">horizontal</property>
         <property name="visible">True</property>
         <property name="homogeneous">True</property>
@@ -111,8 +146,10 @@
             <property name="visible">True</property>
             <property name="use-underline">True</property>
             <property name="menu-model">size-menu</property>
-            <property name="height-request">60</property>
-            <style><class name="menubutton-like-combo"/><class name="flat"/></style>
+            <style>
+              <class name="menubutton-like-combo"/>
+              <class name="flat"/>
+            </style>
           </object>
           <packing>
             <property name="expand">True</property>
@@ -124,8 +161,10 @@
             <property name="visible">True</property>
             <property name="use-underline">True</property>
             <property name="menu-model">theme-menu</property>
-            <property name="height-request">60</property>
-            <style><class name="menubutton-like-combo"/><class name="flat"/></style>
+            <style>
+              <class name="menubutton-like-combo"/>
+              <class name="flat"/>
+            </style>
           </object>
           <packing>
             <property name="expand">True</property>
diff --git a/data/taquin.css b/data/taquin.css
index 9648d9f..06930ab 100644
--- a/data/taquin.css
+++ b/data/taquin.css
@@ -17,39 +17,74 @@
 
 @import url("base-window.css");
 
-button.radio-like-toggle#radio-fifteen {
-    background-image: url("resource://org/gnome/Taquin/images/15-Puzzle.png");
-}
-button.radio-like-toggle#radio-sixteen {
-    background-image: url("resource://org/gnome/Taquin/images/16-Puzzle.png");
+                   button.start-game-button { margin-top:2rem; margin-bottom:1rem; transition:margin-top 0 
ease; }
+
+.extra-thin-window button.start-game-button,
+.extra-thin-window label.section-header     { margin-top:1rem; }
+
+button.radio-like-toggle,
+button.menubutton-like-combo {
+  border-radius:15px;
+  -gtk-outline-radius:13px;
 }
 
-button.radio-like-toggle {
-    background-repeat: no-repeat;
-    background-position: center 25px;
-    color: @theme_fg_color;
-    background-color: transparent;
+/*\
+* * games buttons
+\*/
+
+                   button.radio-like-toggle#radio-fifteen { background-image: 
url("resource://org/gnome/Taquin/images/15-Puzzle.png"); }
+                   button.radio-like-toggle#radio-sixteen { background-image: 
url("resource://org/gnome/Taquin/images/16-Puzzle.png"); }
+
+                   button.radio-like-toggle:backdrop { color: @theme_unfocused_fg_color; }
+                   button.radio-like-toggle          { color: @theme_fg_color;
+
+  background-repeat:no-repeat;
+  background-color:transparent;
+
+  background-size:12rem;
+  background-position:center bottom;
+  min-height:13rem;
+  min-width:10rem;
+  padding:0.5rem 1rem 1rem 1rem;
 }
-button.radio-like-toggle label {
-    padding-bottom: 165px;
+
+window:not(.extra-thin-window) button.radio-like-toggle {
+  transition:background-size     0s ease 0.01s,
+             background-position 0s ease 0.01s,
+             min-height          0s ease 0.01s,
+             padding             0s ease 0.01s;
 }
-button.radio-like-toggle:backdrop {
-    color: @theme_unfocused_fg_color;
+
+.extra-thin-window button.radio-like-toggle {
+  background-size:5rem;
+  background-position:0.4rem center;
+  min-height:3rem;
+  padding:1.8rem 1rem 1rem 5rem;
 }
 
-button.radio-like-toggle,
+                   button.radio-like-toggle label { padding-bottom:10rem; }
+.extra-thin-window button.radio-like-toggle label { padding-bottom:1rem;  }
+
+/*\
+* * options buttons
+\*/
+
+button.start-game-button,
 button.menubutton-like-combo {
-    border-radius:15px;
-    -gtk-outline-radius:13px;
+  min-height:3rem;
+  min-width:11rem;
 }
-
 button.menubutton-like-combo:checked,
 button.menubutton-like-combo:hover {
-    color:#2e3436; /* gtk-contained.css’ theme_fg_color */
-    background:-gtk-gradient (radial, center center, 0, center center, 0.5, from(rgba (255, 255, 255, 1)), 
to(rgba (255, 255, 255, 0)));
+  color:#2e3436; /* gtk-contained.css’ theme_fg_color */
+  background:-gtk-gradient (radial, center center, 0, center center, 0.5, from(rgba (255, 255, 255, 1)), 
to(rgba (255, 255, 255, 0)));
 }
 button.menubutton-like-combo:checked:backdrop,
 button.menubutton-like-combo:hover:backdrop {
-    color:@theme_unfocused_fg_color;
-    background:-gtk-gradient (radial, center center, 0, center center, 0.5, from(rgba (255, 255, 255, 0.3)), 
to(rgba (255, 255, 255, 0)));
+  color:@theme_unfocused_fg_color;
+  background:-gtk-gradient (radial, center center, 0, center center, 0.5, from(rgba (255, 255, 255, 0.3)), 
to(rgba (255, 255, 255, 0)));
 }
+
+/*\
+* * the end
+\*/
diff --git a/src/game-view.vala b/src/game-view.vala
index 056396e..a2486e4 100644
--- a/src/game-view.vala
+++ b/src/game-view.vala
@@ -20,12 +20,13 @@
 
 using Gtk;
 
-private class GameView : BaseView
+private class GameView : BaseView, AdaptativeWidget
 {
-    private Stack   game_stack;
-    private Widget  game_content;
-    private Box     new_game_box;
-    private Button? start_game_button = null;
+    private Stack           game_stack;
+    private Widget          game_content;
+    private ScrolledWindow  scrolled;
+    private Box             new_game_box;
+    private Button?         start_game_button = null;
 
     construct
     {
@@ -35,14 +36,15 @@ private class GameView : BaseView
         game_stack.show ();
         main_grid.add (game_stack);
 
-        new_game_box = new Box (Orientation.VERTICAL, /* spacing */ 6);
+        scrolled = new ScrolledWindow (null, null);
+        scrolled.visible = true;
+        game_stack.add (scrolled);
+
+        new_game_box = new Box (Orientation.VERTICAL, /* spacing */ 0);
         new_game_box.halign = Align.CENTER;
         new_game_box.valign = Align.CENTER;
-        new_game_box.margin = 25;
-        new_game_box.width_request = 350;
-        new_game_box.height_request = 350;
         new_game_box.show ();
-        game_stack.add (new_game_box);
+        scrolled.add (new_game_box);
     }
 
     internal GameView (GameWindowFlags flags, Box new_game_screen, Widget content)
@@ -53,8 +55,7 @@ private class GameView : BaseView
         {
             /* Translators: when configuring a new game, label of the blue Start button (with a mnemonic 
that appears pressing Alt) */
             start_game_button = new Button.with_mnemonic (_("_Start Game"));
-            ((!) start_game_button).width_request = 222;
-            ((!) start_game_button).height_request = 60;
+            ((!) start_game_button).get_style_context ().add_class ("start-game-button");
             ((!) start_game_button).halign = Align.CENTER;
             ((!) start_game_button).set_action_name ("ui.start-game");
             /* Translators: when configuring a new game, tooltip text of the blue Start button */
@@ -66,14 +67,34 @@ private class GameView : BaseView
 
         game_content = content;
         game_stack.add (content);
-        content.margin = 25;
+        update_game_content_margin (short_margin, ref game_content);
         content.can_focus = true;
         content.show ();
     }
 
+    private bool short_margin = false;
+    protected override void set_window_size (AdaptativeWidget.WindowSize new_size)
+    {
+        base.set_window_size (new_size);
+
+        bool _short_margin = AdaptativeWidget.WindowSize.is_extra_thin (new_size)
+                          || AdaptativeWidget.WindowSize.is_extra_flat (new_size);
+        if (_short_margin == short_margin)
+            return;
+        short_margin = _short_margin;
+        update_game_content_margin (short_margin, ref game_content);
+    }
+    private static void update_game_content_margin (bool new_state, ref Widget game_content)
+    {
+        if (new_state)
+            game_content.margin = 11;
+        else
+            game_content.margin = 25;
+    }
+
     internal void show_new_game_box (bool grab_focus)
     {
-        game_stack.set_visible_child (new_game_box);
+        game_stack.set_visible_child (scrolled);
         if (grab_focus && start_game_button != null)
             ((!) start_game_button).grab_focus ();
         // TODO else if (grab_focus && start_game_button == null)
diff --git a/src/game-window.vala b/src/game-window.vala
index 27ca26e..2732eb8 100644
--- a/src/game-window.vala
+++ b/src/game-window.vala
@@ -28,7 +28,7 @@ public enum GameWindowFlags {
     SHOW_START_BUTTON;
 }
 
-private class GameWindow : BaseWindow
+private class GameWindow : BaseWindow, AdaptativeWidget
 {
     /* settings */
     private bool tiled_state;
@@ -41,11 +41,17 @@ private class GameWindow : BaseWindow
     /* private widgets */
     private GameHeaderBar   headerbar;
     private GameView        game_view;
+    private Box             new_game_screen;
 
-    public GameWindow (string? css_resource, string name, int width, int height, bool maximized, bool 
start_now, GameWindowFlags flags, Box new_game_screen, Widget view_content, NightLightMonitor 
night_light_monitor)
+    construct
+    {
+        height_request = 500;    // FIXME remove limit
+    }
+
+    public GameWindow (string? css_resource, string name, int width, int height, bool maximized, bool 
start_now, GameWindowFlags flags, Box _new_game_screen, Widget view_content, NightLightMonitor 
night_light_monitor)
     {
         GameHeaderBar _headerbar = new GameHeaderBar (name, flags, night_light_monitor);
-        GameView      _game_view = new GameView (flags, new_game_screen, view_content);
+        GameView      _game_view = new GameView (flags, _new_game_screen, view_content);
 
         Object (nta_headerbar               : (NightTimeAwareHeaderBar) _headerbar,
                 base_view                   : (BaseView) _game_view,
@@ -54,6 +60,7 @@ private class GameWindow : BaseWindow
 
         headerbar = _headerbar;
         game_view = _game_view;
+        new_game_screen = _new_game_screen;
 
         /* CSS */
         if (css_resource != null)
@@ -85,6 +92,14 @@ private class GameWindow : BaseWindow
             show_new_game_screen ();
     }
 
+    protected override void set_window_size (AdaptativeWidget.WindowSize new_size)
+    {
+        base.set_window_size (new_size);
+
+        ((AdaptativeWidget) new_game_screen).set_window_size (new_size);
+        ((AdaptativeWidget) game_view).set_window_size (new_size);
+    }
+
     /*\
     * * Window events
     \*/
diff --git a/src/new-game-screen.vala b/src/new-game-screen.vala
index 11b7697..9f7a55c 100644
--- a/src/new-game-screen.vala
+++ b/src/new-game-screen.vala
@@ -21,8 +21,12 @@
 using Gtk;
 
 [GtkTemplate (ui = "/org/gnome/Taquin/ui/taquin-screens.ui")]
-private class NewGameScreen : Box
+private class NewGameScreen : Box, AdaptativeWidget
 {
+    /*\
+    * * options buttons
+    \*/
+
     [GtkChild] private MenuButton size_button;
     [GtkChild] private MenuButton theme_button;
 
@@ -45,4 +49,63 @@ private class NewGameScreen : Box
             default: warn_if_reached (); break;
         }
     }
+
+    /*\
+    * * adaptative stuff
+    \*/
+
+    construct   // FIXME things are a bit racy between the CSS and the box orientation changes, so delay 
games_box redraw
+    {
+        size_allocate.connect_after (() => games_box.show ());
+        map.connect (() => games_box.show ());
+    }
+
+    [GtkChild] private Box          games_box;
+    [GtkChild] private Box          options_box;
+
+    [GtkChild] private Label        games_label;
+    [GtkChild] private Label        options_label;
+    [GtkChild] private Separator    options_separator;
+
+    private bool phone_size = false;
+    private bool extra_thin = false;
+    private void set_window_size (AdaptativeWidget.WindowSize new_size)
+    {
+        bool _extra_thin = new_size == AdaptativeWidget.WindowSize.EXTRA_THIN;
+        bool _phone_size = new_size == AdaptativeWidget.WindowSize.PHONE_BOTH
+                        || new_size == AdaptativeWidget.WindowSize.PHONE_VERT;
+
+        if ((_extra_thin == extra_thin)
+         && (_phone_size == phone_size))
+            return;
+        extra_thin = _extra_thin;
+        phone_size = _phone_size;
+
+        if (!_extra_thin && !_phone_size)
+        {
+            games_label.hide ();
+            options_label.hide ();
+            options_separator.hide ();
+            games_box.set_orientation (Orientation.HORIZONTAL);
+            options_box.set_orientation (Orientation.HORIZONTAL);
+            games_box.hide ();
+        }
+        else if (_phone_size)
+        {
+            games_label.hide ();
+            options_label.hide ();
+            games_box.set_orientation (Orientation.VERTICAL);
+            options_box.set_orientation (Orientation.VERTICAL);
+            options_separator.show ();
+        }
+        else
+        {
+            options_separator.hide ();
+            games_box.set_orientation (Orientation.VERTICAL);
+            options_box.set_orientation (Orientation.VERTICAL);
+            games_label.show ();
+            options_label.show ();
+        }
+        queue_allocate ();
+    }
 }
diff --git a/src/taquin-view.vala b/src/taquin-view.vala
index 87f3b01..6a21228 100644
--- a/src/taquin-view.vala
+++ b/src/taquin-view.vala
@@ -77,7 +77,6 @@ public class TaquinView : Gtk.DrawingArea
     {
         can_focus = true;
         set_events (EventMask.EXPOSURE_MASK | EventMask.BUTTON_PRESS_MASK | EventMask.BUTTON_RELEASE_MASK | 
EventMask.KEY_PRESS_MASK);
-        set_size_request (350, 350);
     }
 
     private Game? _game = null;
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]