Start styling the FolderDisplay widget

5 files changed, 63 insertions, 9 deletions

diff --git a/data/baobab.css b/data/baobab.css
index fc72492..05e61ca 100644
--- a/data/baobab.css
+++ b/data/baobab.css
@@ -58,6 +58,22 @@ window.background stack > grid > scrolledwindow.frame {
     border-width: 0 1px 0 0;
 }
 
+folder-display {
+    background: white;
+    border-color: @borders;
+    border-style: solid;
+    border-width: 0 1px 1px 0;
+}
+
+folder-display > label {
+    padding: 6px;
+}
+
+.folder-display-header {
+    font-weight: bold;
+}
+
+
 window infobar.warning,
 window infobar.error {
     border-bottom-width: 1px;
diff --git a/data/ui/baobab-folder-display.ui b/data/ui/baobab-folder-display.ui
index 7867495..bef1674 100644
--- a/data/ui/baobab-folder-display.ui
+++ b/data/ui/baobab-folder-display.ui
@@ -6,12 +6,15 @@
     <property name="visible">True</property>
     <property name="can_focus">False</property>
     <child>
-      <object class="GtkLabel">
+      <object class="GtkLabel" id="folder_name_primary">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="halign">start</property>
         <property name="hexpand">True</property>
-        <property name="label" translatable="yes">Current Folder</property>
+        <property name="ellipsize">end</property>
+        <style>
+          <class name="folder-display-header"/>
+        </style>
       </object>
       <packing>
         <property name="left_attach">0</property>
@@ -22,7 +25,12 @@
       <object class="GtkLabel">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
+        <property name="halign">end</property>
         <property name="label" translatable="yes">Size</property>
+        <style>
+          <class name="dim-label"/>
+          <class name="folder-display-header"/>
+        </style>
       </object>
       <packing>
         <property name="left_attach">1</property>
@@ -33,7 +41,12 @@
       <object class="GtkLabel">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
+        <property name="halign">end</property>
         <property name="label" translatable="yes">Contents</property>
+        <style>
+          <class name="dim-label"/>
+          <class name="folder-display-header"/>
+        </style>
       </object>
       <packing>
         <property name="left_attach">2</property>
@@ -41,11 +54,15 @@
       </packing>
     </child>
     <child>
-      <object class="GtkLabel" id="folder_name">
+      <object class="GtkLabel" id="folder_name_secondary">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="halign">start</property>
         <property name="hexpand">True</property>
+        <property name="ellipsize">end</property>
+        <style>
+          <class name="dim-label"/>
+        </style>
       </object>
       <packing>
         <property name="left_attach">0</property>
@@ -56,6 +73,7 @@
       <object class="GtkLabel" id="folder_size">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
+        <property name="halign">end</property>
       </object>
       <packing>
         <property name="left_attach">1</property>
@@ -66,6 +84,7 @@
       <object class="GtkLabel" id="folder_elements">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
+        <property name="halign">end</property>
       </object>
       <packing>
         <property name="left_attach">2</property>
@@ -76,7 +95,12 @@
       <object class="GtkLabel">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
+        <property name="halign">end</property>
         <property name="label" translatable="yes">Modified</property>
+        <style>
+          <class name="dim-label"/>
+          <class name="folder-display-header"/>
+        </style>
       </object>
       <packing>
         <property name="left_attach">3</property>
@@ -87,6 +111,7 @@
       <object class="GtkLabel" id="folder_time">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
+        <property name="halign">end</property>
       </object>
       <packing>
         <property name="left_attach">3</property>
diff --git a/data/ui/baobab-main-window.ui b/data/ui/baobab-main-window.ui
index 105dea5..bc596ec 100644
--- a/data/ui/baobab-main-window.ui
+++ b/data/ui/baobab-main-window.ui
@@ -246,6 +246,7 @@
                         <object class="GtkTreeView" id="treeview">
                           <property name="visible">True</property>
                           <property name="can_focus">True</property>
+                          <property name="headers_visible">False</property>
                           <child internal-child="selection">
                             <object class="GtkTreeSelection" id="treeview_selection1"/>
                           </child>
diff --git a/src/baobab-location-list.vala b/src/baobab-location-list.vala
index 328c0e5..5467b98 100644
--- a/src/baobab-location-list.vala
+++ b/src/baobab-location-list.vala
@@ -42,12 +42,12 @@ namespace Baobab {
 
             image.gicon = location.icon;
 
-            var escaped = GLib.Markup.escape_text (location.name, -1);
+            var escaped = Markup.escape_text (location.name);
             name_label.label = "<b>%s</b>".printf (escaped);
 
             path_label.hide();
             if (location.file != null) {
-                path_label.label = Markup.escape_text (location.file.get_parse_name (), -1);
+                path_label.label = Markup.escape_text (location.file.get_parse_name ());
                 path_label.show();
             }
 
diff --git a/src/baobab-window.vala b/src/baobab-window.vala
index bb65a3d..4bae7e2 100644
--- a/src/baobab-window.vala
+++ b/src/baobab-window.vala
@@ -24,8 +24,14 @@ namespace Baobab {
 
     [GtkTemplate (ui = "/org/gnome/baobab/ui/baobab-folder-display.ui")]
     public class FolderDisplay : Gtk.Grid {
+        static construct {
+            set_css_name ("folder-display");
+        }
+
+        [GtkChild]
+        private Gtk.Label folder_name_primary;
         [GtkChild]
-        private Gtk.Label folder_name;
+        private Gtk.Label folder_name_secondary;
         [GtkChild]
         private Gtk.Label folder_size;
         [GtkChild]
@@ -38,7 +44,7 @@ namespace Baobab {
             set {
                 location_ = value;
 
-                folder_name.label = location_.name;
+                set_name_from_location ();
                 folder_size.label = "";
                 folder_elements.label = "";
                 folder_time.label = "";
@@ -68,15 +74,21 @@ namespace Baobab {
                            Scanner.Columns.TIME_MODIFIED, out time);
 
                 if (value.get_depth () == 1) {
-                    folder_name.label = location.name;
+                    set_name_from_location ();
                 } else {
-                    folder_name.label = format_name (display_name, name);
+                    folder_name_primary.label = format_name (display_name, name);
+                    folder_name_secondary.label = "";
                 }
                 folder_size.label = format_size (size);
                 folder_elements.label = format_items (elements);
                 folder_time.label = format_time_approximate (time);
             }
         }
+
+        void set_name_from_location () {
+            folder_name_primary.label = location.name;
+            folder_name_secondary.label = location.file.get_parse_name ();
+        }
     }
 
     [GtkTemplate (ui = "/org/gnome/baobab/ui/baobab-main-window.ui")]