From 3d324389f7d25ab0301e0b140361f6191e5374b8 Mon Sep 17 00:00:00 2001 From: llj Date: Thu, 20 Dec 2018 14:00:40 +0800 Subject: [PATCH 1/5] [tag popup] improvements: 'add tag link', 'more colors', 'darker color' --- .../components/dialog/create-tag-dialog.js | 2 +- .../src/components/dialog/list-tag-dialog.js | 65 ++++++++++++------- .../components/dialog/update-tag-dialog.js | 2 +- frontend/src/css/repo-tag.css | 22 +++++-- 4 files changed, 61 insertions(+), 30 deletions(-) diff --git a/frontend/src/components/dialog/create-tag-dialog.js b/frontend/src/components/dialog/create-tag-dialog.js index 8b4425cdd7..f12d44c617 100644 --- a/frontend/src/components/dialog/create-tag-dialog.js +++ b/frontend/src/components/dialog/create-tag-dialog.js @@ -16,7 +16,7 @@ class CreateTagDialog extends React.Component { tagName: '', tagColor: '', newTag: {}, - colorList: ['lime', 'teal', 'azure', 'green', 'blue', 'purple', 'pink', 'indigo'], + colorList: ['blue', 'azure', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan', 'gray'] }; this.newInput = React.createRef(); } diff --git a/frontend/src/components/dialog/list-tag-dialog.js b/frontend/src/components/dialog/list-tag-dialog.js index a63b33959d..9d87f90da1 100644 --- a/frontend/src/components/dialog/list-tag-dialog.js +++ b/frontend/src/components/dialog/list-tag-dialog.js @@ -4,6 +4,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; import { gettext } from '../../utils/constants'; import { seafileAPI } from '../../utils/seafile-api'; import RepoTag from '../../models/repo-tag'; + import '../../css/repo-tag.css'; const tagListItemPropTypes = { @@ -14,6 +15,25 @@ const tagListItemPropTypes = { class TagListItem extends React.Component { + constructor(props) { + super(props); + this.state = { + showSelectedTag: false + }; + } + + onMouseOver = () => { + this.setState({ + showSelectedTag: true + }); + } + + onMouseOut = () => { + this.setState({ + showSelectedTag: false + }); + } + onTagUpdate = () => { this.props.onTagUpdate(this.props.item); } @@ -24,14 +44,15 @@ class TagListItem extends React.Component { render() { let color = this.props.item.color; - return( + return (
  • - +
    + {this.props.item.name} {this.props.item.fileCount}{' '}{gettext('files')} - +
    • ); @@ -74,34 +95,32 @@ class ListTagDialog extends React.Component { this.props.onListTagCancel(); } + createNewTag = (e) => { + e.preventDefault(); + this.props.onCreateRepoTag(); + } + render() { return ( {gettext('Tags')} - {this.state.repotagList.length === 0 && ( -
    - {gettext('Click new tag button to create tags.')} -
    - )} - {this.state.repotagList.length > 0 && ( -
      - {this.state.repotagList.map((repoTag, index) => { - return ( - - ); - })} -
    - )} +
      + {this.state.repotagList.map((repoTag, index) => { + return ( + + ); + })} +
    + {gettext('Create a new tag')}     -     diff --git a/frontend/src/components/dialog/update-tag-dialog.js b/frontend/src/components/dialog/update-tag-dialog.js index c7fd07e71e..e0a93c3c58 100644 --- a/frontend/src/components/dialog/update-tag-dialog.js +++ b/frontend/src/components/dialog/update-tag-dialog.js @@ -17,7 +17,7 @@ class UpdateTagDialog extends React.Component { deleteRepoTag: false, newName: this.props.currentTag.name, newColor: this.props.currentTag.color, - colorList: ['lime', 'teal', 'azure', 'green', 'blue', 'purple', 'pink', 'indigo'], + colorList: ['blue', 'azure', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'lime', 'green', 'teal', 'cyan', 'gray'] }; this.newInput = React.createRef(); } diff --git a/frontend/src/css/repo-tag.css b/frontend/src/css/repo-tag.css index fb3df9d6b5..12fc463dac 100644 --- a/frontend/src/css/repo-tag.css +++ b/frontend/src/css/repo-tag.css @@ -1,11 +1,21 @@ .tag-list-container { - padding: 0.5rem; - padding-bottom: 0; max-height: 15rem; list-style: none; overflow: auto; } +.add-tag-link { + display: block; + color: #666; + padding: .4rem .5rem; + border-radius: 4px; + text-decoration: underline; +} +.add-tag-link:hover { + color: #444; + background: #eee; +} + .tag-list-item { position: relative; display: flex; @@ -17,18 +27,20 @@ .tag-list-item .tag-demo { flex: 1; border-radius: 0.25rem; - padding-left: 0.5rem; display: flex; align-items: center; color: #ffffff; + overflow: hidden; } -.tag-list-item .tag-demo:hover { - border-left: 0.75rem solid #eb8205; +.show-tag-selected { + width: .5em; + align-self: stretch; } .tag-demo .tag-name { flex: 1; + padding-left: 0.5rem; } .tag-demo .tag-files { From 983bf03c100077520de057e9cb2fd4587c28d88b Mon Sep 17 00:00:00 2001 From: llj Date: Thu, 20 Dec 2018 18:45:31 +0800 Subject: [PATCH 2/5] [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; +} From 7f2245b86ef895f8643120d3712a0020cb1dfc74 Mon Sep 17 00:00:00 2001 From: plt Date: Fri, 21 Dec 2018 12:33:31 +0800 Subject: [PATCH 3/5] Improve variable name --- .../src/components/cur-dir-path/dir-tool.js | 48 ++++++++++++++----- .../components/dialog/create-tag-dialog.js | 10 ++-- .../dialog/list-taggedfiles-dialog.js | 2 +- .../components/dialog/update-tag-dialog.js | 8 ++-- 4 files changed, 47 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js index 17e5853a67..20d16fa591 100644 --- a/frontend/src/components/cur-dir-path/dir-tool.js +++ b/frontend/src/components/cur-dir-path/dir-tool.js @@ -21,7 +21,7 @@ class DirTool extends React.Component { constructor(props) { super(props); this.state = { - showTagPopup: false, + isRepoTagDialogShow: false, currentTag: null, isListRepoTagShow: false, isUpdateRepoTagShow: false, @@ -30,9 +30,29 @@ class DirTool extends React.Component { }; } + onShowListRepoTag = () => { + this.setState({ + isRepoTagDialogShow: true, + isListRepoTagShow: true, + isUpdateRepoTagShow: false, + isCreateRepoTagShow: false, + isListTaggedFileShow: false + }); + } + + onCloseRepoTagDialog = () => { + this.setState({ + isRepoTagDialogShow: false, + isListRepoTagShow: false, + isUpdateRepoTagShow: false, + isCreateRepoTagShow: false, + isListTaggedFileShow: false + }); + } + onListRepoTagToggle = () => { this.setState({ - showTagPopup: !this.state.showTagPopup, + isTagDialogShow: !this.state.isTagDialogShow, isListRepoTagShow: !this.state.isListRepoTagShow }); } @@ -44,12 +64,14 @@ class DirTool extends React.Component { }); } + /* onCreateRepoTagPopupToggle = () => { this.setState({ isCreateRepoTagShow: !this.state.isCreateRepoTagShow, - showTagPopup: !this.state.showTagPopup + isTagDialogShow: !this.state.isTagDialogShow }); } + */ onUpdateRepoTagToggle = (currentTag) => { this.setState({ @@ -59,12 +81,14 @@ class DirTool extends React.Component { }); } + /* onUpdateRepoTagPopupToggle = () => { this.setState({ isUpdateRepoTagShow: !this.state.isUpdateRepoTagShow, - showTagPopup: !this.state.showTagPopup + isTagDialogShow: !this.state.isTagDialogShow }); } + */ onListTaggedFileToggle = (currentTag) => { this.setState({ @@ -74,12 +98,14 @@ class DirTool extends React.Component { }); } + /* onListTaggedFilePopupToggle = () => { this.setState({ isListTaggedFileShow: !this.state.isListTaggedFileShow, - showTagPopup: !this.state.showTagPopup + isTagDialogShow: !this.state.isTagDialogShow }); } + */ isMarkdownFile(filePath) { let name = Utils.getFileName(filePath); @@ -96,18 +122,18 @@ class DirTool extends React.Component { return (
      -
      • +
    - {this.state.showTagPopup && ( + {this.state.isRepoTagDialogShow && ( {this.state.isListRepoTagShow && ( )} @@ -126,7 +152,7 @@ class DirTool extends React.Component { )} @@ -135,7 +161,7 @@ class DirTool extends React.Component { )} diff --git a/frontend/src/components/dialog/create-tag-dialog.js b/frontend/src/components/dialog/create-tag-dialog.js index 3854cfc289..88055c830b 100644 --- a/frontend/src/components/dialog/create-tag-dialog.js +++ b/frontend/src/components/dialog/create-tag-dialog.js @@ -25,7 +25,7 @@ class CreateTagDialog extends React.Component { inputNewName = (e) => { this.setState({ tagName: e.target.value, - }); + }); } selectTagcolor = (e) => { @@ -34,7 +34,7 @@ class CreateTagDialog extends React.Component { }); } - createTag = () => { + createTag = () => { let name = this.state.tagName; let color = this.state.tagColor; let repoID = this.props.repoID; @@ -46,7 +46,7 @@ class CreateTagDialog extends React.Component { handleKeyPress = (e) => { if (e.key === 'Enter') { this.createTag(); - } + } } componentDidMount() { @@ -61,7 +61,7 @@ class CreateTagDialog extends React.Component { let colorList = this.state.colorList; return ( - + {gettext('New Tag')} @@ -79,7 +79,7 @@ class CreateTagDialog extends React.Component { return (