From 2d34fbe2e7b9ff1c813600ada91a6948d47b10f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Thu, 7 Dec 2023 19:10:40 +0100
Subject: [PATCH] extensions-app: Use banner instead of action bar

Action bars have largely gone out of fashion, and Banner is an
appropriate replacement in our case, so switch to that.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3048>
---
 .../data/ui/extensions-window.ui              | 120 ++++++------------
 subprojects/extensions-app/js/main.js         |   7 +-
 2 files changed, 44 insertions(+), 83 deletions(-)

diff --git a/subprojects/extensions-app/data/ui/extensions-window.ui b/subprojects/extensions-app/data/ui/extensions-window.ui
index 336149a1f..ac682f044 100644
--- a/subprojects/extensions-app/data/ui/extensions-window.ui
+++ b/subprojects/extensions-app/data/ui/extensions-window.ui
@@ -74,47 +74,58 @@
               <object class="GtkStackPage">
                 <property name="name">main</property>
                 <property name="child">
-                  <object class="AdwPreferencesPage">
+                  <object class="GtkBox">
+                    <property name="orientation">vertical</property>
                     <child>
-                      <object class="AdwPreferencesGroup">
+                      <object class="AdwBanner" id="updatesBanner">
+                        <property name="button-label" translatable="yes">Log Out…</property>
+                        <property name="action-name">win.logout</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="AdwPreferencesPage">
                         <child>
-                          <object class="AdwActionRow">
-                            <property name="title" translatable="yes">Extensions</property>
-                            <property name="subtitle" translatable="yes">Extensions can cause performance and stability issues. Disable extensions if you encounter problems with your system.</property>
-                            <property name="activatable-widget">enabledSwitch</property>
+                          <object class="AdwPreferencesGroup">
                             <child>
-                              <object class="GtkSwitch" id="enabledSwitch">
-                                <property name="action-name">win.user-extensions-enabled</property>
-                                <property name="valign">center</property>
+                              <object class="AdwActionRow">
+                                <property name="title" translatable="yes">Extensions</property>
+                                <property name="subtitle" translatable="yes">Extensions can cause performance and stability issues. Disable extensions if you encounter problems with your system.</property>
+                                <property name="activatable-widget">enabledSwitch</property>
+                                <child>
+                                  <object class="GtkSwitch" id="enabledSwitch">
+                                    <property name="action-name">win.user-extensions-enabled</property>
+                                    <property name="valign">center</property>
+                                  </object>
+                                </child>
                               </object>
                             </child>
                           </object>
                         </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="AdwPreferencesGroup" id="userGroup">
-                        <property name="title" translatable="yes">Manually Installed</property>
-                        <property name="description" translatable="yes">To find and add extensions, visit &lt;a href="https://extensions.gnome.org"&gt;extensions.gnome.org&lt;/a&gt;.</property>
                         <child>
-                          <object class="GtkListBox" id="userList">
-                            <property name="selection-mode">none</property>
-                            <style>
-                              <class name="boxed-list"/>
-                            </style>
+                          <object class="AdwPreferencesGroup" id="userGroup">
+                            <property name="title" translatable="yes">Manually Installed</property>
+                            <property name="description" translatable="yes">To find and add extensions, visit &lt;a href="https://extensions.gnome.org"&gt;extensions.gnome.org&lt;/a&gt;.</property>
+                            <child>
+                              <object class="GtkListBox" id="userList">
+                                <property name="selection-mode">none</property>
+                                <style>
+                                  <class name="boxed-list"/>
+                                </style>
+                              </object>
+                            </child>
                           </object>
                         </child>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="AdwPreferencesGroup" id="systemGroup">
-                        <property name="title" translatable="yes">Built-In</property>
                         <child>
-                          <object class="GtkListBox" id="systemList">
-                            <property name="selection-mode">none</property>
-                            <style>
-                              <class name="boxed-list"/>
-                            </style>
+                          <object class="AdwPreferencesGroup" id="systemGroup">
+                            <property name="title" translatable="yes">Built-In</property>
+                            <child>
+                              <object class="GtkListBox" id="systemList">
+                                <property name="selection-mode">none</property>
+                                <style>
+                                  <class name="boxed-list"/>
+                                </style>
+                              </object>
+                            </child>
                           </object>
                         </child>
                       </object>
@@ -148,55 +159,6 @@
             </child>
           </object>
         </property>
-        <child type="bottom">
-          <object class="GtkActionBar" id="updatesBar">
-            <property name="revealed">False</property>
-            <child>
-              <object class="GtkImage">
-                <property name="pixel-size">24</property>
-                <property name="margin-start">6</property>
-                <property name="margin-end">6</property>
-                <property name="margin-top">6</property>
-                <property name="margin-bottom">6</property>
-                <property name="icon-name">software-update-available-symbolic</property>
-                <style>
-                  <class name="warning"/>
-                </style>
-              </object>
-            </child>
-            <child>
-              <object class="GtkBox">
-                <property name="orientation">vertical</property>
-                <property name="valign">center</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="halign">start</property>
-                    <property name="label" translatable="yes">Extension Updates Ready</property>
-                    <style>
-                      <class name="heading"/>
-                    </style>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkLabel" id="updatesLabel">
-                    <property name="halign">start</property>
-                  </object>
-                </child>
-              </object>
-            </child>
-            <child type="end">
-              <object class="GtkButton">
-                <property name="label" translatable="yes">Log Out…</property>
-                <property name="valign">center</property>
-                <property name="action-name">win.logout</property>
-                <property name="receives-default">True</property>
-                <style>
-                  <class name="suggested-action"/>
-                </style>
-              </object>
-            </child>
-          </object>
-        </child>
       </object>
     </child>
   </template>
diff --git a/subprojects/extensions-app/js/main.js b/subprojects/extensions-app/js/main.js
index 0853a8930..529db5c54 100644
--- a/subprojects/extensions-app/js/main.js
+++ b/subprojects/extensions-app/js/main.js
@@ -88,8 +88,7 @@ var ExtensionsWindow = GObject.registerClass({
         'searchBar',
         'searchButton',
         'searchEntry',
-        'updatesBar',
-        'updatesLabel',
+        'updatesBanner',
     ],
 }, class ExtensionsWindow extends Adw.ApplicationWindow {
     _init(params) {
@@ -341,11 +340,11 @@ var ExtensionsWindow = GObject.registerClass({
     _checkUpdates() {
         let nUpdates = [...this._userList].filter(c => c.hasUpdate).length;
 
-        this._updatesLabel.label = Gettext.ngettext(
+        this._updatesBanner.title = Gettext.ngettext(
             '%d extension will be updated on next login.',
             '%d extensions will be updated on next login.',
             nUpdates).format(nUpdates);
-        this._updatesBar.revealed = nUpdates > 0;
+        this._updatesBanner.revealed = nUpdates > 0;
     }
 
     _extensionsLoaded() {