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

View mode improve (#2984)

Browse Source 
* improve file content layout

* repair review tab padding bug

* combine operation btn

* update code style
This commit is contained in:
杨顺强
2019-02-22 15:35:31 +08:00
committed by Daniel Pan
parent 91fa00944f
commit 3113e5f5d6
7 changed files with 86 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/components/dir-view-mode/dir-column-file.js
View File

@@ -66,35 +66,33 @@ class DirColumnFile extends React.Component {
); );
} }
return ( return (
<div className="cur-view-content"> <WikiMarkdownViewer
<WikiMarkdownViewer isTOCShow={false}
isTOCShow={false} isFileLoading={this.props.isFileLoading}
isFileLoading={this.props.isFileLoading} markdownContent={this.props.content}
markdownContent={this.props.content} lastModified = {this.props.lastModified}
lastModified = {this.props.lastModified} latestContributor={this.props.latestContributor}
latestContributor={this.props.latestContributor} onLinkClick={this.props.onLinkClick}
onLinkClick={this.props.onLinkClick} >
> <Fragment>
<Fragment> {this.props.reviewStatus === 'open' &&
{this.props.reviewStatus === 'open' && <div className='seafile-btn-view-review text-center'>
<div className='seafile-btn-view-review text-center'> <div className='tag tag-green'>
<div className='tag tag-green'> {gettext('This file is in review stage')}
{gettext('This file is in review stage')} <span className="ml-2" onClick={this.goReviewPage}>{gettext('View Review')}</span>
<span className="ml-2" onClick={this.goReviewPage}>{gettext('View Review')}</span>
</div>
</div> </div>
} </div>
{(this.props.reviewStatus !== 'open' && !this.props.isDraft && this.props.hasDraft) && }
<div className='seafile-btn-view-review text-center'> {(this.props.reviewStatus !== 'open' && !this.props.isDraft && this.props.hasDraft) &&
<div className='tag tag-green'> <div className='seafile-btn-view-review text-center'>
{gettext('This file is in draft stage.')} <div className='tag tag-green'>
<span className="ml-2" onClick={this.goDraftPage}>{gettext('Edit Draft')}</span> {gettext('This file is in draft stage.')}
</div> <span className="ml-2" onClick={this.goDraftPage}>{gettext('Edit Draft')}</span>
</div> </div>
} </div>
</Fragment> }
</WikiMarkdownViewer> </Fragment>
</div> </WikiMarkdownViewer>
); );
} }
} }

6
frontend/src/components/dir-view-mode/dir-list-view.js
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import RepoInfoBar from '../../components/repo-info-bar'; import RepoInfoBar from '../../components/repo-info-bar';
import DirentListView from '../../components/dirent-list-view/dirent-list-view'; import DirentListView from '../../components/dirent-list-view/dirent-list-view';
@@ -41,7 +41,7 @@ class DirListView extends React.Component {
render() { render() {
return ( return (
<div className="main-panel"> <Fragment>
{this.props.isRepoInfoBarShow && ( {this.props.isRepoInfoBarShow && (
<RepoInfoBar <RepoInfoBar
repoID={this.props.repoID} repoID={this.props.repoID}
@@ -80,7 +80,7 @@ class DirListView extends React.Component {
isAllItemSelected={this.props.isAllItemSelected} isAllItemSelected={this.props.isAllItemSelected}
onAllItemSelected={this.props.onAllItemSelected} onAllItemSelected={this.props.onAllItemSelected}
/> />
</div> </Fragment>
); );
} }
} }

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

@@ -30,7 +30,7 @@ class ReviewListView extends React.Component {
return ( return (
<Fragment> <Fragment>
<Nav pills> <Nav pills>
<NavItem> <NavItem className="pt-4">
<NavLink <NavLink
className={classnames({ active: this.props.activeTab === 'open' })} className={classnames({ active: this.props.activeTab === 'open' })}
onClick={() => { this.toggle('open');}} onClick={() => { this.toggle('open');}}
@@ -38,7 +38,7 @@ class ReviewListView extends React.Component {
{gettext('Open')} {gettext('Open')}
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem className="pt-4">
<NavLink <NavLink
className={classnames({ active: this.props.activeTab === 'finished' })} className={classnames({ active: this.props.activeTab === 'finished' })}
onClick={() => { this.toggle('finished');}} onClick={() => { this.toggle('finished');}}
@@ -46,7 +46,7 @@ class ReviewListView extends React.Component {
{gettext('Published')} {gettext('Published')}
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem className="pt-4">
<NavLink <NavLink
className={classnames({ active: this.props.activeTab === 'closed' })} className={classnames({ active: this.props.activeTab === 'closed' })}
onClick={() => { this.toggle('closed');}} onClick={() => { this.toggle('closed');}}

13
frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
View File

@@ -1,5 +1,6 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Button , ButtonGroup } from 'reactstrap';
import { gettext } from '../../utils/constants'; import { gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
@@ -95,12 +96,12 @@ class MutipleDirOperationToolbar extends React.Component {
render() { render() {
return ( return (
<Fragment> <Fragment>
<div className="operation multiple-dirents-operation"> <ButtonGroup className="flex-row group-operations">
<button className="btn btn-secondary operation-item action-icon sf2-icon-move" title={gettext('Move')} onClick={this.onMoveToggle}></button> <Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} onClick={this.onMoveToggle}></Button>
<button className="btn btn-secondary operation-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></button> <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onMoveToggle}></Button>
<button className="btn btn-secondary operation-item action-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.props.onItemsDelete}></button> <Button className="secondary group-op-item action-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onMoveToggle}></Button>
<button className="btn btn-secondary operation-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></button> <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onMoveToggle}></Button>
</div> </ButtonGroup>
{this.state.isMoveDialogShow && {this.state.isMoveDialogShow &&
<MoveDirentDialog <MoveDirentDialog
path={this.props.path} path={this.props.path}

60
frontend/src/css/lib-content-view.css
View File

@@ -49,7 +49,7 @@
.tree-node-inner .tree-node-text { .tree-node-inner .tree-node-text {
padding-left: 2.8rem; padding-left: 2.8rem;
width: calc(100% - 2.8rem); width: calc(100% - 1.5rem);
font-size: 15px; font-size: 15px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -86,9 +86,9 @@
.tree-node-inner .right-icon { .tree-node-inner .right-icon {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0.5rem;
bottom: 0; bottom: 0;
width: 1.5rem; width: 1rem;
color: #888; color: #888;
z-index: 2; z-index: 2;
font-size: 0.8125rem; font-size: 0.8125rem;
@@ -130,49 +130,37 @@
font-size: 0.9375rem; font-size: 0.9375rem;
} }
/* todo optimized */ /* file layout */
.cur-view-content { .dir-content-main .wiki-page-container {
display: flex; padding: 0 1rem 1.25rem;
flex-direction: column;
}
.cur-view-content .wiki-page-container{
margin: -0.625rem -1rem -1.25rem;
padding: 0.625rem 1rem 1.25rem;
display: flex; display: flex;
flex: 1; flex: 1;
overflow: auto;
} }
.cur-view-content .wiki-page-content { /* wiki-page-content */
.wiki-page-content {
flex: 1; flex: 1;
} }
.wiki-page-content .ml-2 {
text-decoration: underline;
}
.wiki-page-content .ml-2:hover {
text-decoration: underline;
color:#eb8205;
}
.dir-content-main .wiki-page-content .article { .dir-content-main .wiki-page-content .article {
padding: 0 10px; padding: 0 10px;
} }
.dir-content-main .wiki-page-content .ml-2 {
text-decoration: underline;
}
.dir-content-main .wiki-page-content .ml-2:hover {
text-decoration: underline;
color:#eb8205;
}
.wiki-page-content a { .wiki-page-content a {
cursor: pointer; cursor: pointer;
} }
.wiki-side-nav .wiki-page-content a {
color: #212529;
cursor: pointer;
}
.wiki-page-ops { .wiki-page-ops {
position: fixed; position: fixed;
top: 10px; top: 10px;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@@ -205,13 +193,3 @@
font-size:12px; font-size:12px;
color: #666; color: #666;
} }
.wiki-md-viewer-rendered-content.article h1 {
margin-top: 0;
}
.index-edit {
position: absolute;
right: 0.25rem;
top: 0.25rem;
}

14
frontend/src/css/toolbar.css
View File

@@ -31,7 +31,19 @@
border-radius: 2px; border-radius: 2px;
} }
.multiple-dirents-operation .operation-item { .group-operations {
margin-right: 0.5rem;
}
.group-operations .group-op-item {
padding: 0 0.5rem;
height: 30px;
min-width: 46px;
background-color: #fff;
line-height: 29px;
font-weight: normal;
border: 1px solid #ccc;
border-radius: 2px;
font-size: 1.125rem; font-size: 1.125rem;
} }
/* end file-operation toolbar */ /* end file-operation toolbar */

18
frontend/src/pages/lib-content-view/lib-content-toolbar.js
View File

@@ -1,5 +1,6 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Tooltip } from 'reactstrap';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import { gettext, siteRoot } from '../../utils/constants'; import { gettext, siteRoot } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
@@ -45,6 +46,13 @@ const propTypes = {
class LibContentToolbar extends React.Component { class LibContentToolbar extends React.Component {
constructor(props) {
super(props);
this.state = {
isDraftMessageShow: false,
};
}
onEditClick = (e) => { onEditClick = (e) => {
e.preventDefault(); e.preventDefault();
let { path, repoID } = this.props; let { path, repoID } = this.props;
@@ -60,8 +68,11 @@ class LibContentToolbar extends React.Component {
}); });
} }
render() { onDraftHover = () => {
this.setState({isDraftMessageShow: !this.state.isDraftMessageShow});
}
render() {
if (this.props.isViewFile) { if (this.props.isViewFile) {
return ( return (
<Fragment> <Fragment>
@@ -75,7 +86,10 @@ class LibContentToolbar extends React.Component {
)} )}
{/* default have read priv */} {/* default have read priv */}
{(!this.props.isDraft && !this.props.hasDraft) && ( {(!this.props.isDraft && !this.props.hasDraft) && (
<button className="btn btn-secondary operation-item" title={gettext('New Draft')} onClick={this.onNewDraft}>{gettext('New Draft')}</button> <Fragment>
<button id="new-draft" className="btn btn-secondary operation-item" onClick={this.onNewDraft}>{gettext('New Draft')}</button>
<Tooltip target="new-draft" placement="bottom" isOpen={this.state.isDraftMessageShow} toggle={this.onDraftHover}>{gettext('Create a draft from this file, instead of editing it directly.')}</Tooltip>
</Fragment>
)} )}
</div> </div>
<ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode}/> <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode}/>