1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-04 00:20:07 +00:00

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
This commit is contained in:
zxj96
2019-03-28 17:34:01 +08:00
committed by Daniel Pan
parent c04c5d2044
commit a13e2a3519
6 changed files with 166 additions and 99 deletions

View File

@@ -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} >
<ModalHeader toggle={this.toggle}>{gettext('Select File')}</ModalHeader>
<Fragment>
<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>
);
}
}

View File

@@ -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>
);
}
}