diff --git a/app/assets/images/locomotive/list/icons/trash_off.png b/app/assets/images/locomotive/list/icons/trash_off.png new file mode 100644 index 00000000..96c0215c Binary files /dev/null and b/app/assets/images/locomotive/list/icons/trash_off.png differ diff --git a/app/assets/javascripts/locomotive/views/content_assets/picker_item_view.js.coffee b/app/assets/javascripts/locomotive/views/content_assets/picker_item_view.js.coffee index a79bc9cf..e80ad3ab 100644 --- a/app/assets/javascripts/locomotive/views/content_assets/picker_item_view.js.coffee +++ b/app/assets/javascripts/locomotive/views/content_assets/picker_item_view.js.coffee @@ -7,8 +7,8 @@ class Locomotive.Views.ContentAssets.PickerItemView extends Backbone.View className: 'asset' events: - 'click h4 a': 'select_asset' - 'click a.remove': 'remove_asset' + 'click h4 a, .icon, .image': 'select_asset' + 'click a.remove': 'remove_asset' render: -> $(@el).html(ich.content_asset(@model.toJSON())) diff --git a/app/assets/javascripts/locomotive/views/content_assets/picker_view.js.coffee b/app/assets/javascripts/locomotive/views/content_assets/picker_view.js.coffee index ea329e7d..3af33b84 100644 --- a/app/assets/javascripts/locomotive/views/content_assets/picker_view.js.coffee +++ b/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() diff --git a/app/assets/stylesheets/locomotive/content_assets.scss b/app/assets/stylesheets/locomotive/content_assets.scss index 0a73f89f..b0cb0531 100644 --- a/app/assets/stylesheets/locomotive/content_assets.scss +++ b/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; - height: 80px; + width: 85px; + 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; - height: 85px; + width: 85px; + height: 90px; } } // .image @@ -71,14 +72,14 @@ ul.content-assets { .inside { position: relative; - top: 24px; - width: 80px; + top: 30px; + 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; - right: 5px; + bottom: 17px; + 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; -// } \ No newline at end of file +} \ No newline at end of file diff --git a/app/assets/stylesheets/locomotive/dialog_changes.scss b/app/assets/stylesheets/locomotive/dialog_changes.scss index 9176dd4c..9357afa9 100644 --- a/app/assets/stylesheets/locomotive/dialog_changes.scss +++ b/app/assets/stylesheets/locomotive/dialog_changes.scss @@ -66,7 +66,7 @@ .list { overflow: auto; - height: 350px; + height: 360px; } } // .ui-dialog-content diff --git a/app/models/locomotive/extensions/asset/vignette.rb b/app/models/locomotive/extensions/asset/vignette.rb index e95870f3..5fdc8351 100644 --- a/app/models/locomotive/extensions/asset/vignette.rb +++ b/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 diff --git a/app/presenters/locomotive/content_asset_presenter.rb b/app/presenters/locomotive/content_asset_presenter.rb index 57f07abe..069f0249 100644 --- a/app/presenters/locomotive/content_asset_presenter.rb +++ b/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 diff --git a/app/views/locomotive/content_assets/_picker.html.haml b/app/views/locomotive/content_assets/_picker.html.haml index 8a82863d..98e28e6a 100644 --- a/app/views/locomotive/content_assets/_picker.html.haml +++ b/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')