Merge pull request #2336 from dalpo/feature/fix-image-field-markup

Fix: better html markup for input fields
railsadminteam · Jun 24, 2015 · 6989e43 · 6989e43
2 parents f273362 + ae88825
commit 6989e43
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 6 deletions.
diff --git a/app/assets/javascripts/rails_admin/ra.widgets.coffee b/app/assets/javascripts/rails_admin/ra.widgets.coffee
@@ -46,7 +46,7 @@ $(document).on 'rails_admin.dom_ready', (e, content) ->
       input = this
       image_container = $("#" + input.id).parent().children(".preview")
       unless image_container.length
-        image_container = $("#" + input.id).parent().prepend($('<img />').addClass('preview')).find('img.preview')
+        image_container = $("#" + input.id).parent().prepend($('<img />').addClass('preview').addClass('img-thumbnail')).find('img.preview')
         image_container.parent().find('img:not(.preview)').hide()
       ext = $("#" + input.id).val().split('.').pop().toLowerCase()
       if input.files and input.files[0] and $.inArray(ext, ['gif','png','jpg','jpeg','bmp']) != -1

diff --git a/app/assets/stylesheets/rails_admin/base/theming.scss b/app/assets/stylesheets/rails_admin/base/theming.scss
@@ -70,6 +70,18 @@ body.rails_admin {
       display:none;
     }
 
+    .control-group.image_field {
+      .img-thumbnail {
+        margin-bottom: 10px;
+      }
+
+      .btn-remove-image {
+        &.btn-info {
+          margin-top: 10px;
+        }
+      }
+    }
+
     legend {
       cursor:pointer;
       i {

diff --git a/app/assets/stylesheets/rails_admin/ra.widgets.scss b/app/assets/stylesheets/rails_admin/ra.widgets.scss
@@ -2,7 +2,8 @@ iframe.wysihtml5-sandbox{
   height: 250px !important;
   width: 75% !important;
 }
+
 .controls img.preview{
-  max-height: 100px;
-  max-width: 100px;
+  max-height: 200px;
+  max-width: 300px;
 }
diff --git a/app/views/rails_admin/main/_form_file_upload.html.haml b/app/views/rails_admin/main/_form_file_upload.html.haml
@@ -3,11 +3,15 @@
 .toggle{style: ('display:none;' if file && field.delete_method && form.object.send(field.delete_method) == '1')}
   - if value = field.pretty_value
     = value
+
   = form.file_field(field.name, field.html_attributes.reverse_merge({ data: { fileupload: true }}))
+
 - if field.optional? && field.errors.blank? && file && field.delete_method
-  %a.btn.btn-info{href: '#', :'data-toggle' => 'button', onclick: "$(this).siblings('[type=checkbox]').click(); $(this).siblings('.toggle').toggle('slow'); jQuery(this).toggleClass('btn-danger btn-info'); return false"}
+  %a.btn.btn-info.btn-remove-image{href: '#', :'data-toggle' => 'button', role: 'button', onclick: "$(this).siblings('[type=checkbox]').click(); $(this).siblings('.toggle').toggle('slow'); jQuery(this).toggleClass('btn-danger btn-info'); return false;"}
     %i.icon-white.icon-trash
     = I18n.t('admin.actions.delete.menu').capitalize + " #{field.label.downcase}"
-  = form.check_box(field.delete_method, style: 'display:none;' )
+
+  = form.check_box(field.delete_method, style: 'display:none;')
+
 - if field.cache_method
   = form.hidden_field(field.cache_method)
diff --git a/lib/rails_admin/config/fields/types/file_upload.rb b/lib/rails_admin/config/fields/types/file_upload.rb
@@ -33,7 +33,8 @@ class FileUpload < RailsAdmin::Config::Fields::Base
               url = resource_url
               if image
                 thumb_url = resource_url(thumb_method)
-                url != thumb_url ? v.link_to(v.image_tag(thumb_url, class: 'img-polaroid'), url, target: '_blank') : v.image_tag(thumb_url)
+                image_html = v.image_tag(thumb_url, class: 'img-thumbnail')
+                url != thumb_url ? v.link_to(image_html, url, target: '_blank') : image_html
               else
                 v.link_to(nil, url, target: '_blank')
               end