[nautilus/wip/cdavis/adaptive-states] ui: Use AdwAdaptiveState to manage adaptive UI

From: Christopher Davis <christopherdavis src gnome org>
To: commits-list gnome org
Cc:
Subject: [nautilus/wip/cdavis/adaptive-states] ui: Use AdwAdaptiveState to manage adaptive UI
Date: Sun, 9 Oct 2022 20:46:41 +0000 (UTC)

commit dc49087ee0b67fb1ca9031c5882df429deb6b21b
Author: Christopher Davis <christopherdavis gnome org>
Date:   Sun Oct 9 16:31:13 2022 -0400

    ui: Use AdwAdaptiveState to manage adaptive UI
    
    AdwAdaptiveState is a new utility that is part of
    AdwWindow and AdwApplicationWindow. It allows for arbitrary
    changes at specific breakpoints, meaning that we can move,
    show, and hide widgets normally without any undefined behavior
    or flickering.
    
    AdwAdaptiveState allows us to remove the GtkRevealers that we
    used previously, as there's only a simple crossfade transition
    between states now.

 build-aux/flatpak/org.gnome.Nautilus.json |  33 +++++++
 src/resources/ui/nautilus-toolbar.ui      | 144 +++++++++++++-----------------
 src/resources/ui/nautilus-window.ui       |  22 +++--
 3 files changed, 110 insertions(+), 89 deletions(-)
---
diff --git a/build-aux/flatpak/org.gnome.Nautilus.json b/build-aux/flatpak/org.gnome.Nautilus.json
index 1dccd422f..7d4797a14 100644
--- a/build-aux/flatpak/org.gnome.Nautilus.json
+++ b/build-aux/flatpak/org.gnome.Nautilus.json
@@ -148,6 +148,39 @@
         }
       ]
     },
+    {
+        "name" : "libsass",
+        "buildsystem" : "meson",
+        "sources" : [
+            {
+              "type" : "git",
+              "url" : "https://github.com/lazka/libsass.git";,
+              "branch" : "meson"
+            }
+        ]
+    },
+    {
+        "name" : "sassc",
+        "buildsystem" : "meson",
+        "sources" : [
+            {
+              "type" : "git",
+              "url" : "https://github.com/lazka/sassc.git";,
+              "branch" : "meson"
+            }
+        ]
+    },
+    {
+        "name" : "libadwaita",
+        "buildsystem" : "meson",
+        "sources" : [
+            {
+                "type" : "git",
+                "url" : "https://gitlab.gnome.org/GNOME/libadwaita.git";,
+                "branch" : "wip/exalm/adaptive-states"
+            }
+        ]
+    },
     {
       "buildsystem": "meson",
       "builddir": true,
diff --git a/src/resources/ui/nautilus-toolbar.ui b/src/resources/ui/nautilus-toolbar.ui
index cdccb89fe..c90130e90 100644
--- a/src/resources/ui/nautilus-toolbar.ui
+++ b/src/resources/ui/nautilus-toolbar.ui
@@ -117,106 +117,82 @@
             </child>
           </object>
         </child>
+        <child type="start">
+          <object class="GtkToggleButton" id="show_sidebar_button">
+            <property name="visible" bind-source="NautilusToolbar" bind-property="show-sidebar-button" 
bind-flags="bidirectional|sync-create"/>
+            <property name="active" bind-source="NautilusToolbar" bind-property="sidebar-button-active" 
bind-flags="bidirectional|sync-create"/>
+            <property name="tooltip-text" translatable="yes">Show sidebar</property>
+            <property name="icon-name">sidebar-show-symbolic</property>
+          </object>
+        </child>
         <child type="start">
           <object class="GtkBox">
+            <property name="visible" bind-source="NautilusToolbar" bind-property="show-toolbar-children" 
bind-flags="sync-create"/>
+            <property name="spacing">6</property>
             <child>
-              <object class="GtkRevealer">
-                <property name="reveal-child" bind-source="NautilusToolbar" 
bind-property="show-sidebar-button" bind-flags="bidirectional|sync-create"/>
-                <property name="transition-type">slide-right</property>
-                <property name="child">
-                  <object class="GtkToggleButton" id="show_sidebar_button">
-                    <property name="active" bind-source="NautilusToolbar" 
bind-property="sidebar-button-active" bind-flags="bidirectional|sync-create"/>
-                    <property name="tooltip-text" translatable="yes">Show sidebar</property>
-                    <property name="icon-name">sidebar-show-symbolic</property>
-                  </object>
-                </property>
+              <object class="NautilusHistoryControls">
+                <property name="window-slot" bind-source="NautilusToolbar" bind-property="window-slot" 
bind-flags="sync-create"/>
               </object>
             </child>
             <child>
-              <object class="GtkRevealer">
-                <property name="reveal-child" bind-source="NautilusToolbar" 
bind-property="show-toolbar-children" bind-flags="sync-create"/>
-                <property name="transition-type">slide-right</property>
-                <property name="child">
-                  <object class="GtkBox">
-                    <property name="spacing">6</property>
-                    <child>
-                      <object class="NautilusHistoryControls">
-                        <property name="window-slot" bind-source="NautilusToolbar" 
bind-property="window-slot" bind-flags="sync-create"/>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkSeparator">
-                        <style>
-                          <class name="spacer"/>
-                        </style>
-                      </object>
-                    </child>
-                  </object>
-                </property>
+              <object class="GtkSeparator">
+                <style>
+                  <class name="spacer"/>
+                </style>
               </object>
             </child>
           </object>
         </child>
+        <child type="end">
+          <object class="GtkMenuButton" id="app_button">
+            <property name="tooltip-text" translatable="yes">Main Menu</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="icon_name">open-menu-symbolic</property>
+            <property name="popover">
+              <object class="GtkPopoverMenu">
+                <property name="menu-model">app_menu</property>
+                <child type="zoom-out">
+                  <object class="GtkButton">
+                    <property name="icon-name">zoom-out-symbolic</property>
+                    <property name="action-name">view.zoom-out</property>
+                    <property name="tooltip-text" translatable="yes">Zoom out</property>
+                    <style>
+                      <class name="flat"/>
+                    </style>
+                  </object>
+                </child>
+                <child type="zoom-in">
+                  <object class="GtkButton">
+                    <property name="icon-name">zoom-in-symbolic</property>
+                    <property name="action-name">view.zoom-in</property>
+                    <property name="tooltip-text" translatable="yes">Zoom in</property>
+                    <style>
+                      <class name="flat"/>
+                    </style>
+                  </object>
+                </child>
+              </object>
+            </property>
+          </object>
+        </child>
         <child type="end">
           <object class="GtkBox">
+            <property name="visible" bind-source="NautilusToolbar" bind-property="show-toolbar-children" 
bind-flags="sync-create"/>
+            <property name="spacing">6</property>
             <child>
-              <object class="GtkRevealer">
-                <property name="reveal-child" bind-source="NautilusToolbar" 
bind-property="show-toolbar-children" bind-flags="sync-create"/>
-                <property name="transition-type">slide-left</property>
-                <property name="child">
-                  <object class="GtkBox">
-                    <property name="spacing">6</property>
-                    <property name="margin-end">6</property>
-                    <child>
-                      <object class="GtkSeparator">
-                        <style>
-                          <class name="spacer"/>
-                        </style>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="NautilusProgressIndicator"/>
-                    </child>
-                    <child>
-                      <object class="NautilusViewControls">
-                        <property name="window-slot" bind-source="NautilusToolbar" 
bind-property="window-slot" bind-flags="sync-create"/>
-                      </object>
-                    </child>
-                  </object>
-                </property>
+              <object class="GtkSeparator">
+                <style>
+                  <class name="spacer"/>
+                </style>
               </object>
             </child>
             <child>
-              <object class="GtkMenuButton" id="app_button">
-                <property name="tooltip-text" translatable="yes">Main Menu</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="icon_name">open-menu-symbolic</property>
-                <property name="popover">
-                  <object class="GtkPopoverMenu">
-                    <property name="menu-model">app_menu</property>
-                    <child type="zoom-out">
-                      <object class="GtkButton">
-                        <property name="icon-name">zoom-out-symbolic</property>
-                        <property name="action-name">view.zoom-out</property>
-                        <property name="tooltip-text" translatable="yes">Zoom out</property>
-                        <style>
-                          <class name="flat"/>
-                        </style>
-                      </object>
-                    </child>
-                    <child type="zoom-in">
-                      <object class="GtkButton">
-                        <property name="icon-name">zoom-in-symbolic</property>
-                        <property name="action-name">view.zoom-in</property>
-                        <property name="tooltip-text" translatable="yes">Zoom in</property>
-                        <style>
-                          <class name="flat"/>
-                        </style>
-                      </object>
-                    </child>
-                  </object>
-                </property>
+              <object class="NautilusProgressIndicator"/>
+            </child>
+            <child>
+              <object class="NautilusViewControls">
+                <property name="window-slot" bind-source="NautilusToolbar" bind-property="window-slot" 
bind-flags="sync-create"/>
               </object>
             </child>
           </object>
diff --git a/src/resources/ui/nautilus-window.ui b/src/resources/ui/nautilus-window.ui
index 6c7083c82..870e42781 100644
--- a/src/resources/ui/nautilus-window.ui
+++ b/src/resources/ui/nautilus-window.ui
@@ -26,6 +26,8 @@
     </section>
   </menu>
   <template class="NautilusWindow" parent="AdwApplicationWindow">
+    <property name="width-request">360</property>
+    <property name="height-request">380</property>
     <property name="show-menubar">False</property>
     <property name="title" translatable="yes">_Files</property>
     <child>
@@ -35,14 +37,14 @@
             <property name="orientation">vertical</property>
             <child>
               <object class="NautilusToolbar" id="toolbar">
-                <property name="show-sidebar-button" bind-source="content_flap" bind-property="folded" 
bind-flags="sync-create"/>
+                <property name="show-toolbar-children">True</property>
                 <property name="sidebar-button-active" bind-source="content_flap" 
bind-property="reveal-flap" bind-flags="bidirectional|sync-create"/>
-                <property name="show-toolbar-children" bind-source="content_flap" bind-property="folded" 
bind-flags="sync-create|invert-boolean"/>
                 <property name="window-slot" bind-source="NautilusWindow" bind-property="active-slot" 
bind-flags="sync-create"/>
               </object>
             </child>
             <child>
               <object class="AdwFlap" id="content_flap">
+                <property name="fold-policy">never</property>
                 <child type="flap">
                   <object class="NautilusGtkPlacesSidebar" id="places_sidebar">
                     <property name="vexpand">True</property>
@@ -60,7 +62,6 @@
                 <child>
                   <object class="GtkBox">
                     <property name="orientation">vertical</property>
-                    <property name="width-request">360</property>
                     <child>
                       <object class="AdwTabBar">
                         <property name="view">tab_view</property>
@@ -76,8 +77,8 @@
               </object>
             </child>
             <child>
-              <object class="GtkActionBar">
-                <property name="revealed" bind-source="content_flap" bind-property="folded" 
bind-flags="sync-create"/>
+              <object class="GtkActionBar" id="action_bar">
+                <property name="revealed">False</property>
                 <child type="start">
                   <object class="NautilusHistoryControls">
                     <property name="window-slot" bind-source="NautilusWindow" bind-property="active-slot" 
bind-flags="sync-create"/>
@@ -102,5 +103,16 @@
         </property>
       </object>
     </child>
+    <child>
+      <object class="AdwAdaptiveState" id="narrow_state">
+        <conditions>
+          <condition type="max-width">600</condition>
+        </conditions>
+        <setter object="content_flap" property="fold-policy">always</setter>
+        <setter object="toolbar" property="show-sidebar-button">True</setter>
+        <setter object="toolbar" property="show-toolbar-children">False</setter>
+        <setter object="action_bar" property="revealed">True</setter>
+      </object>
+    </child>
   </template>
 </interface>
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]