From 4f7e11e25f1f0eaec86fa113fc976fdf10927b49 Mon Sep 17 00:00:00 2001
From: Adrien Plazas <kekun.plazas@laposte.net>
Date: Fri, 22 Jul 2022 09:09:39 +0200
Subject: [PATCH] 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 ca10ff16..4401ea13 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 4439f6e4..c4421996 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);
     }
 
-- 
GitLab