Fix #391: Thumbnail styling enhancements for flash, html, and object types

CHANGE.md

@@ -3,7 +3,7 @@ Change Log: `bootstrap-fileinput`
 
 ## version 4.2.6
 
-**Date**: 02-Aug-2015
+**Date**: 07-Aug-2015
 
 1. (enh #373): Default delete ajax request type to POST (instead of DELETE).
 2. (enh #376): Ability to validate initial/server files for max and min file count.
@@ -16,6 +16,7 @@ Change Log: `bootstrap-fileinput`
 9. (enh #385): Updated Russian & Ukranian translations.
 10. (enh #389): New templates and styling enhancements to caption and main buttons.
 11. (enh #390): Thumbnail error display enhancements.
+12. (enh #391): Thumbnail styling enhancements for flash, html, and object types.
 
 ## version 4.2.5
 

README.md

@@ -530,7 +530,7 @@ The `previewTemplates` if not set will default to:
         '   {footer}\n' +
         '</div>\n',
     html: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}">\n' +
-        '    <object data="{data}" type="{type}" width="{width}" height="{height}">\n' +
+        '    <object class="file-object" data="{data}" type="{type}" width="{width}" height="{height}">\n' +
         '       ' + DEFAULT_PREVIEW + '\n' +
         '    </object>\n' + 
         '   {footer}\n' +
@@ -561,13 +561,13 @@ The `previewTemplates` if not set will default to:
         '   {footer}\n' +
         '</div>\n',
     flash: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" title="{caption}" ' + STYLE_SETTING + '>\n' +
-        '   <object type="application/x-shockwave-flash" width="{width}" height="{height}" data="{data}">\n' +
+        '   <object class="file-object" type="application/x-shockwave-flash" width="{width}" height="{height}" data="{data}">\n' +
         OBJECT_PARAMS + '       ' + DEFAULT_PREVIEW + '\n' +
         '   </object>\n' + 
         '   {footer}\n' +
         '</div>\n',
     object: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}" title="{caption}" ' + STYLE_SETTING + '>\n' +
-        '    <object data="{data}" type="{type}" width="{width}" height="{height}">\n' +
+        '    <object class="file-object" data="{data}" type="{type}" width="{width}" height="{height}">\n' +
         '      <param name="movie" value="{caption}" />\n' +
         OBJECT_PARAMS + '           ' + DEFAULT_PREVIEW + '\n' +
         '   </object>\n' + 

css/fileinput.css

@@ -21,6 +21,11 @@
     border: none;
 }
 
+.file-object {
+    margin: 0 0 -5px 0;
+    padding: 0;
+}
+
 .btn-file {
     position: relative;
     overflow: hidden;
@@ -117,8 +122,8 @@
     vertical-align: middle;
     width: 160px;
     height: 160px;
-    border: 2px dashed #999;
-    border-radius: 25px;
+    border: 2px solid #999;
+    border-radius: 30px;
     opacity: 0.8;
 }
 

js/fileinput.js

@@ -297,7 +297,7 @@
             '   {footer}\n' +
             '</div>\n',
         tHtml = '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}">\n' +
-            '    <object data="{data}" type="{type}" width="{width}" height="{height}">\n' +
+            '    <object class="file-object" data="{data}" type="{type}" width="{width}" height="{height}">\n' +
             '       ' + DEFAULT_PREVIEW + '\n' +
             '    </object>\n' +
             '   {footer}\n' +
@@ -329,14 +329,14 @@
             '</div>',
         tFlash = '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}"' +
             ' title="{caption}" ' + STYLE_SETTING + '>\n' +
-            '   <object type="application/x-shockwave-flash" width="{width}" height="{height}" data="{data}">\n' +
+            '   <object class="file-object" type="application/x-shockwave-flash" width="{width}" height="{height}" data="{data}">\n' +
             OBJECT_PARAMS + '       ' + DEFAULT_PREVIEW + '\n' +
             '   </object>\n' +
             '   {footer}\n' +
             '</div>\n',
         tObject = '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}"' +
             ' title="{caption}" ' + STYLE_SETTING + '>\n' +
-            '   <object data="{data}" type="{type}" width="{width}" height="{height}">\n' +
+            '   <object class="file-object" data="{data}" type="{type}" width="{width}" height="{height}">\n' +
             '       <param name="movie" value="{caption}" />\n' +
             OBJECT_PARAMS + '         ' + DEFAULT_PREVIEW + '\n' +
             '   </object>\n' +
@@ -2136,7 +2136,7 @@
         },
         renderButton: function (type) {
             var self = this, tmplt = self.getLayoutTemplate('btnDefault'), css = self[type + 'Class'],
-                title = self[type + 'Title'], icon = self[type + 'Icon'], label = self[type + 'Label'], 
+                title = self[type + 'Title'], icon = self[type + 'Icon'], label = self[type + 'Label'],
                 status = self.isDisabled ? ' disabled' : '', btnType = 'button';
             switch (type) {
                 case 'remove':