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




commit 956f81fb327d1b53e0229b17f3da962ed8220e9b
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       |  21 ++++-
 3 files changed, 110 insertions(+), 88 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..b1f08f565 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>
@@ -76,8 +78,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 +104,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]