[gnome-weather/wip/christopherdavis/make-weather-adaptive: 2/2] window: Use libhandy for an adaptive window

[Christopher Davis <christopherdavis src gnome org>]

commit 92b3c6c733b5469e408a51c2e7ef69800a9371b5
Author: Christopher Davis <brainblasted disroot org>
Date:   Wed Sep 16 00:54:50 2020 -0700

    window: Use libhandy for an adaptive window
    
    Makes use of HdyViewSwitcherTitle and HdyWindow
    for a modernized look.

 data/application.css   |   5 ++
 data/weather-widget.ui |   4 +
 data/window.ui         | 239 ++++++++++++++++++++++++++-----------------------
 meson.build            |   1 +
 org.gnome.Weather.json |  10 +++
 src/app/main.js        |   2 +
 src/app/window.js      |  15 ++--
 7 files changed, 160 insertions(+), 116 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index 99d39fb..dc0d46a 100644
--- a/data/application.css
+++ b/data/application.css
@@ -70,3 +70,8 @@
     font-size: 9pt;
     color: rgba(154, 153, 150, 1.0);
 }
+
+viewswitchertitle viewswitcher {
+  margin-left: 100px;
+  margin-right: 100px;
+}
diff --git a/data/weather-widget.ui b/data/weather-widget.ui
index 85dbb29..e15f3a5 100644
--- a/data/weather-widget.ui
+++ b/data/weather-widget.ui
@@ -57,6 +57,7 @@
                       <packing>
                         <property name="name">hourly</property>
                         <property name="title" translatable="yes">Hourly</property>
+                        <property name="icon-name">preferences-system-time-symbolic</property>
                       </packing>
                     </child>
                     <child>
@@ -89,6 +90,7 @@
                       <packing>
                         <property name="name">daily</property>
                         <property name="title" translatable="yes">Daily</property>
+                        <property name="icon-name">x-office-calendar-symbolic</property>
                         <property name="position">1</property>
                       </packing>
                     </child>
@@ -188,6 +190,8 @@
                         <child>
                           <object class="GtkLabel" id="placesLabel">
                             <property name="name">places-label</property>
+                            <property name="wrap">True</property>
+                            <property name="wrap-mode">word-char</property>
                             <property name="visible">True</property>
                             <property name="can_focus">False</property>
                             <property name="label" translatable="yes">Places</property>
diff --git a/data/window.ui b/data/window.ui
index 14307a0..4d67d48 100644
--- a/data/window.ui
+++ b/data/window.ui
@@ -2,145 +2,162 @@
 <!-- Generated with glade 3.22.0 -->
 <interface>
   <requires lib="gtk+" version="3.10"/>
-  <object class="GtkHeaderBar" id="header-bar">
+  <object class="GtkBox" id="main-box">
     <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="vexpand">False</property>
-    <property name="show_close_button">True</property>
-    <child>
-      <object class="GtkMenuButton" id="primary-menu-button">
-        <property name="visible">True</property>
-        <property name="can_focus">True</property>
-        <property name="receives_default">False</property>
-        <property name="valign">center</property>
-        <child>
-          <object class="GtkImage" id="primary-menu-img">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="icon_name">open-menu-symbolic</property>
-            <property name="icon_size">1</property>
-          </object>
-        </child>
-        <style>
-          <class name="image-button"/>
-        </style>
-      </object>
-      <packing>
-        <property name="pack_type">end</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkButton" id="refresh-button">
-        <property name="visible">True</property>
-        <property name="can_focus">True</property>
-        <property name="receives_default">False</property>
-        <property name="valign">center</property>
-        <property name="action_name">win.refresh</property>
-        <child>
-          <object class="GtkImage" id="refresh-button-image">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="icon_name">view-refresh-symbolic</property>
-            <property name="icon_size">1</property>
-          </object>
-        </child>
-        <child internal-child="accessible">
-          <object class="AtkObject" id="refresh-button-atkobject">
-            <property name="AtkObject::accessible-name" translatable="yes">Refresh</property>
-          </object>
-        </child>
-        <style>
-          <class name="image-button"/>
-        </style>
-      </object>
-      <packing>
-        <property name="pack_type">end</property>
-        <property name="position">2</property>
-      </packing>
-    </child>
-  </object>
-  <object class="GtkGrid" id="main-panel">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
     <property name="orientation">vertical</property>
     <child>
-      <object class="GtkStack" id="main-stack">
+      <object class="HdyHeaderBar" id="header-bar">
+        <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="transition_type">crossfade</property>
+        <property name="vexpand">False</property>
+        <property name="show_close_button">True</property>
+        <property name="centering_policy">strict</property>
         <child>
-          <object class="GtkGrid" id="initial-grid">
-            <property name="name">initial-grid</property>
+          <object class="GtkButton" id="refresh-button">
             <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="halign">center</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">False</property>
             <property name="valign">center</property>
-            <property name="margin_top">25</property>
-            <property name="margin_bottom">25</property>
-            <property name="vexpand">False</property>
-            <property name="orientation">vertical</property>
-            <property name="row_homogeneous">True</property>
+            <property name="action_name">win.refresh</property>
             <child>
-              <object class="GtkImage" id="mark-location-image">
+              <object class="GtkImage" id="refresh-button-image">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="vexpand">False</property>
-                <property name="icon_name">mark-location-symbolic</property>
-                <property name="use_fallback">True</property>
-                <property name="icon_size">6</property>
+                <property name="icon_name">view-refresh-symbolic</property>
+                <property name="icon_size">1</property>
               </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">0</property>
-              </packing>
             </child>
+            <child internal-child="accessible">
+              <object class="AtkObject" id="refresh-button-atkobject">
+                <property name="AtkObject::accessible-name" translatable="yes">Refresh</property>
+              </object>
+            </child>
+            <style>
+              <class name="image-button"/>
+            </style>
+          </object>
+        </child>
+       <child type="title">
+         <object class="HdyViewSwitcherTitle" id="switcher-title">
+           <property name="visible">True</property>
+           <property name="title" translatable="yes">Weather</property>
+         </object>
+       </child>
+        <child>
+          <object class="GtkMenuButton" id="primary-menu-button">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">False</property>
+            <property name="valign">center</property>
             <child>
-              <object class="GtkLabel" id="search-location-label">
+              <object class="GtkImage" id="primary-menu-img">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="vexpand">False</property>
-                <property name="label" translatable="yes">Search for a location</property>
+                <property name="icon_name">open-menu-symbolic</property>
+                <property name="icon_size">1</property>
               </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">1</property>
-              </packing>
             </child>
+            <style>
+              <class name="image-button"/>
+            </style>
+          </object>
+          <packing>
+            <property name="pack_type">end</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkGrid" id="main-panel">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="orientation">vertical</property>
+        <child>
+          <object class="GtkStack" id="main-stack">
+            <property name="can_focus">False</property>
+            <property name="transition_type">crossfade</property>
             <child>
-              <object class="GtkLabel" id="search-nereby-location-label">
+              <object class="GtkGrid" id="initial-grid">
+                <property name="name">initial-grid</property>
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
                 <property name="halign">center</property>
                 <property name="valign">center</property>
+                <property name="margin_top">25</property>
+                <property name="margin_bottom">25</property>
                 <property name="vexpand">False</property>
-                <property name="label" translatable="yes">To see weather information, enter the name of a 
city.</property>
+                <property name="orientation">vertical</property>
+                <property name="row_homogeneous">True</property>
+                <child>
+                  <object class="GtkImage" id="mark-location-image">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="vexpand">False</property>
+                    <property name="icon_name">mark-location-symbolic</property>
+                    <property name="use_fallback">True</property>
+                    <property name="icon_size">6</property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">0</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="search-location-label">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="vexpand">False</property>
+                    <property name="label" translatable="yes">Search for a location</property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="search-nereby-location-label">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="vexpand">False</property>
+                    <property name="label" translatable="yes">To see weather information, enter the name of 
a city.</property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">2</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GWeatherLocationEntry" id="initial-grid-location-entry">
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="activates_default">True</property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">3</property>
+                  </packing>
+                </child>
               </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">2</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GWeatherLocationEntry" id="initial-grid-location-entry">
-                <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="activates_default">True</property>
-              </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">3</property>
-              </packing>
             </child>
           </object>
+          <packing>
+            <property name="left_attach">0</property>
+            <property name="top_attach">0</property>
+          </packing>
         </child>
       </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">0</property>
-      </packing>
+    </child>
+    <child>
+      <object class="HdyViewSwitcherBar" id="switcher-bar">
+        <property name="visible">True</property>
+        <property name="reveal" bind-source="switcher-title" bind-property="title-visible" 
bind-flags="sync-create" />
+      </object>
     </child>
   </object>
 </interface>
diff --git a/meson.build b/meson.build
index c28e1fc..92d5ae0 100644
--- a/meson.build
+++ b/meson.build
@@ -13,6 +13,7 @@ dependency('gtk+-3.0', version :'>=3.20')
 dependency('gjs-1.0', version: '>= 1.50.0')
 dependency('geoclue-2.0', version: '>= 0.12.99')
 dependency('gweather-3.0', version: '>= 3.28')
+dependency('libhandy-1', version: '>= 1.0.0')
 
 # Profiles
 if get_option('profile') == 'development'
diff --git a/org.gnome.Weather.json b/org.gnome.Weather.json
index 4e4abad..057c5a0 100644
--- a/org.gnome.Weather.json
+++ b/org.gnome.Weather.json
@@ -74,6 +74,16 @@
                 }
             ]
         },
+        {
+            "name" : "libhandy",
+            "buildsystem" : "meson",
+            "sources" : [
+                {
+                    "type" : "git",
+                    "url" : "https://gitlab.gnome.org/GNOME/libhandy.git";
+                }
+            ]
+        },
         {
             "name" : "gnome-weather",
             "buildsystem" : "meson",
diff --git a/src/app/main.js b/src/app/main.js
index 9f5fdf5..b413ca9 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -28,6 +28,7 @@ pkg.require({ 'Gdk': '3.0',
               'GWeather': '3.0' });
 
 const ByteArray = imports.byteArray;
+const Handy = imports.gi.Handy;
 const Gdk = imports.gi.Gdk;
 const Gio = imports.gi.Gio;
 const GLib = imports.gi.GLib;
@@ -87,6 +88,7 @@ const Application = GObject.registerClass(
 
     vfunc_startup() {
         super.vfunc_startup();
+        Handy.init();
         // ensure the type before we call to GtkBuilder
         GWeather.LocationEntry;
 
diff --git a/src/app/window.js b/src/app/window.js
index 201b457..58a46d6 100644
--- a/src/app/window.js
+++ b/src/app/window.js
@@ -16,6 +16,7 @@
 // with Gnome Weather; if not, write to the Free Software Foundation,
 // Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 
+const Handy = imports.gi.Handy;
 const Gio = imports.gi.Gio;
 const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
@@ -33,7 +34,7 @@ const Page = {
 };
 
 var MainWindow = GObject.registerClass(
-    class MainWindow extends Gtk.ApplicationWindow {
+    class MainWindow extends Handy.ApplicationWindow {
 
     _init(params) {
         super._init(params);
@@ -72,7 +73,6 @@ var MainWindow = GObject.registerClass(
 
         let grid = builder.get_object('main-panel');
         this._header = builder.get_object('header-bar');
-        this.set_titlebar(this._header);
         this._header.set_title(_('Select Location'));
 
         this._model = this.application.model;
@@ -99,13 +99,18 @@ var MainWindow = GObject.registerClass(
                                               { hexpand: true, vexpand: true });
         this._stack.add(this._cityView);
 
-        this._forecastStackSwitcher = new Gtk.StackSwitcher({visible: true});
+        this._forecastStackSwitcher = builder.get_object('switcher-title');
         this._forecastStackSwitcher.set_stack(this._cityView.getInfoPage().getForecastStack());
 
+        this._forecastStackSwitcherBar = builder.get_object('switcher-bar');
+        this._forecastStackSwitcherBar.set_stack(this._cityView.getInfoPage().getForecastStack());
+
         this._stack.set_visible_child(this._searchView);
 
-        this.add(grid);
-        grid.show_all();
+        let box = builder.get_object('main-box');
+
+        this.add(box);
+        box.show_all();
 
         for (let i = 0; i < this._pageWidgets[Page.CITY].length; i++)
             this._pageWidgets[Page.CITY][i].hide();