Table icon size modify (#2816)

* repair img tag error bug

* set img size by tag inline style

* delete unnessary css style

frontend/src/components/dirent-detail/dirent-details.js

@@ -95,18 +95,31 @@ class DirentDetail extends React.Component {
 
   render() {
     let { dirent } = this.props;
+    let size = Utils.isHiDPI() ? 48 : 24;
+
+    let iconUrl = '';
+    if (dirent.type === 'file') {
+      iconUrl = Utils.getFileIconUrl(dirent.name, size);
+    } else {
+      let isReadOnly = false;
+      if (dirent.permission === 'r' || dirent.permission === 'preview') {
+        isReadOnly = true;
+      }
+      iconUrl = Utils.getFolderIconUrl({isReadOnly, size});
+    }
+
     return (
       <div className="detail-container">
         <div className="detail-header">
           <div className="detail-control sf2-icon-x1" onClick={this.props.onItemDetailsClose}></div>
           <div className="detail-title dirent-title">
-            <img src={dirent.type === 'dir' ? siteRoot + 'media/img/folder-192.png' : siteRoot + 'media/img/file/192/txt.png'} alt="icon"></img>
+            <img src={iconUrl} width="24" alt="" />
             <span className="name ellipsis" title={dirent.name}>{dirent.name}</span>
           </div>
         </div>
         <div className="detail-body dirent-info">
           <div className="img">
-            <img src={dirent.type === 'dir' ? siteRoot + 'media/img/folder-192.png' : siteRoot + 'media/img/file/192/txt.png'} alt="icon"></img>
+            <img src={iconUrl} alt="" />
           </div>
           {this.state.direntDetail && 
             <div className="dirent-table-container">

frontend/src/components/dirent-detail/lib-details.js

@@ -30,18 +30,28 @@ class LibDetail extends React.Component {
 
   render() {
     let repo = this.props.currentRepo;
+    let isReadOnly = false;
+    if (repo.permission === 'r' || repo.permission === 'preview') {
+      isReadOnly = true;
+    }
+    let iconUrl = Utils.getLibIconUrl({
+      is_encrypted: repo.encrypted, 
+      is_readonly: isReadOnly,
+      size: Utils.isHiDPI() ? 48 : 24
+    });
+
     return (
       <div className="detail-container">
         <div className="detail-header">
           <div className="detail-control sf2-icon-x1" onClick={this.props.closeDetails}></div>
           <div className="detail-title dirent-title">
-            <img src={siteRoot + 'media/img/lib/256/lib.png'} alt="icon"></img>{'  '}
+            <img src={iconUrl} width="24" alt="" />{'  '}
             <span className="name ellipsis" title={repo.repo_name}>{repo.repo_name}</span>
           </div>
         </div>
         <div className="detail-body dirent-info">
           <div className="img">
-            <img src={siteRoot + 'media/img/lib/256/lib.png'} alt="icon"></img>
+            <img src={iconUrl} alt="" />
           </div>
           <div className="dirent-table-container">
             <table className="table-thead-hidden">

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import MD5 from 'MD5';
 import { UncontrolledTooltip } from 'reactstrap';
-import { gettext, siteRoot } from '../../utils/constants';
+import { gettext, siteRoot, mediaUrl } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
@@ -409,8 +409,17 @@ class DirentListItem extends React.Component {
       });
     }
 
-    const fileIconSize = Utils.isHiDPI() ? 48 : 24;
-    const fileIconUrl = dirent.type == 'file' ? Utils.getFileIconUrl(dirent.name, fileIconSize) : '';
+    let size = Utils.isHiDPI() ? 48 : 24;
+    let iconUrl = '';
+    if (dirent.type === 'file') {
+      iconUrl = Utils.getFileIconUrl(dirent.name, size);
+    } else {
+      let isReadOnly = false;
+      if (dirent.permission === 'r' || dirent.permission === 'preview') {
+        isReadOnly = true;
+      }
+      iconUrl = Utils.getFolderIconUrl({isReadOnly, size});
+    }
 
     return (
       <Fragment>
@@ -424,8 +433,8 @@ class DirentListItem extends React.Component {
           </td>
           <td className="text-center">
             <div className="dir-icon">
-              <img className="icon" src={dirent.type === 'dir' ? siteRoot + 'media/img/folder-192.png' : fileIconUrl} alt='' />
-              {dirent.is_locked && <img className="locked" src={siteRoot + 'media/img/file-locked-32.png'} alt={gettext('locked')} />}
+              <img src={iconUrl} width="24" alt='' />
+              {dirent.is_locked && <img className="locked" src={siteRoot + mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} />}
             </div>
           </td>
           <td className="name">

frontend/src/components/draft-list-view/draft-list-item.js

@@ -56,9 +56,12 @@ class DraftListItem extends React.Component {
     let reviewUrl = siteRoot + 'drafts/review/' + draft.review_id + '/';
     let localTime = moment.utc(draft.updated_at).toDate();
     localTime = moment(localTime).fromNow();
+
+    let size = Utils.isHiDPI() ? 48 : 24;
+    let iconUrl = Utils.getFileIconUrl(fileName, size);
     return (
       <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td className="text-center"><img className="icon" src={siteRoot + 'media/img/file/192/txt.png'} alt='icon' /></td>
+        <td className="text-center"><img src={iconUrl} width="24" alt='' /></td>
         <td className="name" >
           <a href={draftUrl} target="_blank">{fileName}</a>
         </td>

frontend/src/components/review-list-view/review-list-item.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Tooltip } from 'reactstrap';
 import { siteRoot, lang } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 
 moment.locale(lang);
 const propTypes = {
@@ -101,9 +102,12 @@ class ReviewListItem extends React.Component {
     let localTime = moment.utc(item.updated_at).toDate();
     localTime = moment(localTime).fromNow();
 
+    let size = Utils.isHiDPI() ? 48 : 24;
+    let iconUrl = Utils.getFileIconUrl(fileName, size);
+
     return (
       <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td className="text-center" style={{width: '4%'}}><img className="icon" src={siteRoot + 'media/img/file/192/txt.png'} alt="icon"/></td>
+        <td className="text-center" style={{width: '4%'}}><img src={iconUrl} width="24" alt="" /></td>
         <td style={{width: '26%'}}><a href={reviewUrl} target="_blank">{fileName}</a></td>
         <td className='library' style={{width: '25%'}}>{item.draft_origin_repo_name}</td>
         <td className="update" style={{width: '20%'}}>{localTime}</td>

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -293,7 +293,7 @@ class SharedRepoListItem extends React.Component {
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
-          <td><img className="icon" src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
+          <td><img src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
           <td><Link to={libPath}>{repo.repo_name}</Link></td>
           <td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
           <td>{repo.size}</td>
@@ -323,7 +323,7 @@ class SharedRepoListItem extends React.Component {
     return (
       <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
-          <td><img className="icon" src={iconUrl} title={iconTitle} alt={iconTitle}/></td>
+          <td><img src={iconUrl} title={iconTitle} width="24" alt={iconTitle}/></td>
           <td>
             <Link to={libPath}>{repo.repo_name}</Link><br />
             <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span>

frontend/src/components/tree-dir-view/tree-dir-list.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { siteRoot } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 
 const propTypes = {
   node: PropTypes.object.isRequired,
@@ -21,7 +22,6 @@ class TreeDirList extends React.Component {
     this.setState({highlight: true});
   }
 
-
   onMouseLeave = () => {
     this.setState({highlight: false});
   }
@@ -34,10 +34,23 @@ class TreeDirList extends React.Component {
   render() {
     let node = this.props.node;
     let href = siteRoot + 'wikis' + node.path;
+
+    let size = Utils.isHiDPI() ? 48 : 24;
+    let iconUrl = '';
+    if (node.type === 'file') {
+      iconUrl = Utils.getFileIconUrl(node.name, size);
+    } else {
+      let isReadOnly = false;
+      if (node.permission === 'r' || node.permission === 'preview') {
+        isReadOnly = true;
+      }
+      iconUrl = Utils.getFolderIconUrl({isReadOnly, size});
+    }
+
     return (
       <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="text-center">
-          <img className="icon" src={node.type === 'dir' ? siteRoot + 'media/img/folder-192.png' : siteRoot + 'media/img/file/192/txt.png'} alt='icon'></img>
+          <img src={iconUrl} width="24" alt="" />
         </td>
         <td className="name">
           <a href={href} onClick={this.onMainNodeClick}>{node.name}</a>