diff --git a/frontend/src/components/dialog/sort-options.js b/frontend/src/components/dialog/sort-options.js index 00e311d215..3e72e03b93 100644 --- a/frontend/src/components/dialog/sort-options.js +++ b/frontend/src/components/dialog/sort-options.js @@ -7,7 +7,7 @@ const propTypes = { toggleDialog: PropTypes.func.isRequired, sortBy: PropTypes.string.isRequired, sortOrder: PropTypes.string.isRequired, - sortList: PropTypes.func.isRequired + sortItems: PropTypes.func.isRequired }; class SortOptions extends React.Component { @@ -38,7 +38,7 @@ class SortOptions extends React.Component { }); const [sortBy, sortOrder] = e.target.value.split('-'); - this.props.sortList(sortBy, sortOrder); + this.props.sortItems(sortBy, sortOrder); this.props.toggleDialog(); } diff --git a/frontend/src/pages/my-libs/my-libs.js b/frontend/src/pages/my-libs/my-libs.js index d503ebd1f7..f4187fe3f5 100644 --- a/frontend/src/pages/my-libs/my-libs.js +++ b/frontend/src/pages/my-libs/my-libs.js @@ -186,7 +186,7 @@ class MyLibraries extends Component { toggleDialog={this.toggleSortOptionsDialog} sortBy={this.state.sortBy} sortOrder={this.state.sortOrder} - sortList={this.sortRepoList} + sortItems={this.sortRepoList} /> } {this.state.isShowDetails && ( diff --git a/frontend/src/pages/my-libs/mylib-repo-list-item.js b/frontend/src/pages/my-libs/mylib-repo-list-item.js index b10a005ca9..8e4022a07e 100644 --- a/frontend/src/pages/my-libs/mylib-repo-list-item.js +++ b/frontend/src/pages/my-libs/mylib-repo-list-item.js @@ -110,11 +110,14 @@ class MylibRepoListItem extends React.Component { } onStarRepo = () => { + const repoName = this.props.repo.repo_name; if (this.state.isStarred) { seafileAPI.unstarItem(this.props.repo.repo_id, '/').then(() => { this.setState({isStarred: !this.state.isStarred}); - if (window.innerWidth < 728) { - toaster.success(gettext('Successfully unstarred the library.')); + if (window.innerWidth < 768) { + const msg = gettext('Successfully unstarred {library_name_placeholder}.') + .replace('{library_name_placeholder}', repoName); + toaster.success(msg); } }).catch(error => { let errMessage = Utils.getErrorMsg(error); @@ -123,8 +126,10 @@ class MylibRepoListItem extends React.Component { } else { seafileAPI.starItem(this.props.repo.repo_id, '/').then(() => { this.setState({isStarred: !this.state.isStarred}); - if (window.innerWidth < 728) { - toaster.success(gettext('Successfully starred the library.')); + if (window.innerWidth < 768) { + const msg = gettext('Successfully starred {library_name_placeholder}.') + .replace('{library_name_placeholder}', repoName); + toaster.success(msg); } }).catch(error => { let errMessage = Utils.getErrorMsg(error); diff --git a/frontend/src/pages/my-libs/mylib-repo-list-view.js b/frontend/src/pages/my-libs/mylib-repo-list-view.js index b79ffad826..c90aa983b3 100644 --- a/frontend/src/pages/my-libs/mylib-repo-list-view.js +++ b/frontend/src/pages/my-libs/mylib-repo-list-view.js @@ -103,9 +103,9 @@ class MylibRepoListView extends React.Component { - - - + + + diff --git a/frontend/src/pages/shared-libs/shared-libs.js b/frontend/src/pages/shared-libs/shared-libs.js index ad96806266..3ada8355fb 100644 --- a/frontend/src/pages/shared-libs/shared-libs.js +++ b/frontend/src/pages/shared-libs/shared-libs.js @@ -1,4 +1,5 @@ import React, { Component, Fragment } from 'react'; +import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap'; import PropTypes from 'prop-types'; import moment from 'moment'; import cookie from 'react-cookies'; @@ -12,6 +13,7 @@ import Loading from '../../components/loading'; import EmptyTip from '../../components/empty-tip'; import ModalPotal from '../../components/modal-portal'; import ShareDialog from '../../components/dialog/share-dialog'; +import SortOptionsDialog from '../../components/dialog/sort-options'; class Content extends Component { @@ -74,19 +76,15 @@ class Content extends Component { const mobileThead = ( - - - + + + ); const table = ( -
{gettext('Library Type')}{gettext('Actions')}{gettext('Library Type')}{gettext('Actions')}
{gettext('Library Type')} - {gettext('Sort:')} - {gettext('name')} {sortByName && sortIcon} - {gettext('last update')} {sortByTime && sortIcon} - {gettext('Actions')}{gettext('Library Type')}{gettext('Actions')}
+
= 768 ? '' : 'table-thead-hidden'}> {window.innerWidth >= 768 ? desktopThead : mobileThead}
@@ -133,33 +131,34 @@ class Item extends Component { unshared: false, isShowSharedDialog: false, isStarred: this.props.data.starred, + isOpMenuOpen: false // for mobile }; - - this.handleMouseOver = this.handleMouseOver.bind(this); - this.handleMouseOut = this.handleMouseOut.bind(this); - - this.share = this.share.bind(this); - this.leaveShare = this.leaveShare.bind(this); } - handleMouseOver() { + toggleOpMenu = () => { + this.setState({ + isOpMenuOpen: !this.state.isOpMenuOpen + }); + } + + handleMouseOver = () => { this.setState({ showOpIcon: true }); } - handleMouseOut() { + handleMouseOut = () => { this.setState({ showOpIcon: false }); } - share(e) { + share = (e) => { e.preventDefault(); this.setState({isShowSharedDialog: true}); } - leaveShare(e) { + leaveShare = (e) => { e.preventDefault(); const data = this.props.data; @@ -193,9 +192,15 @@ class Item extends Component { } onStarRepo = () => { + const repoName = this.props.data.repo_name; if (this.state.isStarred) { seafileAPI.unstarItem(this.props.data.repo_id, '/').then(() => { this.setState({isStarred: !this.state.isStarred}); + if (window.innerWidth < 768) { + const msg = gettext('Successfully unstarred {library_name_placeholder}.') + .replace('{library_name_placeholder}', repoName); + toaster.success(msg); + } }).catch(error => { let errMessage = Utils.getErrorMsg(error); toaster.danger(errMessage); @@ -203,6 +208,11 @@ class Item extends Component { } else { seafileAPI.starItem(this.props.data.repo_id, '/').then(() => { this.setState({isStarred: !this.state.isStarred}); + if (window.innerWidth < 768) { + const msg = gettext('Successfully starred {library_name_placeholder}.') + .replace('{library_name_placeholder}', repoName); + toaster.success(msg); + } }).catch(error => { let errMessage = Utils.getErrorMsg(error); toaster.danger(errMessage); @@ -273,10 +283,25 @@ class Item extends Component { {moment(data.last_modified).fromNow()} - {(isPro && data.is_admin) && - - } - + + +
+
+
+ {this.state.isStarred ? gettext('Unstar') : gettext('Star')} + {(isPro && data.is_admin) && + {gettext('Share')} + } + {gettext('Leave Share')} +
+
+ {this.state.isShowSharedDialog && ( @@ -314,12 +339,12 @@ class SharedLibraries extends Component { items: [], sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size' sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc' + isSortOptionsDialogOpen: false }; } componentDidMount() { seafileAPI.listRepos({type:'shared'}).then((res) => { - // res: {data: {...}, status: 200, statusText: "OK", headers: {…}, config: {…}, …} let repoList = res.data.repos.map((item) => { return new Repo(item); }); @@ -361,25 +386,42 @@ class SharedLibraries extends Component { }); } + toggleSortOptionsDialog = () => { + this.setState({ + isSortOptionsDialogOpen: !this.state.isSortOptionsDialogOpen + }); + } + render() { return ( -
-
-
-

{gettext('Shared with me')}

-
-
- + +
+
+
+

{gettext('Shared with me')}

+ {(window.innerWidth < 768) && } +
+
+ +
-
+ {this.state.isSortOptionsDialogOpen && + + } + ); } }