toolbar: Update visual design

Use AdwSplit button and drop linked box for nav buttons.

Use .spacer separator instead of css margin.

3 files changed, 85 insertions, 118 deletions

diff --git a/src/nautilus-toolbar.c b/src/nautilus-toolbar.c
index 670508933..835d8add1 100644
--- a/src/nautilus-toolbar.c
+++ b/src/nautilus-toolbar.c
@@ -78,9 +78,8 @@ struct _NautilusToolbar
     GtkWidget *operations_revealer;
     GtkWidget *operations_icon;
 
-    GtkWidget *view_toggle_button;
+    GtkWidget *view_split_button;
     GtkWidget *view_toggle_icon;
-    GtkWidget *view_button;
     GMenuModel *view_menu;
 
     GtkWidget *app_button;
@@ -1129,9 +1128,8 @@ nautilus_toolbar_class_init (NautilusToolbarClass *klass)
     gtk_widget_class_bind_template_child (widget_class, NautilusToolbar, operations_popover);
     gtk_widget_class_bind_template_child (widget_class, NautilusToolbar, operations_list);
     gtk_widget_class_bind_template_child (widget_class, NautilusToolbar, operations_revealer);
-    gtk_widget_class_bind_template_child (widget_class, NautilusToolbar, view_button);
     gtk_widget_class_bind_template_child (widget_class, NautilusToolbar, view_menu);
-    gtk_widget_class_bind_template_child (widget_class, NautilusToolbar, view_toggle_button);
+    gtk_widget_class_bind_template_child (widget_class, NautilusToolbar, view_split_button);
     gtk_widget_class_bind_template_child (widget_class, NautilusToolbar, view_toggle_icon);
     gtk_widget_class_bind_template_child (widget_class, NautilusToolbar, app_button);
     gtk_widget_class_bind_template_child (widget_class, NautilusToolbar, undo_redo_section);
@@ -1226,7 +1224,7 @@ on_slot_toolbar_menu_sections_changed (NautilusToolbar    *self,
 
     new_sections = nautilus_window_slot_get_toolbar_menu_sections (slot);
 
-    gtk_widget_set_sensitive (self->view_button, (new_sections != NULL));
+    gtk_widget_set_sensitive (self->view_split_button, (new_sections != NULL));
     if (new_sections == NULL)
     {
         return;
@@ -1326,7 +1324,7 @@ nautilus_toolbar_set_window_slot_real (NautilusToolbar    *self,
                                                           NULL);
 
         self->tooltip_binding = g_object_bind_property_full (self->window_slot, "tooltip",
-                                                             self->view_toggle_button, "tooltip-text",
+                                                             self->view_split_button, "tooltip-text",
                                                              G_BINDING_DEFAULT | G_BINDING_SYNC_CREATE,
                                                              (GBindingTransformFunc) nautilus_toolbar_view_toggle_tooltip_transform_to,
                                                              NULL,
diff --git a/src/resources/css/Adwaita.css b/src/resources/css/Adwaita.css
index a05f44e27..4edefa206 100644
--- a/src/resources/css/Adwaita.css
+++ b/src/resources/css/Adwaita.css
@@ -29,11 +29,6 @@
   background: none;
 }
 
-.disclosure-button > * {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 /* Path bar */
 
 .nautilus-path-bar > scrolledwindow {
diff --git a/src/resources/ui/nautilus-toolbar.ui b/src/resources/ui/nautilus-toolbar.ui
index e9a101029..139764612 100644
--- a/src/resources/ui/nautilus-toolbar.ui
+++ b/src/resources/ui/nautilus-toolbar.ui
@@ -130,7 +130,6 @@
         <property name="focusable">False</property>
         <child type="title">
           <object class="GtkBox" id="header_toolbar">
-            <property name="width_request">270</property>
             <property name="spacing">6</property>
             <child>
               <object class="GtkStack" id="toolbar_switcher">
@@ -191,137 +190,112 @@
           </object>
         </child>
         <child type="start">
-          <object class="GtkBox" id="navigation_box">
+          <object class="GtkButton" id="back_button">
+            <property name="focusable">True</property>
+            <property name="tooltip_text" translatable="yes">Go back</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="action_name">win.back</property>
             <child>
-              <object class="GtkButton" id="back_button">
-                <property name="focusable">True</property>
-                <property name="tooltip_text" translatable="yes">Go back</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="action_name">win.back</property>
-                <child>
-                  <object class="GtkImage" id="back_icon">
-                    <property name="icon_name">go-previous-symbolic</property>
-                    <property name="icon_size">1</property>
-                  </object>
-                </child>
-                <style>
-                  <class name="image-button"/>
-                </style>
+              <object class="GtkImage" id="back_icon">
+                <property name="icon_name">go-previous-symbolic</property>
+                <property name="icon_size">1</property>
               </object>
             </child>
+            <style>
+              <class name="image-button"/>
+            </style>
+          </object>
+        </child>
+        <child type="start">
+          <object class="GtkButton" id="forward_button">
+            <property name="focusable">True</property>
+            <property name="tooltip_text" translatable="yes">Go forward</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="action_name">win.forward</property>
             <child>
-              <object class="GtkButton" id="forward_button">
-                <property name="focusable">True</property>
-                <property name="tooltip_text" translatable="yes">Go forward</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="action_name">win.forward</property>
-                <child>
-                  <object class="GtkImage" id="forward_icon">
-                    <property name="icon_name">go-next-symbolic</property>
-                    <property name="icon_size">1</property>
-                  </object>
-                </child>
-                <style>
-                  <class name="image-button"/>
-                </style>
+              <object class="GtkImage" id="forward_icon">
+                <property name="icon_name">go-next-symbolic</property>
+                <property name="icon_size">1</property>
               </object>
             </child>
             <style>
-              <class name="linked"/>
-              <class name="raised"/>
+              <class name="image-button"/>
+            </style>
+          </object>
+        </child>
+        <child type="start">
+          <object class="GtkSeparator">
+            <style>
+              <class name="spacer"/>
             </style>
           </object>
         </child>
         <child type="end">
-          <object class="GtkBox">
-            <property name="margin_start">72</property>
+          <object class="GtkMenuButton" id="app_button">
+            <property name="focusable">True</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="menu-model">app_menu</property>
             <child>
-              <object class="GtkRevealer" id="operations_revealer">
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="transition_type">slide-right</property>
-                <property name="child">
-                  <object class="GtkMenuButton" id="operations_button">
-                    <property name="focusable">True</property>
-                    <property name="tooltip_text" translatable="yes">Show operations</property>
-                    <property name="margin_end">6</property>
-                    <property name="popover">operations_popover</property>
-                    <child>
-                      <object class="GtkDrawingArea" id="operations_icon">
-                        <property name="width_request">16</property>
-                        <property name="height_request">16</property>
-                        <property name="halign">center</property>
-                        <property name="valign">center</property>
-                      </object>
-                    </child>
-                    <style>
-                      <class name="button"/>
-                    </style>
-                  </object>
-                </property>
+              <object class="GtkImage">
+                <property name="icon_name">open-menu-symbolic</property>
+                <property name="icon_size">1</property>
               </object>
             </child>
+            <style>
+              <class name="image-button"/>
+            </style>
+          </object>
+        </child>
+        <child type="end">
+          <object class="AdwSplitButton" id="view_split_button">
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="margin_end">6</property>
+            <property name="focusable">True</property>
+            <property name="tooltip_text" translatable="yes">Toggle view</property>
+            <property name="action_name">slot.files-view-mode-toggle</property>
+            <property name="menu-model">view_menu</property>
             <child>
-              <object class="GtkBox">
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="margin_end">6</property>
-                <child>
-                  <object class="GtkButton" id="view_toggle_button">
-                    <property name="focusable">True</property>
-                    <property name="tooltip_text" translatable="yes">Toggle view</property>
-                    <property name="action_name">slot.files-view-mode-toggle</property>
-                    <child>
-                      <object class="GtkImage" id="view_toggle_icon">
-                        <property name="icon_size">1</property>
-                      </object>
-                    </child>
-                    <style>
-                      <class name="image-button"/>
-                    </style>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkMenuButton" id="view_button">
-                    <property name="focusable">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="tooltip_text" translatable="yes" comments="“View” is a noun">View options</property>
-                    <property name="halign">start</property>
-                    <property name="menu-model">view_menu</property>
-                    <child>
-                      <object class="GtkImage">
-                        <property name="icon_name">pan-down-symbolic</property>
-                      </object>
-                    </child>
-                    <style>
-                      <class name="disclosure-button"/>
-                    </style>
-                  </object>
-                </child>
-                <style>
-                  <class name="linked"/>
-                </style>
+              <object class="GtkImage" id="view_toggle_icon">
+                <property name="icon_size">1</property>
               </object>
             </child>
-            <child>
-              <object class="GtkMenuButton" id="app_button">
+          </object>
+        </child>
+        <child type="end">
+          <object class="GtkRevealer" id="operations_revealer">
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="transition_type">slide-right</property>
+            <property name="child">
+              <object class="GtkMenuButton" id="operations_button">
                 <property name="focusable">True</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="menu-model">app_menu</property>
+                <property name="tooltip_text" translatable="yes">Show operations</property>
+                <property name="margin_end">6</property>
+                <property name="popover">operations_popover</property>
                 <child>
-                  <object class="GtkImage">
-                    <property name="icon_name">open-menu-symbolic</property>
-                    <property name="icon_size">1</property>
+                  <object class="GtkDrawingArea" id="operations_icon">
+                    <property name="width_request">16</property>
+                    <property name="height_request">16</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
                   </object>
                 </child>
                 <style>
                   <class name="image-button"/>
                 </style>
               </object>
-            </child>
+            </property>
+          </object>
+        </child>
+        <child type="end">
+          <object class="GtkSeparator">
+            <style>
+              <class name="spacer"/>
+            </style>
           </object>
         </child>
       </object>