Related Files Dialog Box Interaction Improvement (#3179)

* Related Files Dialog Box Interaction Improvement

* Modify ralated file dialog and select dialog style

* Add markdow-editor.js

frontend/src/components/dialog/add-related-file-dialog.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React ,{ Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { gettext } from '../../utils/constants';
@@ -13,6 +13,7 @@ const propTypes = {
   toggleCancel: PropTypes.func.isRequired,
   onRelatedFileChange: PropTypes.func.isRequired,
   dirent: PropTypes.object.isRequired,
+  onClose: PropTypes.func,
 };
 
 class AddRelatedFileDialog extends React.Component {
@@ -86,8 +87,11 @@ class AddRelatedFileDialog extends React.Component {
     let subtitle = gettext('Select related file for {placeholder}');
     subtitle = subtitle.replace('{placeholder}', '<span class="op-target">' + Utils.HTMLescape(this.props.dirent.name) + '</span>');
     return (
-      <Modal isOpen={true} className="sf-add-related-file" toggle={this.toggle} >
+      <Fragment>
-        <ModalHeader toggle={this.toggle}>{gettext('Select File')}</ModalHeader>
+        <ModalHeader toggle={this.props.onClose}>
+          <span className="tag-dialog-back fas fa-sm fa-arrow-left" onClick={this.toggle} aria-label={gettext('Back')}></span>
+          {gettext('Select File')}
+        </ModalHeader>
         <ModalBody>
           <div className="related-file-subtitle" dangerouslySetInnerHTML={{__html: subtitle}}></div>
           <FileChooser
@@ -107,7 +111,7 @@ class AddRelatedFileDialog extends React.Component {
             <Button color="primary" disabled>{gettext('Submit')}</Button>
           }
         </ModalFooter>
-      </Modal>
+      </Fragment>
     );
   }
 }

frontend/src/components/dialog/list-related-file-dialog.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React ,{ Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from 'reactstrap';
 import Dirent from '../../models/dirent';
@@ -72,7 +72,7 @@ class ListRelatedFileDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.toggle} size='lg'>
+      <Fragment>
         <ModalHeader toggle={this.toggle}>{gettext('Related Files')}</ModalHeader>
         <ModalBody className={this.state.direntList.length > 0 ? 'list-related-file-body' : ''}>
           <Table hover size="sm" className="list-related-file-table">
@@ -103,7 +103,7 @@ class ListRelatedFileDialog extends React.Component {
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Close')}</Button>
         </ModalFooter>
-      </Modal>
+      </Fragment>
     );
   }
 }

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

@@ -5,6 +5,8 @@ import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import ListRelatedFileDialog from '../dialog/list-related-file-dialog';
+import { Modal } from 'reactstrap';
+import ModalPortal from '../modal-portal';
 import AddRelatedFileDialog from '../dialog/add-related-file-dialog';
 
 const propTypes = {
@@ -28,6 +30,7 @@ class DetailListView extends React.Component {
       isEditFileTagShow: false,
       isListRelatedFileShow: false,
       isAddRelatedFileShow: false,
+      isRelatedFileDialogShow: false,
     };
   }
 
@@ -61,16 +64,32 @@ class DetailListView extends React.Component {
 
   onListRelatedFileToggle = () => {
     this.setState({
-      isListRelatedFileShow: !this.state.isListRelatedFileShow
+      isListRelatedFileShow: true,
+      isRelatedFileDialogShow: true,
+    });
+  }
+
+  toggleCancel = () => {
+    this.setState({
+      isListRelatedFileShow: false,
+      isAddRelatedFileShow: false,
+      isRelatedFileDialogShow: false,
+    });
+  }
+
+  onCloseAddRelatedFileDialog = () => {
+    this.setState({
+      isListRelatedFileShow: true,
+      isAddRelatedFileShow: false,
     });
   }
 
   onAddRelatedFileToggle = () => {
     this.setState({
-      isListRelatedFileShow: !this.state.isListRelatedFileShow,
+      isListRelatedFileShow: false,
-      isAddRelatedFileShow: !this.state.isAddRelatedFileShow
+      isAddRelatedFileShow: true
     });
-  }
+  } 
   
   render() {
     let { direntType, direntDetail, fileTagList, relatedFiles } = this.props;
@@ -133,27 +152,34 @@ class DetailListView extends React.Component {
               </tr>
             </tbody>
           </table>
-          {
+          { this.state.isRelatedFileDialogShow && (
-            this.state.isAddRelatedFileShow &&
+            <ModalPortal>
-            <AddRelatedFileDialog
+              <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
-              filePath={direntPath}
+                {
-              repoID={this.props.repoID}
+                  this.state.isAddRelatedFileShow &&
-              toggleCancel={this.onAddRelatedFileToggle}
+                  <AddRelatedFileDialog
-              onRelatedFileChange={this.props.onRelatedFileChange}
+                    filePath={direntPath}
-              dirent={this.props.dirent}
+                    repoID={this.props.repoID}
-            />
+                    toggleCancel={this.onCloseAddRelatedFileDialog}
-          }
+                    onRelatedFileChange={this.props.onRelatedFileChange}
-          {
+                    dirent={this.props.dirent}
-            this.state.isListRelatedFileShow &&
+                    onClose={this.toggleCancel}
-            <ListRelatedFileDialog
+                  />
-              relatedFiles={relatedFiles}
+                }
-              repoID={this.props.repoID}
+                {
-              filePath={direntPath}
+                  this.state.isListRelatedFileShow &&
-              toggleCancel={this.onListRelatedFileToggle}
+                  <ListRelatedFileDialog
-              addRelatedFileToggle={this.onAddRelatedFileToggle}
+                    relatedFiles={relatedFiles}
-              onRelatedFileChange={this.props.onRelatedFileChange}
+                    repoID={this.props.repoID}
-            />
+                    filePath={direntPath}
-          }
+                    toggleCancel={this.toggleCancel}
+                    addRelatedFileToggle={this.onAddRelatedFileToggle}
+                    onRelatedFileChange={this.props.onRelatedFileChange}
+                  />
+                }
+              </Modal>
+            </ModalPortal>
+          )}
           {
             this.state.isEditFileTagShow &&
             <EditFileTagDialog

frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button , ButtonGroup } from 'reactstrap';
+import { Button , ButtonGroup , Modal } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -50,6 +50,7 @@ class MutipleDirOperationToolbar extends React.Component {
       showListRelatedFileDialog: false,
       fileTagList: [],
       multiFileTagList: [],
+      isRelatedFileDialogShow: false,
     };
     this.zipToken = null;
   }
@@ -203,10 +204,12 @@ class MutipleDirOperationToolbar extends React.Component {
       });
       if (res.data.related_files.length > 0) {
         this.setState({
+          isRelatedFileDialogShow: true,
           showListRelatedFileDialog: true,
         });
       } else {
         this.setState({
+          isRelatedFileDialogShow: true,
           showAddRelatedFileDialog: true,
         });
       }
@@ -220,6 +223,7 @@ class MutipleDirOperationToolbar extends React.Component {
       showEditFileTagDialog: false,
       showAddRelatedFileDialog: false,
       showListRelatedFileDialog: false,
+      isRelatedFileDialogShow: false,
     });
   }
 
@@ -355,29 +359,32 @@ class MutipleDirOperationToolbar extends React.Component {
                 />
               </ModalPortal>
             }
-            {this.state.showListRelatedFileDialog &&
+            {this.state.isRelatedFileDialogShow && (
               <ModalPortal>
-                <ListRelatedFileDialog
+                <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
-                  repoID={repoID}
+                  {this.state.showListRelatedFileDialog &&
-                  filePath={direntPath}
+                    <ListRelatedFileDialog
-                  relatedFiles={this.state.relatedFiles}
+                      repoID={repoID}
-                  toggleCancel={this.toggleCancel}
+                      filePath={direntPath}
-                  addRelatedFileToggle={this.addRelatedFileToggle}
+                      relatedFiles={this.state.relatedFiles}
-                  onRelatedFileChange={this.onRelatedFileChange}
+                      toggleCancel={this.toggleCancel}
-                />
+                      addRelatedFileToggle={this.addRelatedFileToggle}
+                      onRelatedFileChange={this.onRelatedFileChange}
+                    />
+                  }
+                  {this.state.showAddRelatedFileDialog &&
+                    <AddRelatedFileDialog
+                      repoID={repoID}
+                      filePath={direntPath}
+                      toggleCancel={this.closeAddRelatedFileDialog}
+                      onClose={this.toggleCancel}
+                      dirent={this.props.selectedDirentList[0]}
+                      onRelatedFileChange={this.onRelatedFileChange}
+                    />
+                  }
+                </Modal>
               </ModalPortal>
-            }
+            )}
-            {this.state.showAddRelatedFileDialog &&
-              <ModalPortal>
-                <AddRelatedFileDialog
-                  repoID={repoID}
-                  filePath={direntPath}
-                  toggleCancel={this.closeAddRelatedFileDialog}
-                  dirent={this.props.selectedDirentList[0]}
-                  onRelatedFileChange={this.onRelatedFileChange}
-                />
-              </ModalPortal>
-            }
           </Fragment>
         )}
       </Fragment>

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

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
+import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem, Tooltip, Modal } from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -37,6 +37,7 @@ class ViewFileToolbar extends React.Component {
       isEditTagDialogShow: false,
       isListRelatedFileDialogShow: false,
       isAddRelatedFileDialogShow: false,
+      isRelatedFileDialogShow: false,
     };
   }
 
@@ -72,13 +73,31 @@ class ViewFileToolbar extends React.Component {
   }
 
   onListRelatedFileToggle = () => {
-    this.setState({isListRelatedFileDialogShow: !this.state.isListRelatedFileDialogShow})
+    this.setState({
+      isListRelatedFileDialogShow: true,
+      isRelatedFileDialogShow: true,
+    });
+  }
+
+  toggleCancel = () => {
+    this.setState({
+      isListRelatedFileDialogShow: false,
+      isAddRelatedFileDialogShow: false,
+      isRelatedFileDialogShow: false,
+    })
+  }
+
+  onCloseAddRelatedFileDialog = () => {
+    this.setState({
+      isListRelatedFileDialogShow: true,
+      isAddRelatedFileDialogShow: false,
+    });
   }
 
   onAddRelatedFileToggle = () => {
     this.setState({
-      isListRelatedFileDialogShow: !this.state.isListRelatedFileDialogShow,
+      isListRelatedFileDialogShow: false,
-      isAddRelatedFileDialogShow: !this.state.isAddRelatedFileDialogShow,
+      isAddRelatedFileDialogShow: true,
     });
   }
 
@@ -141,27 +160,30 @@ class ViewFileToolbar extends React.Component {
             />
           </ModalPotal>
         )}
-        {this.state.isListRelatedFileDialogShow &&
+        {this.state.isRelatedFileDialogShow && (
           <ModalPotal>
-            <ListRelatedFileDialog
+            <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
-              repoID={this.props.repoID}
+              {this.state.isListRelatedFileDialogShow &&
-              filePath={this.props.path}
+                <ListRelatedFileDialog
-              relatedFiles={this.props.relatedFiles}
+                  repoID={this.props.repoID}
-              toggleCancel={this.onListRelatedFileToggle}
+                  filePath={this.props.path}
-              addRelatedFileToggle={this.onAddRelatedFileToggle}
+                  relatedFiles={this.props.relatedFiles}
-              onRelatedFileChange={this.props.onRelatedFileChange}
+                  toggleCancel={this.toggleCancel}
-            />
+                  addRelatedFileToggle={this.onAddRelatedFileToggle}
-          </ModalPotal>
+                  onRelatedFileChange={this.props.onRelatedFileChange}
-        }
+                />
-        {this.state.isAddRelatedFileDialogShow && (
+              }
-          <ModalPotal>
+              {this.state.isAddRelatedFileDialogShow && 
-            <AddRelatedFileDialog
+                <AddRelatedFileDialog
-              dirent={dirent}
+                  dirent={dirent}
-              repoID={this.props.repoID}
+                  repoID={this.props.repoID}
-              filePath={this.props.path}
+                  filePath={this.props.path}
-              onRelatedFileChange={this.props.onRelatedFileChange}
+                  onRelatedFileChange={this.props.onRelatedFileChange}
-              toggleCancel={this.onAddRelatedFileToggle}
+                  toggleCancel={this.onCloseAddRelatedFileDialog}
-            />
+                  onClose={this.toggleCancel}
+                />
+              }
+            </Modal>
           </ModalPotal>
         )}
       </Fragment>

frontend/src/markdown-editor.js

@@ -23,6 +23,7 @@ import HistoryList from './components/markdown-view/history-list';
 import CommentPanel from './components/file-view/comment-panel';
 import OutlineView from './components/markdown-view/outline';
 import Loading from './components/loading';
+import { Modal } from 'reactstrap';
 import { findRange } from '@seafile/slate-react';
 
 import './css/markdown-viewer/markdown-editor.css';
@@ -310,6 +311,7 @@ class MarkdownEditor extends React.Component {
       isShowComments: false,
       isShowHistory: false,
       isShowOutline: true,
+      isRelatedFileDialogShow: false,
     };
 
     if (this.state.collabServer) {
@@ -397,6 +399,7 @@ class MarkdownEditor extends React.Component {
       showShareLinkDialog: false,
       showCommentDialog: false,
       showInsertFileDialog: false,
+      isRelatedFileDialogShow: false,
     });
   }
 
@@ -490,12 +493,14 @@ class MarkdownEditor extends React.Component {
           this.setState({
             showRelatedFileDialog: true,
             showMarkdownEditorDialog: true,
+            isRelatedFileDialogShow: true,
           });
         }
         else {
           this.setState({
             showAddRelatedFileDialog: true,
             showMarkdownEditorDialog: true,
+            isRelatedFileDialogShow: true,
           });
         }
         break;
@@ -1100,18 +1105,6 @@ class MarkdownEditor extends React.Component {
           {component}
           {this.state.showMarkdownEditorDialog && (
             <React.Fragment>
-              {this.state.showRelatedFileDialog &&
-                <ModalPortal>
-                  <ListRelatedFileDialog
-                    repoID={repoID}
-                    filePath={filePath}
-                    relatedFiles={this.state.relatedFiles}
-                    toggleCancel={this.toggleCancel}
-                    addRelatedFileToggle={this.addRelatedFileToggle}
-                    onRelatedFileChange={this.onRelatedFileChange}
-                  />
-                </ModalPortal>
-              }
               {this.state.showEditFileTagDialog &&
                 <ModalPortal>
                   <EditFileTagDialog
@@ -1123,17 +1116,32 @@ class MarkdownEditor extends React.Component {
                   />
                 </ModalPortal>
               }
-              {this.state.showAddRelatedFileDialog &&
+              {this.state.isRelatedFileDialogShow && (
                 <ModalPortal>
-                  <AddRelatedFileDialog
+                  <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
-                    repoID={repoID}
+                    {this.state.showRelatedFileDialog &&
-                    filePath={filePath}
+                      <ListRelatedFileDialog
-                    toggleCancel={this.closeAddRelatedFileDialog}
+                        repoID={repoID}
-                    dirent={this.state.fileInfo}
+                        filePath={filePath}
-                    onRelatedFileChange={this.onRelatedFileChange}
+                        relatedFiles={this.state.relatedFiles}
-                  />
+                        toggleCancel={this.toggleCancel}
+                        addRelatedFileToggle={this.addRelatedFileToggle}
+                        onRelatedFileChange={this.onRelatedFileChange}
+                      />
+                    }
+                    {this.state.showAddRelatedFileDialog &&
+                      <AddRelatedFileDialog
+                        repoID={repoID}
+                        filePath={filePath}
+                        toggleCancel={this.closeAddRelatedFileDialog}
+                        onClose={this.toggleCancel}
+                        dirent={this.state.fileInfo}
+                        onRelatedFileChange={this.onRelatedFileChange}
+                      />
+                    }
+                  </Modal>
                 </ModalPortal>
-              }
+              )}
               {this.state.showInsertFileDialog &&
                 <ModalPortal>
                   <InsertFileDialog