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/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
-                  repoID={repoID}
-                  filePath={direntPath}
-                  relatedFiles={this.state.relatedFiles}
-                  toggleCancel={this.toggleCancel}
-                  addRelatedFileToggle={this.addRelatedFileToggle}
-                  onRelatedFileChange={this.onRelatedFileChange}
-                />
+                <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
+                  {this.state.showListRelatedFileDialog &&
+                    <ListRelatedFileDialog
+                      repoID={repoID}
+                      filePath={direntPath}
+                      relatedFiles={this.state.relatedFiles}
+                      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,
-      isAddRelatedFileDialogShow: !this.state.isAddRelatedFileDialogShow,
+      isListRelatedFileDialogShow: false,
+      isAddRelatedFileDialogShow: true,
     });
   }
 
@@ -141,27 +160,30 @@ class ViewFileToolbar extends React.Component {
             />
           </ModalPotal>
         )}
-        {this.state.isListRelatedFileDialogShow &&
+        {this.state.isRelatedFileDialogShow && (
           <ModalPotal>
-            <ListRelatedFileDialog
-              repoID={this.props.repoID}
-              filePath={this.props.path}
-              relatedFiles={this.props.relatedFiles}
-              toggleCancel={this.onListRelatedFileToggle}
-              addRelatedFileToggle={this.onAddRelatedFileToggle}
-              onRelatedFileChange={this.props.onRelatedFileChange}
-            />
-          </ModalPotal>
-        }
-        {this.state.isAddRelatedFileDialogShow && (
-          <ModalPotal>
-            <AddRelatedFileDialog
-              dirent={dirent}
-              repoID={this.props.repoID}
-              filePath={this.props.path}
-              onRelatedFileChange={this.props.onRelatedFileChange}
-              toggleCancel={this.onAddRelatedFileToggle}
-            />
+            <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
+              {this.state.isListRelatedFileDialogShow &&
+                <ListRelatedFileDialog
+                  repoID={this.props.repoID}
+                  filePath={this.props.path}
+                  relatedFiles={this.props.relatedFiles}
+                  toggleCancel={this.toggleCancel}
+                  addRelatedFileToggle={this.onAddRelatedFileToggle}
+                  onRelatedFileChange={this.props.onRelatedFileChange}
+                />
+              }
+              {this.state.isAddRelatedFileDialogShow && 
+                <AddRelatedFileDialog
+                  dirent={dirent}
+                  repoID={this.props.repoID}
+                  filePath={this.props.path}
+                  onRelatedFileChange={this.props.onRelatedFileChange}
+                  toggleCancel={this.onCloseAddRelatedFileDialog}
+                  onClose={this.toggleCancel}
+                />
+              }
+            </Modal>
           </ModalPotal>
         )}
       </Fragment>