diff --git a/frontend/src/pages/my-libs/mylib-repo-menu.js b/frontend/src/pages/my-libs/mylib-repo-menu.js index 1bef4c9a18..56dd70921e 100644 --- a/frontend/src/pages/my-libs/mylib-repo-menu.js +++ b/frontend/src/pages/my-libs/mylib-repo-menu.js @@ -19,6 +19,7 @@ class MylibRepoMenu extends React.Component { super(props); this.state = { isItemMenuShow: false, + isAdvancedMenuShown: false }; } @@ -62,6 +63,25 @@ class MylibRepoMenu extends React.Component { ); }; + toggleAdvancedMenuShown = (e) => { + this.setState({ isAdvancedMenuShown: true }); + }; + + toggleAdvancedMenu = (e) => { + e.stopPropagation(); + this.setState({ isAdvancedMenuShown: !this.state.isAdvancedMenuShown }, () => { + this.toggleOperationMenu(e); + }); + }; + + onDropDownMouseMove = (e) => { + if (this.state.isAdvancedMenuShown && e.target && e.target.className === 'dropdown-item') { + this.setState({ + isAdvancedMenuShown: false + }); + } + }; + generatorOperations = () => { let repo = this.props.repo; let showResetPasswordMenuItem = isPro && repo.encrypted && enableResetEncryptedRepoPassword && isEmailConfigured; @@ -83,11 +103,16 @@ class MylibRepoMenu extends React.Component { operations.push(monitorOp); } + operations.push('Divider', 'History Setting', 'Advanced'); + return operations; + }; + + getAdvancedOperations = () => { + const operations = []; operations.push('API Token'); if (this.props.isPC && enableRepoSnapshotLabel) { operations.push('Label Current State'); } - operations.push('Divider', 'History Setting'); if (enableRepoAutoDel) { operations.push('Old Files Auto Delete'); } @@ -145,6 +170,9 @@ class MylibRepoMenu extends React.Component { case 'Old Files Auto Delete': translateResult = gettext('Auto Deletion Setting'); break; + case 'Advanced': + translateResult = gettext('Advanced'); + break; default: break; } @@ -154,6 +182,7 @@ class MylibRepoMenu extends React.Component { render() { let operations = this.generatorOperations(); + const advancedOperations = this.getAdvancedOperations(); // pc menu if (this.props.isPC) { @@ -170,10 +199,34 @@ class MylibRepoMenu extends React.Component { onKeyDown={this.onDropdownToggleKeyDown} data-toggle="dropdown" /> - + {operations.map((item, index)=> { if (item == 'Divider') { return ; + } else if (item == 'Advanced') { + return ( + {e.stopPropagation();}} + > + + {this.translateOperations(item)} + + + {advancedOperations.map((item, index)=> { + return ({this.translateOperations(item)}); + })} + + + ); } else { return ({this.translateOperations(item)}); } @@ -184,6 +237,7 @@ class MylibRepoMenu extends React.Component { } // mobile menu + operations.pop(); // removed the last item 'Advanced' operations.unshift('Delete'); operations.unshift('Share'); this.props.isStarred ? operations.unshift('Unstar') : operations.unshift('Star'); diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css index 0b6393f439..8a0d8a725d 100644 --- a/media/css/seahub_react.css +++ b/media/css/seahub_react.css @@ -952,6 +952,15 @@ a.table-sort-op:hover { color: #212529; font-size: 14px; } + +.btn-secondary.dropdown-toggle.dropdown-item { + line-height: 1.5; +} + +.show>.btn-secondary.dropdown-toggle.dropdown-item { + color: #fff; + background-color: #20a0ff; +} /* empty-tip */ .empty-tip {