Fix #1080: Enhance styling of zoom modal header and buttons

CHANGE.md

@@ -3,10 +3,11 @@ Change Log: `bootstrap-fileinput`
 
 ## version 4.4.4
 
-**Date:** 12-Sep-2017
+**Date:** 13-Sep-2017
 
 **_This release adds Bootstrap v4.x support._**
 
+- (enh #1080): Enhance styling of zoom modal header and buttons.
 - (bug #1079): Correct initial preview rendering when no `initialPreviewConfig` supplied.
 - (enh #1078): Correct markup during file validation errors (non-ajax mode).
 - (enh #1075): Enhance initial preview delete behavior (ensure `previewCache` splices deleted initial preview content items).

css/fileinput-rtl.css

@@ -51,11 +51,6 @@
     right: auto;
 }
 
-.kv-rtl .kv-zoom-actions .btn,
-.kv-rtl .floating-buttons .btn {
-    margin-right: 3px;
-}
-
 .kv-rtl .btn-prev {
     right: 1px;
     left: auto;

css/fileinput-rtl.min.css

@@ -9,4 +9,4 @@
  *
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
- */.kv-rtl{direction:rtl}.kv-rtl .close{float:left}.kv-rtl .input-group-btn:last-child>.btn{border-radius:4px 0 0 4px}.kv-rtl .input-group .form-control:first-child{border-radius:0 4px 4px 0}.kv-rtl .btn-file input[type=file]{right:auto;left:0;text-align:left;background:100% 0 none}.kv-rtl .file-error-message pre,.kv-rtl .file-error-message ul,.kv-rtl .file-zoom-dialog{text-align:right}.kv-rtl .file-drop-zone{margin:12px 12px 12px 15px}.kv-rtl .floating-buttons{left:10px;right:auto}.kv-rtl .floating-buttons .btn,.kv-rtl .kv-zoom-actions .btn{margin-right:3px}.kv-rtl .btn-prev{right:1px;left:auto}.kv-rtl .btn-next{left:1px;right:auto}.kv-rtl .pull-right{float:left!important}.kv-rtl .pull-left{float:right!important}.kv-rtl .float-right{float:left!important}.kv-rtl .float-left{float:right!important}.kv-rtl .kv-zoom-title{direction:ltr}.kv-rtl .krajee-default.file-preview-frame{box-shadow:-1px 1px 5px 0 #a2958a;float:right}.kv-rtl .krajee-default.file-preview-frame:not(.file-preview-error):hover{box-shadow:-3px 3px 5px 0 #333}.kv-rtl .krajee-default .file-actions,.kv-rtl .krajee-default .file-other-error{float:left}.kv-rtl .krajee-default .file-drag-handle,.kv-rtl .krajee-default .file-upload-indicator{float:right}
+ */.kv-rtl{direction:rtl}.kv-rtl .close{float:left}.kv-rtl .input-group-btn:last-child>.btn{border-radius:4px 0 0 4px}.kv-rtl .input-group .form-control:first-child{border-radius:0 4px 4px 0}.kv-rtl .btn-file input[type=file]{right:auto;left:0;text-align:left;background:100% 0 none}.kv-rtl .file-error-message pre,.kv-rtl .file-error-message ul,.kv-rtl .file-zoom-dialog{text-align:right}.kv-rtl .file-drop-zone{margin:12px 12px 12px 15px}.kv-rtl .floating-buttons{left:10px;right:auto}.kv-rtl .btn-prev{right:1px;left:auto}.kv-rtl .btn-next{left:1px;right:auto}.kv-rtl .pull-right{float:left!important}.kv-rtl .pull-left{float:right!important}.kv-rtl .float-right{float:left!important}.kv-rtl .float-left{float:right!important}.kv-rtl .kv-zoom-title{direction:ltr}.kv-rtl .krajee-default.file-preview-frame{box-shadow:-1px 1px 5px 0 #a2958a;float:right}.kv-rtl .krajee-default.file-preview-frame:not(.file-preview-error):hover{box-shadow:-3px 3px 5px 0 #333}.kv-rtl .krajee-default .file-actions,.kv-rtl .krajee-default .file-other-error{float:left}.kv-rtl .krajee-default .file-drag-handle,.kv-rtl .krajee-default .file-upload-indicator{float:right}

css/fileinput.css

@@ -443,13 +443,19 @@ input[type=file].file-loading, .file-loading input[type=file] {
     right: 10px;
 }
 
-.floating-buttons, .floating-buttons .btn {
-    z-index: 3000;
+.btn-kv {
+    display: inline-block;
+    text-align: center;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    padding: 0;
+    font-size: 0.875rem;
+    border-radius: 0.2rem;
 }
 
-.file-zoom-dialog .kv-zoom-actions .btn,
-.floating-buttons .btn {
-    margin-left: 3px;
+.floating-buttons, .floating-buttons .btn-kv {
+    z-index: 3000;
 }
 
 .file-zoom-dialog .btn-navigate:not([disabled]):hover {
@@ -530,6 +536,10 @@ input[type=file].file-loading, .file-loading input[type=file] {
 .file-zoom-dialog .kv-zoom-title {
     font-weight: 300;
     color: #999;
+    max-width: 50%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 @media screen and (max-width: 767px) {

js/fileinput.js

@@ -519,7 +519,7 @@
                 '    <div class="modal-header">\n' +
                 '      <h5 class="modal-title">{heading}</h5>\n' +
                 '      <span class="kv-zoom-title"></span>\n' +
-                '      <div class="kv-zoom-actions">{toggleheader}{fullscreen}{borderless}{close}</div>\n' +
+                '      <div class="kv-zoom-actions">{toggleheader} {fullscreen} {borderless} {close}</div>\n' +
                 '    </div>\n' +
                 '    <div class="modal-body">\n' +
                 '      <div class="floating-buttons"></div>\n' +
@@ -700,19 +700,19 @@
                     showZoom: true,
                     showDrag: true,
                     removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
-                    removeClass: 'btn btn-sm btn-default btn-outline-secondary',
-                    removeErrorClass: 'btn btn-sm btn-danger',
+                    removeClass: 'btn btn-kv btn-default btn-outline-secondary',
+                    removeErrorClass: 'btn btn-kv btn-danger',
                     removeTitle: 'Remove file',
                     uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
-                    uploadClass: 'btn btn-sm btn-default btn-outline-secondary',
+                    uploadClass: 'btn btn-kv btn-default btn-outline-secondary',
                     uploadTitle: 'Upload file',
                     uploadRetryIcon: '<i class="glyphicon glyphicon-repeat"></i>',
                     uploadRetryTitle: 'Retry upload',
                     downloadIcon: '<i class="glyphicon glyphicon-download"></i>',
-                    downloadClass: 'btn btn-sm btn-default btn-outline-secondary',
+                    downloadClass: 'btn btn-kv btn-default btn-outline-secondary',
                     downloadTitle: 'Download file',
                     zoomIcon: '<i class="glyphicon glyphicon-zoom-in"></i>',
-                    zoomClass: 'btn btn-sm btn-default btn-outline-secondary',
+                    zoomClass: 'btn btn-kv btn-default btn-outline-secondary',
                     zoomTitle: 'View Details',
                     dragIcon: '<i class="glyphicon glyphicon-move"></i>',
                     dragClass: 'text-info',
@@ -1519,7 +1519,7 @@
             cap = $frame.data('caption') || '';
             size = $frame.data('size') || '';
             title = cap + ' ' + size;
-            $modal.find('.kv-zoom-title').html(title);
+            $modal.find('.kv-zoom-title').attr('title', $('<div/>').html(title).text()).html(title);
             $body = $modal.find('.kv-zoom-body');
             $modal.removeClass('kv-single-content');
             if (animate) {
@@ -3911,10 +3911,10 @@
         previewZoomButtonClasses: {
             prev: 'btn btn-navigate',
             next: 'btn btn-navigate',
-            toggleheader: 'btn btn-default btn-secondary btn-header-toggle',
-            fullscreen: 'btn btn-default btn-secondary',
-            borderless: 'btn btn-default btn-secondary',
-            close: 'btn btn-default btn-secondary'
+            toggleheader: 'btn btn-kv btn-default btn-outline-secondary',
+            fullscreen: 'btn btn-kv btn-default btn-outline-secondary',
+            borderless: 'btn btn-kv btn-default btn-outline-secondary',
+            close: 'btn btn-kv btn-default btn-outline-secondary'
         },
         preferIconicPreview: false,
         preferIconicZoomPreview: false,

themes/explorer-fa/theme.min.css

@@ -2,7 +2,7 @@
  * bootstrap-fileinput v4.4.4
  * http://plugins.krajee.com/file-input
  *
- * Krajee Explorer Font Awesome theme style for bootstrap-fileinput. 
+ * Krajee Explorer Font Awesome theme style for bootstrap-fileinput.
  * Load this theme file after loading `fileinput.css`. Ensure that
  * font awesome assets and CSS are loaded on the page as well.
  *