Merge lp:~victored/noise/new-album-view into lp:~elementary-apps/noise/trunk

[Victor Martinez]

Add fancier album view by using a custom cell renderer in GtkIconView.

Please note that the code used for "smart spacing" has been removed as it only worked before GTK+ 3.4.3. New bugs in GTK+ prevent us from keeping this code around.

As you may have seen, the "smart spacing" code from the album view does not work with new GTK+ versions, due to some bugs in GtkIconView we have not been able to work around. This branch removes that code for the time being and adds a custom cell renderer that makes our icon view more similar to the one used by Shotwell.

[Victor Martinez (victored)]

Please note this code is not supposed to work correctly on Luna, but on GTK+ 3.8 or newer (Ubuntu 13.04).

[David Gomes (davidgomes)]

We'll merge this when we have Saucy builds and are officially using GTK+ 3.8+-

[lp:~victored/noise/new-album-view]

1518. By Victor Martinez on 2013-09-26

Fix coding style issue

[Rico Tzschichholz (ricotz)]

If noise doesn't work as expected with gtk+3.0 < 3.8 after this change then the dependency should have been bumped.

=== modified file 'core/Utils/Icons.vala'
--- core/Utils/Icons.vala	2013-02-26 21:56:08 +0000
+++ core/Utils/Icons.vala	2013-09-26 03:02:55 +0000
@@ -33,15 +33,8 @@
  * A place to store icon information and pixbufs.
  */
 public class Noise.Icons {
-
-    /**
-     * Size of the cover art used in the album view
-     **/
-    public const int ALBUM_VIEW_IMAGE_SIZE = 168;
     public const int DEFAULT_ALBUM_ART_SIZE = 138;
 
-    public static Gdk.Pixbuf DEFAULT_ALBUM_SHADOW_PIXBUF { get; private set; }
-
     public static Icon DEFAULT_ALBUM_ART { get; private set; default = new Icon ("albumart"); }
     public static Icon DEFAULT_ALBUM_ART_2 { get; private set; default = new Icon ("albumart_2"); }
     public static Icon MUSIC_FOLDER { get; private set; default = new Icon ("folder-music"); }
@@ -83,11 +76,6 @@
     public static Icon LIST_ADD_SYMBOLIC { get; private set; default = new Icon ("list-add-symbolic"); }
     public static Icon REFRESH_SYMBOLIC { get; private set; default = new Icon ("view-refresh-symbolic"); }
 
-    static construct {
-        var default_shadow = new Icon ("albumart-shadow");
-        DEFAULT_ALBUM_SHADOW_PIXBUF = default_shadow.render_at_size (ALBUM_VIEW_IMAGE_SIZE);
-    }
-
     /**
      * This is needed until vala really supports initialization of static members.
      * See https://bugzilla.gnome.org/show_bug.cgi?id=543189
 
=== modified file 'core/Utils/PixbufUtils.vala'
--- core/Utils/PixbufUtils.vala	2013-06-12 18:04:28 +0000
+++ core/Utils/PixbufUtils.vala	2013-09-26 03:02:55 +0000
@@ -22,75 +22,25 @@
  */
 
 namespace Noise.PixbufUtils {
-
-    /**
-     * @param pixbuf original image
-     * @param stretch whether to strech the image inside the square or keep the original dimensions
-     * @return original pixbuf + drop shadow
-     **/
-    public Gdk.Pixbuf? get_pixbuf_shadow (Gdk.Pixbuf pixbuf, int surface_size, bool stretch = true) {
-        const int SHADOW_SIZE = 15;
-
-        int S_WIDTH = (stretch)? surface_size: pixbuf.width;
-        int S_HEIGHT = (stretch)? surface_size : pixbuf.height;
-
-        var buffer_surface = new Granite.Drawing.BufferSurface (S_WIDTH, S_HEIGHT);
-
-        // paint shadow
-        buffer_surface.context.rectangle (0, 0, S_WIDTH, S_HEIGHT);
-
-        if (stretch)
-            Gdk.cairo_set_source_pixbuf (buffer_surface.context,
-              Icons.DEFAULT_ALBUM_SHADOW_PIXBUF.scale_simple (S_WIDTH, S_HEIGHT, Gdk.InterpType.BILINEAR), 0, 0);
-        else
-            Gdk.cairo_set_source_pixbuf (buffer_surface.context, Icons.DEFAULT_ALBUM_SHADOW_PIXBUF, 0, 0);
-
-        buffer_surface.context.paint();
-
-        S_WIDTH -= 2 * SHADOW_SIZE;
-        S_HEIGHT -= 2 * SHADOW_SIZE;
-
-        // paint original pixbuf
-        var source_pixbuf = pixbuf;
-        if (pixbuf.width != S_WIDTH || pixbuf.height != S_HEIGHT)
-            source_pixbuf = pixbuf.scale_simple (S_WIDTH, S_HEIGHT, Gdk.InterpType.BILINEAR);
-
-        Gdk.cairo_set_source_pixbuf (buffer_surface.context, source_pixbuf,
-                                    SHADOW_SIZE, SHADOW_SIZE - 2); // 2px vertical offset
-        buffer_surface.context.paint();
-
-        return buffer_surface.load_to_pixbuf();
-    }
-
     /**
      * @param surface_size size of the new pixbuf. Set a value of 0 to use the pixbuf's default size.
      **/
-    public Gdk.Pixbuf? render_pixbuf_shadow (Gdk.Pixbuf pixbuf,
-                                             int surface_size = Icons.ALBUM_VIEW_IMAGE_SIZE,
-                                             int shadow_size = 5, double alpha = 0.75)
-    {
-        int S_WIDTH = (surface_size > 0)? surface_size : pixbuf.width;
-        int S_HEIGHT = (surface_size > 0)? surface_size : pixbuf.height;
-
-        var buffer_surface = new Granite.Drawing.BufferSurface (S_WIDTH, S_HEIGHT);
-
-        S_WIDTH -= 2 * shadow_size;
-        S_HEIGHT -= 2 * shadow_size;
-
-        buffer_surface.context.rectangle (shadow_size, shadow_size, S_WIDTH, S_HEIGHT);
+    public Gdk.Pixbuf? render_pixbuf_shadow (Gdk.Pixbuf pixbuf, int shadow_size = 5, double alpha = 0.75) {
+        int width = pixbuf.width;
+        int height = pixbuf.height;
+        int shadow_padding = 2 * shadow_size;
+
+        var buffer_surface = new Granite.Drawing.BufferSurface (width + shadow_padding,
+                                                                height + shadow_padding);
+
+        buffer_surface.context.rectangle (shadow_size, shadow_size, width, height);
         buffer_surface.context.set_source_rgba (0, 0, 0, alpha);
-        buffer_surface.context.fill();
-
+        buffer_surface.context.fill ();
         buffer_surface.fast_blur (2, 3);
-
-        Gdk.cairo_set_source_pixbuf (buffer_surface.context,
-                                     pixbuf.scale_simple (S_WIDTH, S_HEIGHT, Gdk.InterpType.BILINEAR),
-                                     shadow_size,
-                                     shadow_size);
-
-        buffer_surface.context.paint();
-
-        return buffer_surface.load_to_pixbuf();
+        Gdk.cairo_set_source_pixbuf (buffer_surface.context, pixbuf, shadow_size, shadow_size);
+        buffer_surface.context.paint ();
+
+        return buffer_surface.load_to_pixbuf ();
     }
 
     public async Gdk.Pixbuf? get_pixbuf_from_file_async (File file, Cancellable? c = null) throws Error {
 
=== modified file 'images/CMakeLists.txt'
--- images/CMakeLists.txt	2013-09-16 07:12:31 +0000
+++ images/CMakeLists.txt	2013-09-26 03:02:55 +0000
@@ -21,9 +21,14 @@
 # Default album image and album shadow. These would not be found by the icon renderer if
 # they were installed to the hicolor sub-directory, since their dimensions are not the ones
 # GTK+ expects to find in a normal icon theme. They work fine in the root icon dir though.
+<<<<<<< TREE
 set (GENERIC_IMAGES
   icons/albumart.svg
   icons/albumart-shadow.png
+=======
+set(GENERIC_IMAGES
+    icons/albumart.svg
+>>>>>>> MERGE-SOURCE
 )
 
 install (FILES ${GENERIC_IMAGES} DESTINATION ${ICON_DIR})
 
=== removed file 'images/icons/albumart-shadow.png'
 Binary files images/icons/albumart-shadow.png	2013-07-12 19:29:23 +0000 and images/icons/albumart-shadow.png	1970-01-01 00:00:00 +0000 differ
=== modified file 'plugins/Devices/CDRom/CDView.vala'
--- plugins/Devices/CDRom/CDView.vala	2013-04-29 18:26:03 +0000
+++ plugins/Devices/CDRom/CDView.vala	2013-09-26 03:02:55 +0000
@@ -57,7 +57,7 @@
         }
         
         var default_pix = Icons.DEFAULT_ALBUM_ART.render_at_size (Icons.DEFAULT_ALBUM_ART_SIZE);
-        default_pix = PixbufUtils.get_pixbuf_shadow (default_pix, Icons.ALBUM_VIEW_IMAGE_SIZE);
+        default_pix = PixbufUtils.render_pixbuf_shadow (default_pix);
         
         album_image = new Gtk.Image.from_pixbuf (default_pix);
         album_image.halign = Gtk.Align.CENTER;
 
=== modified file 'src/CMakeLists.txt'
--- src/CMakeLists.txt	2013-09-16 07:12:31 +0000
+++ src/CMakeLists.txt	2013-09-26 03:02:55 +0000
@@ -1,3 +1,4 @@
+<<<<<<< TREE
 set (CLIENT_SOURCE
   main.vala
   Noise.vala
@@ -71,6 +72,84 @@
   Dialogs/SetMusicFolderConfirmation.vala
   Dialogs/TransferFromDeviceDialog.vala
   Dialogs/SyncWarningDialog.vala
+=======
+set(CLIENT_SOURCE
+    main.vala
+    Noise.vala
+    LibraryWindow.vala
+    LocalLibrary.vala
+    PlaybackManager.vala
+    FileOperator.vala
+    Objects/LyricFetcher.vala
+    Objects/MediaInfo.vala
+    Objects/AlbumInfo.vala
+    Objects/ArtistInfo.vala
+    Objects/TrackInfo.vala
+    Objects/MediaArtCache.vala
+    Objects/CoverartCache.vala
+    Objects/MediaKeyListener.vala
+    Widgets/NavigationArrows.vala
+    Widgets/SmartAlbumRenderer.vala
+    Widgets/TopDisplay.vala
+    Widgets/InfoPanel.vala
+    Widgets/EmbeddedAlert.vala
+    Widgets/SimpleOptionChooser.vala
+    Widgets/PresetList.vala
+    Widgets/SideBar.vala
+    Widgets/SourceListView.vala
+    Widgets/StatusBar.vala
+    Widgets/RatingWidget.vala
+    Widgets/SpaceWidget.vala
+    Widgets/FixedBin.vala
+    Widgets/ViewSelector.vala
+    Widgets/FastView/TileView/ImageUtils.vala
+    Widgets/FastView/TileView/TileRenderer.vala
+    Widgets/FastView/TileView/TileView.vala
+    Widgets/FastView/FastGrid.vala
+    Widgets/FastView/FastGridModel.vala
+    Widgets/FastView/FastList.vala
+    Widgets/FastView/FastListModel.vala
+    DataBase/DataBaseManager.vala
+    DataBase/DataBaseUpdater.vala
+    DataBase/Tables.vala
+    GStreamer/GStreamerTagger.vala
+    GStreamer/Streamer.vala
+    GStreamer/CoverImport.vala
+    Views/ViewContainer.vala
+    Views/Wrappers/ViewWrapper.vala
+    Views/Wrappers/MusicViewWrapper.vala
+    Views/Wrappers/DeviceViewWrapper.vala
+    Views/Wrappers/PlaylistViewWrapper.vala
+    Views/Wrappers/ReadOnlyPlaylistViewWrapper.vala
+    Views/DeviceView.vala
+    Views/DeviceSummaryWidget.vala
+    Views/ContentView.vala
+    Views/ViewTextOverlay.vala
+    Views/GridView/GridLayout.vala
+    Views/GridView/GridView.vala
+    Views/GridView/PopupListView.vala
+    Views/ListView/ListView.vala
+    Views/ListView/ColumnBrowser/BrowserColumnModel.vala
+    Views/ListView/ColumnBrowser/BrowserColumn.vala
+    Views/ListView/ColumnBrowser/ColumnBrowser.vala
+    Views/ListView/ColumnBrowser/MusicColumnBrowser.vala
+    Views/ListView/Lists/ListColumn.vala
+    Views/ListView/Lists/TreeViewSetup.vala
+    Views/ListView/Lists/CellDataFunctionHelper.vala
+    Views/ListView/Lists/GenericList.vala
+    Views/ListView/Lists/MusicListView.vala
+    Dialogs/EqualizerWindow.vala
+    Dialogs/SmartPlaylistEditor.vala
+    Dialogs/PreferencesWindow.vala
+    Dialogs/InstallGstreamerPluginsDialog.vala
+    Dialogs/MediaEditor.vala
+    Dialogs/FileNotFoundDialog.vala
+    Dialogs/RemoveFilesDialog.vala
+    Dialogs/NotImportedWindow.vala
+    Dialogs/SetMusicFolderConfirmation.vala
+    Dialogs/TransferFromDeviceDialog.vala
+    Dialogs/SyncWarningDialog.vala
+>>>>>>> MERGE-SOURCE
 )
 
 set (CLIENT_VALAC_OPTIONS
 
=== modified file 'src/Objects/CoverartCache.vala'
--- src/Objects/CoverartCache.vala	2012-11-03 18:52:31 +0000
+++ src/Objects/CoverartCache.vala	2013-09-26 03:02:55 +0000
@@ -55,11 +55,9 @@
         default_image = filter_func (default_pix);
     }
 
-    /**
-     * Adds a shadow to every image.
-     */
     protected override Gdk.Pixbuf? filter_func (Gdk.Pixbuf pix) {
-        return PixbufUtils.get_pixbuf_shadow (pix, Icons.ALBUM_VIEW_IMAGE_SIZE);
+        int size = Icons.DEFAULT_ALBUM_ART_SIZE;
+        return pix.scale_simple (size, size, Gdk.InterpType.BILINEAR);
     }
 
     protected override string get_key (Media m) {
 
=== modified file 'src/Views/GridView/GridLayout.vala'
--- src/Views/GridView/GridLayout.vala	2013-05-22 20:42:53 +0000
+++ src/Views/GridView/GridLayout.vala	2013-09-26 03:02:55 +0000
@@ -17,23 +17,11 @@
  */
 
 public abstract class Noise.GridLayout : ViewTextOverlay {
-
     public ViewWrapper parent_view_wrapper { get; protected set; }
 
     private FastGrid icon_view;
     private Gtk.ScrolledWindow scroll;
 
-    // Spacing Workarounds
-#if !GTK_ICON_VIEW_BUG_IS_FIXED
-    private Gtk.EventBox vpadding_box;
-    private Gtk.EventBox hpadding_box;
-#endif
-
-    private const string STYLESHEET = "*:selected{background-color:@transparent;}";
-    private const int ITEM_PADDING = 0;
-    private const int MIN_SPACING = 6;
-    private const int ITEM_WIDTH = Icons.ALBUM_VIEW_IMAGE_SIZE;
-
     public GridLayout (ViewWrapper view_wrapper) {
         parent_view_wrapper = view_wrapper;
         build_ui ();
@@ -88,59 +76,7 @@
 
         icon_view.set_columns (-1);
 
-// Should be defined for GTK+ 3.4.3 or later
-#if !GTK_ICON_VIEW_BUG_IS_FIXED
-
-        var wrapper_vbox = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
-        var wrapper_hbox = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
-
-        vpadding_box = new Gtk.EventBox();
-        hpadding_box = new Gtk.EventBox();
-
-        vpadding_box.get_style_context().add_class(Gtk.STYLE_CLASS_VIEW);
-        hpadding_box.get_style_context().add_class(Gtk.STYLE_CLASS_VIEW);
-        this.get_style_context().add_class(Gtk.STYLE_CLASS_VIEW);
-
-        vpadding_box.get_style_context().add_class (Granite.StyleClass.CONTENT_VIEW);
-        hpadding_box.get_style_context().add_class (Granite.StyleClass.CONTENT_VIEW);
-        this.get_style_context().add_class (Granite.StyleClass.CONTENT_VIEW);
-
-        vpadding_box.set_size_request (-1, MIN_SPACING + ITEM_PADDING);
-        hpadding_box.set_size_request (MIN_SPACING + ITEM_PADDING, -1);
-
-        vpadding_box.button_press_event.connect ( () => {
-            item_activated (null);
-            return false;
-        });
-
-        hpadding_box.button_press_event.connect ( () => {
-            item_activated (null);
-            return false;
-        });
-
-
-        wrapper_vbox.pack_start (vpadding_box, false, false, 0);
-        wrapper_vbox.pack_start (wrapper_hbox, true, true, 0);
-        wrapper_hbox.pack_start (hpadding_box, false, false, 0);
-        wrapper_hbox.pack_start (icon_view, true, true, 0);
-
-        scroll.add_with_viewport (wrapper_vbox);
-
-        icon_view.margin = 0;
-
-#else
-
         scroll.add (icon_view);
-        icon_view.margin = MIN_SPACING;
-
-#endif
-
-
-        icon_view.item_width = ITEM_WIDTH;
-        icon_view.item_padding = ITEM_PADDING;
-        icon_view.spacing = 0;
-        icon_view.row_spacing = MIN_SPACING;
-        icon_view.column_spacing = MIN_SPACING;
 
         icon_view.add_events (Gdk.EventMask.POINTER_MOTION_MASK);
         icon_view.motion_notify_event.connect (on_motion_notify);
@@ -150,24 +86,9 @@
         icon_view.button_release_event.connect (on_button_release);
         icon_view.item_activated.connect (on_item_activated);
 
-        int MIN_N_ITEMS = 2; // we will allocate horizontal space for at least two items
-        int TOTAL_ITEM_WIDTH = ITEM_WIDTH + 2 * ITEM_PADDING;
-        int TOTAL_MARGIN = MIN_N_ITEMS * (MIN_SPACING + ITEM_PADDING);
-        int MIDDLE_SPACE = MIN_N_ITEMS * MIN_SPACING;
-
-        scroll.min_content_width = MIN_N_ITEMS * TOTAL_ITEM_WIDTH + TOTAL_MARGIN + MIDDLE_SPACE;
-
-        set_theming ();
-        scroll.get_hadjustment ().changed.connect (on_resize);
-
         show_all ();
     }
 
-    private void set_theming () {
-        // Change background color
-        Granite.Widgets.Utils.set_theming (icon_view, STYLESHEET, null, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-    }
-
     private void on_item_activated (Gtk.TreePath? path) {
         if (path == null)
             item_activated (null);
@@ -218,85 +139,4 @@
         set_cursor ((int)ev.x, (int)ev.y);
         return false;
     }
-
-
-    /**
-     * Smart spacing
-     */
-    private bool waiting_resize = false;
-
-    private void on_resize () {
-        if (waiting_resize)
-            return;
-
-        waiting_resize = true;
-
-        int priority = parent_view_wrapper.is_current_wrapper ? Priority.HIGH_IDLE : Priority.LOW;
-
-        Idle.add_full (priority , () => {
-            update_spacing ();
-            waiting_resize = false;
-            return false;
-        });
-    }
-
-    private int get_current_width () {
-        return (int) scroll.get_hadjustment ().page_size;
-    }
-
-    private void update_spacing () {
-        if (!visible)
-            return;
-
-        int new_width = get_current_width ();
-
-        int TOTAL_WIDTH = new_width; // width of view wrapper, not scrolled window!
-        int TOTAL_ITEM_WIDTH = ITEM_WIDTH + 2 * ITEM_PADDING;
-
-        // Calculate the number of columns
-        float n = (float)(TOTAL_WIDTH - MIN_SPACING) / (float)(TOTAL_ITEM_WIDTH + MIN_SPACING);
-        int n_columns = (int) GLib.Math.truncf (n);
-
-        if (n_columns < 1)
-            return;
-
-        icon_view.set_columns (n_columns);
-
-        // We don't want to adjust the spacing if the row is not full
-        if (icon_view.get_table ().size () < n_columns)
-            return;
-
-        // You're not supposed to understand this.
-        float spacing = (float)(TOTAL_WIDTH - n_columns * (ITEM_WIDTH + 1) - 2 * n_columns * ITEM_PADDING) / (float)(n_columns + 1);
-        int new_spacing = (int) GLib.Math.roundf (spacing);
-
-        if (new_spacing < 0)
-            return;
-
-        if (TOTAL_WIDTH < 750)
-            -- new_spacing;
-
-        // apply new spacing
-        set_spacing (new_spacing);
-    }
-
-    private void set_spacing (int spacing) {
-        if (spacing < 0)
-            return;
-
-        int item_offset = ITEM_PADDING / icon_view.columns;
-        int item_spacing = spacing - ((item_offset > 0) ? item_offset : 1);
-
-        icon_view.set_column_spacing (item_spacing);
-        icon_view.set_row_spacing (item_spacing);
-
-        int margin_width = spacing + ITEM_PADDING;
-
-#if GTK_ICON_VIEW_BUG_IS_FIXED
-        icon_view.set_margin (margin_width);
-#else
-        vpadding_box.set_size_request (-1, margin_width);
-        hpadding_box.set_size_request (margin_width, -1);
-#endif
-    }
 }
 
=== modified file 'src/Views/GridView/GridView.vala'
--- src/Views/GridView/GridView.vala	2013-06-02 17:35:04 +0000
+++ src/Views/GridView/GridView.vala	2013-09-26 03:02:55 +0000
@@ -18,10 +18,6 @@
  */
 
 public class Noise.GridView : ContentView, GridLayout {
-
-    private string TEXT_MARKUP = "%s\n<span foreground=\"#999\">%s</span>";
-    private string TOOLTIP_MARKUP = "<span size=\"large\"><b>%s</b></span>\n%s";
-
     // The window used to present album contents
     private static PopupListView? _popup = null;
     public PopupListView popup_list_view {
@@ -329,22 +325,16 @@
                 // replace the current album-related media fields.
                 return CoverartCache.instance.get_album_cover (album);
 
-            case FastGrid.Column.MARKUP:
-                string name = album.get_display_name ();
-                string artist = album.get_display_artist ();
-
-                if (name.length > 25)
-                    name = name.substring (0, 21) + "…";
-                if (artist.length > 25)
-                    artist = artist.substring (0, 21) + "…";
-
-                return Markup.printf_escaped (TEXT_MARKUP, name, artist);
+            case FastGrid.Column.TITLE:
+                return album.get_display_name ();
+
+            case FastGrid.Column.SUBTITLE:
+                return album.get_display_artist ();
 
             case FastGrid.Column.TOOLTIP:
                 string name = album.get_display_name ();
                 string artist = album.get_display_artist ();
-
-                return Markup.printf_escaped (TOOLTIP_MARKUP, name, artist);
+                return Markup.printf_escaped ("<span size=\"large\"><b>%s</b></span>\n%s", name, artist);
         }
 
         assert_not_reached ();
 
=== modified file 'src/Widgets/FastView/FastGrid.vala'
--- src/Widgets/FastView/FastGrid.vala	2013-05-22 20:42:53 +0000
+++ src/Widgets/FastView/FastGrid.vala	2013-09-26 03:02:55 +0000
@@ -21,11 +21,12 @@
 
 using Gtk;
 
-public class Noise.FastGrid : IconView {
+public class Noise.FastGrid : Widgets.TileView {
 
     public enum Column {
         PIXBUF,
-        MARKUP,
+        TITLE,
+        SUBTITLE,
         TOOLTIP,
         N_COLUMNS
     }
@@ -50,9 +51,10 @@
         set_table (table, true);
         set_model (fm);
 
-        set_pixbuf_column (Column.PIXBUF);
-        set_markup_column (Column.MARKUP);
-        set_tooltip_column (Column.TOOLTIP);
+        image_column = Column.PIXBUF;
+        title_column = Column.TITLE;
+        subtitle_column = Column.SUBTITLE;
+        tooltip_column = Column.TOOLTIP;
     }
 
     public void set_search_func (ViewSearchFunc func) {
 
=== modified file 'src/Widgets/FastView/FastGridModel.vala'
--- src/Widgets/FastView/FastGridModel.vala	2012-10-27 16:25:32 +0000
+++ src/Widgets/FastView/FastGridModel.vala	2013-09-26 03:02:55 +0000
@@ -28,6 +28,8 @@
 			return typeof(string);
 		else if(col == 2)
 			return typeof(string);
+		else if(col == 3)
+			return typeof(string);
 		else
 			return typeof(GLib.Object);
 	}
@@ -49,7 +51,7 @@
 	}
 
 	public int get_n_columns () {
-		return 4;
+		return 5;
 	}
 
 	public TreePath? get_path (TreeIter iter) {
 
=== added directory 'src/Widgets/FastView/TileView'
=== added file 'src/Widgets/FastView/TileView/ImageUtils.vala'
--- src/Widgets/FastView/TileView/ImageUtils.vala	1970-01-01 00:00:00 +0000
+++ src/Widgets/FastView/TileView/ImageUtils.vala	2013-09-26 03:02:55 +0000
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2009-2013 Yorba Foundation
+ *
+ * This software is licensed under the GNU Lesser General Public License
+ * (version 3 or later). See the COPYING file in this distribution.
+ *
+ * (Code taken from Shotwell Photo Manager: shotwell/src/util/image.vala)
+ */
+
+namespace Noise.ImageUtils {
+    internal void shift_colors (Gdk.Pixbuf pixbuf, int red, int green, int blue, int alpha) {
+        assert (red >= -255 && red <= 255);
+        assert (green >= -255 && green <= 255);
+        assert (blue >= -255 && blue <= 255);
+        assert (alpha >= -255 && alpha <= 255);
+
+        int width = pixbuf.get_width ();
+        int height = pixbuf.get_height ();
+        int rowstride = pixbuf.get_rowstride ();
+        int channels = pixbuf.get_n_channels ();
+        uchar *pixels = pixbuf.get_pixels ();
+
+        assert (channels >= 3);
+        assert (pixbuf.get_colorspace () == Gdk.Colorspace.RGB);
+        assert (pixbuf.get_bits_per_sample () == 8);
+
+        for (int y = 0; y < height; y++) {
+            int y_offset = y * rowstride;
+
+            for (int x = 0; x < width; x++) {
+                int offset = y_offset + (x * channels);
+
+                if (red != 0)
+                    pixels[offset] = shift_color_byte (pixels[offset], red);
+
+                if (green != 0)
+                    pixels[offset + 1] = shift_color_byte (pixels[offset + 1], green);
+
+                if (blue != 0)
+                    pixels[offset + 2] = shift_color_byte (pixels[offset + 2], blue);
+
+                if (alpha != 0 && channels >= 4)
+                    pixels[offset + 3] = shift_color_byte (pixels[offset + 3], alpha);
+            }
+        }
+    }
+
+    internal inline uchar shift_color_byte (int b, int shift) {
+        return (uchar) (b + shift).clamp (0, 255);
+    }
+}
 
=== added file 'src/Widgets/FastView/TileView/TileRenderer.vala'
--- src/Widgets/FastView/TileView/TileRenderer.vala	1970-01-01 00:00:00 +0000
+++ src/Widgets/FastView/TileView/TileRenderer.vala	2013-09-26 03:02:55 +0000
@@ -0,0 +1,234 @@
+/**
+ * Copyright 2013 elementary
+ *
+ * This software is licensed under the GNU Lesser General Public License
+ * (version 3 or later). See the COPYING file in this distribution.
+ */
+
+internal class Noise.Widgets.TileRenderer : Gtk.CellRenderer {
+    public Gdk.Pixbuf pixbuf { get; set; }
+    public string title { get; set; }
+    public string subtitle { get; set; }
+
+    private const int BRIGHTEN_SHIFT = 0x18;
+    private const int IMAGE_SHADOW_MARGIN = 12;
+    private const int IMAGE_SHADOW_RADIUS = 4;
+    private const double IMAGE_SHADOW_ALPHA = 0.65;
+
+    private int last_image_width = 0;
+    private int last_image_height = 0;
+    private Granite.Drawing.BufferSurface shadow_buffer;
+    private Pango.Rectangle title_text_logical_rect;
+    private Pango.Rectangle subtitle_text_logical_rect;
+    private Pango.Layout title_text_layout;
+    private Pango.Layout subtitle_text_layout;
+    private Gtk.Border margin;
+    private Gtk.Border padding;
+    private Gtk.Border border;
+
+    [Deprecated (replacement = "Gtk.CellRenderer.get_preferred_size", since = "")]
+    public override void get_size (Gtk.Widget widget, Gdk.Rectangle? cell_area,
+                                   out int x_offset, out int y_offset,
+                                   out int width, out int height)
+    {
+        x_offset = y_offset = width = height = 0;
+    }
+
+    public override Gtk.SizeRequestMode get_request_mode () {
+        return Gtk.SizeRequestMode.HEIGHT_FOR_WIDTH;
+    }
+
+    public override void get_preferred_width (Gtk.Widget widget,
+                                              out int minimum_size,
+                                              out int natural_size)
+    {
+        update_layout_properties (widget);
+
+        int width = compute_total_image_width ()
+                  + margin.left + margin.right
+                  + padding.left + padding.right
+                  + border.left + border.right
+                  + 2 * (int) xpad;
+
+        minimum_size = natural_size = width;
+    }
+
+    public override void get_preferred_height_for_width (Gtk.Widget widget, int width,
+                                                         out int minimum_height,
+                                                         out int natural_height)
+    {
+        update_layout_properties (widget);
+
+        int height = compute_total_image_height ()
+                   + title_text_logical_rect.height
+                   + subtitle_text_logical_rect.height
+                   + margin.top + margin.bottom
+                   + padding.top + padding.bottom
+                   + border.top + border.bottom
+                   + 2 * (int) ypad;
+
+        minimum_height = natural_height = height;
+    }
+
+    public override void render (Cairo.Context cr, Gtk.Widget widget, Gdk.Rectangle bg_area,
+                                 Gdk.Rectangle cell_area, Gtk.CellRendererState flags)
+    {
+        update_layout_properties (widget);
+
+        Gdk.Rectangle aligned_area = get_aligned_area (widget, flags, cell_area);
+
+        int x = aligned_area.x;
+        int y = aligned_area.y;
+        int width = aligned_area.width;
+        int height = aligned_area.height;
+
+        // Apply margin
+        x += margin.right;
+        y += margin.top;
+        width -= margin.left + margin.right;
+        height -= margin.top + margin.bottom;
+
+        var ctx = widget.get_style_context ();
+
+        // Apply border width and padding offsets
+        x += border.right + padding.right;
+        y += border.top + padding.top;
+
+        width -= border.left + border.right + padding.left + padding.right;
+        height -= border.top + border.bottom + padding.top + padding.bottom;
+
+        render_image (ctx, cr, x, ref y, width, flags);
+        render_title (ctx, cr, x, ref y, width);
+        render_subtitle (ctx, cr, x, y, width);
+    }
+
+    private void render_image (Gtk.StyleContext ctx, Cairo.Context cr, int x,
+                               ref int y, int width, Gtk.CellRendererState flags)
+    {
+        int image_width = compute_total_image_width ();
+        int image_height = compute_total_image_height ();
+        int offset = IMAGE_SHADOW_MARGIN;
+
+        // this cell renderer is not optimized for pixbufs of different dimensions
+        if (shadow_buffer == null || image_width != last_image_width
+         || image_height != last_image_height)
+        {
+            shadow_buffer = new Granite.Drawing.BufferSurface (image_width, image_height);
+
+            var context = shadow_buffer.context;
+            context.rectangle (offset, offset, pixbuf.width, pixbuf.height);
+            context.set_source_rgba (0, 0, 0, IMAGE_SHADOW_ALPHA);
+            context.fill ();
+            shadow_buffer.exponential_blur (IMAGE_SHADOW_RADIUS);
+
+            last_image_width = image_width;
+            last_image_height = image_height;
+        }
+
+        x += (width - image_width) / 2;
+
+        cr.set_source_surface (shadow_buffer.surface, x, y);
+        cr.paint ();
+
+        Gdk.Pixbuf image;
+        if (should_brighten_image (flags))
+            image = get_brightened_pixbuf (pixbuf);
+        else
+            image = pixbuf;
+
+        ctx.render_icon (cr, image, x + offset, y + offset);
+
+        if (should_draw_highlight (flags)) {
+            ctx.add_class (Gtk.STYLE_CLASS_IMAGE);
+            ctx.render_frame (cr, x + offset - border.left,
+                              y + offset - border.top,
+                              pixbuf.width + border.left + border.right,
+                              pixbuf.height + border.top + border.bottom);
+        }
+
+        y += image_height;
+    }
+
+    private void render_title (Gtk.StyleContext ctx, Cairo.Context cr, int x,
+                               ref int y, int width)
+    {
+        // Center title layout horizontally
+        int offset = (width - title_text_logical_rect.width) / 2;
+        x += title_text_logical_rect.x + int.max (0, offset);
+
+        ctx.add_class ("title-text");
+        ctx.render_layout (cr, x, y, title_text_layout);
+        ctx.remove_class ("title-text");
+
+        y += title_text_logical_rect.height;
+    }
+
+    private void render_subtitle (Gtk.StyleContext ctx, Cairo.Context cr, int x,
+                                  int y, int width)
+    {
+        // Center title layout horizontally
+        int offset = (width - subtitle_text_logical_rect.width) / 2;
+        x += subtitle_text_logical_rect.x + int.max (0, offset);
+
+        ctx.render_layout (cr, x, y, subtitle_text_layout);
+    }
+
+    private void update_layout_properties (Gtk.Widget widget) {
+        var ctx = widget.get_style_context ();
+        var state = ctx.get_state ();
+
+        ctx.save ();
+        ctx.add_class (Gtk.STYLE_CLASS_IMAGE);
+        margin = ctx.get_margin (state);
+        padding = ctx.get_padding (state);
+        border = ctx.get_border (state);
+
+        subtitle_text_layout = widget.create_pango_layout (subtitle);
+        unowned Pango.FontDescription font_description;
+        ctx.get (state, Gtk.STYLE_PROPERTY_FONT, out font_description);
+        subtitle_text_layout.set_font_description (font_description);
+        subtitle_text_layout.set_ellipsize (Pango.EllipsizeMode.END);
+        subtitle_text_layout.set_alignment (Pango.Alignment.LEFT);
+        int text_width = pixbuf.width * Pango.SCALE;
+        subtitle_text_layout.set_width (text_width);
+
+        ctx.add_class ("title-text");
+        title_text_layout = widget.create_pango_layout (title);
+        ctx.get (state, Gtk.STYLE_PROPERTY_FONT, out font_description);
+        title_text_layout.set_font_description (font_description);
+        title_text_layout.set_width (text_width);
+        title_text_layout.set_ellipsize (Pango.EllipsizeMode.END);
+        title_text_layout.set_alignment (Pango.Alignment.LEFT);
+        ctx.restore ();
+
+        Pango.Rectangle ink_rect;
+        title_text_layout.get_pixel_extents (out ink_rect, out title_text_logical_rect);
+        subtitle_text_layout.get_pixel_extents (out ink_rect, out subtitle_text_logical_rect);
+    }
+
+    private int compute_total_image_width () {
+        return pixbuf != null ? pixbuf.width + 2 * IMAGE_SHADOW_MARGIN : 0;
+    }
+
+    private int compute_total_image_height () {
+        return pixbuf != null ? pixbuf.height + 2 * IMAGE_SHADOW_MARGIN : 0;
+    }
+
+    private static bool should_brighten_image (Gtk.CellRendererState flags) {
+        return (flags & Gtk.CellRendererState.PRELIT) != 0;
+    }
+
+    private static bool should_draw_highlight (Gtk.CellRendererState flags) {
+        return (flags & Gtk.CellRendererState.SELECTED) != 0;
+    }
+
+    private static Gdk.Pixbuf? get_brightened_pixbuf (Gdk.Pixbuf pixbuf) {
+        if (pixbuf == null)
+            return null;
+
+        // create a new lightened pixbuf to display
+        var brightened = pixbuf.copy ();
+        ImageUtils.shift_colors (brightened, BRIGHTEN_SHIFT, BRIGHTEN_SHIFT, BRIGHTEN_SHIFT, 0);
+        return brightened;
+    }
+}
 
=== added file 'src/Widgets/FastView/TileView/TileView.vala'
--- src/Widgets/FastView/TileView/TileView.vala	1970-01-01 00:00:00 +0000
+++ src/Widgets/FastView/TileView/TileView.vala	2013-09-26 03:02:55 +0000
@@ -0,0 +1,70 @@
+/**
+ * Copyright 2013 elementary
+ *
+ * This software is licensed under the GNU Lesser General Public License
+ * (version 3 or later). See the COPYING file in this distribution.
+ */
+
+public class Noise.Widgets.TileView : Gtk.IconView {
+    private const string STYLESHEET = """
+        /* general background color and texture */
+        .tile-view {
+            color: alpha(@fg_color, 0.95);
+            background-color: @base_color;
+        }
+
+        /* workaround: suppress default cell borders for icon view */
+        .tile-view.cell {
+            background-image: none;
+            background-color: @transparent;
+            border-width: 0;
+            border-style: solid;
+            border-color: @transparent;
+            box-shadow: inset 0 0 @transparent;
+        }
+
+        /* image selection frame */
+        .tile-view.cell.image {
+            border-width: 3px;
+            border-radius: 3px;
+            border-color: alpha(@selected_bg_color, 0.95);
+        }
+
+        /* apply bold font to titles */
+        .tile-view.cell.title-text {
+            font-weight: bold;
+            color: @fg_color;
+        }
+    """;
+
+    private Gtk.CellRenderer cell_renderer = new TileRenderer ();
+
+    public int image_column {
+        set {
+            add_attribute (cell_renderer, "pixbuf", value);
+        }
+    }
+
+    public int title_column {
+        set {
+            add_attribute (cell_renderer, "title", value);
+        }
+    }
+
+    public int subtitle_column {
+        set {
+            add_attribute (cell_renderer, "subtitle", value);
+        }
+    }
+
+    public TileView () {
+        pack_start (cell_renderer, false);
+        apply_default_theme ();
+    }
+
+    private void apply_default_theme () {
+        get_style_context ().remove_class (Gtk.STYLE_CLASS_VIEW);
+        Granite.Widgets.Utils.set_theming (this, STYLESHEET, "tile-view",
+            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+    }
+}
 
=== modified file 'src/Widgets/InfoPanel.vala'
--- src/Widgets/InfoPanel.vala	2013-02-26 21:56:08 +0000
+++ src/Widgets/InfoPanel.vala	2013-09-26 03:02:55 +0000
@@ -63,7 +63,6 @@
         title = new Gtk.Label("");
         artist = new Gtk.Label("");
         coverArt = new Gtk.Image();
-        coverArt.set_size_request (Icons.ALBUM_VIEW_IMAGE_SIZE, Icons.ALBUM_VIEW_IMAGE_SIZE);
         rating = new Granite.Widgets.Rating (true, Gtk.IconSize.MENU, true); // centered = true
         album = new Gtk.Label("");
         year_label = new Gtk.Label("");
@@ -138,8 +137,11 @@
     }
     
     private void update_cover_art () {
-        if (current_media != null)
-            coverArt.set_from_pixbuf (CoverartCache.instance.get_cover (current_media));
+        if (current_media != null) {
+            var cover_art = CoverartCache.instance.get_cover (current_media);
+            var cover_art_with_shadow = PixbufUtils.render_pixbuf_shadow (cover_art); 
+            coverArt.set_from_pixbuf (cover_art_with_shadow);
+        }
     }
     
     private void ratingChanged (int new_rating) {