[baobab/wip/grid-layout: 4/6] Relayout the location widget

[Stefano Facchini <sfacchini src gnome org>]

commit f829ab7ccecdab65c471d463d0b2515745e507ee
Author: Stefano Facchini <stefano facchini gmail com>
Date:   Sun Apr 15 15:03:18 2012 +0200

    Relayout the location widget
    
    Location widgets will be "tiles" arranged in a grid layout. In this
    commit we relayout the widget to match this design, making also use
    of a newly added CSS stylesheet for style properties.

 src/Makefile.am                 |    3 +-
 src/baobab-location-widget.vala |  157 +++++++++++++++++++++++++++------------
 src/baobab-location.vala        |    2 -
 src/baobab-window.vala          |   10 +++
 src/baobab.css                  |   21 +++++
 src/baobab.gresource.xml        |    1 +
 6 files changed, 144 insertions(+), 50 deletions(-)
---
diff --git a/src/Makefile.am b/src/Makefile.am
index 9ce4692..8daceb4 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -70,6 +70,7 @@ MAINTAINERCLEANFILES = \
 EXTRA_DIST = \
 	baobab.gresource.xml \
 	baobab-main-window.ui \
-	baobab-menu.ui
+	baobab-menu.ui	\
+	baobab.css
 
 -include $(top_srcdir)/git.mk
diff --git a/src/baobab-location-widget.vala b/src/baobab-location-widget.vala
index fc527de..c66299f 100644
--- a/src/baobab-location-widget.vala
+++ b/src/baobab-location-widget.vala
@@ -20,90 +20,153 @@
 
 namespace Baobab {
 
-    public abstract class BaseLocationWidget : Gtk.Grid {
+    public abstract class BaseLocationWidget : Gtk.Bin {
 
-        protected static Gtk.SizeGroup name_size_group = null;
-        protected static Gtk.SizeGroup mount_point_size_group = null;
-        protected static Gtk.SizeGroup size_size_group = null;
-        protected static Gtk.SizeGroup used_size_group = null;
-        protected static Gtk.SizeGroup button_size_group = null;
+        protected static Gtk.SizeGroup widget_size_group = null;
+
+        protected void ensure_size_group () {
+            if (widget_size_group != null)
+                return;
+
+            widget_size_group = new Gtk.SizeGroup (Gtk.SizeGroupMode.HORIZONTAL | Gtk.SizeGroupMode.VERTICAL);
+        }
 
         public delegate void ActionOnClick (Location? location = null);
 
-        protected void ensure_size_groups () {
-            if (name_size_group != null)
-                return;
+        protected override void get_preferred_width (out int minimum, out int natural) {
+            get_child ().get_preferred_width (out minimum, out natural);
+
+            var state = get_state_flags ();
+            var border = get_style_context ().get_padding (state);
+            minimum = minimum + border.left + border.right;
+            natural = natural + border.left + border.right;
+        }
+
+        protected override void get_preferred_height (out int minimum, out int natural) {
+            get_child ().get_preferred_height (out minimum, out natural);
 
-            name_size_group = new Gtk.SizeGroup (Gtk.SizeGroupMode.HORIZONTAL);
-            mount_point_size_group = new Gtk.SizeGroup (Gtk.SizeGroupMode.HORIZONTAL);
-            size_size_group = new Gtk.SizeGroup (Gtk.SizeGroupMode.HORIZONTAL);
-            used_size_group = new Gtk.SizeGroup (Gtk.SizeGroupMode.HORIZONTAL);
-            button_size_group = new Gtk.SizeGroup (Gtk.SizeGroupMode.HORIZONTAL);
+            var state = get_state_flags ();
+            var border = get_style_context ().get_padding (state);
+            minimum = minimum + border.top + border.bottom;
+            natural = natural + border.top + border.bottom;
         }
 
-        public BaseLocationWidget () {
-            orientation = Gtk.Orientation.HORIZONTAL;
-            column_spacing = 10;
-            margin = 6;
+        protected override void size_allocate (Gtk.Allocation alloc) {
+            set_allocation (alloc);
+
+            var state = get_state_flags ();
+            var border = get_style_context ().get_padding (state);
+
+            var adjusted_alloc = Gtk.Allocation ();
+            adjusted_alloc.x = alloc.x + border.left;
+            adjusted_alloc.y = alloc.y + border.top;
+            adjusted_alloc.width = alloc.width - border.left - border.right;
+            adjusted_alloc.height = alloc.height - border.top - border.bottom;
+
+            get_child ().size_allocate (adjusted_alloc);
+        }
+
+        protected override bool draw (Cairo.Context cr) {
+            Gtk.Allocation alloc;
+            get_allocation (out alloc);
+
+            get_style_context ().render_background (cr, 0, 0, alloc.width, alloc.height);
+            get_style_context ().render_frame (cr, 0, 0, alloc.width, alloc.height);
+
+            base.draw (cr);
+
+            return false;
         }
     }
 
     public class LocationWidget : BaseLocationWidget {
 
+        const int ICON_SIZE = 96;
+
+        Gtk.Grid grid;
+
         public LocationWidget (Location location, BaseLocationWidget.ActionOnClick action) {
             base ();
 
-            ensure_size_groups ();
+            grid = new Gtk.Grid () {
+                orientation = Gtk.Orientation.VERTICAL,
+                row_spacing = 20,
+                column_spacing = 10
+            };
+
+            add (grid);
+
+            ensure_size_group ();
 
             var icon_theme = Gtk.IconTheme.get_default ();
-            var icon_info = icon_theme.lookup_by_gicon (location.icon, 64, 0);
+            var icon_info = icon_theme.lookup_by_gicon (location.icon, ICON_SIZE, 0);
+
+            var first_row = new Gtk.Grid () {
+                orientation = Gtk.Orientation.HORIZONTAL
+            };
 
             try {
                 var pixbuf = icon_info.load_icon ();
                 var image = new Gtk.Image.from_pixbuf (pixbuf);
-                add (image);
+                first_row.add (image);
             } catch (Error e) {
                 warning ("Failed to load icon %s: %s", location.icon.to_string(), e.message);
             }
 
+            var name_grid = new Gtk.Grid () { orientation = Gtk.Orientation.VERTICAL,
+                    valign = Gtk.Align.CENTER,
+                    margin_left = 20, margin_right = 20
+                                            };
             var label = new Gtk.Label (location.name);
-            label.xalign = 0;
-            name_size_group.add_widget (label);
-            add (label);
-
-            label = new Gtk.Label (location.mount_point != null ? location.mount_point : "");
-            label.hexpand = true;
-            label.halign = Gtk.Align.CENTER;
-            label.xalign = 0;
-            label.get_style_context ().add_class ("dim-label");
-            mount_point_size_group.add_widget (label);
-            add (label);
-
-            label = new Gtk.Label (location.size != null ? format_size (location.size) : "");
-            size_size_group.add_widget (label);
-            add (label);
+            label.set_markup ("<b>" + location.name + "</b>");
+            label.halign = Gtk.Align.START;
+            name_grid.add (label);
+
+            if (location.size != null) {
+                label = new Gtk.Label (format_size (location.size));
+                label.halign = Gtk.Align.START;
+                name_grid.add (label);
+            } else {
+                label = new Gtk.Label (location.mount_point != null ? location.mount_point : "not mounted");
+                label.halign = Gtk.Align.START;
+                label.xalign = 0;
+                label.max_width_chars = 20;
+                label.ellipsize = Pango.EllipsizeMode.END;
+                if (location.mount_point != null)
+                    label.set_tooltip_text (location.mount_point);
+                name_grid.add (label);
+            }
+
+            first_row.add (name_grid);
+
+            grid.add (first_row);
+
+            var second_row =  new Gtk.Grid () {
+                orientation = Gtk.Orientation.HORIZONTAL,
+                column_spacing = 10
+            };
 
             if (location.used != null) {
                 var progress = new Gtk.ProgressBar ();
                 progress.valign = Gtk.Align.CENTER;
                 progress.set_fraction ((double) location.used / location.size);
-                used_size_group.add_widget (progress);
-                add (progress);
-            } else {
-                label = new Gtk.Label (_("Usage unknown"));
-                used_size_group.add_widget (label);
-                add (label);
+                progress.show_text = true;
+                second_row.add (progress);
             }
 
-            string button_label = location.mount_point != null ? _("Scan") : _("Mount and scan");
+            var button_label = location.mount_point != null ? _("Scan") : _("Mount and scan");
             var button = new Gtk.Button.with_label (button_label);
+            button.clicked.connect(() => { action (location); });
             button.valign = Gtk.Align.CENTER;
-            button_size_group.add_widget (button);
-            add (button);
+            button.halign = Gtk.Align.END;
+            button.hexpand = true;
+            second_row.add (button);
 
-            button.clicked.connect(() => { action (location); });
+            grid.add (second_row);
+
+            grid.show_all ();
 
-            show_all ();
+            widget_size_group.add_widget (this);
         }
     }
 }
diff --git a/src/baobab-location.vala b/src/baobab-location.vala
index 8b55204..240fe26 100644
--- a/src/baobab-location.vala
+++ b/src/baobab-location.vala
@@ -72,8 +72,6 @@ namespace Baobab {
         public Location.for_home_folder () {
             mount_point = Environment.get_home_dir ();
             make_this_home_location ();
-
-            get_fs_usage (File.new_for_path (mount_point));
         }
 
         void make_this_home_location () {
diff --git a/src/baobab-window.vala b/src/baobab-window.vala
index cb20e8e..0d4c600 100644
--- a/src/baobab-window.vala
+++ b/src/baobab-window.vala
@@ -114,6 +114,16 @@ namespace Baobab {
                 error ("loading main builder file: %s", e.message);
             }
 
+            // Attach custom CSS
+            try {
+                var css_provider = new Gtk.CssProvider ();
+                var data = GLib.resources_lookup_data ("/org/gnome/baobab/ui/baobab.css", 0);
+                css_provider.load_from_data ((string) data.get_data (), -1);
+                Gtk.StyleContext.add_provider_for_screen (get_screen (), css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+            } catch (Error e) {
+                error ("loading CSS data: %s", e.message);
+            }
+
             // Cache some objects from the builder.
             main_notebook = builder.get_object ("main-notebook") as Gtk.Notebook;
             toolbar = builder.get_object ("toolbar") as Gtk.Toolbar;
diff --git a/src/baobab.css b/src/baobab.css
new file mode 100644
index 0000000..49bcd02
--- /dev/null
+++ b/src/baobab.css
@@ -0,0 +1,21 @@
+ define-color location_bg_a alpha(shade(@theme_base_color, 0.97), 0.8);
+ define-color location_bg_b alpha(shade(@theme_base_color, 0.9), 0.8);
+ define-color location_bg_c alpha(shade(@theme_base_color, 0.98), 0.8);
+
+BaobabBaseLocationWidget {
+    padding: 6px;
+
+    border-radius : 5px;
+    border-width: 1px;
+    border-color: @borders;
+    border-style: solid;
+    background-image: -gtk-gradient(linear, left top, left bottom,
+                                    from(@location_bg_a),
+                                    color-stop(0.63, @location_bg_b),
+                                    to(@location_bg_c));
+    background-color: transparent;
+}
+
+BaobabBaseLocationWidget GtkProgressBar {
+    font: 8px;
+}
diff --git a/src/baobab.gresource.xml b/src/baobab.gresource.xml
index d0789b8..aed7e6a 100644
--- a/src/baobab.gresource.xml
+++ b/src/baobab.gresource.xml
@@ -3,5 +3,6 @@
   <gresource prefix="/org/gnome/baobab/ui">
     <file preprocess="xml-stripblanks">baobab-main-window.ui</file>
     <file preprocess="xml-stripblanks">baobab-menu.ui</file>
+    <file>baobab.css</file>
   </gresource>
 </gresources>