From 983bf03c100077520de057e9cb2fd4587c28d88b Mon Sep 17 00:00:00 2001 From: llj Date: Thu, 20 Dec 2018 18:45:31 +0800 Subject: [PATCH] [tag popup] don't show new popup; added 'back' icon --- .../src/components/cur-dir-path/dir-tool.js | 101 ++++++++++++------ .../components/dialog/create-tag-dialog.js | 18 ++-- .../src/components/dialog/list-tag-dialog.js | 40 ++++--- .../dialog/list-taggedfiles-dialog.js | 18 ++-- .../components/dialog/update-tag-dialog.js | 68 ++++++------ frontend/src/css/repo-tag.css | 10 ++ 6 files changed, 146 insertions(+), 109 deletions(-) diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js index 5afa3e40e1..17e5853a67 100644 --- a/frontend/src/components/cur-dir-path/dir-tool.js +++ b/frontend/src/components/cur-dir-path/dir-tool.js @@ -3,6 +3,7 @@ import { gettext, siteRoot } from '../../utils/constants'; import { Utils } from '../../utils/utils'; import PropTypes from 'prop-types'; import ModalPortal from '../modal-portal'; +import { Modal } from 'reactstrap'; import ListTagDialog from '../dialog/list-tag-dialog'; import CreateTagDialog from '../dialog/create-tag-dialog'; import UpdateTagDialog from '../dialog/update-tag-dialog'; @@ -20,6 +21,7 @@ class DirTool extends React.Component { constructor(props) { super(props); this.state = { + showTagPopup: false, currentTag: null, isListRepoTagShow: false, isUpdateRepoTagShow: false, @@ -29,7 +31,10 @@ class DirTool extends React.Component { } onListRepoTagToggle = () => { - this.setState({isListRepoTagShow: !this.state.isListRepoTagShow}); + this.setState({ + showTagPopup: !this.state.showTagPopup, + isListRepoTagShow: !this.state.isListRepoTagShow + }); } onCreateRepoTagToggle = () => { @@ -39,6 +44,13 @@ class DirTool extends React.Component { }); } + onCreateRepoTagPopupToggle = () => { + this.setState({ + isCreateRepoTagShow: !this.state.isCreateRepoTagShow, + showTagPopup: !this.state.showTagPopup + }); + } + onUpdateRepoTagToggle = (currentTag) => { this.setState({ currentTag: currentTag, @@ -47,6 +59,13 @@ class DirTool extends React.Component { }); } + onUpdateRepoTagPopupToggle = () => { + this.setState({ + isUpdateRepoTagShow: !this.state.isUpdateRepoTagShow, + showTagPopup: !this.state.showTagPopup + }); + } + onListTaggedFileToggle = (currentTag) => { this.setState({ currentTag: currentTag, @@ -55,6 +74,13 @@ class DirTool extends React.Component { }); } + onListTaggedFilePopupToggle = () => { + this.setState({ + isListTaggedFileShow: !this.state.isListTaggedFileShow, + showTagPopup: !this.state.showTagPopup + }); + } + isMarkdownFile(filePath) { let name = Utils.getFileName(filePath); return name.indexOf('.md') > -1 ? true : false; @@ -74,41 +100,46 @@ class DirTool extends React.Component {
    • - {this.state.isListRepoTagShow && ( + + {this.state.showTagPopup && ( - - - )} - {this.state.isCreateRepoTagShow && ( - - - - )} - {this.state.isUpdateRepoTagShow && ( - - - - )} - {this.state.isListTaggedFileShow && ( - - + + {this.state.isListRepoTagShow && ( + + )} + + {this.state.isCreateRepoTagShow && ( + + )} + + {this.state.isUpdateRepoTagShow && ( + + )} + + {this.state.isListTaggedFileShow && ( + + )} + )} diff --git a/frontend/src/components/dialog/create-tag-dialog.js b/frontend/src/components/dialog/create-tag-dialog.js index f12d44c617..3854cfc289 100644 --- a/frontend/src/components/dialog/create-tag-dialog.js +++ b/frontend/src/components/dialog/create-tag-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, Input } from 'reactstrap'; import { gettext } from '../../utils/constants'; @@ -7,6 +7,7 @@ import { seafileAPI } from '../../utils/seafile-api'; const propTypes = { repoID: PropTypes.string.isRequired, toggleCancel: PropTypes.func.isRequired, + togglePopup: PropTypes.func.isRequired }; class CreateTagDialog extends React.Component { @@ -48,10 +49,6 @@ class CreateTagDialog extends React.Component { } } - toggle = () => { - this.props.toggleCancel(); - } - componentDidMount() { this.setState({ tagColor: this.state.colorList[0] @@ -63,8 +60,11 @@ class CreateTagDialog extends React.Component { render() { let colorList = this.state.colorList; return ( - - {gettext('New Tag')} + + + + {gettext('New Tag')} +
    @@ -94,9 +94,9 @@ class CreateTagDialog extends React.Component { - + - + ); } } diff --git a/frontend/src/components/dialog/list-tag-dialog.js b/frontend/src/components/dialog/list-tag-dialog.js index 9d87f90da1..1667e95772 100644 --- a/frontend/src/components/dialog/list-tag-dialog.js +++ b/frontend/src/components/dialog/list-tag-dialog.js @@ -103,27 +103,25 @@ class ListTagDialog extends React.Component { render() { return ( - - {gettext('Tags')} - -
      - {this.state.repotagList.map((repoTag, index) => { - return ( - - ); - })} -
    - {gettext('Create a new tag')} -     - - - -     + {gettext('Tags')} + +
      + {this.state.repotagList.map((repoTag, index) => { + return ( + + ); + })} +
    + {gettext('Create a new tag')} +     + + +     ); } diff --git a/frontend/src/components/dialog/list-taggedfiles-dialog.js b/frontend/src/components/dialog/list-taggedfiles-dialog.js index e49b8e3bd0..75757f0f7e 100644 --- a/frontend/src/components/dialog/list-taggedfiles-dialog.js +++ b/frontend/src/components/dialog/list-taggedfiles-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 } from 'reactstrap'; import { gettext, siteRoot } from '../../utils/constants'; @@ -10,6 +10,7 @@ const propTypes = { repoID: PropTypes.string.isRequired, currentTag: PropTypes.object.isRequired, toggleCancel: PropTypes.func.isRequired, + togglePopup: PropTypes.func.isRequired }; class ListTaggedFilesDialog extends React.Component { @@ -40,15 +41,14 @@ class ListTaggedFilesDialog extends React.Component { }); } - toggle = () => { - this.props.toggleCancel(); - } - render() { let taggedFileList = this.state.taggedFileList; return ( - - {gettext('Tagged Files')} + + + + {gettext('Tagged Files')} + @@ -81,9 +81,9 @@ class ListTaggedFilesDialog extends React.Component {
    - + -     + ); } } diff --git a/frontend/src/components/dialog/update-tag-dialog.js b/frontend/src/components/dialog/update-tag-dialog.js index e0a93c3c58..edb888a97c 100644 --- a/frontend/src/components/dialog/update-tag-dialog.js +++ b/frontend/src/components/dialog/update-tag-dialog.js @@ -8,6 +8,7 @@ const propTypes = { currentTag: PropTypes.object, repoID: PropTypes.string.isRequired, toggleCancel: PropTypes.func.isRequired, + togglePopup: PropTypes.func.isRequired }; class UpdateTagDialog extends React.Component { @@ -55,10 +56,6 @@ class UpdateTagDialog extends React.Component { } } - toggle = () => { - this.props.toggleCancel(); - } - deleteTagClick = (item) => { this.setState({ deleteRepoTag: !this.state.deleteRepoTag, @@ -77,39 +74,40 @@ class UpdateTagDialog extends React.Component { let colorList = this.state.colorList; return ( - - {gettext('Edit Tag')} - -
    -
    - - {this.newInput = input;}} placeholder="newName" value={this.state.newName} onChange={this.inputNewName}/> -
    -
    - -
    - {colorList.map((item, index)=>{ - var className = 'colorinput-color bg-' + item; - return ( -
    - -
    - ); - })} -
    + + + {gettext('Edit Tag')} + + +
    +
    + + {this.newInput = input;}} placeholder="newName" value={this.state.newName} onChange={this.inputNewName}/> +
    +
    + +
    + {colorList.map((item, index)=>{ + var className = 'colorinput-color bg-' + item; + return ( +
    + +
    + ); + })}
    - - - - - - +
    +     + + + + ); } diff --git a/frontend/src/css/repo-tag.css b/frontend/src/css/repo-tag.css index 12fc463dac..4653b85917 100644 --- a/frontend/src/css/repo-tag.css +++ b/frontend/src/css/repo-tag.css @@ -92,3 +92,13 @@ .file-tag-item:hover { background-color: #bbb; } + +.tag-popup-back { + color: #888; + cursor: pointer; + margin-right: 10px; +} +.tag-popup-back:hover, +.tag-popup-back:focus { + color: #444; +}