From 3113e5f5d6bd08c2899d511d9458acd598b44077 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E9=A1=BA=E5=BC=BA?= <ysq9207@126.com>
Date: Fri, 22 Feb 2019 15:35:31 +0800
Subject: [PATCH] View mode improve (#2984)

* improve file content layout

* repair review tab padding bug

* combine operation btn

* update code style
---
 .../dir-view-mode/dir-column-file.js          | 52 ++++++++--------
 .../components/dir-view-mode/dir-list-view.js |  6 +-
 .../review-list-view/review-list-view.js      |  6 +-
 .../toolbar/mutilple-dir-operation-toolbar.js | 13 ++--
 frontend/src/css/lib-content-view.css         | 60 ++++++-------------
 frontend/src/css/toolbar.css                  | 14 ++++-
 .../lib-content-view/lib-content-toolbar.js   | 18 +++++-
 7 files changed, 86 insertions(+), 83 deletions(-)

diff --git a/frontend/src/components/dir-view-mode/dir-column-file.js b/frontend/src/components/dir-view-mode/dir-column-file.js
index 77727ec919..878be9eefd 100644
--- a/frontend/src/components/dir-view-mode/dir-column-file.js
+++ b/frontend/src/components/dir-view-mode/dir-column-file.js
@@ -66,35 +66,33 @@ class DirColumnFile extends React.Component {
       );
     }
     return (
-      <div className="cur-view-content">
-        <WikiMarkdownViewer
-          isTOCShow={false}
-          isFileLoading={this.props.isFileLoading}
-          markdownContent={this.props.content}
-          lastModified = {this.props.lastModified}
-          latestContributor={this.props.latestContributor}
-          onLinkClick={this.props.onLinkClick}
-        >
-          <Fragment>
-            {this.props.reviewStatus === 'open' &&
-              <div className='seafile-btn-view-review text-center'>
-                <div className='tag tag-green'> 
-                  {gettext('This file is in review stage')}
-                  <span className="ml-2" onClick={this.goReviewPage}>{gettext('View Review')}</span>
-                </div>
+      <WikiMarkdownViewer
+        isTOCShow={false}
+        isFileLoading={this.props.isFileLoading}
+        markdownContent={this.props.content}
+        lastModified = {this.props.lastModified}
+        latestContributor={this.props.latestContributor}
+        onLinkClick={this.props.onLinkClick}
+      >
+        <Fragment>
+          {this.props.reviewStatus === 'open' &&
+            <div className='seafile-btn-view-review text-center'>
+              <div className='tag tag-green'> 
+                {gettext('This file is in review stage')}
+                <span className="ml-2" onClick={this.goReviewPage}>{gettext('View Review')}</span>
               </div>
-            }
-            {(this.props.reviewStatus !== 'open' && !this.props.isDraft && this.props.hasDraft) &&
-              <div className='seafile-btn-view-review text-center'>
-                <div className='tag tag-green'>
-                  {gettext('This file is in draft stage.')}
-                  <span className="ml-2" onClick={this.goDraftPage}>{gettext('Edit Draft')}</span>
-                </div>
+            </div>
+          }
+          {(this.props.reviewStatus !== 'open' && !this.props.isDraft && this.props.hasDraft) &&
+            <div className='seafile-btn-view-review text-center'>
+              <div className='tag tag-green'>
+                {gettext('This file is in draft stage.')}
+                <span className="ml-2" onClick={this.goDraftPage}>{gettext('Edit Draft')}</span>
               </div>
-            }
-          </Fragment>
-        </WikiMarkdownViewer>
-      </div>
+            </div>
+          }
+        </Fragment>
+      </WikiMarkdownViewer>
     );
   }
 }
diff --git a/frontend/src/components/dir-view-mode/dir-list-view.js b/frontend/src/components/dir-view-mode/dir-list-view.js
index ac8cdf31da..096efecd48 100644
--- a/frontend/src/components/dir-view-mode/dir-list-view.js
+++ b/frontend/src/components/dir-view-mode/dir-list-view.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import RepoInfoBar from '../../components/repo-info-bar';
 import DirentListView from '../../components/dirent-list-view/dirent-list-view';
@@ -41,7 +41,7 @@ class DirListView extends React.Component {
 
   render() {
     return (
-      <div className="main-panel">
+      <Fragment>
         {this.props.isRepoInfoBarShow && (
           <RepoInfoBar 
             repoID={this.props.repoID}
@@ -80,7 +80,7 @@ class DirListView extends React.Component {
           isAllItemSelected={this.props.isAllItemSelected}
           onAllItemSelected={this.props.onAllItemSelected}
         />
-      </div>
+      </Fragment>
     );
   }
 }
diff --git a/frontend/src/components/review-list-view/review-list-view.js b/frontend/src/components/review-list-view/review-list-view.js
index 9f306730e0..772995363f 100644
--- a/frontend/src/components/review-list-view/review-list-view.js
+++ b/frontend/src/components/review-list-view/review-list-view.js
@@ -30,7 +30,7 @@ class ReviewListView extends React.Component {
     return (
       <Fragment>
         <Nav pills>
-          <NavItem>
+          <NavItem className="pt-4">
             <NavLink
               className={classnames({ active: this.props.activeTab === 'open' })}
               onClick={() => { this.toggle('open');}}
@@ -38,7 +38,7 @@ class ReviewListView extends React.Component {
               {gettext('Open')}
             </NavLink>
           </NavItem>
-          <NavItem>
+          <NavItem className="pt-4">
             <NavLink
               className={classnames({ active: this.props.activeTab === 'finished' })}
               onClick={() => { this.toggle('finished');}}
@@ -46,7 +46,7 @@ class ReviewListView extends React.Component {
               {gettext('Published')}
             </NavLink>
           </NavItem>
-          <NavItem>
+          <NavItem className="pt-4">
             <NavLink
               className={classnames({ active: this.props.activeTab === 'closed' })}
               onClick={() => { this.toggle('closed');}}
diff --git a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
index 19e2e18da7..b9c4124bbb 100644
--- a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { Button , ButtonGroup } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -95,12 +96,12 @@ class MutipleDirOperationToolbar extends React.Component {
   render() {
     return (
       <Fragment>
-        <div className="operation multiple-dirents-operation">
-          <button className="btn btn-secondary operation-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="btn btn-secondary operation-item action-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.props.onItemsDelete}></button>
-          <button className="btn btn-secondary operation-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></button>
-        </div>
+        <ButtonGroup className="flex-row group-operations">
+          <Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} onClick={this.onMoveToggle}></Button>
+          <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onMoveToggle}></Button>
+          <Button className="secondary group-op-item action-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onMoveToggle}></Button>
+          <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onMoveToggle}></Button>
+        </ButtonGroup>
         {this.state.isMoveDialogShow && 
           <MoveDirentDialog 
             path={this.props.path}
diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css
index 8e4e5463bf..00518c0ba4 100644
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -49,7 +49,7 @@
 
 .tree-node-inner .tree-node-text {
   padding-left: 2.8rem;
-  width: calc(100% - 2.8rem);
+  width: calc(100% - 1.5rem);
   font-size: 15px;
   white-space: nowrap;
   overflow: hidden;
@@ -86,9 +86,9 @@
 .tree-node-inner .right-icon {
   position: absolute;
   top: 0;
-  right: 0;
+  right: 0.5rem;
   bottom: 0;
-  width: 1.5rem;
+  width: 1rem;
   color: #888;   
   z-index: 2;  
   font-size: 0.8125rem;
@@ -130,49 +130,37 @@
   font-size: 0.9375rem;
 }
 
-/* todo optimized */
-.cur-view-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.cur-view-content .wiki-page-container{
-  margin: -0.625rem -1rem -1.25rem;
-  padding: 0.625rem 1rem 1.25rem;
+/* file layout */
+.dir-content-main .wiki-page-container {
+  padding: 0 1rem 1.25rem;
   display: flex;
   flex: 1;
-  overflow: auto;
 }
 
-.cur-view-content .wiki-page-content {
+/* wiki-page-content */
+.wiki-page-content {
   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 {
   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 {
   cursor: pointer;
 }
-
-.wiki-side-nav .wiki-page-content a {
-  color: #212529;
-  cursor: pointer;
-}
-
 .wiki-page-ops {
-    position: fixed;
-    top: 10px;
+  position: fixed;
+  top: 10px;
 }
 
 @media (min-width: 768px) {
@@ -205,13 +193,3 @@
   font-size:12px;
   color: #666;
 }
-
-.wiki-md-viewer-rendered-content.article h1 {
-  margin-top: 0;
-}
-
-.index-edit {
-  position: absolute;
-  right: 0.25rem;
-  top: 0.25rem;
-}
diff --git a/frontend/src/css/toolbar.css b/frontend/src/css/toolbar.css
index 785d7c025e..3e125d9f25 100644
--- a/frontend/src/css/toolbar.css
+++ b/frontend/src/css/toolbar.css
@@ -31,7 +31,19 @@
   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;
 }
 /* end file-operation toolbar */
diff --git a/frontend/src/pages/lib-content-view/lib-content-toolbar.js b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
index 134f5b2282..634710111e 100644
--- a/frontend/src/pages/lib-content-view/lib-content-toolbar.js
+++ b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { Tooltip } from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -45,6 +46,13 @@ const propTypes = {
 
 class LibContentToolbar extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      isDraftMessageShow: false,
+    };
+  }
+
   onEditClick = (e) => {
     e.preventDefault();
     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) {
       return (
         <Fragment>
@@ -75,7 +86,10 @@ class LibContentToolbar extends React.Component {
               )}
               {/* default have read priv */}
               {(!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>
             <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode}/>