File icon use css3

.eslintrc.json

@@ -36,7 +36,7 @@
         "$encode": true,
         "$decode": true,
         "$fileCutName": true,
-        "$fileDetectingIcon": true,
+        "$fileExtName": true,
         "$gotoSection": true,
         "$createUploader": true,
         "$cleanMenu": true,

src/main/webapp/assets/css/rb-base.css

@@ -25914,10 +25914,7 @@ div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-chil
     clear: both;
 }
 
-/**
+/*! placeholder-loading v0.2.1 | MIT | https://zalog.ro/placeholder-loading/ */
- * placeholder-loading v0.2.1 https://zalog.ro/placeholder-loading/
- * License: MIT
- **/
 .ph-item {
     position: relative;
     display: -webkit-box;
@@ -26088,3 +26085,171 @@ div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-chil
         transform: translate3d(30%, 0, 0);
     }
 }
+
+/*! fileicon.css v0.1.1 | MIT License | github.com/picturepan2/fileicon.css */
+/* fileicon.basic */
+.file-icon {
+    font-family: Arial, Tahoma, sans-serif;
+    font-weight: 300;
+    display: inline-block;
+    width: 24px;
+    height: 32px;
+    height: 30px;
+    background: #018fef;
+    position: relative;
+    border-radius: 2px;
+    text-align: left;
+    -webkit-font-smoothing: antialiased;
+}
+
+.file-icon::before {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    border-bottom-left-radius: 2px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #eee #eee rgba(255, 255, 255, .35) rgba(255, 255, 255, .35);
+}
+
+.file-icon::after {
+    display: block;
+    content: attr(data-type);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    font-size: 12px;
+    color: #fff;
+    text-transform: lowercase;
+    width: 100%;
+    padding: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    transform: scale(0.9);
+    font-family: arial;
+}
+
+/* fileicons */
+.file-icon-xs {
+    width: 12px;
+    height: 16px;
+    border-radius: 2px;
+}
+
+.file-icon-xs::before {
+    border-bottom-left-radius: 1px;
+    border-width: 3px;
+}
+
+.file-icon-xs::after {
+    content: "";
+    border-bottom: 2px solid rgba(255, 255, 255, .45);
+    width: auto;
+    left: 2px;
+    right: 2px;
+    bottom: 3px;
+}
+
+.file-icon-sm {
+    width: 18px;
+    height: 24px;
+    border-radius: 2px;
+}
+
+.file-icon-sm::before {
+    border-bottom-left-radius: 2px;
+    border-width: 4px;
+}
+
+.file-icon-sm::after {
+    font-size: 7px;
+    padding: 2px;
+}
+
+.file-icon-lg {
+    width: 48px;
+    height: 64px;
+    border-radius: 3px;
+}
+
+.file-icon-lg::before {
+    border-bottom-left-radius: 2px;
+    border-width: 8px;
+}
+
+.file-icon-lg::after {
+    font-size: 16px;
+    padding: 4px 6px;
+}
+
+.file-icon-xl {
+    width: 96px;
+    height: 128px;
+    border-radius: 4px;
+}
+
+.file-icon-xl::before {
+    border-bottom-left-radius: 4px;
+    border-width: 16px;
+}
+
+.file-icon-xl::after {
+    font-size: 24px;
+    padding: 4px 10px;
+}
+
+/* fileicon.types */
+.file-icon[data-type=zip],
+.file-icon[data-type=rar] {
+    background: #acacac;
+}
+
+.file-icon[data-type^=doc] {
+    background: #307cf1;
+}
+
+.file-icon[data-type^=xls] {
+    background: #0f9d58;
+}
+
+.file-icon[data-type^=ppt] {
+    background: #d24726;
+}
+
+.file-icon[data-type=pdf] {
+    background: #e13d34;
+}
+
+.file-icon[data-type=txt] {
+    background: #5eb533;
+}
+
+.file-icon[data-type=mp3],
+.file-icon[data-type=wma],
+.file-icon[data-type=m4a],
+.file-icon[data-type=flac] {
+    background: #8e44ad;
+}
+
+.file-icon[data-type=mp4],
+.file-icon[data-type=wmv],
+.file-icon[data-type=mov],
+.file-icon[data-type=avi],
+.file-icon[data-type=mkv] {
+    background: #7a3ce7;
+}
+
+.file-icon[data-type=bmp],
+.file-icon[data-type=jpg],
+.file-icon[data-type=jpeg],
+.file-icon[data-type=gif],
+.file-icon[data-type=png] {
+    background: #f4b400;
+}

src/main/webapp/assets/css/rb-page.css

@@ -601,51 +601,27 @@ a {
     margin-right: 0
 }
 
-.file-field .img-thumbnail>i.ftype {
+.file-field .img-thumbnail>i.file-icon {
     float: left;
-    width: 28px;
+    margin-left: 2px;
-    height: 28px;
-    line-height: 1;
-    background: url(../img/ft-icons/icon-txt.png) no-repeat center center;
-    background-size: 28px auto;
-    margin: 1px;
 }
 
-.file-field .img-thumbnail>i.ftype.png {
+.file-field .img-thumbnail>i.file-icon::after {
-    background-image: url(../img/ft-icons/icon-png.png)
+    padding: 0;
-}
+    padding-left: 2px
-
-.file-field .img-thumbnail>i.ftype.word {
-    background-image: url(../img/ft-icons/icon-word.png)
-}
-
-.file-field .img-thumbnail>i.ftype.ppt {
-    background-image: url(../img/ft-icons/icon-ppt.png)
-}
-
-.file-field .img-thumbnail>i.ftype.excel {
-    background-image: url(../img/ft-icons/icon-excel.png)
-}
-
-.file-field .img-thumbnail>i.ftype.pdf {
-    background-image: url(../img/ft-icons/icon-pdf.png)
-}
-
-.file-field .img-thumbnail>i.ftype.mp4 {
-    background-image: url(../img/ft-icons/icon-mp4.png)
 }
 
 .file-field .img-thumbnail>span {
-    margin-left: 32px;
+    margin-left: 30px;
     display: block;
     word-break: break-all;
     height: 30px;
-    padding: 0 4px;
+    padding: 1px 4px;
     padding-left: 2px;
-    line-height: 1.2rem;
+    line-height: 1.15rem;
-    vertical-align: middle;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: 12px;
 }
 
 .datetime-field .input-group-append button {

src/main/webapp/assets/js/rb-forms.jsx

@@ -499,7 +499,7 @@ class RbFormImage extends RbFormElement {
           return (<span key={'file-' + item}><a title={fileName} className="img-thumbnail img-upload"><img src={itemUrl + '?imageView2/2/w/100/interlace/1/q/100'} /><b title="移除" onClick={() => this.removeItem(item)}><span className="zmdi zmdi-close"></span></b></a></span>)
         })}
         {this.state.showUploader === false ? null :
-          <span title={'上传图片。需要 ' + this.__minUpload + '～' + this.__maxUpload + ' 张'}>
+          <span title={'上传图片。需要 ' + this.__minUpload + '~' + this.__maxUpload + ' 张'}>
             <input type="file" className="inputfile" ref="upload-input" id={this.props.field + '-input'} accept="image/*" />
             <label htmlFor={this.props.field + '-input'} className="img-thumbnail img-upload"><span className="zmdi zmdi-image-alt"></span></label>
           </span>
@@ -564,13 +564,16 @@ class RbFormFile extends RbFormImage {
       <div className="file-field">
         {this.state.value.map((item) => {
           let fileName = $fileCutName(item)
-          let fileIcon = $fileDetectingIcon(fileName)
+          let fileExt = $fileExtName(fileName)
-          return (<div key={'file-' + item} className="img-thumbnail" title={fileName}><i className={'ftype ' + fileIcon} /><span>{fileName}</span><b title="移除" onClick={() => this.removeItem(item)}><span className="zmdi zmdi-close"></span></b></div>)
+          return (<div key={'file-' + item} className="img-thumbnail" title={fileName}>
+            <i className="file-icon" data-type={fileExt} /><span>{fileName}</span>
+            <b title="移除" onClick={() => this.removeItem(item)}><span className="zmdi zmdi-close"></span></b>
+          </div>)
         })}
         {this.state.showUploader === false ? null :
           <div className="file-select">
             <input type="file" className="inputfile" ref="upload-input" id={this.props.field + '-input'} />
-            <label title={'上传文件。需要 ' + this.__minUpload + '～' + this.__maxUpload + ' 个'} htmlFor={this.props.field + '-input'} className="btn-secondary">
+            <label title={'上传文件。需要 ' + this.__minUpload + '~' + this.__maxUpload + ' 个'} htmlFor={this.props.field + '-input'} className="btn-secondary">
               <i className="zmdi zmdi-upload"></i><span>上传文件</span>
             </label>
           </div>
@@ -587,8 +590,10 @@ class RbFormFile extends RbFormImage {
       {this.state.value.map((item) => {
         let itemUrl = rb.baseUrl + '/filex/download/' + item
         let fileName = $fileCutName(item)
-        let fileIcon = $fileDetectingIcon(fileName)
+        let fileExt = $fileExtName(fileName)
-        return <a key={'file-' + item} title={fileName} onClick={this.clickPreview.bind(this, itemUrl)} className="img-thumbnail" href={itemUrl} target="_blank" rel="noopener noreferrer"><i className={'ftype ' + fileIcon} /><span>{fileName}</span></a>
+        return <a key={'file-' + item} title={fileName} onClick={this.clickPreview.bind(this, itemUrl)} className="img-thumbnail" href={itemUrl} target="_blank" rel="noopener noreferrer">
+          <i className="file-icon" data-type={fileExt} /><span>{fileName}</span>
+        </a>
       })}
     </div>)
   }

src/main/webapp/assets/js/rb-page.js

@@ -186,15 +186,10 @@ var $fileCutName = function (fileName) {
   fileName = fileName[fileName.length - 1]
   return fileName.substr(fileName.indexOf('__') + 2)
 }
-var $fileDetectingIcon = function (fileName) {
+var $fileExtName = function (fileName) {
-  fileName = fileName.toLowerCase()
+  fileName = (fileName || '').toLowerCase()
-  if (fileName.endsWith('.png') || fileName.endsWith('.gif') || fileName.endsWith('.jpg') || fileName.endsWith('.jpeg') || fileName.endsWith('.bmp')) return 'png'
+  fileName = fileName.split('.')
-  else if (fileName.endsWith('.doc') || fileName.endsWith('.docx')) return 'word'
+  return fileName[fileName.length - 1] || ''
-  else if (fileName.endsWith('.ppt') || fileName.endsWith('.pptx')) return 'ppt'
-  else if (fileName.endsWith('.xls') || fileName.endsWith('.xlsx')) return 'excel'
-  else if (fileName.endsWith('.pdf')) return 'pdf'
-  else if (fileName.endsWith('.mp4') || fileName.endsWith('.rmvb') || fileName.endsWith('.rm') || fileName.endsWith('.avi') || fileName.endsWith('.flv')) return 'mp4'
-  return ''
 }
 
 var $gotoSection = function (top, target) {
@@ -247,8 +242,7 @@ var $createUploader = function (input, next, complete, error) {
           return false
         }
       },
-      onClientLoad: function (e, file) {
+      onClientLoad: function (e, file) {},
-      },
       onClientProgress: function (e, file) {
         typeof next === 'function' && next({ percent: e.loaded * 100 / e.total })
       },