haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-12 13:24:52 +00:00
Code Issues Releases Wiki Activity

optimize save button's status

Browse Source
This commit is contained in:
LeoSirius
2019-04-19 11:57:07 +08:00
parent cdc9d4865e
commit fad00989f1
3 changed files with 39 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/file-view/file-toolbar.js
View File

@@ -11,6 +11,8 @@ const propTypes = {
isLocked: PropTypes.bool.isRequired, isLocked: PropTypes.bool.isRequired,
lockedByMe: PropTypes.bool.isRequired, lockedByMe: PropTypes.bool.isRequired,
onSaveChangedContent: PropTypes.func.isRequired, onSaveChangedContent: PropTypes.func.isRequired,
isSaving: PropTypes.bool.isRequired,
isContentChangedButNotSaved: PropTypes.bool.isRequired,
toggleLockFile: PropTypes.func.isRequired, toggleLockFile: PropTypes.func.isRequired,
toggleCommentPanel: PropTypes.func.isRequired toggleCommentPanel: PropTypes.func.isRequired
}; };
@@ -95,17 +97,24 @@ class FileToolbar extends React.Component {
/> />
)} )}
{(canEditFile && !err) && {(canEditFile && !err) &&
(<IconButton ( this.props.isSaving ?
text={gettext('Save')} <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
id={'saveButton'} <i className={'fa fa-spin fa-spinner'}/></button> :
icon={'fa fa-save'} (
// button imported in this file does not have functionalities of this.props.isContentChangedButNotSaved ?
// disabled, isActive as button imported in markdowneditor has <IconButton
//disabled={isContentChanged} text={gettext('Save')}
//isActive={!isContentChanged} id={'saveButton'}
onClick={this.props.onSaveChangedContent} icon={'fa fa-save'}
/> // button imported in this file does not have functionalities of
)} // isActive as button imported in markdowneditor has
//isActive={!isContentChanged}
onClick={this.props.onSaveChangedContent}
/> :
<button type={'button'} className={'btn btn-icon btn-secondary btn-active'} disabled>
<i className={'fa fa-save'}/></button>
)
)}
{canDownloadFile && ( {canDownloadFile && (
<IconButton <IconButton
id="download-file" id="download-file"

6
frontend/src/components/file-view/file-view.js
View File

@@ -11,7 +11,9 @@ import '../../css/file-view.css';
const propTypes = { const propTypes = {
onSaveChangedContent: PropTypes.func.isRequired, onSaveChangedContent: PropTypes.func.isRequired,
content: PropTypes.object.isRequired content: PropTypes.object.isRequired,
isSaving: PropTypes.bool.isRequired,
isContentChangedButNotSaved: PropTypes.bool.isRequired,
}; };
const { isStarred, isLocked, lockedByMe, const { isStarred, isLocked, lockedByMe,
@@ -84,6 +86,8 @@ class FileView extends React.Component {
isLocked={this.state.isLocked} isLocked={this.state.isLocked}
lockedByMe={this.state.lockedByMe} lockedByMe={this.state.lockedByMe}
onSaveChangedContent={this.props.onSaveChangedContent} onSaveChangedContent={this.props.onSaveChangedContent}
isSaving={this.props.isSaving}
isContentChangedButNotSaved={this.props.isContentChangedButNotSaved}
toggleLockFile={this.toggleLockFile} toggleLockFile={this.toggleLockFile}
toggleCommentPanel={this.toggleCommentPanel} toggleCommentPanel={this.toggleCommentPanel}
/> />

16
frontend/src/view-file-text.js
View File

@@ -43,7 +43,9 @@ class ViewFileText extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
content: fileContent content: fileContent,
isContentChangedButNotSaved: false,
isSaving: false,
}; };
this.onSaveChangedContent=this.onSaveChangedContent.bind(this); this.onSaveChangedContent=this.onSaveChangedContent.bind(this);
} }
@@ -51,7 +53,8 @@ class ViewFileText extends React.Component {
updateContent = (newContent) => { updateContent = (newContent) => {
this.setState({ this.setState({
content: newContent isContentChangedButNotSaved: true,
content: newContent,
}); });
} }
@@ -60,6 +63,9 @@ class ViewFileText extends React.Component {
return ( return (
seafileAPI.getUpdateLink(repoID, dirPath).then((res) => { seafileAPI.getUpdateLink(repoID, dirPath).then((res) => {
const uploadLink = res.data; const uploadLink = res.data;
this.setState({
isSaving: true
});
return seafileAPI.updateFile( return seafileAPI.updateFile(
uploadLink, uploadLink,
filePath, filePath,
@@ -69,6 +75,10 @@ class ViewFileText extends React.Component {
toaster.success(gettext('Successfully saved'), { toaster.success(gettext('Successfully saved'), {
duration: 3 duration: 3
}); });
this.setState({
isSaving: false,
isContentChangedButNotSaved: false
});
}) })
}) })
); );
@@ -83,6 +93,8 @@ class ViewFileText extends React.Component {
updateContent={this.updateContent} updateContent={this.updateContent}
/> />
} }
isSaving={this.state.isSaving}
isContentChangedButNotSaved={this.state.isContentChangedButNotSaved}
onSaveChangedContent={this.onSaveChangedContent} onSaveChangedContent={this.onSaveChangedContent}
/> />
); );