polishing the locomotive_media plugin (wip)
This commit is contained in:
did
parent
72c2cb2059
commit
63e2a63d1a
BIN
app/assets/images/locomotive/list/icons/trash_off.png
Normal file
BIN
app/assets/images/locomotive/list/icons/trash_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 437 B |
@ -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: ->
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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;
|
||||
// }
|
||||
@ -66,7 +66,7 @@
|
||||
|
||||
.list {
|
||||
overflow: auto;
|
||||
height: 350px;
|
||||
height: 360px;
|
||||
}
|
||||
} // .ui-dialog-content
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user