action-bar: Try out a flatter designaction-and-info-bar-2018

2 files changed, 150 insertions, 84 deletions

diff --git a/src/resources/css/Adwaita.css b/src/resources/css/Adwaita.css
index 74d7ac1aa..6c00d9591 100644
--- a/src/resources/css/Adwaita.css
+++ b/src/resources/css/Adwaita.css
@@ -262,4 +262,13 @@ actionbar
   border-top: 1px solid @borders;
   /* Same as sidebar_bg_color in gtk */
   background-color: mix(@theme_bg_color, @theme_base_color, 0.5);
-} 
\ No newline at end of file
+}
+
+.border-box
+{
+  border-width: 0px 0px 0px 1px;
+  border-style: solid;
+  border-color: @borders;
+  /* Same as spacing between icons */
+  padding-left: 6px;
+}
\ No newline at end of file
diff --git a/src/resources/ui/nautilus-action-bar.ui b/src/resources/ui/nautilus-action-bar.ui
index 6be5cf11d..818434d53 100644
--- a/src/resources/ui/nautilus-action-bar.ui
+++ b/src/resources/ui/nautilus-action-bar.ui
@@ -1,31 +1,36 @@
 <?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.0 -->
 <interface>
   <requires lib="gtk+" version="3.18"/>
   <template class="NautilusActionBar" parent="GtkFrame">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
     <property name="vexpand">False</property>
+    <property name="label_xalign">0</property>
     <child>
       <object class="GtkStack" id="stack">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="hexpand">True</property>
-        <property name="hhomogeneous">False</property>
+        <property name="homogeneous">False</property>
         <property name="transition_type">crossfade</property>
+        <property name="margin-left">6</property>
+        <property name="margin-right">6</property>
+        <property name="border-width">0</property>
         <child>
           <object class="GtkBox">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
             <property name="valign">center</property>
-            <property name="border_width">6</property>
+            <property name="border-width">6</property>
             <property name="spacing">6</property>
             <child>
               <object class="GtkBox">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
+                <property name="valign">center</property>
                 <property name="hexpand">True</property>
                 <property name="orientation">vertical</property>
-                <property name="valign">center</property>
                 <child>
                   <object class="GtkLabel" id="primary_label">
                     <property name="visible">True</property>
@@ -47,7 +52,7 @@
                     <property name="ellipsize">end</property>
                     <property name="xalign">0</property>
                     <attributes>
-                      <attribute name="scale" value="0.86"/>
+                      <attribute name="scale" value="0.85999999999999999"/>
                     </attributes>
                     <style>
                       <class name="dim-label"/>
@@ -70,181 +75,228 @@
               <object class="GtkBox">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="hexpand">False</property>
-                <property name="valign">center</property>
-                <style>
-                  <class name="linked"/>
-                </style>
-                <child>
-                  <object class="GtkButton" id="cut_button">
-                    <property name="visible" bind-source="cut_button" bind-property="sensitive" bind-flags="default" />
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="tooltip_text" translatable="yes">Cut item</property>
-                    <property name="action_name">view.cut</property>
-                    <child>
-                      <object class="GtkImage">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="icon_name">edit-cut-symbolic</property>
-                      </object>
-                    </child>
-                    <style>
-                      <class name="image-button"/>
-                    </style>
-                  </object>
-                </child>
+                <property name="spacing">6</property>
                 <child>
-                  <object class="GtkButton" id="copy_button">
-                    <property name="visible" bind-source="copy_button" bind-property="sensitive" bind-flags="default" />
+                  <object class="GtkMenuButton">
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
                     <property name="receives_default">True</property>
-                    <property name="tooltip_text" translatable="yes">Copy item</property>
-                    <property name="action_name">view.copy</property>
-                    <child>
-                      <object class="GtkImage">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="icon_name">edit-copy-symbolic</property>
-                      </object>
-                    </child>
-                    <style>
-                      <class name="image-button"/>
-                    </style>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkButton" id="paste_button">
-                    <property name="visible" bind-source="paste_button" bind-property="sensitive" bind-flags="default" />
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="action_name">view.paste</property>
+                    <property name="valign">center</property>
+                    <property name="menu_model">selection-menu</property>
                     <child>
                       <object class="GtkImage">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="icon_name">edit-paste-symbolic</property>
+                        <property name="icon_name">view-more-symbolic</property>
                       </object>
                     </child>
                     <style>
                       <class name="image-button"/>
+                      <class name="flat"/>
                     </style>
                   </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="pack_type">end</property>
+                    <property name="position">0</property>
+                  </packing>
                 </child>
                 <child>
-                  <object class="GtkButton" id="trash_button">
-                    <property name="visible" bind-source="trash_button" bind-property="sensitive" bind-flags="default" />
+                  <object class="GtkButton">
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
                     <property name="receives_default">True</property>
-                    <property name="tooltip_text" translatable="yes">Move to trash</property>
-                    <property name="action_name">view.move-to-trash</property>
+                    <property name="valign">center</property>
+                    <property name="tooltip_text" translatable="yes">Create a new folder</property>
+                    <property name="action_name">view.new-folder</property>
                     <child>
                       <object class="GtkImage">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="icon_name">user-trash-symbolic</property>
+                        <property name="icon_name">folder-new-symbolic</property>
                       </object>
                     </child>
                     <style>
                       <class name="image-button"/>
+                      <class name="flat"/>
                     </style>
                   </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="pack_type">end</property>
+                    <property name="position">1</property>
+                  </packing>
                 </child>
+                <style>
+                  <class name="border-box"/>
+                </style>
               </object>
               <packing>
                 <property name="expand">False</property>
                 <property name="fill">True</property>
                 <property name="pack_type">end</property>
-                <property name="position">4</property>
+                <property name="position">1</property>
               </packing>
             </child>
             <child>
-              <object class="GtkMenuButton">
+              <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="receives_default">True</property>
-                <property name="menu_model">selection-menu</property>
+                <property name="can_focus">False</property>
                 <property name="valign">center</property>
+                <property name="spacing">6</property>
                 <child>
-                  <object class="GtkImage">
+                  <object class="GtkButton" id="rename_button">
+                    <property name="label" translatable="yes">Rename</property>
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="icon_name">view-more-symbolic</property>
+                    <property name="can_focus">True</property>
+                    <property name="receives_default">True</property>
+                    <property name="tooltip_text" translatable="yes">Rename the selected file</property>
+                    <property name="action_name">view.rename</property>
+                    <style>
+                      <class name="flat"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">0</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkButton">
+                    <property name="label" translatable="yes">Open</property>
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="receives_default">True</property>
+                    <property name="tooltip_text" translatable="yes">Open the selected items</property>
+                    <property name="action_name">view.open-with-default-application</property>
+                    <style>
+                      <class name="suggested-action"/>
+                      <class name="flat"/>
+                    </style>
                   </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">1</property>
+                  </packing>
                 </child>
                 <style>
-                  <class name="image-button"/>
+                  <class name="border-box"/>
                 </style>
               </object>
               <packing>
                 <property name="expand">False</property>
                 <property name="fill">True</property>
                 <property name="pack_type">end</property>
-                <property name="position">1</property>
+                <property name="position">2</property>
               </packing>
             </child>
             <child>
               <object class="GtkBox">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="spacing">6</property>
                 <property name="valign">center</property>
+                <property name="hexpand">False</property>
                 <child>
-                  <object class="GtkButton" id="rename_button">
-                    <property name="visible" bind-source="rename_button" bind-property="sensitive" bind-flags="default" />
-                    <property name="label" translatable="yes">Rename</property>
+                  <object class="GtkButton" id="cut_button">
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
                     <property name="receives_default">True</property>
-                    <property name="tooltip_text" translatable="yes">Rename the selected file</property>
-                    <property name="action_name">view.rename</property>
+                    <property name="tooltip_text" translatable="yes">Cut item</property>
+                    <property name="action_name">view.cut</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">edit-cut-symbolic</property>
+                      </object>
+                    </child>
+                    <style>
+                      <class name="image-button"/>
+                      <class name="flat"/>
+                    </style>
                   </object>
                   <packing>
                     <property name="expand">False</property>
                     <property name="fill">True</property>
+                    <property name="position">0</property>
                   </packing>
                 </child>
                 <child>
-                  <object class="GtkButton">
+                  <object class="GtkButton" id="copy_button">
                     <property name="visible">True</property>
-                    <property name="label" translatable="yes">Open</property>
+                    <property name="can_focus">True</property>
+                    <property name="receives_default">True</property>
+                    <property name="tooltip_text" translatable="yes">Copy item</property>
+                    <property name="action_name">view.copy</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">edit-copy-symbolic</property>
+                      </object>
+                    </child>
+                    <style>
+                      <class name="image-button"/>
+                      <class name="flat"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkButton" id="paste_button">
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
                     <property name="receives_default">True</property>
-                    <property name="tooltip_text" translatable="yes">Open the selected items</property>
-                    <property name="action_name">view.open-with-default-application</property>
+                    <property name="action_name">view.paste</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">edit-paste-symbolic</property>
+                      </object>
+                    </child>
                     <style>
-                      <class name="suggested-action"/>
+                      <class name="image-button"/>
+                      <class name="flat"/>
                     </style>
                   </object>
                   <packing>
                     <property name="expand">False</property>
                     <property name="fill">True</property>
+                    <property name="position">2</property>
                   </packing>
                 </child>
                 <child>
-                  <object class="GtkButton">
+                  <object class="GtkButton" id="trash_button">
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
                     <property name="receives_default">True</property>
-                    <property name="tooltip_text" translatable="yes">Create a new folder</property>
-                    <property name="action_name">view.new-folder</property>
+                    <property name="tooltip_text" translatable="yes">Move to trash</property>
+                    <property name="action_name">view.move-to-trash</property>
                     <child>
                       <object class="GtkImage">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="icon_name">folder-new-symbolic</property>
+                        <property name="icon_name">user-trash-symbolic</property>
                       </object>
                     </child>
                     <style>
                       <class name="image-button"/>
+                      <class name="flat"/>
                     </style>
                   </object>
                   <packing>
                     <property name="expand">False</property>
                     <property name="fill">True</property>
+                    <property name="position">3</property>
                   </packing>
                 </child>
               </object>
@@ -252,9 +304,15 @@
                 <property name="expand">False</property>
                 <property name="fill">True</property>
                 <property name="pack_type">end</property>
-                <property name="position">2</property>
+                <property name="position">3</property>
               </packing>
             </child>
+            <child>
+              <placeholder/>
+            </child>
+            <child>
+              <placeholder/>
+            </child>
           </object>
           <packing>
             <property name="name">main</property>
@@ -267,7 +325,6 @@
             <property name="valign">center</property>
             <property name="border_width">6</property>
             <property name="spacing">6</property>
-            <property name="valign">center</property>
             <child>
               <object class="GtkSpinner">
                 <property name="visible">True</property>