[gnome-weather/wip/cdavis/ui-tweaks: 4/9] window: Use nice transitions for the window state

[Christopher Davis <christopherdavis src gnome org>]

commit 0943fd55789f1fbce2caafbc22d58dc790d3f35f
Author: Christopher Davis <christopherdavis gnome org>
Date:   Fri Feb 12 05:03:25 2021 -0800

    window: Use nice transitions for the window state
    
    Use nice transitions to hide the view switcher
    and refresh button in the initial loading state.

 data/window.ui    | 196 ++++++++++++++++++++++++++++++------------------------
 src/app/window.js |  20 ++----
 2 files changed, 116 insertions(+), 100 deletions(-)
---
diff --git a/data/window.ui b/data/window.ui
index 1ac4471..20745cd 100644
--- a/data/window.ui
+++ b/data/window.ui
@@ -37,32 +37,64 @@
             <property name="show_close_button">True</property>
             <property name="centering_policy">strict</property>
             <child>
-              <object class="GtkButton" id="refresh">
+              <object class="GtkRevealer" id="refreshRevealer">
                 <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>
+                <property name="transition_type">crossfade</property>
                 <child>
-                  <object class="GtkImage" id="refresh-button-image">
+                  <object class="GtkButton" id="refresh">
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="icon_name">view-refresh-symbolic</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>
+                      </object>
+                    </child>
+                    <child internal-child="accessible">
+                      <object class="AtkObject" id="refresh-button-atkobject">
+                        <property name="AtkObject::accessible-name" translatable="yes">Refresh</property>
+                      </object>
+                    </child>
                   </object>
                 </child>
-                <child internal-child="accessible">
-                  <object class="AtkObject" id="refresh-button-atkobject">
-                    <property name="AtkObject::accessible-name" translatable="yes">Refresh</property>
+              </object>
+            </child>
+            <child type="title">
+              <object class="GtkStack" id="titleStack">
+                <property name="visible">True</property>
+                <property name="visible-child-name" bind-source="stack" bind-property="visible-child-name" 
bind-flags="bidirectional|sync-create"/>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="ellipsize">end</property>
+                    <property name="halign">center</property>
+                    <property name="wrap">False</property>
+                    <property name="single-line-mode">True</property>
+                    <property name="width-chars">5</property>
+                    <property name="label" translatable="yes">Select Location</property>
+                    <style>
+                      <class name="title"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="name">search</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="HdyViewSwitcherTitle" id="forecastStackSwitcher">
+                    <property name="visible">True</property>
+                    <property name="title" translatable="yes">Weather</property>
                   </object>
+                  <packing>
+                    <property name="name">city</property>
+                  </packing>
                 </child>
               </object>
             </child>
-           <child type="title">
-             <object class="HdyViewSwitcherTitle" id="forecastStackSwitcher">
-               <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>
@@ -85,88 +117,80 @@
           </object>
         </child>
         <child>
-          <object class="GtkGrid">
-            <property name="visible">True</property>
+          <object class="GtkStack" id="stack">
             <property name="can_focus">False</property>
-            <property name="orientation">vertical</property>
+            <property name="transition_type">crossfade</property>
             <child>
-              <object class="GtkStack" id="stack">
+              <object class="GtkGrid" id="searchView">
+                <property name="name">initial-grid</property>
+                <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="transition_type">crossfade</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="orientation">vertical</property>
+                <property name="row_homogeneous">True</property>
                 <child>
-                  <object class="GtkGrid" id="searchView">
-                    <property name="name">initial-grid</property>
+                  <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="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>
-                    <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="wrap">True</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="searchEntry">
-                        <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>
+                    <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="wrap">True</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="searchEntry">
+                    <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>
+                <property name="name">search</property>
               </packing>
             </child>
           </object>
diff --git a/src/app/window.js b/src/app/window.js
index 545bfba..c6cc07b 100644
--- a/src/app/window.js
+++ b/src/app/window.js
@@ -35,8 +35,8 @@ const Page = {
 
 var MainWindow = GObject.registerClass({
     Template: 'resource:///org/gnome/Weather/window.ui',
-    InternalChildren: ['header', 'refresh', 'forecastStackSwitcher', 'stack',
-                       'searchView', 'searchEntry', 'forecastStackSwitcherBar']
+    InternalChildren: ['header', 'refreshRevealer', 'refresh', 'forecastStackSwitcher', 'stack',
+                       'titleStack', 'searchView', 'searchEntry', 'forecastStackSwitcherBar']
 }, class MainWindow extends Handy.ApplicationWindow {
 
     _init(params) {
@@ -70,8 +70,6 @@ var MainWindow = GObject.registerClass({
         refreshAction.connect('activate', () => this.update());
         this.add_action(refreshAction);
 
-        this._header.set_title(_('Select Location'));
-
         this._model = this.application.model;
 
         this._searchEntry.connect('notify::location', (entry) => {
@@ -82,7 +80,7 @@ var MainWindow = GObject.registerClass({
 
         this._cityView = new City.WeatherView(this.application, this,
                                               { hexpand: true, vexpand: true });
-        this._stack.add(this._cityView);
+        this._stack.add_named(this._cityView, 'city');
 
         this._forecastStackSwitcher.set_stack(this._cityView.getInfoPage().getForecastStack());
 
@@ -113,13 +111,6 @@ var MainWindow = GObject.registerClass({
         }
     }
 
-    _setTitle(page) {
-        if (page == Page.CITY)
-            this._header.set_custom_title(this._forecastStackSwitcher);
-        else
-            this._header.set_custom_title(null);
-    }
-
     _goToPage(page) {
         for (let i = 0; i < this._pageWidgets[this._currentPage].length; i++)
             this._pageWidgets[this._currentPage][i].hide();
@@ -130,13 +121,12 @@ var MainWindow = GObject.registerClass({
                 this._pageWidgets[page][i].show();
         }
 
-        this._setTitle(page);
-
         this._currentPage = page;
     }
 
     showDefault() {
         this._showingDefault = true;
+        this._refreshRevealer.reveal_child = false;
         let clc = this.application.currentLocationController;
         let autoLocation = clc.autoLocation;
         let currentLocation = clc.currentLocation;
@@ -148,6 +138,7 @@ var MainWindow = GObject.registerClass({
 
     showSearch(text) {
         this._showingDefault = false;
+        this._refreshRevealer.reveal_child = true;
         this._cityView.setTimeVisible(false);
         this._stack.set_visible_child(this._searchView);
         this._goToPage(Page.SEARCH);
@@ -179,6 +170,7 @@ var MainWindow = GObject.registerClass({
         }
 
         this._showingDefault = false;
+        this._refreshRevealer.reveal_child = true;
         this.currentInfo = info;
         this._cityView.info = info;