View mode improve (#2984)

* improve file content layout

* repair review tab padding bug

* combine operation btn

* update code style

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

@@ -66,7 +66,6 @@ class DirColumnFile extends React.Component {
       );
     }
     return (
-      <div className="cur-view-content">
       <WikiMarkdownViewer
         isTOCShow={false}
         isFileLoading={this.props.isFileLoading}
@@ -94,7 +93,6 @@ class DirColumnFile extends React.Component {
           }
         </Fragment>
       </WikiMarkdownViewer>
-      </div>
     );
   }
 }

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>
     );
   }
 }

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');}}

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}

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,46 +130,34 @@
   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;
@@ -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;
-}

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 */

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}/>