[long name] fixup for UIs with long library/folder/file names (#5971)

* [long name] fixup for UIs with long library/folder/file names

* fixed code indentation

frontend/src/components/dialog/change-repo-password-dialog.js

@@ -95,12 +95,13 @@ class ChangeRepoPasswordDialog extends React.Component {
   render() {
     const { repoName, toggleDialog } = this.props;
 
+    let title = gettext('Change Password of Library {placeholder}');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
+
     return (
       <Modal isOpen={true} style={{height: 'auto'}} toggle={toggleDialog}>
         <ModalHeader toggle={toggleDialog}>
-          <span>
-            {Utils.generateDialogTitle(gettext('Change Password of Library {placeholder}'), repoName)}
-          </span>
+          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           <form id="repo-change-passwd-form" action="" method="post">

frontend/src/components/dialog/commit-details.js

@@ -91,7 +91,7 @@ class Content extends React.Component {
               <ul>
                 {
                   data[item.type].map((item, index) => {
-                    return <li key={index} dangerouslySetInnerHTML={{__html: item}} className="commit-detail-item"></li>;
+                    return <li key={index} dangerouslySetInnerHTML={{__html: item}} className="commit-detail-item text-truncate"></li>;
                   })
                 }
               </ul>

frontend/src/components/dialog/copy-dirent-dialog.js

@@ -140,14 +140,17 @@ class CopyDirent extends React.Component {
   render() {
     let title = gettext('Copy {placeholder} to');
     if (!this.props.isMutipleOperation) {
-      title = title.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+      title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
     } else {
       title = gettext('Copy selected item(s) to:');
     }
     let mode = 'current_repo_and_other_repos';
+    const { isMutipleOperation } = this.props;
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
+        <ModalHeader toggle={this.toggle}>
+          {isMutipleOperation ? title : <div dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></div>}
+        </ModalHeader>
         <ModalBody>
           <FileChooser
             repoID={this.props.repoID}

frontend/src/components/dialog/lib-history-setting-dialog.js

@@ -108,12 +108,13 @@ class LibHistorySetting extends React.Component {
   };
 
   render() {
-    const itemName = this.props.itemName;
+    const { itemName: repoName } = this.props;
+    let title = gettext('{placeholder} History Setting');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
-          <span className="op-target" title={itemName}>{itemName}</span>{' '}
-          {gettext('History Setting')}
+          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           <Form>

frontend/src/components/dialog/lib-sub-folder-permission-dialog.js

@@ -66,11 +66,13 @@ class LibSubFolderPermissionDialog extends React.Component {
 
   render() {
     const { repoName, folderName } = this.props;
+    let title = repoName ? gettext('{placeholder} Folder Permission') : gettext('Set permission of {placeholder}');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName || folderName) + '</span>');
     return (
       <div>
         <Modal isOpen={true} style={{maxWidth: '980px'}} className="share-dialog" toggle={this.props.toggleDialog}>
           <ModalHeader toggle={this.props.toggleDialog}>
-            <span>{repoName ? Utils.generateDialogTitle(gettext('{placeholder} Folder Permission'), repoName) : Utils.generateDialogTitle(gettext('Set {placeholder}\'s permission'), folderName)}</span>
+            <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
           </ModalHeader>
           <ModalBody className="dialog-list-container share-dialog-content" role="tablist">
             {this.renderContent()}

frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js

@@ -90,7 +90,7 @@ const propTypes = {
   repoID: PropTypes.string.isRequired,
   isDepartmentRepo: PropTypes.bool,
   folderPath: PropTypes.string.isRequired,
-  repoName: PropTypes.string.isRequired,
+  repoName: PropTypes.string,
 };
 
 

frontend/src/components/dialog/move-dirent-dialog.js

@@ -154,12 +154,12 @@ class MoveDirent extends React.Component {
   render() {
     let title = gettext('Move {placeholder} to');
     if (!this.props.isMutipleOperation) {
-      title = title.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
+      title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
     } else {
       title = gettext('Move selected item(s) to:');
     }
     let mode = 'current_repo_and_other_repos';
-    const { dirent, selectedDirentList } = this.props;
+    const { dirent, selectedDirentList, isMutipleOperation } = this.props;
     const movedDirent = dirent ? dirent : selectedDirentList[0];
     const { permission } = movedDirent;
     const { isCustomPermission } = Utils.getUserPermission(permission);
@@ -168,7 +168,9 @@ class MoveDirent extends React.Component {
     }
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
+        <ModalHeader toggle={this.toggle}>
+          {isMutipleOperation ? title : <div dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></div>}
+        </ModalHeader>
         <ModalBody>
           <FileChooser
             repoID={this.props.repoID}

frontend/src/components/dialog/repo-api-token-dialog.js

@@ -281,7 +281,7 @@ class RepoAPITokenDialog extends React.Component {
   render() {
     let repo = this.repo;
 
-    const itemName = '<span class="op-target">' + Utils.HTMLescape(repo.repo_name) + '</span>';
+    const itemName = '<span class="op-target text-truncate mr-1">' + Utils.HTMLescape(repo.repo_name) + '</span>';
     const title = gettext('{placeholder} API Token').replace('{placeholder}', itemName);
     return (
       <Modal
@@ -289,7 +289,7 @@ class RepoAPITokenDialog extends React.Component {
         toggle={this.props.onRepoAPITokenToggle}
       >
         <ModalHeader toggle={this.props.onRepoAPITokenToggle}>
-          <p dangerouslySetInnerHTML={{__html: title}} className="m-0"></p>
+          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           <div className="o-auto">

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

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
 import { gettext, canGenerateShareLink, canGenerateUploadLink } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 import RepoShareAdminShareLinks from './repo-share-admin/share-links';
 import RepoShareAdminUploadLinks from './repo-share-admin/upload-links';
 import RepoShareAdminUserShares from './repo-share-admin/user-shares';
@@ -48,12 +49,13 @@ class RepoShareAdminDialog extends React.Component {
   render() {
     const { activeTab } = this.state;
     const { repo_name: repoName } = this.props.repo;
-
+    let title = gettext('{placeholder} Share Admin');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
     return (
       <div>
         <Modal isOpen={true} style={{maxWidth: '760px'}} className="share-dialog" toggle={this.props.toggleDialog}>
           <ModalHeader toggle={this.props.toggleDialog}>
-            <span className="op-target" title={repoName}>{repoName}</span> {gettext('Share Admin')}
+            <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
           </ModalHeader>
           <ModalBody className="dialog-list-container share-dialog-content" role="tablist">
             <Fragment>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js

@@ -106,12 +106,13 @@ class SysAdminLibHistorySettingDialog extends React.Component {
   };
 
   render() {
-    const itemName = this.props.itemName;
+    const { itemName: repoName } = this.props;
+    let title = gettext('{placeholder} History Setting');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
-          <span className="op-target" title={itemName}>{itemName}</span>{' '}
-          {gettext('History Setting')}
+          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           <Form>

frontend/src/components/dialog/transfer-dialog.js

@@ -60,15 +60,19 @@ class TransferDialog extends React.Component {
   };
 
   render() {
-    const itemName = this.props.itemName;
     let canTransferToDept = true;
     if (this.props.canTransferToDept != undefined) {
       canTransferToDept = this.props.canTransferToDept;
     }
+
+    const { itemName: repoName } = this.props;
+    let title = gettext('Transfer Library {library_name}');
+    title = title.replace('{library_name}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
+
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
-          <span>{gettext('Transfer Library {library_name}').replace('{library_name}', itemName)}</span>
+          <span dangerouslySetInnerHTML={{__html: title}} className="d-flex mw-100"></span>
         </ModalHeader>
         <ModalBody>
           {this.state.transferToUser ?

frontend/src/components/file-chooser/repo-list-item.js

@@ -82,7 +82,7 @@ class RepoListItem extends React.Component {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
-  }
+  };
 
   addResponseListToNode = (list, node) => {
     node.isLoaded = true;

frontend/src/components/file-view/file-info.js

@@ -30,9 +30,9 @@ class FileInfo extends React.PureComponent {
     const starredText = isStarred ? gettext('starred') : gettext('unstarred');
     const lockedText = gettext('locked');
     return (
-      <div>
+      <div className="text-truncate">
         <h2 className="file-title d-flex align-items-center">
-          <span className="file-name">{fileName}</span>
+          <span className="file-name text-truncate" title={fileName}>{fileName}</span>
           <a className={`file-star ${isStarred ? 'fa' : 'far'} fa-star`}
             href="#"
             title={starredText}

frontend/src/components/file-view/file-toolbar.js

@@ -113,7 +113,7 @@ class FileToolbar extends React.Component {
 
     return (
       <Fragment>
-        <ButtonGroup className="d-none d-md-block">
+        <ButtonGroup className="d-none d-md-block flex-shrink-0 ml-4">
           {fileType == 'PDF' && (
             <IconButton
               id="seafile-pdf-print"
@@ -202,7 +202,7 @@ class FileToolbar extends React.Component {
           </ButtonDropdown>
         </ButtonGroup>
 
-        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} className="d-block d-md-none">
+        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} className="d-block d-md-none flex-shrink-0 ml-4">
           <ButtonGroup >
             {(canEditFile && fileType != 'SDoc' && !err) &&
                 (this.props.isSaving ?

frontend/src/components/history-trash-file-view/download.js

@@ -7,7 +7,7 @@ const {
 
 function Download() {
   return (
-    <a href={`${siteRoot}repo/${repoID}/${objID}/download/?file_name=${encodeURIComponent(fileName)}&p=${encodeURIComponent(path)}`} className="btn btn-secondary">{gettext('Download')}</a>
+    <a href={`${siteRoot}repo/${repoID}/${objID}/download/?file_name=${encodeURIComponent(fileName)}&p=${encodeURIComponent(path)}`} className="btn btn-secondary flex-shrink-0">{gettext('Download')}</a>
   );
 }
 

frontend/src/components/history-trash-file-view/file-view.js

@@ -26,10 +26,10 @@ class FileView extends React.Component {
 
   render() {
     return (
-      <div className="h-100 d-flex flex-column flex-1">
+      <div className="h-100 d-flex flex-column flex-1 mw-100">
         <div className="file-view-header d-flex justify-content-between align-items-center">
-          <div>
-            <h2 className="file-title">{fileName}</h2>
+          <div className="text-truncate mr-4">
+            <h2 className="file-title text-truncate" title={fileName}>{fileName}</h2>
             <p className="meta-info m-0">{fromTrash ? `${gettext('Current Path: ')}${gettext('Trash')}`: commitTime}</p>
           </div>
           {canDownloadFile && <Download />}

frontend/src/components/shared-file-view/shared-file-view.js

@@ -116,14 +116,14 @@ class SharedFileView extends React.Component {
         </div>
         <div className="shared-file-view-md-main">
           <div className={`shared-file-view-head ${(fileType == 'md' || fileType == 'pdf') ? 'w-100 px-4' : ''}`}>
-            <div className="float-left">
+            <div className="text-truncate">
               <h2 className="ellipsis" title={fileName}>{fileName}</h2>
               {zipped ?
                 <p className="m-0">{gettext('Current path: ')}{this.renderPath()}</p> :
                 <p className="share-by ellipsis">{gettext('Shared by:')}{'  '}{sharedBy}</p>
               }
             </div>
-            <div className="float-right">
+            <div className="flex-shrink-0 ml-4">
               {(canDownload && loginUser && (loginUser !== sharedBy)) &&
                 <Button color="secondary" id="save"
                   onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}