[nautilus/wip/antoniof/new-pathbar: 35/41] pathbar: Use flat design

[António Fernandes <antoniof src gnome org>]

commit 9e97c87399465aed3c3bae58578efa1d6b463dd9
Author: António Fernandes <antoniof gnome org>
Date:   Sun May 3 22:30:19 2020 +0100

    pathbar: Use flat design
    
    We have previously moved back to a "buttony" breadcrumb style due to
    concerns a about discoverability of the current location menu. [1]
    
    But now we are going to address these concerns using an explicit
    menu button, separate from the path, as per latest designs. [2]
    
    This commit partly reverts the previous style change, with multiple
    modifications which bring us closer to the designed style.
    
    [1] commit 8569ee66fc822268a1894cf69d99c431591eb870
    [2] https://gitlab.gnome.org/Teams/Design/os-mockups/-/raw/master/pathbars/pathbars.png

 src/nautilus-pathbar.c        | 68 ++++++++++++++++++++++++-------------------
 src/resources/css/Adwaita.css | 19 ++++++------
 2 files changed, 48 insertions(+), 39 deletions(-)
---
diff --git a/src/nautilus-pathbar.c b/src/nautilus-pathbar.c
index 96717f0f2..11153a25e 100644
--- a/src/nautilus-pathbar.c
+++ b/src/nautilus-pathbar.c
@@ -264,8 +264,6 @@ nautilus_path_bar_init (NautilusPathBar *self)
 
     g_object_unref (builder);
 
-    gtk_style_context_add_class (gtk_widget_get_style_context (GTK_WIDGET (self->buttons_box)),
-                                 GTK_STYLE_CLASS_LINKED);
     gtk_style_context_add_class (gtk_widget_get_style_context (GTK_WIDGET (self)),
                                  "nautilus-path-bar");
 
@@ -531,7 +529,7 @@ nautilus_path_bar_clear_buttons (NautilusPathBar *self)
 
         button_data = BUTTON_DATA (self->button_list->data);
 
-        gtk_box_remove (GTK_BOX (self->buttons_box), button_data->button);
+        gtk_box_remove (GTK_BOX (self->buttons_box), button_data->container);
 
         self->button_list = g_list_remove (self->button_list, button_data);
         button_data_free (button_data);
@@ -851,19 +849,12 @@ nautilus_path_bar_update_button_appearance (ButtonData *button_data,
     if (icon != NULL)
     {
         gtk_image_set_from_gicon (GTK_IMAGE (button_data->image), icon, GTK_ICON_SIZE_MENU);
-        gtk_style_context_add_class (gtk_widget_get_style_context (button_data->button),
-                                     "image-button");
         gtk_widget_show (GTK_WIDGET (button_data->image));
         g_object_unref (icon);
     }
     else
     {
         gtk_widget_hide (GTK_WIDGET (button_data->image));
-        if (!current_dir)
-        {
-            gtk_style_context_remove_class (gtk_widget_get_style_context (button_data->button),
-                                            "image-button");
-        }
     }
 }
 
@@ -874,7 +865,6 @@ nautilus_path_bar_update_button_state (ButtonData *button_data,
     if (button_data->label != NULL)
     {
         gtk_label_set_label (GTK_LABEL (button_data->label), NULL);
-        gtk_label_set_use_markup (GTK_LABEL (button_data->label), current_dir);
     }
 
     nautilus_path_bar_update_button_appearance (button_data, current_dir);
@@ -1043,7 +1033,7 @@ button_data_file_changed (NautilusFile *file,
 
                     data = BUTTON_DATA (self->button_list->data);
 
-                    gtk_box_remove (GTK_BOX (self->buttons_box), data->button);
+                    gtk_box_remove (GTK_BOX (self->buttons_box), data->container);
                     self->button_list = g_list_remove (self->button_list, data);
                     button_data_free (data);
                 }
@@ -1078,10 +1068,11 @@ make_button_data (NautilusPathBar *self,
                   gboolean         current_dir)
 {
     GFile *path;
+    GtkWidget *child;
     ButtonData *button_data;
-    GtkStyleContext *style_context;
 
     path = nautilus_file_get_location (file);
+    child = NULL;
 
     /* Is it a special button? */
     button_data = g_new0 (ButtonData, 1);
@@ -1090,8 +1081,6 @@ make_button_data (NautilusPathBar *self,
     button_data->button = gtk_button_new ();
     gtk_widget_set_focus_on_click (button_data->button, FALSE);
 
-    style_context = gtk_widget_get_style_context (button_data->button);
-    gtk_style_context_add_class (style_context, "text-button");
     /* TODO update button type when xdg directories change */
 
     button_data->image = gtk_image_new ();
@@ -1110,13 +1099,13 @@ make_button_data (NautilusPathBar *self,
             button_data->label = gtk_label_new (NULL);
             button_data->disclosure_arrow = gtk_image_new_from_icon_name ("pan-down-symbolic",
                                                                           GTK_ICON_SIZE_MENU);
-            gtk_widget_set_margin_start (button_data->disclosure_arrow, 0);
+            child = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 6);
             button_data->container = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 6);
-            gtk_button_set_child (GTK_BUTTON (button_data->button), button_data->container);
+            gtk_box_append (GTK_BOX (button_data->container), button_data->button);
 
-            gtk_box_pack_start (GTK_BOX (button_data->container), button_data->image, FALSE, FALSE, 0);
-            gtk_box_pack_start (GTK_BOX (button_data->container), button_data->label, FALSE, FALSE, 0);
-            gtk_box_pack_start (GTK_BOX (button_data->container), button_data->disclosure_arrow, FALSE, 
FALSE, 0);
+            gtk_box_append (GTK_BOX (child), button_data->image);
+            gtk_box_append (GTK_BOX (child), button_data->label);
+            gtk_box_append (GTK_BOX (child), button_data->disclosure_arrow);
         }
         break;
 
@@ -1124,15 +1113,20 @@ make_button_data (NautilusPathBar *self,
         /* Fall through */
         default:
         {
+            GtkWidget *separator_label;
+
+            separator_label = gtk_label_new (G_DIR_SEPARATOR_S);
+            gtk_style_context_add_class (gtk_widget_get_style_context (separator_label), "dim-label");
             button_data->label = gtk_label_new (NULL);
+            child = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 2);
             button_data->disclosure_arrow = gtk_image_new_from_icon_name ("pan-down-symbolic",
                                                                           GTK_ICON_SIZE_MENU);
-            gtk_widget_set_margin_start (button_data->disclosure_arrow, 0);
-            button_data->container = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 6);
-            gtk_button_set_child (GTK_BUTTON (button_data->button), button_data->container);
+            button_data->container = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0);
+            gtk_box_append (GTK_BOX (button_data->container), separator_label);
+            gtk_box_append (GTK_BOX (button_data->container), button_data->button);
 
-            gtk_box_pack_start (GTK_BOX (button_data->container), button_data->label, FALSE, FALSE, 0);
-            gtk_box_pack_start (GTK_BOX (button_data->container), button_data->disclosure_arrow, FALSE, 
FALSE, 0);
+            gtk_box_append (GTK_BOX (child), button_data->label);
+            gtk_box_append (GTK_BOX (child), button_data->disclosure_arrow);
         }
         break;
     }
@@ -1143,12 +1137,25 @@ make_button_data (NautilusPathBar *self,
         gtk_widget_show (button_data->disclosure_arrow);
         gtk_popover_set_relative_to (self->current_view_menu_popover, button_data->button);
         gtk_style_context_add_class (gtk_widget_get_style_context (button_data->button),
-                                     "image-button");
+                                     "current-dir");
     }
 
     if (button_data->label != NULL)
     {
+        PangoAttrList *attrs;
+
         gtk_label_set_single_line_mode (GTK_LABEL (button_data->label), TRUE);
+
+        attrs = pango_attr_list_new ();
+        pango_attr_list_insert (attrs, pango_attr_weight_new (PANGO_WEIGHT_BOLD));
+        gtk_label_set_attributes (GTK_LABEL (button_data->label), attrs);
+        pango_attr_list_unref (attrs);
+
+        if (!current_dir)
+        {
+            gtk_style_context_add_class (gtk_widget_get_style_context (button_data->label), "dim-label");
+            gtk_style_context_add_class (gtk_widget_get_style_context (button_data->image), "dim-label");
+        }
     }
 
     if (button_data->path == NULL)
@@ -1170,7 +1177,8 @@ make_button_data (NautilusPathBar *self,
                               button_data);
     }
 
-    gtk_widget_show_all (button_data->button);
+    gtk_button_set_child (GTK_BUTTON (button_data->button), child);
+    gtk_widget_show_all (button_data->container);
 
     nautilus_path_bar_update_button_state (button_data, current_dir);
 
@@ -1242,9 +1250,9 @@ nautilus_path_bar_update_path (NautilusPathBar *self,
 
     for (l = self->button_list; l; l = l->next)
     {
-        GtkWidget *button;
-        button = BUTTON_DATA (l->data)->button;
-        gtk_box_append (GTK_BOX (self->buttons_box), button);
+        GtkWidget *container;
+        container = BUTTON_DATA (l->data)->container;
+        gtk_box_append (GTK_BOX (self->buttons_box), container);
     }
 }
 
diff --git a/src/resources/css/Adwaita.css b/src/resources/css/Adwaita.css
index 03acabd4a..242d2a785 100644
--- a/src/resources/css/Adwaita.css
+++ b/src/resources/css/Adwaita.css
@@ -60,25 +60,26 @@
   border-radius: 5px;
   border: 1px @borders solid;
   background-color: @theme_bg_color;
-  padding-right: 6px;
 }
 
 .nautilus-path-bar button {
+  background-image: none;
+  box-shadow: none;
+  border-radius: 7px;
+  border-width: 0px;
   margin: 0px;
+  -gtk-icon-shadow: none;
 }
 
-.nautilus-path-bar button:first-child {
-  border-width: 0px 1px 0px 0px;
-  border-radius: 3.5px 0px 0px 3.5px;
+.nautilus-path-bar button:not(.current-dir):not(:backdrop):hover {
+  background: alpha(@theme_fg_color, 0.15);
+  box-shadow: inset 0 0 0 2px @theme_bg_color;
 }
 
-.nautilus-path-bar button:not(:first-child) {
-  border-width: 0px 1px 0px 1px;
-  border-radius: 0px 0px 0px 0px;
+.nautilus-path-bar button:not(.current-dir):not(:backdrop):hover * {
+  opacity: 1;
 }
 
-.nautilus-path-bar button:not(:checked) image { opacity: 0.8; } /* dim the icon when not checked */
-
 /* Make the tags fit into the box */
 entry.search > * {
   margin: 5px;