mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-17 15:53:28 +00:00
Draft dashboard optimized (#2384)
* create a common toolbar component * optimized code * combine side-panel * add change state
This commit is contained in:
shanshuirenjia
committed by
Daniel Pan
Daniel Pan
parent
7a17e908b0
commit
ba583d6efd
@@ -1,9 +1,9 @@
|
||||
import React, { Component } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { keyCodes, bytesToSize } from './utils';
|
||||
import editorUtilities from '../utils/editor-utilties';
|
||||
import { keyCodes, bytesToSize } from '../utils';
|
||||
import editorUtilities from '../../utils/editor-utilties';
|
||||
|
||||
import { siteRoot, gettext } from './constants';
|
||||
import { siteRoot, gettext } from '../constants';
|
||||
|
||||
class Account extends Component {
|
||||
constructor(props) {
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { seafileAPI } from '../utils/seafile-api';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
const gettext = window.gettext;
|
||||
|
||||
class Notification extends React.Component {
|
||||
@@ -1,12 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropsType from 'prop-types';
|
||||
|
||||
const siteRoot = window.app.config.siteRoot;
|
||||
const mediaUrl = window.app.config.mediaUrl;
|
||||
const logoPath = window.app.config.logoPath;
|
||||
const logoWidth = window.app.config.logoWidth;
|
||||
const logoHeight = window.app.config.logoHeight;
|
||||
const siteTitle = window.app.config.siteTitle;
|
||||
import { siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './constants';
|
||||
|
||||
const propsType = {
|
||||
onCloseSidePanel: PropsType.func.isRequired,
|
||||
@@ -20,24 +14,18 @@ class Logo extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="logo">
|
||||
<a href={siteRoot} id="logo">
|
||||
<img
|
||||
src={mediaUrl + logoPath}
|
||||
height={logoHeight}
|
||||
width={logoWidth}
|
||||
title={siteTitle}
|
||||
alt="logo"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="sf2-icon-x1 sf-popover-close side-panel-close op-icon d-md-none"
|
||||
onClick={this.closeSide}
|
||||
title="Close"
|
||||
aria-label="Close"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<div className="top-logo">
|
||||
<a href={siteRoot} id="logo">
|
||||
<img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" />
|
||||
</a>
|
||||
<a
|
||||
className="sf2-icon-x1 sf-popover-close side-panel-close op-icon d-md-none"
|
||||
onClick={this.closeSide}
|
||||
title="Close"
|
||||
aria-label="Close"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
import React from 'react';
|
||||
import { siteRoot } from './constants';
|
||||
import { gettext, siteRoot } from './constants';
|
||||
import { seafileAPI } from '../utils/seafile-api';
|
||||
|
||||
class MainSideNav extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
let currentTab = this.props.currentTab || '';
|
||||
this.state = {
|
||||
groupsExtended: false,
|
||||
sharedExtended: false,
|
||||
closeSideBar:false,
|
||||
groupItems: []
|
||||
groupItems: [],
|
||||
currentTab: currentTab,
|
||||
};
|
||||
|
||||
this.listHeight = 24; //for caculate tabheight
|
||||
@@ -41,6 +43,12 @@ class MainSideNav extends React.Component {
|
||||
})
|
||||
}
|
||||
|
||||
tabItemClick = (param) => {
|
||||
this.setState({
|
||||
currentTab: param
|
||||
})
|
||||
}
|
||||
|
||||
renderSharedGroups() {
|
||||
let style = {height: 0};
|
||||
if (this.state.groupsExtended) {
|
||||
@@ -48,15 +56,19 @@ class MainSideNav extends React.Component {
|
||||
}
|
||||
return (
|
||||
<ul className={`grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
|
||||
<li>
|
||||
<a href={siteRoot + '#groups/'}>
|
||||
<span className="sharp" aria-hidden="true">#</span>All Groups</a>
|
||||
<li className={this.state.currentTab === 'groups' ? 'tab-cur' : ''}>
|
||||
<a href={siteRoot + '#groups/'} onClick={() => this.tabItemClick('groups')}>
|
||||
<span className="sharp" aria-hidden="true">#</span>
|
||||
All Groups
|
||||
</a>
|
||||
</li>
|
||||
{this.state.groupItems.map(item => {
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<a href={siteRoot + '#group/' + item.id + '/'}>
|
||||
<span className="sharp" aria-hidden="true">#</span>{item.name}</a>
|
||||
<li key={item.id} className={this.state.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}
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
@@ -75,14 +87,23 @@ 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>
|
||||
<a href={siteRoot + '#share-admin-libs/'}><span aria-hidden="true" className="sharp">#</span>Libraries</a>
|
||||
<li className={this.state.currentTab === 'share-admin-libs' ? 'tab-cur' : ''}>
|
||||
<a href={siteRoot + '#share-admin-libs/'} className="ellipsis" title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}>
|
||||
<span aria-hidden="true" className="sharp">#</span>
|
||||
{gettext('Libraries')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={siteRoot + '#share-admin-folders/'}><span aria-hidden="true" className="sharp">#</span>Folders</a>
|
||||
<li className={this.state.currentTab === 'share-admin-folders' ? 'tab-cur' : ''}>
|
||||
<a href={siteRoot + '#share-admin-folders/'} className="ellipsis" title={gettext('Folders')} onClick={() => this.tabItemClick('share-admin-folders')}>
|
||||
<span aria-hidden="true" className="sharp">#</span>
|
||||
{gettext('Folders')}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={siteRoot + '#share-admin-share-links/'}><span aria-hidden="true" className="sharp">#</span>Links</a>
|
||||
<li className={this.state.currentTab === 'share-admin-share-links' ? 'tab-cur' : ''}>
|
||||
<a href={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')}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
)
|
||||
@@ -94,31 +115,68 @@ class MainSideNav extends React.Component {
|
||||
<div className="side-nav-con">
|
||||
<h3 className="sf-heading">Files</h3>
|
||||
<ul className="side-tabnav-tabs">
|
||||
<li className="tab"><a href={ siteRoot + '#my-libs' } className="ellipsis" title="My Libraries"><span className="sf2-icon-user" aria-hidden="true"></span>My Libraries</a></li>
|
||||
<li className="tab"><a href={ siteRoot + '#shared-libs/'} className="ellipsis" title="Shared with me"><span className="sf2-icon-share" aria-hidden="true"></span>Shared with me</a></li>
|
||||
<li className="tab"><a href={ siteRoot + '#org/' } className="ellipsis" title="Shared with all"><span className="sf2-icon-organization" aria-hidden="true"></span>Shared with all</a></li>
|
||||
<li className={`tab ${this.state.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' : ''}`}>
|
||||
<a href={ 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')}
|
||||
</a>
|
||||
</li>
|
||||
<li className={`tab ${this.state.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')}
|
||||
</a>
|
||||
</li>
|
||||
<li className="tab" id="group-nav">
|
||||
<a className="ellipsis user-select-no" title="Shared with groups" onClick={this.grpsExtend}><span className={`toggle-icon float-right fas ${this.state.groupsExtended ?'fa-caret-down':'icon-caret-left'}`} aria-hidden="true"></span><span className="sf2-icon-group" aria-hidden="true"></span>Shared with groups</a>
|
||||
<a className="ellipsis user-select-no" title={gettext('Shared with groups')} onClick={this.grpsExtend}>
|
||||
<span className={`toggle-icon float-right fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
|
||||
<span className="sf2-icon-group" aria-hidden="true"></span>
|
||||
{gettext('Shared with groups')}
|
||||
</a>
|
||||
{this.renderSharedGroups()}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="hd w-100 o-hidden">
|
||||
<h3 className="float-left sf-heading">Tools</h3>
|
||||
</div>
|
||||
<h3 className="sf-heading">Tools</h3>
|
||||
<ul className="side-tabnav-tabs">
|
||||
<li className="tab"><a href={siteRoot + '#starred/'}><span className="sf2-icon-star" aria-hidden="true"></span>Favorites</a></li>
|
||||
<li className="tab"><a href={siteRoot + 'dashboard'}><span className="sf2-icon-clock" aria-hidden="true"></span>Acitivities</a></li>
|
||||
<li className="tab"><a href={siteRoot + '#devices/'} className="ellipsis" title="Linked Devices"><span className="sf2-icon-monitor" aria-hidden="true"></span>Linked Devices</a></li>
|
||||
<li className="tab" id="share-admin-nav">
|
||||
<a className="ellipsis user-select-no" title="Share Admin" onClick={this.shExtend}><span className={`toggle-icon float-right fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span><span aria-hidden="true" className="sf2-icon-wrench"></span>Share Admin</a>
|
||||
{this.renderSharedAdmin()}
|
||||
</li>
|
||||
<li className="tab">
|
||||
<a href={siteRoot + 'drafts/'}>
|
||||
<span className="sf2-icon-edit" aria-hidden="true"></span>Drafts
|
||||
<li className={`tab ${this.state.currentTab === 'favorites' ? 'tab-cur' : ''}`}>
|
||||
<a href={siteRoot + '#starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('favorites')}>
|
||||
<span className="sf2-icon-star" aria-hidden="true"></span>
|
||||
{gettext('Favorites')}
|
||||
</a>
|
||||
</li>
|
||||
<li className={`tab ${this.state.currentTab === 'dashboard' ? 'tab-cur' : ''}`}>
|
||||
<a href={siteRoot + 'dashboard'} title={gettext('Acitivities')} onClick={() => this.tabItemClick('dashboard')}>
|
||||
<span className="sf2-icon-clock" aria-hidden="true"></span>
|
||||
{gettext('Acitivities')}
|
||||
</a>
|
||||
</li>
|
||||
<li className={`tab ${this.state.currentTab === 'devices' ? 'tab-cur' : ''}`}>
|
||||
<a href={siteRoot + '#devices/'} className="ellipsis" title={gettext('Linked Devices')} onClick={() => this.tabItemClick('devices')}>
|
||||
<span className="sf2-icon-monitor" aria-hidden="true"></span>
|
||||
{gettext('Linked Devices')}
|
||||
</a>
|
||||
</li>
|
||||
<li className={`tab ${this.state.currentTab === 'drafts' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('drafts')}>
|
||||
<a href={siteRoot + 'drafts/'} title={gettext('Drafts')}>
|
||||
<span className="sf2-icon-edit" aria-hidden="true"></span>
|
||||
{gettext('Drafts')}
|
||||
</a>
|
||||
</li>
|
||||
<li className="tab" id="share-admin-nav">
|
||||
<a className="ellipsis user-select-no" title={gettext('Share Admin')} onClick={this.shExtend}>
|
||||
<span className={`toggle-icon float-right fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
|
||||
<span aria-hidden="true" className="sf2-icon-wrench"></span>
|
||||
{gettext('Share Admin')}
|
||||
</a>
|
||||
{this.renderSharedAdmin()}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
30
frontend/src/components/side-panel.js
Normal file
30
frontend/src/components/side-panel.js
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import Logo from './logo';
|
||||
import MainSideNav from './main-side-nav';
|
||||
import SideNavFooter from './side-nav-footer';
|
||||
|
||||
|
||||
class SidePanel extends React.Component {
|
||||
|
||||
onCloseSidePanel = () => {
|
||||
//todos;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="side-panel">
|
||||
<div className="side-panel-north">
|
||||
<Logo onCloseSidePanel={this.onCloseSidePanel}/>
|
||||
</div>
|
||||
<div className="side-panel-center">
|
||||
<MainSideNav currentTab={this.props.currentTab}/>
|
||||
</div>
|
||||
<div className="side-panel-footer">
|
||||
<SideNavFooter />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SidePanel;
|
||||
26
frontend/src/components/toolbar/common-toolbar.js
Normal file
26
frontend/src/components/toolbar/common-toolbar.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { isPro, gettext } from '../../components/constants';
|
||||
import Search from '../search/search';
|
||||
import Notification from '../common/notification';
|
||||
import Account from '../common/account';
|
||||
|
||||
const propTypes = {
|
||||
onSearchedClick: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
class CommonToolbar extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="common-toolbar">
|
||||
{isPro && <Search onSearchedClick={this.props.onSearchedClick} placeholder={gettext("Search files")}/>}
|
||||
<Notification />
|
||||
<Account />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CommonToolbar.propTypes = propTypes;
|
||||
|
||||
export default CommonToolbar;
|
||||
Reference in New Issue
Block a user