[gnome-weather] window: Make the seach view headerbar flat

[Christopher Davis <christopherdavis src gnome org>]

commit 4f7e11e25f1f0eaec86fa113fc976fdf10927b49
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Fri Jul 22 09:09:39 2022 +0200

    window: Make the seach view headerbar flat
    
    This separates the seach and city views a bit more so they don't share
    the same headerbar with two completely different contents, making the
    code of the main headerbar simpler at the cost of having an extra
    headerbar. More importantly, this makes the search view's headerbar flat
    and gives it no title, so it completely blends with this views pretty
    blue background.

 data/window.ui    | 137 ++++++++++++++++++++++++++----------------------------
 src/app/window.js |   8 ++--
 2 files changed, 71 insertions(+), 74 deletions(-)
---
diff --git a/data/window.ui b/data/window.ui
index ca10ff1..4401ea1 100644
--- a/data/window.ui
+++ b/data/window.ui
@@ -26,75 +26,14 @@
     <property name="default_width">760</property>
     <property name="default_height">520</property>
     <child>
-      <object class="GtkBox">
-        <property name="orientation">vertical</property>
+      <object class="GtkStack" id="stack">
+        <property name="transition_type">crossfade</property>
         <child>
-          <object class="AdwHeaderBar" id="header">
-            <property name="centering_policy">strict</property>
-            <child type="start">
-              <object class="GtkRevealer" id="refreshRevealer">
-                <property name="transition_type">crossfade</property>
-                <property name="child">
-                  <object class="GtkButton" id="refresh">
-                    <property name="valign">center</property>
-                    <property name="tooltip-text" translatable="yes">Refresh</property>
-                    <property name="action_name">win.refresh</property>
-                    <property name="icon_name">view-refresh-symbolic</property>
-                  </object>
-                </property>
-              </object>
-            </child>
-            <child type="title">
-              <object class="GtkStack" id="titleStack">
-                <property name="visible-child-name" bind-source="stack" bind-property="visible-child-name" 
bind-flags="bidirectional|sync-create" />
-                <property name="transition_type">crossfade</property>
-                <child>
-                  <object class="GtkStackPage">
-                    <property name="name">search</property>
-                    <property name="child">
-                      <object class="GtkLabel">
-                        <property name="ellipsize">end</property>
-                        <property name="halign">center</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>
-                    </property>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkStackPage">
-                    <property name="name">city</property>
-                    <property name="child">
-                      <object class="AdwViewSwitcherTitle" id="forecastStackSwitcher">
-                        <property name="title" translatable="yes">Weather</property>
-                      </object>
-                    </property>
-                  </object>
-                </child>
-              </object>
-            </child>
-            <child type="end">
-              <object class="GtkMenuButton">
-                <property name="valign">center</property>
-                <property name="menu_model">primary-menu</property>
-                <property name="icon_name">open-menu-symbolic</property>
-              </object>
-            </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkStack" id="stack">
-
-            <property name="transition_type">crossfade</property>
+          <object class="GtkWindowHandle" id="searchView">
             <child>
-              <object class="GtkStackPage">
-                <property name="name">search</property>
+              <object class="GtkOverlay">
                 <property name="child">
-                  <object class="AdwStatusPage" id="searchView">
+                  <object class="AdwStatusPage" id="searchViewStatus">
 
                     <property name="icon_name">mark-location-symbolic</property>
                     <property name="title" translatable="yes">Welcome to Weather!</property>
@@ -107,20 +46,78 @@
                         <property name="label" translatable="yes">Search for a city or country</property>
                       </object>
                     </child>
+                  </object>
+                </property>
+                <child type="overlay">
+                  <object class="GtkHeaderBar">
+                    <property name="valign">start</property>
+                    <child type="title">
+                      <object class="AdwWindowTitle">
+                      </object>
+                    </child>
+                    <child type="end">
+                      <object class="GtkMenuButton">
+                        <property name="valign">center</property>
+                        <property name="menu_model">primary-menu</property>
+                        <property name="icon_name">open-menu-symbolic</property>
+                      </object>
+                    </child>
 
                     <style>
-                      <class name="search-view" />
+                      <class name="flat" />
                     </style>
                   </object>
-                </property>
+                </child>
               </object>
             </child>
 
+            <style>
+              <class name="search-view" />
+            </style>
           </object>
         </child>
+
         <child>
-          <object class="AdwViewSwitcherBar" id="forecastStackSwitcherBar">
-            <property name="reveal" bind-source="forecastStackSwitcher" bind-property="title-visible" 
bind-flags="sync-create" />
+          <object class="GtkBox" id="cityBox">
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="AdwHeaderBar" id="header">
+                <property name="centering_policy">strict</property>
+                <child type="start">
+                  <object class="GtkRevealer" id="refreshRevealer">
+                    <property name="transition_type">crossfade</property>
+                    <property name="child">
+                      <object class="GtkButton" id="refresh">
+                        <property name="valign">center</property>
+                        <property name="tooltip-text" translatable="yes">Refresh</property>
+                        <property name="action_name">win.refresh</property>
+                        <property name="icon_name">view-refresh-symbolic</property>
+                      </object>
+                    </property>
+                  </object>
+                </child>
+                <child type="title">
+                  <object class="AdwViewSwitcherTitle" id="forecastStackSwitcher">
+                    <property name="title" translatable="yes">Weather</property>
+                  </object>
+                </child>
+                <child type="end">
+                  <object class="GtkMenuButton">
+                    <property name="valign">center</property>
+                    <property name="menu_model">primary-menu</property>
+                    <property name="icon_name">open-menu-symbolic</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="AdwBin" id="cityBin"/>
+            </child>
+            <child>
+              <object class="AdwViewSwitcherBar" id="forecastStackSwitcherBar">
+                <property name="reveal" bind-source="forecastStackSwitcher" bind-property="title-visible" 
bind-flags="sync-create" />
+              </object>
+            </child>
           </object>
         </child>
       </object>
diff --git a/src/app/window.js b/src/app/window.js
index 4439f6e..c442199 100644
--- a/src/app/window.js
+++ b/src/app/window.js
@@ -32,7 +32,7 @@ const Page = {
 export const MainWindow = GObject.registerClass({
     Template: 'resource:///org/gnome/Weather/window.ui',
     InternalChildren: ['header', 'refreshRevealer', 'refresh', 'forecastStackSwitcher', 'stack',
-        'titleStack', 'searchButton', 'searchView', 'forecastStackSwitcherBar']
+        'searchButton', 'searchView', 'searchViewStatus', 'forecastStackSwitcherBar', 'cityBox', 'cityBin']
 }, class MainWindow extends Adw.ApplicationWindow {
     constructor(params) {
         super(params);
@@ -58,7 +58,7 @@ export const MainWindow = GObject.registerClass({
 
         this._model = this.application.model;
 
-        this._searchView.icon_name = pkg.name;
+        this._searchViewStatus.icon_name = pkg.name;
 
         this._worldView = new WorldContentView(this.application, this, {
             align: Gtk.Align.CENTER,
@@ -70,7 +70,7 @@ export const MainWindow = GObject.registerClass({
         this._cityView = new City.WeatherView(this.application, this,
             { hexpand: true, vexpand: true });
 
-        this._stack.add_named(this._cityView, 'city');
+        this._cityBin.set_child(this._cityView);
 
         this._forecastStackSwitcher.stack = this._cityView.getForecastStack();
         this._forecastStackSwitcherBar.stack = this._cityView.getForecastStack();
@@ -142,7 +142,7 @@ export const MainWindow = GObject.registerClass({
         this.currentInfo = info;
         this._cityView.info = info;
 
-        this._stack.set_visible_child(this._cityView);
+        this._stack.set_visible_child(this._cityBox);
         this._goToPage(Page.CITY);
     }