haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-02 15:38:15 +00:00
Code Issues Releases Wiki Activity

fix tab highlight (#2551)

Browse Source
This commit is contained in:
C_Q
2018-11-22 17:00:23 +08:00
committed by Daniel Pan
parent fb6c097028
commit 2cf8f1b46e
9 changed files with 79 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/app.js
View File

@@ -35,11 +35,19 @@ class App extends Component {
draftCounts: 0,
draftList:[],
isLoadingDraft: true,
currentTab: 'dashboard',
};
}
componentDidMount() {
// e.g. from http://127.0.0.1:8000/drafts/reviews/
// get reviews
// TODO: need refactor later
let href = window.location.href.split('/');
this.getDrafts();
this.setState({
currentTab: href[href.length - 2]
});
}
getDrafts = () => {
@@ -71,19 +79,23 @@ class App extends Component {
});
}
render() {
tabItemClick = (param) => {
this.setState({
currentTab: param
});
}
let href = window.location.href.split('/');
let currentTab = href[href.length - 2];
render() {
let { currentTab } = this.state;
return (
<div id="main">
<SidePanel isSidePanelClosed={this.state.isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} draftCounts={this.state.draftCounts} />
<SidePanel isSidePanelClosed={this.state.isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick} draftCounts={this.state.draftCounts} />
<MainPanel onShowSidePanel={this.onShowSidePanel}>
<Router>
<FilesActivities path={siteRoot + 'dashboard'} />
<DraftsView path={siteRoot + 'drafts'} currentTab={currentTab}>
<DraftsView path={siteRoot + 'drafts'} tabItemClick={this.tabItemClick} currentTab={currentTab}>
<DraftContent path='/' getDrafts={this.getDrafts}
isLoadingDraft={this.state.isLoadingDraft}
draftList={this.state.draftList}

32
frontend/src/components/main-side-nav.js
View File

@@ -9,18 +9,18 @@ import { canViewOrg } from '../utils/constants';
const propTypes = {
currentTab: PropTypes.string.isRequired,
tabItemClick: PropTypes.func.isRequired,
draftCounts: PropTypes.number,
};
class MainSideNav extends React.Component {
constructor(props) {
super(props);
let currentTab = this.props.currentTab || '';
this.state = {
groupsExtended: false,
sharedExtended: false,
closeSideBar:false,
groupItems: [],
currentTab: currentTab,
};
this.listHeight = 24; //for caculate tabheight
@@ -53,9 +53,7 @@ class MainSideNav extends React.Component {
}
tabItemClick = (param) => {
this.setState({
currentTab: param
});
this.props.tabItemClick(param);
}
renderSharedGroups() {
@@ -65,7 +63,7 @@ class MainSideNav extends React.Component {
}
return (
<ul className={`grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
<li className={this.state.currentTab === 'groups' ? 'tab-cur' : ''}>
<li className={this.props.currentTab === 'groups' ? 'tab-cur' : ''}>
<a href={siteRoot + '#groups/'} onClick={() => this.tabItemClick('groups')}>
<span className="sharp" aria-hidden="true">#</span>
{gettext('All Groups')}
@@ -73,7 +71,7 @@ class MainSideNav extends React.Component {
</li>
{this.state.groupItems.map(item => {
return (
<li key={item.id} className={this.state.currentTab === item.id ? 'tab-cur' : ''}>
<li key={item.id} className={this.props.currentTab === item.id ? 'tab-cur' : ''}>
<a href={siteRoot + '#group/' + item.id + '/'} className="ellipsis" onClick={() => this.tabItemClick(item.id)}>
<span className="sharp" aria-hidden="true">#</span>
{item.name}
@@ -96,19 +94,19 @@ class MainSideNav extends React.Component {
let style = {height: height};
return (
<ul className={`${this.state.sharedExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style} >
<li className={this.state.currentTab === 'share-admin-libs' ? 'tab-cur' : ''}>
<li className={this.props.currentTab === 'share-admin-libs' ? 'tab-cur' : ''}>
<Link to={siteRoot + 'share-admin-libs/'} className="ellipsis" title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}>
<span aria-hidden="true" className="sharp">#</span>
{gettext('Libraries')}
</Link>
</li>
<li className={this.state.currentTab === 'share-admin-folders' ? 'tab-cur' : ''}>
<li className={this.props.currentTab === 'share-admin-folders' ? 'tab-cur' : ''}>
<Link to={siteRoot + 'share-admin-folders/'} className="ellipsis" title={gettext('Folders')} onClick={() => this.tabItemClick('share-admin-folders')}>
<span aria-hidden="true" className="sharp">#</span>
{gettext('Folders')}
</Link>
</li>
<li className={this.state.currentTab === 'share-admin-share-links' ? 'tab-cur' : ''}>
<li className={this.props.currentTab === 'share-admin-share-links' || this.props.currentTab == 'share-admin-upload-links' ? 'tab-cur' : ''}>
<Link to={siteRoot + 'share-admin-share-links/'} className="ellipsis" title={gettext('Links')} onClick={() => this.tabItemClick('share-admin-share-links')}>
<span aria-hidden="true" className="sharp">#</span>
{gettext('Links')}
@@ -124,20 +122,20 @@ class MainSideNav extends React.Component {
<div className="side-nav-con">
<h3 className="sf-heading">Files</h3>
<ul className="side-tabnav-tabs">
<li className={`tab ${this.state.currentTab === 'my-libs' ? 'tab-cur' : ''}`}>
<li className={`tab ${this.props.currentTab === 'my-libs' ? 'tab-cur' : ''}`}>
<a href={ siteRoot + '#my-libs' } className="ellipsis" title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
<span className="sf2-icon-user" aria-hidden="true"></span>
{gettext('My Libraries')}
</a>
</li>
<li className={`tab ${this.state.currentTab === 'shared-libs' ? 'tab-cur' : ''}`}>
<li className={`tab ${this.props.currentTab === 'shared-libs' ? 'tab-cur' : ''}`}>
<Link to={siteRoot + 'shared-libs/'} className="ellipsis" title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}>
<span className="sf2-icon-share" aria-hidden="true"></span>
{gettext('Shared with me')}
</Link>
</li>
{ canViewOrg &&
<li className={`tab ${this.state.currentTab === 'org' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('org')}>
<li className={`tab ${this.props.currentTab === 'org' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('org')}>
<a href={ siteRoot + '#org/' } className="ellipsis" title={gettext('Shared with all')}>
<span className="sf2-icon-organization" aria-hidden="true"></span>
{gettext('Shared with all')}
@@ -156,25 +154,25 @@ class MainSideNav extends React.Component {
<h3 className="sf-heading">Tools</h3>
<ul className="side-tabnav-tabs">
<li className={`tab ${this.state.currentTab === 'starred' ? 'tab-cur' : ''}`}>
<li className={`tab ${this.props.currentTab === 'starred' ? 'tab-cur' : ''}`}>
<Link to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('starred')}>
<span className="sf2-icon-star" aria-hidden="true"></span>
{gettext('Favorites')}
</Link>
</li>
<li className={`tab ${this.state.currentTab === 'dashboard' ? 'tab-cur' : ''}`}>
<li className={`tab ${this.props.currentTab === 'dashboard' ? 'tab-cur' : ''}`}>
<Link to={siteRoot + 'dashboard/'} title={gettext('Acitivities')} onClick={() => this.tabItemClick('dashboard')}>
<span className="sf2-icon-clock" aria-hidden="true"></span>
{gettext('Acitivities')}
</Link>
</li>
<li className={`tab ${this.state.currentTab === 'linked-devices' ? 'tab-cur' : ''}`}>
<li className={`tab ${this.props.currentTab === 'linked-devices' ? 'tab-cur' : ''}`}>
<Link to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={() => this.tabItemClick('linked-devices')}>
<span className="sf2-icon-monitor" aria-hidden="true"></span>
{gettext('Linked Devices')}
</Link>
</li>
<li className={`tab ${this.state.currentTab === 'drafts' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('drafts')}>
<li className={`tab ${this.props.currentTab === 'drafts' || this.props.currentTab === 'reviews' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('drafts')}>
<Link to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
<span className="sf2-icon-edit" aria-hidden="true"></span>
{gettext('Drafts')} {this.props.draftCounts === 0 ? '' : <Badge color="info" pill>{this.props.draftCounts}</Badge>}

10
frontend/src/components/review-list-view/review-list-item.js
View File

@@ -31,7 +31,7 @@ class Reviewers extends React.Component {
let reviewers = '';
this.props.item.reviewers.map(item => {
reviewers = reviewers + ' and ' + item.user_name
reviewers = reviewers + ' and ' + item.user_name;
});
this.setState({
@@ -46,7 +46,7 @@ class Reviewers extends React.Component {
<div className='position-relative reviewer-list'>
<span id={'reviewers' + items.id}>
{items.reviewers.map((item, index) => (
<img key={index} id={'reviewer-tip' + '-' + items.id + '-' + index} className="avatar avatar-sm reviewer-avatar" src={item.avatar_url} />
<img key={index} id={'reviewer-tip' + '-' + items.id + '-' + index} className="avatar avatar-sm reviewer-avatar" src={item.avatar_url} alt={item.user_name} />
))}
</span>
<Tooltip placement="bottom-end" isOpen={this.state.reviewerTipOpen} target={'reviewers' + items.id} toggle={this.toggle}>
@@ -112,7 +112,7 @@ class ReviewListItem extends React.Component {
<td className="name a-simulate" style={{width: '26%'}} onClick={this.onReviewsClick}>{fileName}</td>
<td className='library' style={{width: '25%'}}>{item.draft_origin_repo_name}</td>
<td className="update" style={{width: '20%'}}>{localTime}</td>
<td className="author" style={{width: '10%'}}><img className="avatar avatar-sm avatar-with-tooltip" id={'tip-' + item.id} src={item.author.avatar_url} /></td>
<td className="author" style={{width: '10%'}}><img className="avatar avatar-sm avatar-with-tooltip" id={'tip-' + item.id} src={item.author.avatar_url} alt={item.user_name} /></td>
<td className="reviewer" style={{width: '15%'}}><Reviewers item={item}/></td>
<Tooltip placement="bottom-end" isOpen={this.state.authorTipOpen} target={'tip-' + item.id} toggle={this.toggle}>
{item.author.user_name}
@@ -124,4 +124,8 @@ class ReviewListItem extends React.Component {
ReviewListItem.propTypes = propTypes;
Reviewers.propTypes = {
item: PropTypes.object.isRequired,
};
export default ReviewListItem;

4
frontend/src/components/review-list-view/review-list-view.js
View File

@@ -8,6 +8,8 @@ import ReviewListItem from './review-list-item';
const propTypes = {
isItemFreezed: PropTypes.bool.isRequired,
itemsList: PropTypes.array.isRequired,
getReviewList: PropTypes.func.isRequired,
activeTab: PropTypes.string.isRequired,
};
class ReviewListView extends React.Component {
@@ -19,7 +21,7 @@ class ReviewListView extends React.Component {
toggle(tab) {
if (this.props.activeTab !== tab) {
this.props.getReviewList(tab)
this.props.getReviewList(tab);
}
}

4
frontend/src/components/side-panel.js
View File

@@ -8,6 +8,8 @@ const propTypes = {
isSidePanelClosed: PropTypes.bool.isRequired,
currentTab: PropTypes.string.isRequired,
onCloseSidePanel: PropTypes.func.isRequired,
tabItemClick: PropTypes.func.isRequired,
draftCounts: PropTypes.number,
};
class SidePanel extends React.Component {
@@ -19,7 +21,7 @@ class SidePanel extends React.Component {
<Logo onCloseSidePanel={this.props.onCloseSidePanel}/>
</div>
<div className="side-panel-center">
<MainSideNav currentTab={this.props.currentTab} draftCounts={this.props.draftCounts}/>
<MainSideNav tabItemClick={this.props.tabItemClick} currentTab={this.props.currentTab} draftCounts={this.props.draftCounts}/>
</div>
<div className="side-panel-footer">
<SideNavFooter />

10
frontend/src/markdown-editor.js
View File

@@ -202,7 +202,7 @@ class EditorUtilities {
}
goReviewPage() {
window.location.href = serviceUrl + '/drafts/review/' + reviewID
window.location.href = serviceUrl + '/drafts/review/' + reviewID;
}
getCommentsNumber() {
@@ -230,19 +230,19 @@ class EditorUtilities {
}
goDraftPage() {
window.location.href = serviceUrl + '/lib/' + repoID + '/file' + draftFilePath + '?mode=edit'
window.location.href = serviceUrl + '/lib/' + repoID + '/file' + draftFilePath + '?mode=edit';
}
createDraftFile() {
return seafileAPI.createDraft(repoID, filePath).then(res => {
window.location.href = serviceUrl + '/lib/' + res.data.origin_repo_id + '/file' + res.data.draft_file_path + '?mode=edit'
})
window.location.href = serviceUrl + '/lib/' + res.data.origin_repo_id + '/file' + res.data.draft_file_path + '?mode=edit';
});
}
createFileReview() {
return seafileAPI.createFileReview(repoID, filePath).then(res => {
window.location.href = serviceUrl + '/drafts/review/' + res.data.id;
})
});
}
}

8
frontend/src/pages/drafts/draft-content.js
View File

@@ -2,11 +2,17 @@ import React from 'react';
import { siteRoot, gettext } from '../../utils/constants';
import editUtilties from '../../utils/editor-utilties';
import { Utils } from '../../utils/utils';
import PropTypes from 'prop-types';
import Toast from '../../components/toast';
import Loading from '../../components/loading';
import DraftListView from '../../components/draft-list-view/draft-list-view';
import DraftListMenu from '../../components/draft-list-view/draft-list-menu';
const propTypes = {
updateDraftsList: PropTypes.func.isRequired,
isLoadingDraft: PropTypes.bool.isRequired,
draftList: PropTypes.arrayOf(PropTypes.object),
};
class DraftContent extends React.Component {
@@ -131,4 +137,6 @@ class DraftContent extends React.Component {
}
}
DraftContent.propTypes = propTypes;
export default DraftContent;

20
frontend/src/pages/drafts/drafts-view.js
View File

@@ -9,21 +9,13 @@ const propTypes = {
PropTypes.array,
PropTypes.object
]).isRequired,
tabItemClick: PropTypes.func.isRequired,
};
class DraftsView extends React.Component {
constructor(props) {
super(props);
this.state = {
currentTab: this.props.currentTab
};
}
tabItemClick = (param) => {
this.setState({
currentTab: param
});
this.props.tabItemClick(param);
}
render() {
@@ -31,13 +23,13 @@ class DraftsView extends React.Component {
<div className="cur-view-container">
<div className="cur-view-path">
<ul className="tab-tabs-nav">
<li className={`tab ${this.state.currentTab === 'drafts' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('drafts')}>
<Link className='a' to={siteRoot + 'drafts'} title={gettext('Drafts')}>
<li className={`tab ${this.props.currentTab === 'drafts' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('drafts')}>
<Link className='a' to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
{gettext('Drafts')}
</Link>
</li>
<li className={`tab ${this.state.currentTab === 'reviews' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('reviews')}>
<Link className='a' to={siteRoot + 'drafts/reviews'} title={gettext('reviews')}>
<li className={`tab ${this.props.currentTab === 'reviews' ? 'ui-state-active': ''}`} onClick={() => this.tabItemClick('reviews')}>
<Link className='a' to={siteRoot + 'drafts/reviews/'} title={gettext('reviews')}>
{gettext('Reviews')}
</Link>
</li>

3
frontend/src/pages/drafts/review-content.js
View File

@@ -1,5 +1,4 @@
import React from 'react';
import { gettext } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import Loading from '../../components/loading';
import ReviewListView from '../../components/review-list-view/review-list-view';
@@ -22,7 +21,7 @@ class ReviewContent extends React.Component {
}
getReviewList = (reviewStatus) => {
this.setState({isLoadingReviews: true})
this.setState({isLoadingReviews: true});
seafileAPI.listReviews(reviewStatus).then(res => {
this.setState({
reviewsList: res.data.data,