optimized getIcon interface (#2904)

* optimized getIcon interface

* optimzied get lib-icon code

* repair share-repo bug

frontend/src/components/dialog/share-repo-dialog.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
-import { gettext, siteRoot } from '../../utils/constants';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Alert } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
+import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 import Repo from '../../models/repo';
-import toaster from '../toast';
 
 const shareRepoListItemProps = {
   repo: PropTypes.object.isRequired,
@@ -28,10 +28,11 @@ class ShareRepoListItem extends React.Component {
 
   render() {
     let repo = this.props.repo;
+    let iconUrl = Utils.getLibIconUrl(repo);
     return (
       <tr>
         <td className="text-center"><input type="checkbox" className="vam" name="repo" onChange={this.onRepoSelect} /></td>
-        <td className="text-center"><img src={siteRoot + 'media/img/lib/48/lib.png'} alt={gettext('icon')} /></td>
+        <td className="text-center"><img src={iconUrl} width="24" alt={gettext('icon')} /></td>
         <td className="name">{repo.repo_name}</td>
         <td>{moment(repo.last_modified).fromNow()}</td>
         <td>
@@ -61,6 +62,7 @@ class ShareRepoDialog extends React.Component {
       currentRepo: null,
       permission: 'rw',
       selectedRepoList: [],
+      errMessage: '',
     };
   }
 
@@ -100,7 +102,8 @@ class ShareRepoDialog extends React.Component {
 
   handleSubmit = () => {
     if (this.state.selectedRepoList.length === 0) {
-      toaster.danger(gettext('Please select a library to share.'));
+      let errMessage = gettext('Please select a library to share.')
+      this.setState({errMessage: errMessage});
       return;
     }
 
@@ -141,6 +144,7 @@ class ShareRepoDialog extends React.Component {
             </tbody>
           </table>
         </ModalBody>
+        {this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
         <ModalFooter>
           <Button color="secondary" onClick={this.onCloseDialog}>{gettext('Close')}</Button>
           <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>

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

@@ -94,24 +94,8 @@ class DirentDetail extends React.Component {
 
   render() {
     let { dirent } = this.props;
-    
-    let smallIconUrl = '';
-    let bigIconUrl = '';
-    let smallIconSize = Utils.isHiDPI() ? 48 : 24;
-    let bigIconSize = 192;
-    if (dirent.type === 'file') {
-      smallIconUrl = Utils.getFileIconUrl(dirent.name, smallIconSize);
-      bigIconUrl = Utils.getFileIconUrl(dirent.name, bigIconSize);
-    } else {
-      let isReadOnly = false;
-      if (dirent.permission === 'r' || dirent.permission === 'preview') {
-        isReadOnly = true;
-      }
-      let options = {isReadOnly: isReadOnly, size: smallIconSize};
-      smallIconUrl = Utils.getFolderIconUrl(options);
-      options.size = bigIconSize;
-      bigIconUrl = Utils.getFolderIconUrl(options);
-    }
+    let smallIconUrl = Utils.getDirentIcon(dirent);
+    let bigIconUrl = Utils.getDirentIcon(dirent, true);
 
     return (
       <div className="detail-container">

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

@@ -38,32 +38,21 @@ class LibDetail extends React.Component {
 
   render() {
     let repo = this.props.currentRepo;
-    let isReadOnly = false;
-    if (repo.permission === 'r' || repo.permission === 'preview') {
-      isReadOnly = true;
-    }
-    let titleIcon = Utils.getLibIconUrl({
-      is_encrypted: repo.encrypted,
-      is_readonly: isReadOnly,
-      size: Utils.isHiDPI() ? 48 : 24
-    });
-    let iconUrl = Utils.getLibIconUrl({
-      is_encrypted: repo.encrypted, 
-      is_readonly: isReadOnly,
-    });
+    let smallIconUrl = Utils.getLibIconUrl(repo);
+    let bigIconUrl = Utils.getLibIconUrl(repo, true);
 
     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={titleIcon} width="24" height="24" alt="" />{'  '}
+            <img src={smallIconUrl} width="24" height="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={iconUrl} height="96"  alt="" />
+            <img src={bigIconUrl} height="96"  alt="" />
           </div>
           <div className="dirent-table-container">
             <table className="table-thead-hidden">

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

@@ -353,17 +353,7 @@ class DirentListItem extends React.Component {
       });
     }
 
-    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});
-    }
+    let iconUrl = Utils.getDirentIcon(dirent);
 
     const {repoEncrypted, isRepoOwner, isAdmin} = this.props;
     let showShare = false;

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

@@ -57,8 +57,7 @@ class DraftListItem extends React.Component {
     let localTime = moment.utc(draft.updated_at).toDate();
     localTime = moment(localTime).fromNow();
 
-    let size = Utils.isHiDPI() ? 48 : 24;
-    let iconUrl = Utils.getFileIconUrl(fileName, size);
+    let iconUrl = Utils.getFileIconUrl(fileName);
     return (
       <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="text-center"><img src={iconUrl} width="24" alt='' /></td>

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

@@ -102,8 +102,7 @@ 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);
+    let iconUrl = Utils.getFileIconUrl(fileName);
 
     return (
       <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>

frontend/src/components/search/search-result-item.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 
 const propTypes = {
@@ -17,8 +16,7 @@ class SearchResultItem extends React.Component {
 
   render() {
     let item = this.props.item;
-    let fileIconSize = Utils.isHiDPI() ? 48 : 24;
-    let fileIconUrl = item.is_dir ? siteRoot + 'media/img/folder-192.png' : Utils.getFileIconUrl(item.name, fileIconSize);
+    let fileIconUrl = item.is_dir ? Utils.getFolderIconUrl(false, 192) : Utils.getFileIconUrl(item.name, 192);
     return (
       <li className="search-result-item" onClick={this.onClickHandler}>
         <img className="item-img" src={fileIconUrl} alt="" />

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

@@ -80,21 +80,9 @@ class SharedRepoListItem extends React.Component {
 
   getRepoComputeParams = () => {
     let repo = this.props.repo;
-    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
-    });
-    let iconTitle = Utils.getLibIconTitle({
-      'encrypted': repo.encrypted,
-      'is_admin': repo.is_admin,
-      'permission': repo.permission
-    });
-
+    
+    let iconUrl = Utils.getLibIconUrl(repo);
+    let iconTitle = Utils.getLibIconTitle(repo);
     let libPath = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
 
     return { iconUrl, iconTitle, libPath };

frontend/src/components/wiki-dir-list-view/wiki-dir-list-item.js

@@ -34,18 +34,7 @@ class WikiDirListItem extends React.Component {
   render() {
     let { path, dirent } = this.props;
     let href = siteRoot + 'wikis' + Utils.joinPath(path, dirent.name);
-
-    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});
-    }
+    let iconUrl = Utils.getDirentIcon(dirent);
 
     return (
       <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>

frontend/src/pages/my-libs/item.js

@@ -164,22 +164,9 @@ class Item extends Component {
 
   render() {
     const data = this.props.data;
-    const permission = data.permission;
-
-    let is_readonly = false;
-    if (permission == 'r' || permission == 'preview') {
-      is_readonly = true;
-    }
-    data.icon_url = Utils.getLibIconUrl({
-      is_encrypted: data.encrypted,
-      is_readonly: is_readonly, 
-      size: Utils.isHiDPI() ? 48 : 24
-    }); 
-    data.icon_title = Utils.getLibIconTitle({
-      'encrypted': data.encrypted,
-      'is_admin': data.is_admin,
-      'permission': permission
-    });
+    
+    data.icon_url = Utils.getLibIconUrl(data); 
+    data.icon_title = Utils.getLibIconTitle(data);
     data.url = `${siteRoot}library/${data.repo_id}/${Utils.encodePath(data.repo_name)}/`;
 
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';

frontend/src/pages/share-admin/folders.js

@@ -120,10 +120,7 @@ class Item extends Component {
     if (share_permission == 'r' || share_permission == 'preview') {
       is_readonly = true;
     }
-    let iconUrl = Utils.getFolderIconUrl({
-      is_readonly: is_readonly, 
-      size: Utils.isHiDPI() ? 48 : 24
-    }); 
+    let iconUrl = Utils.getFolderIconUrl(is_readonly); 
     let iconTitle = Utils.getFolderIconTitle({
       'permission': share_permission
     });

frontend/src/pages/share-admin/libraries.js

@@ -117,22 +117,9 @@ class Item extends Component {
 
   getRepoParams = () => {
     let item = this.props.item;
-    const { share_permission, is_admin } = this.state;
-
-    let is_readonly = false;
-    if (share_permission == 'r' || share_permission == 'preview') {
-      is_readonly = true;
-    }
-    let iconUrl = Utils.getLibIconUrl({
-      is_encrypted: item.encrypted,
-      is_readonly: is_readonly, 
-      size: Utils.isHiDPI() ? 48 : 24
-    }); 
-    let iconTitle = Utils.getLibIconTitle({
-      'encrypted': item.encrypted,
-      'is_admin': is_admin,
-      'permission': share_permission
-    });
+    
+    let iconUrl = Utils.getLibIconUrl(item); 
+    let iconTitle = Utils.getLibIconTitle(item);
     let repoUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}`;
 
     return { iconUrl, iconTitle, repoUrl };

frontend/src/pages/share-admin/share-links.js

@@ -125,17 +125,13 @@ class Item extends Component {
 
   getLinkParams = () => {
     let item = this.props.item;
-    let icon_size = Utils.isHiDPI() ? 48 : 24;
     let iconUrl = '';
     let linkUrl = '';
     if (item.is_dir) {
-      iconUrl = Utils.getFolderIconUrl({
-        is_readonly: false, 
-        size: icon_size
-      });
+      iconUrl = Utils.getFolderIconUrl(false);
       linkUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}${Utils.encodePath(item.path)}`;
     } else {
-      iconUrl = Utils.getFileIconUrl(item.obj_name, icon_size); 
+      iconUrl = Utils.getFileIconUrl(item.obj_name); 
       linkUrl = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
     }
 

frontend/src/pages/share-admin/upload-links.js

@@ -107,12 +107,7 @@ class Item extends Component {
 
   getUploadParams = () => {
     let item = this.props.item;
-    let icon_size = Utils.isHiDPI() ? 48 : 24;
-    let iconUrl = Utils.getFolderIconUrl({
-      is_readonly: false, 
-      size: icon_size
-    });
-
+    let iconUrl = Utils.getFolderIconUrl(false);
     let uploadUrl = `${siteRoot}library/${item.repo_id}/${item.repo_name}${Utils.encodePath(item.path)}`;
 
     return { iconUrl, uploadUrl };

frontend/src/pages/shared-libs/shared-libs.js

@@ -182,22 +182,9 @@ class Item extends Component {
     }
 
     const data = this.props.data;
-    const permission = data.permission;
 
-    let is_readonly = false;
-    if (permission == 'r' || permission == 'preview') {
-      is_readonly = true;
-    }
-    data.icon_url = Utils.getLibIconUrl({
-      is_encrypted: data.encrypted,
-      is_readonly: is_readonly, 
-      size: Utils.isHiDPI() ? 48 : 24
-    }); 
-    data.icon_title = Utils.getLibIconTitle({
-      'encrypted': data.encrypted,
-      'is_admin': data.is_admin,
-      'permission': permission
-    });
+    data.icon_url = Utils.getLibIconUrl(data); 
+    data.icon_title = Utils.getLibIconTitle(data);
     data.url = `${siteRoot}#shared-libs/lib/${data.repo_id}/`;
 
     let iconVisibility = this.state.showOpIcon ? '' : ' invisible';

frontend/src/pages/starred/starred.js

@@ -91,9 +91,8 @@ class TableBody extends Component {
   render() {
 
     let listFilesActivities = this.state.items.map(function(item, index) {
-      let fileIconSize = Utils.isHiDPI() ? 48 : 24;
 
-      item.file_icon_url = Utils.getFileIconUrl(item.file_name, fileIconSize);
+      item.file_icon_url = Utils.getFileIconUrl(item.file_name);
       item.encoded_path = Utils.encodePath(item.path);
 
       item.thumbnail_url = item.encoded_thumbnail_src ? `${siteRoot}${item.encoded_thumbnail_src}` : '';

frontend/src/utils/utils.js

@@ -89,28 +89,6 @@ export const Utils = {
     'default' : 'file.png'
   },
 
-  getFileIconUrl: function(filename, size) {
-    if (size > 24) {
-      size = 192;
-    } else {
-      size = 24;
-    }
-
-    var file_ext;
-    if (filename.lastIndexOf('.') == -1) {
-      return mediaUrl + 'img/file/' + size + '/'
-        + this.FILEEXT_ICON_MAP['default'];
-    } else {
-      file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
-    }
-
-    if (this.FILEEXT_ICON_MAP[file_ext]) {
-      return mediaUrl + 'img/file/' + size + '/' + this.FILEEXT_ICON_MAP[file_ext];
-    } else {
-      return mediaUrl + 'img/file/' + size + '/' + this.FILEEXT_ICON_MAP['default'];
-    }
-  },
-
   // check if a file is an image
   imageCheck: function (filename) {
     // no file ext
@@ -242,45 +220,71 @@ export const Utils = {
       navigator.userAgent.indexOf('Chrome') > -1;
   },
 
-  getLibIconUrl: function(options) {
-    /*
-     * param: {is_encrypted, is_readonly, size}
-     */
-    // icon name
-    var icon_name = 'lib.png';
-    if (options.is_encrypted) {
+  getLibIconUrl: function(repo, isBig) {
+    let permission = repo.permission || repo.share_permission; //Compatible with regular repo and repo shared
+    let size = Utils.isHiDPI() ? 48 : 24;
+    size = isBig ? 256 : size;
+    let icon_name = 'lib.png';
+    if (repo.encrypted) {
       icon_name = 'lib-encrypted.png';
     }
-    if (options.is_readonly) {
+    if (permission === 'r' || permission === 'perview') {
       icon_name = 'lib-readonly.png';
     }
 
-    // icon size
-    var icon_size = options.size || 256; // 'size' can be 24, 48, or undefined. (2017.7.31)
-
-    return mediaUrl + 'img/lib/' + icon_size + '/' + icon_name;
+    return mediaUrl + 'img/lib/' + size + '/' + icon_name;
   },
 
-  getFolderIconUrl: function(options) {
-    /*
-     * param: {is_readonly, size}
-     */
-    const readonly = options.is_readonly;
-    const size = options.size;
-    return `${mediaUrl}img/folder${readonly ? '-read-only' : ''}${size > 24 ? '-192' : '-24'}.png`;
+  getDirentIcon: function (dirent, isBig) {
+    let size = this.isHiDPI() ? 48 : 24;
+    size = isBig ? 192 : size;
+    if (dirent.isDir()) {
+      let readonly = false;
+      if (dirent.permission && (dirent.permission === 'r' || dirent.permission === 'preview')) {
+        readonly = true;
+      }
+      return this.getFolderIconUrl(readonly, size);
+    } else {
+      return this.getFileIconUrl(dirent.name, size);
+    }
   },
 
-  getLibIconTitle: function(options) {
-    /*
-     * param: {encrypted, is_admin, permission}
-     */
+  getFolderIconUrl: function(readonly = false, size) {
+    if (!size) {
+      size = Utils.isHiDPI() ? 48 : 24;
+    }
+    size = size > 24 ? 192 : 24;
+    return `${mediaUrl}img/folder${readonly ? '-read-only-' : '-'}${size}.png`;
+  },
+
+  getFileIconUrl: function(filename, size) {
+    if (!size) {
+      size = Utils.isHiDPI() ? 48 : 24;
+    }
+    size = size > 24 ? 192 : 24;
+    let file_ext = '';
+    if (filename.lastIndexOf('.') == -1) {
+      return mediaUrl + 'img/file/' + size + '/' + this.FILEEXT_ICON_MAP['default'];
+    } else {
+      file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+    }
+
+    if (this.FILEEXT_ICON_MAP[file_ext]) {
+      return mediaUrl + 'img/file/' + size + '/' + this.FILEEXT_ICON_MAP[file_ext];
+    } else {
+      return mediaUrl + 'img/file/' + size + '/' + this.FILEEXT_ICON_MAP['default'];
+    }
+  },
+
+  getLibIconTitle: function(repo) {
     var title;
-    if (options.encrypted) {
+    let permission = repo.permission || repo.share_permission; //Compatible with regular repo and repo shared
+    if (repo.encrypted) {
       title = gettext("Encrypted library");
-    } else if (options.is_admin) { // shared with 'admin' permission
+    } else if (repo.is_admin) { // shared with 'admin' permission
       title = gettext("Admin access");
     } else {
-      switch(options.permission) {
+      switch(permission) {
         case 'rw':
           title = gettext("Read-Write library");
           break;