style (#3112)

frontend/src/components/markdown-view/comments-list.js

@@ -154,7 +154,6 @@ const CommentItempropTypes = {
   editorUtilities: PropTypes.object.isRequired,
   item: PropTypes.object,
   time: PropTypes.string,
-  key: PropTypes.number,
   editComment: PropTypes.func,
   showResolvedComment: PropTypes.bool,
   deleteComment: PropTypes.func,
@@ -301,6 +300,6 @@ class CommentItem extends React.Component {
   }
 }
 
-CommentsList.propTypes = CommentItempropTypes;
+CommentItem.propTypes = CommentItempropTypes;
 
 export default CommentsList;

frontend/src/components/markdown-view/history-list.js

@@ -20,7 +20,7 @@ class HistoryList extends React.Component {
     this.perPage = 25;
     this.state = {
       historyList: [],
-      activeItem: -1,
+      activeItem: 0,
       currentPage: 1,
       totalReversionCount: 0,
       loading: false
@@ -132,12 +132,13 @@ HistoryList.propTypes = propTypes;
 
 
 const HistoryItempropTypes = {
-  ctime: PropTypes.number,
+  ctime: PropTypes.string,
   onClick: PropTypes.func,
   index: PropTypes.number,
-  preItem: PropTypes.string,
-  currewntItem: PropTypes.string,
+  preItem: PropTypes.object,
+  currewntItem: PropTypes.object,
   name: PropTypes.string,
+  className: PropTypes.string,
 };
 
 class HistoryItem extends React.Component {
@@ -152,7 +153,7 @@ class HistoryItem extends React.Component {
   }
 }
 
-HistoryList.propTypes = HistoryItempropTypes;
+HistoryItem.propTypes = HistoryItempropTypes;
 
 
 export default HistoryList;

frontend/src/components/markdown-view/outline.js

@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 
-const propTypes = {
+
+const OutlineItempropTypes = {
   scrollToNode: PropTypes.func.isRequired,
-  isViewer: PropTypes.bool.isRequired,
-  document: PropTypes.object.isRequired,
-  editor: PropTypes.object.isRequired,
+  node: PropTypes.object.isRequired,
+  active: PropTypes.string.isRequired,
 };
 
 class OutlineItem extends React.PureComponent {
@@ -35,6 +35,17 @@ class OutlineItem extends React.PureComponent {
   }
 }
 
+OutlineItem.propTypes = OutlineItempropTypes;
+
+const propTypes = {
+  scrollToNode: PropTypes.func.isRequired,
+  isViewer: PropTypes.bool.isRequired,
+  document: PropTypes.object.isRequired,
+  editor: PropTypes.object.isRequired,
+  activeTitleIndex: PropTypes.number,
+  value: PropTypes.object,
+};
+
 class OutlineView extends React.PureComponent {
 
   render() {
@@ -58,7 +69,7 @@ class OutlineView extends React.PureComponent {
                 scrollToNode={this.props.scrollToNode}
               />
             );
-        }) : <div className={'size-panel-no-content'}>{gettext('No out line.')}</div>}
+          }) : <div className={'size-panel-no-content'}>{gettext('No outline')}</div>}
       </div>
     );
   }

frontend/src/css/markdown-viewer/comments-list.css

@@ -1,5 +1,4 @@
 .seafile-comment {
-  border-left: 1px solid #e6e6dd;
   background-color: #fff;
   display: flex;
   flex-direction: column;
@@ -12,11 +11,14 @@
   border-bottom: 1px solid #e5e5e5;
   min-height: 2em;
   line-height: 2em;
-  padding: 0 1em;
+  padding: 2px 1em;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   background-color: #fafaf9;
+  position: absolute;
+  z-index: 1;
+  width: 30%;
 }
 .seafile-comment-title .seafile-comment-title-close {
   color: #b9b9b9;
@@ -27,7 +29,10 @@
 .seafile-comment-list {
   height: calc(100% - 40px);
   overflow-y: auto;
-  margin-bottom: 120px;
+  margin: 30px 0 120px;
+}
+.seafile-comment::-webkit-scrollbar {
+  display: none;
 }
 .seafile-comment-list .comment-vacant {
   padding: 1em;
@@ -95,7 +100,7 @@
   position: absolute;
   bottom: 0;
   padding: 0;
-  width: inherit;
+  width: 30%;
 }
 .seafile-comment-footer .seafile-add-comment {
   margin: 10px 20px 5px 15px;
@@ -113,7 +118,8 @@
 }
 .seafile-add-comment .add-comment-input {
   height: calc(100% - 50px);
-  width:  calc(100% - 40px);
+  width: 92%;
+  max-height: 300px;
 }
 .seafile-comment-footer .seafile-add-comment .submit-comment {
   margin-top: 5px;

frontend/src/css/markdown-viewer/history-viewer.css

@@ -1,6 +1,5 @@
 .seafile-history-side-panel {
   user-select: none;
-  border-left: 1px solid #e5e5e5;
   background-color: #fff;
   display: flex;
   flex-direction: column;

frontend/src/css/markdown-viewer/markdown-editor.css

@@ -1,6 +1,8 @@
 .seafile-md-viewer {
   height: 100%;
   flex-direction: row;
+  position: relative;
+  float: none;
 }
 .sf-md-viewer-topbar-first {
   padding: 4px 10px;
@@ -13,7 +15,16 @@
 .seafile-md-viewer-container {
   width: 70%;
   background-color: #fafaf9;
-  overflow-y: auto;
+  overflow: hidden;
+  height: 100%;
+}
+.seafile-md-viewer-container:hover {
+  overflow: auto;
+}
+.seafile-md-viewer-slate {
+  flex: auto;
+  position: relative;
+  margin: 20px 40px;
 }
 .seafile-md-viewer-main {
   flex:auto;
@@ -21,41 +32,11 @@
   background:#fafaf9;
   width: 70%;
 }
-
-.seafile-md-viewer-outline-heading2,
-.seafile-md-viewer-outline-heading3 {
-  margin-left: .75rem;
-  line-height: 2.5;
-  color:#666;
-  white-space: nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-  cursor:pointer;
-}
-.seafile-md-viewer-outline-heading3 {
-  margin-left: 2rem;
-}
-.seafile-md-viewer-outline-heading2:hover,
-.seafile-md-viewer-outline-heading3:hover {
-  color: #eb8205;
-}
-.seafile-markdown-outline {
-  position: fixed;
-  padding-right: 1rem;
-  top: 97px;
-  right: 0;
-  width: 200px;
-  overflow: scroll;
-  height: 80%;
-}
-.seafile-editor-outline {
-  border-left: 1px solid #ddd;
-}
-.seafile-markdown-outline .active {
+.seafile-editor-outline .active {
   color: #eb8205;
   border-left: 1px solid #eb8205;
 }
-.seafile-markdown-outline .outline-h2, .seafile-markdown-outline .outline-h3 {
+.seafile-editor-outline .outline-h2, .seafile-editor-outline .outline-h3 {
   height: 30px;
   margin-left: 0;
   white-space: nowrap;
@@ -63,24 +44,24 @@
   text-overflow: ellipsis;
   font-size: 14px;
 }
-.seafile-markdown-outline .outline-h2 {
+.seafile-editor-outline .outline-h2 {
   padding-left: 20px;
 }
-.seafile-markdown-outline .outline-h3 {
+.seafile-editor-outline .outline-h3 {
   padding-left: 40px;
 }
-
 /* side-panel */
 .seafile-md-viewer-side-panel {
   height: 100%;
   overflow:hidden;
   user-select: none;
+  width: 30%;
 }
 .seafile-md-viewer-side-panel .seafile-editor-outline {
   border-left: 0;
 }
 .seafile-md-viewer-side-panel:hover {
-  overflow:auto;
+  overflow: auto;
 }
 .seafile-md-viewer-side-panel-heading {
   padding:7px 0;
@@ -100,7 +81,11 @@
 }
 .seafile-md-viewer-side-panel .tab-content {
   height: calc(100% - 39px);
-  overflow-y: scroll;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.seafile-md-viewer-side-panel .tab-content .outline {
+  padding: 20px;
 }
 .seafile-md-viewer-side-panel .md-side-panel-nav {
   margin: 0;
@@ -146,16 +131,12 @@
   cursor: pointer;
   background-color: #eee;
 }
-.seafile-md-viewer-slate {
-  flex: auto;
-  position: relative;
-  margin: 20px 40px;
-}
+
 @media (max-width:991.8px) {
   .seafile-md-viewer-side-panel {
     display:none;
   }
-  .seafile-markdown-outline {
+  .seafile-editor-outline {
     display: none;
   }
   .seafile-md-viewer-slate {

frontend/src/markdown-editor.js

@@ -5,6 +5,8 @@ import { Value, Document, Block } from 'slate';
 import { seafileAPI } from './utils/seafile-api';
 import { Utils } from './utils/utils';
 import { gettext } from './utils/constants';
+import io from 'socket.io-client';
+import toaster from './components/toast';
 import ModalPortal from './components/modal-portal';
 import EditFileTagDialog from './components/dialog/edit-filetag-dialog';
 import ListRelatedFileDialog from './components/dialog/list-related-file-dialog';
@@ -12,20 +14,18 @@ import AddRelatedFileDialog from './components/dialog/add-related-file-dialog';
 import ShareDialog from './components/dialog/share-dialog';
 import CommentDialog from './components/markdown-view/comment-dialog';
 import MarkdownViewerSlate from '@seafile/seafile-editor/dist/viewer/markdown-viewer-slate';
-import io from "socket.io-client";
-import toaster from "./components/toast";
-import { serialize, deserialize } from "@seafile/seafile-editor/dist/utils/slate2markdown";
-import LocalDraftDialog from "@seafile/seafile-editor/dist/components/local-draft-dialog";
+import { serialize, deserialize } from '@seafile/seafile-editor/dist/utils/slate2markdown';
+import LocalDraftDialog from '@seafile/seafile-editor/dist/components/local-draft-dialog';
 import DiffViewer from '@seafile/seafile-editor/dist/viewer/diff-viewer';
 import MarkdownViewerToolbar from './components/toolbar/markdown-viewer-toolbar';
 import MarkdownViewerSidePanel from './components/markdown-view/markdown-viewer-side-panel';
 import Loading from './components/loading';
-import { Editor, findRange } from '@seafile/slate-react';
+import { findRange } from '@seafile/slate-react';
 
 import './css/markdown-viewer/markdown-editor.css';
 
 const CryptoJS = require('crypto-js');
-const { repoID, repoName, filePath, fileName, mode, draftID, draftFilePath, draftOriginFilePath, isDraft, hasDraft, shareLinkExpireDaysMin, shareLinkExpireDaysMax } = window.app.pageOptions;
+const { repoID, repoName, filePath, fileName, mode, draftID, isDraft, hasDraft } = window.app.pageOptions;
 const { siteRoot, serviceUrl, seafileCollabServer } = window.app.config;
 const userInfo = window.app.userInfo;
 const userName = userInfo.username;
@@ -395,12 +395,12 @@ class MarkdownEditor extends React.Component {
   setEditorMode = (type) => {
     this.setState({
       editorMode: type
-    })
+    });
   }
 
   setDraftValue = (type, value) => {
     if (type === 'rich') {
-      this.draftRichValue = value
+      this.draftRichValue = value;
     } else {
       this.draftPlainValue = value;
     }
@@ -511,11 +511,11 @@ class MarkdownEditor extends React.Component {
   componentWillUnmount() {
     this.socket.emit('repo_update', {
       request: 'unwatch_update',
-        repo_id: this.props.editorUtilities.repoID,
+      repo_id: this.props.c.repoID,
       user: {
-        name: this.props.editorUtilities.name,
-          username: this.props.editorUtilities.username,
-          contact_email: this.props.editorUtilities.contact_email,
+      name: editorUtilities.name,
+        username: editorUtilities.username,
+        contact_email: editorUtilities.contact_email,
       },
     });
     document.removeEventListener('selectionchange', this.setBtnPosition);
@@ -648,7 +648,8 @@ class MarkdownEditor extends React.Component {
     let that = this;
     if (that.timer) {
       return;
-    } else {
+    }
+    else {
       that.timer = setTimeout(() => {
         let str = '';
         if (this.state.editorMode == 'rich') {
@@ -883,9 +884,9 @@ class MarkdownEditor extends React.Component {
               toggleNewDraft={editorUtilities.createDraftFile}
             />
             <div className="seafile-md-viewer d-flex">
-                <div className="seafile-md-viewer-container d-flex" ref="markdownContainer">
+              <div className="seafile-md-viewer-container" ref="markdownContainer">
                 {
-                    this.state.activeTab === "history" ?
+                  this.state.activeTab === 'history' ?
                     <div className="diff-container">
                       <div className="diff-wrapper article">
                         { this.state.loadingDiff ?
@@ -924,7 +925,7 @@ class MarkdownEditor extends React.Component {
               />
             </div>
           </div>
-          )
+        );
       } else {
         component = <SeafileEditor
           fileInfo={this.state.fileInfo}
@@ -951,7 +952,7 @@ class MarkdownEditor extends React.Component {
           fileTagList={this.state.fileTagList}
           deleteDraft={this.deleteDraft}
           showDraftSaved={this.state.showDraftSaved}
-          />
+        />;
       }
 
       return (