polishing the locomotive_media plugin (wip)

app/assets/javascripts/locomotive/views/content_assets/picker_item_view.js.coffee

@@ -7,7 +7,7 @@ class Locomotive.Views.ContentAssets.PickerItemView extends Backbone.View
   className: 'asset'
 
   events:
-    'click h4 a':     'select_asset'
+    'click h4 a, .icon, .image':  'select_asset'
     'click a.remove':             'remove_asset'
 
   render: ->

app/assets/javascripts/locomotive/views/content_assets/picker_view.js.coffee

@@ -82,7 +82,7 @@ class Locomotive.Views.ContentAssets.PickerView extends Backbone.View
     (@_item_views ||= []).push(view)
     @$('ul.list .clear').before(view.render().el)
 
-    @_refresh()
+    @_refresh() & @_move_to_last_asset()
 
   remove_asset: (asset) ->
     view = _.find @_item_views, (tmp) -> tmp.model == asset
@@ -90,6 +90,10 @@ class Locomotive.Views.ContentAssets.PickerView extends Backbone.View
     @_refresh()
     @center()
 
+  _move_to_last_asset: ->
+    limit = @$('ul.list li.clear').position()
+    @$('ul.list').animate(scrollTop: limit.top, 400) if limit?
+
   _refresh: ->
     if @collection.length == 0
       @$('ul.list').hide() & @$('p.no-items').show()

app/assets/stylesheets/locomotive/content_assets.scss

@@ -10,10 +10,10 @@ ul.content-assets {
     position: relative;
     float: left;
     width: 139px;
-    height: 140px;
+    height: 170px;
     clear: none;
 
-    margin: 0 17px 17px 0;
+    margin: 0 10px 10px 0;
 
     @include border-radius(8px);
     @include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px);
@@ -47,10 +47,11 @@ ul.content-assets {
     }
 
     .icon, .image {
-      width: 80px;
+      width: 85px;
-      height: 80px;
+      height: 85px;
       border: 4px solid #fff;
-      margin: 10px 0 5px 24px;
+      margin: 20px 0 0px 22px;
+      cursor: pointer;
 
       @include box-shadow(rgba(0, 0, 0, 0.3) 3px 3px 5px 1px);
     }
@@ -62,8 +63,8 @@ ul.content-assets {
         display: table-cell;
         vertical-align: middle;
         text-align: center;
-        width: 80px;
+        width: 85px;
-        height: 85px;
+        height: 90px;
       }
     } // .image
 
@@ -71,14 +72,14 @@ ul.content-assets {
 
       .inside {
         position: relative;
-        top: 24px;
+        top: 30px;
-        width: 80px;
+        width: 85px;
 
         -webkit-transform: rotate(-45deg);
         -moz-transform: rotate(-45deg);
 
         color: #fff;
-        font-size: 12px;
+        font-size: 14px;
         font-weight: bold;
         text-align: center;
         text-transform: uppercase;
@@ -103,104 +104,24 @@ ul.content-assets {
 
     .actions {
       position: absolute;
-      top: 8px;
+      bottom: 17px;
-      right: 5px;
+      right: 17px;
+
+      a {
+        display: block;
+        width: 16px;
+        height: 16px;
+
+        background: transparent image-url("locomotive/list/icons/trash_off.png") repeat 0 0;
+
+        text-indent: -9999px;
+
+        &:hover{
+          background-image: image-url("locomotive/list/icons/trash.png");
+        }
+      }
     }
 
   } // li.asset
 
 }
-
-// ul.assets {
-//   list-style: none;
-//   margin: 0px;
-//   padding: 0px;
-// }
-//
-// ul.assets li.asset {
-//   position: relative;
-//   float: left;
-//   width: 139px;
-//   height: 140px;
-//   background: transparent url(/assets/locomotive//list/thumb.png) no-repeat 0 0;
-//   margin: 0 17px 17px 0;
-// }
-//
-// ul.assets li.asset.last {
-//   margin-right: 0px;
-// }
-//
-// ul.assets li.asset h4 { margin: 0px; height: 30px; border-bottom: 1px solid #ccced7; position: relative; }
-//
-// ul.assets li.asset h4 a {
-//   position: absolute;
-//   top: 7px;
-//   left: 12px;
-//   font-weight: bold;
-//   font-size: 0.6em;
-//   color: #1f82bc;
-//   text-decoration: none;
-// }
-//
-// ul.assets li.asset h4 a:hover { text-decoration: underline; }
-//
-// ul.assets li.asset div.icon, ul.assets li.asset div.image {
-//   width: 80px;
-//   height: 80px;
-//   border: 4px solid #fff;
-//   margin: 10px 0 0 24px;
-//   box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-//   -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-//   -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-// }
-//
-// ul.assets li.asset div.image {
-//   background: transparent url(/assets/locomotive//list/empty.png) repeat 0 0;
-// }
-//
-// ul.assets li.asset div.image .inside {
-//   display: table-cell;
-//   vertical-align: middle;
-//   text-align: center;
-//   width: 72px;
-//   height: 72px;
-// }
-//
-// ul.assets li.asset div.icon .inside {
-//   position: relative;
-//   top: 24px;
-//   text-align:center;
-//   width: 80px;
-//   -webkit-transform: rotate(-45deg);
-//   -moz-transform: rotate(-45deg);
-//   font-weight: bold;
-//   color: #fff;
-//   text-shadow: 0px 1px 0px #333;
-//   text-transform: uppercase;
-//   font-size: 1.1em;
-// }
-//
-// ul.assets li.asset div.pdf {
-//   background: #e82f2d;
-//   background: -webkit-gradient(linear, left top, right bottom, from(#fc4e42), to(#b9101d));
-//   background: -moz-linear-gradient(-45deg, #fc4e42, #b9101d);
-// }
-//
-// ul.assets li.asset div.media {
-//   background: #6e489c;
-//   background: -webkit-gradient(linear, left top, right bottom, from(#ba89d1), to(#4f317d));
-//   background: -moz-linear-gradient(-45deg, #ba89d1, #4f317d);
-// }
-//
-// ul.assets li.asset div.other {
-//   background: #4a4a50;
-//   background: -webkit-gradient(linear, left top, right bottom, from(#92939a), to(#28282b));
-//   background: -moz-linear-gradient(-45deg, #92939a, #28282b);
-// }
-//
-//
-// ul.assets li.asset div.actions {
-//   position: absolute;
-//   top: 4px;
-//   right: 12px;
-// }

app/assets/stylesheets/locomotive/dialog_changes.scss

@@ -66,7 +66,7 @@
 
     .list {
       overflow: auto;
-      height: 350px;
+      height: 360px;
     }
   } // .ui-dialog-content
 

app/models/locomotive/extensions/asset/vignette.rb

@@ -5,10 +5,10 @@ module Locomotive
 
         def vignette_url
           if self.image?
-            if self.width < 80 && self.height < 80
+            if self.width < 85 && self.height < 85
               self.source.url
             else
-              Locomotive::Dragonfly.resize_url(self.source, '80x80#')
+              Locomotive::Dragonfly.resize_url(self.source, '85x85#')
             end
           end
         end

app/presenters/locomotive/content_asset_presenter.rb

@@ -1,8 +1,12 @@
 module Locomotive
   class ContentAssetPresenter < BasePresenter
 
+    def full_filename
+      self.source.source_filename
+    end
+
     def filename
-      truncate(self.source.source_filename, :length => 19)
+      truncate(self.source.source_filename, :length => 22)
     end
 
     def short_name
@@ -32,7 +36,7 @@ module Locomotive
 
     def as_json
       {}.tap do |hash|
-        %w(id filename short_name extname content_type content_type_text url vignette_url).map(&:to_sym).each do |meth|
+        %w(id full_filename filename short_name extname content_type content_type_text url vignette_url).map(&:to_sym).each do |meth|
           hash[meth] = self.send(meth)
         end
       end

app/views/locomotive/content_assets/_picker.html.haml

@@ -17,7 +17,7 @@
 %script{ :type => 'text/html', :id => 'content_asset' }
 
   %h4
-    = link_to '{{filename}}', '{{url}}'
+    = link_to '{{filename}}', '{{url}}', :alt => '{{full_filename}}', :title => '{{full_filename}}'
   {{#if image}}
   .image
     .inside
@@ -29,4 +29,4 @@
   {{/if}}
 
   .actions
-    = link_to image_tag('locomotive/list/icons/cross.png'), '#', :class => 'remove', :'data-confirm' => t('locomotive.messages.confirm')
+    = link_to 'x', '#', :class => 'remove', :'data-confirm' => t('locomotive.messages.confirm')