@@ -11,8 +11,8 @@ module PageAttachmentsInterface def add_page_attachment_partials @buttons_partials ||= [] @buttons_partials << "attachments_box" + include_javascript 'admin/dragdrop' include_javascript 'admin/page_attachments' - include_javascript 'dragdrop' include_stylesheet 'admin/page_attachments' end end app/models/page_attachments_interface.rb @@ -3,10 +3,10 @@ = hidden_field_tag "page[attachments_attributes][#{attachment_counter}][_delete]", "0" = hidden_field_tag "page[attachments_attributes][#{attachment_counter}][position]", attachment.position - unless attachment.first? && attachment.last? - = image_tag 'admin/drag_order.png', :alt => "Drag handle", :title => "Drag to change order", :class => 'drag-order' - %div= image_tag "admin/minus.png", :alt => "Delete", :class => 'delete' + = image_tag 'admin/drag_order.png', :alt => "Drag handle", :title => "Drag to change order", :class => 'drag_order' + %div= image_tag "admin/minus.png", :alt => "delete", :class => 'delete' - unless attachment.thumbnails.empty? = link_to image_tag(attachment.public_filename("icon")), attachment.public_filename, :class => 'thumbnail' - unless attachment.title.blank? %p= h attachment.short_title - = link_to attachment.short_filename, attachment.public_filename + = link_to attachment.short_filename, attachment.public_filename \ No newline at end of file app/views/admin/pages/_attachment.html.haml @@ -1,7 +1,7 @@ #attachments .toolbar - = image_tag('admin/plus.png', :alt => 'Add') - = hidden_field_tag('attachment_index', @page.attachments.size, :id => 'attachment-index-field') + = image_tag('admin/plus.png', :alt => 'add') + = hidden_field_tag('attachment_index', @page.attachments.size, :id => 'attachment_index_field') %h3 Attachments ( %span#attachment_count>= @page.attachments.count app/views/admin/pages/_attachments_box.html.haml @@ -1,31 +1,30 @@ -document.observe("dom:loaded", function() { - when('attachments', function(container) { - var upload = '<div class="attachment-upload"><p class="title">Upload file</p><table><tr><th><label for="title_input">Title:</label></th><td><input id="title_input" size="60" name="page[attachments_attributes][][title]"></td></tr><tr><th><label for="description_input">Description:</label></th><td><input id="description_input" type="text" size="60" name="page[attachments_attributes][][description]"></td></tr><tr><th><label for="file_input">File:</label></th><td><input id="file_input" type="file" size="60" name="page[attachments_attributes][][uploaded_data]" /><img src="/images/admin/minus.png" alt="cancel" /></td></tr></table></div>' - function updatePositions(container) { - container.select(".attachment").each( function(e,i){ - e.down('input[name*="position"]').setValue(i+1); - }); - } - when('attachment_list', function(container) { - Sortable.create('attachment_list', {onUpdate:updatePositions}); - }); - container.observe('click', function(e) { - var target = $(e.target) +Event.addBehavior({ - if (target.match('img[alt=Add]')) { - $('attachment-index-field').value = parseInt($('attachment-index-field').value) + 1; - container.insert(upload.gsub(/\[\]/,'['+$('attachment-index-field').value+']')) - } - else if (target.match('img[alt=cancel]')) { - e.findElement('.attachment-upload').remove() - e.stop() - } - else if (target.match('img.delete')) { - var attachment = e.findElement('.attachment'); - attachment.addClassName('deleted'); - attachment.insert("<em>Attachment will be deleted when page is saved.</em>"); - attachment.down('input[name*="_delete"]').setValue('true'); + '#attachment_list': function() { + Sortable.create('attachment_list', { + onUpdate: function(container) { + container.select(".attachment").each(function(e, i) { + e.down('input[name*="position"]').setValue(i+1); + }); } - }) - }) -}) + }); + }, + + '#attachments:click': function(event) { + var target = $(event.target); + if (target.match('img[alt=add]')) { + var upload = '<div class="attachment_upload"><p class="title">Upload file</p><table><tr><th><label for="title_input">Title:</label></th><td><input id="title_input" size="60" name="page[attachments_attributes][][title]"></td></tr><tr><th><label for="description_input">Description:</label></th><td><input id="description_input" type="text" size="60" name="page[attachments_attributes][][description]"></td></tr><tr><th><label for="file_input">File:</label></th><td><input id="file_input" type="file" size="60" name="page[attachments_attributes][][uploaded_data]" /><img src="/images/admin/minus.png" alt="cancel" /></td></tr></table></div>'; + $('attachment_index_field').value = parseInt($('attachment_index_field').value) + 1; + $('attachments').insert(upload.gsub(/\[\]/, '[' + $('attachment_index_field').value + ']')); + } else if (target.match('img[alt=cancel]')) { + event.findElement('.attachment_upload').remove(); + event.stop(); + } else if (target.match('img[alt=delete]')) { + var attachment = event.findElement('.attachment'); + attachment.addClassName('deleted'); + attachment.insert("<em>Attachment will be deleted when page is saved.</em>"); + attachment.down('input[name*="_delete"]').setValue('true'); + } + } + +}); \ No newline at end of file public/javascripts/admin/page_attachments.js @@ -1,12 +1,16 @@ #attachments { clear: both; - border: 1px solid #d4cba4; - background: white; + color: #333; + background: #f5f1e2 url(/images/admin/vertical_tan_gradient.png) repeat-x top; margin: 10px 0; + border-radius: 8px; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + overflow: hidden; } #attachments .toolbar { float: right; - padding: 10px; + padding: 6px 6px 0; width: 50px; text-align: right; } @@ -14,12 +18,16 @@ padding: 5px; cursor: pointer; } +#attachments h3 { + font-size: 16px; + padding: 7px 0; +} #attachments h3, #attachments p.notice { background: #eae3c5; margin: 0; padding: 0.5em; } -#attachments .attachment-upload { +#attachments .attachment_upload { padding: 0 0.8em 0.8em 0.8em; } #attachments p.notice { @@ -28,74 +36,98 @@ font-size: 90%; color: red; } -#attachments .attachment-upload img, +#attachments .attachment_upload img, #attachments .attachment img.delete { cursor: pointer; padding: 2px; margin-left:7px; } -#attachments .attachment img.drag-order { +#attachments .attachment img.drag_order { cursor: move; float: right; padding: 2px; margin-right:6px; } #attachments ol { - list-style-position:outside; - padding: 10px 10px 0 10px; + list-style: none; + padding: 0 10px 0 10px; margin: 0; } -#attachments ol li -{ - margin-left:20px; +#attachments ol li { + margin-left: 0; } -#attachments ol li div -{ - float:left;width:25px; +#attachments ol li div { + float: left; + width: 25px; } -#attachments ol li a.thumbnail -{ - float:left;margin:0 10px 0 10px; +#attachments ol li a.thumbnail { + float: left; + margin: 0 10px 0 10px; } -#attachments ol li p -{ - margin:0 0 5px 0; +#attachments ol li p { + margin: 0 0 5px 0; } -#attachments ol li -{ - margin-bottom:10px;border-bottom:1px dashed #cccccc;width:66%;padding-bottom:3px; +#attachments ol li { + border-bottom: 1px dashed #cccccc; + width: 100%; + padding: 8px 0; } - -#attachments .attachment .thumbnail img { - border: 2px solid #d4cba4; +#attachments ol li:last-child { + border-bottom: none; } - -#attachments p.title -{ - border-bottom:1px #EAE3C5 solid;width:66%;font-size:17px;font-weight:bold; +#attachments .attachment .thumbnail img { + background: white; + border: 1px solid #d4cba4; + padding: 3px; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; +} +#attachments p.title { + border-bottom: 1px #eae3c5 solid; + width: 66%; + font-size: 17px; + font-weight: bold; + margin: 1em 0 ; +} +#attachments table { + margin-top: 1em; +} +#attachments table th { + font-weight: bold; + text-align: right; + padding-right: 10px; + width: 120px; + padding-bottom: 5px; } -#attachments table th -{ - font-weight:bold;text-align:right;padding-right:10px;width:120px;padding-bottom:5px; +#attachments table td { + padding-bottom: 5px; } -#attachments table td -{ - padding-bottom:5px; +#attachments li.attachment.deleted em { + color: #ff0000; + margin: 0 0 10px 20px; } -#attachments li.attachment.deleted em -{ - color:#FF0000;margin:0 0 10px 20px; +#attachments li.attachment.deleted a { + opacity: 0.5; + text-decoration: line-through; } -#attachments li.attachment.deleted a -{ - opacity:0.5; - text-decoration:line-through; +#attachments li.attachment.deleted img.delete { + visibility: hidden; } -#attachments li.attachment.deleted img.delete -{ + +.clearfix:after { + content: "."; + display: block; + height: 0; + clear: both; visibility: hidden; } -.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} -.clearfix {display:inline-block;} -.clearfix {display:block;} -li.clearfix {display:list-item;} +.clearfix { + display:inline-block; +} +.clearfix { + display:block; +} +li.clearfix { + display: list-item; +} \ No newline at end of file public/stylesheets/admin/page_attachments.css b0dbe1b06fe303944d1209fb9a6228c4313bab6e John W. Long me@johnwlong.com http://github.com/radiant/radiant-page-attachments-extension/commit/6051774d4fdf199d7154739d7d7d8ffbc9d1ecfa 6051774d4fdf199d7154739d7d7d8ffbc9d1ecfa 2009-09-30T19:37:15-07:00 2009-09-30T19:37:15-07:00 updated to work with the new Blade interface 8f70439dd33aca73c236af76b6054c9607a67f39 John W. Long me@johnwlong.com