Lib view mode improve (#2968)

* optimized column style

* update heading icon font-size

* improve code style

frontend/src/components/file-content-view.js

@@ -107,6 +107,7 @@ class FileContentView extends React.Component {
             </div>
             <div className="cur-view-content">
               <WikiMarkdownViewer
+                isTOCShow={false}
                 isFileLoading={this.props.isFileLoading}
                 markdownContent={this.props.content}
                 lastModified = {this.props.lastModified}

frontend/src/components/wiki-markdown-viewer.js

@@ -12,7 +12,8 @@ const propTypes = {
   latestContributor: PropTypes.string.isRequired,
   lastModified: PropTypes.string.isRequired,
   onLinkClick: PropTypes.func.isRequired,
-  isWiki: PropTypes.bool
+  isWiki: PropTypes.bool,
+  isTOCShow: PropTypes.bool,
 };
 
 const contentClass = 'wiki-page-content';
@@ -152,10 +153,14 @@ class WikiMarkdownViewer extends React.Component {
   }
 
   renderMarkdown = () => {
+    let isTOCShow = true;
+    if (this.props.isTOCShow === false) {
+      isTOCShow = false;
+    }
     if (this.props.isWiki) {
       return (
         <MarkdownViewer
-          showTOC={true}
+          showTOC={isTOCShow}
           markdownContent={this.props.markdownContent}
           activeTitleIndex={this.state.activeTitleIndex}
           onContentRendered={this.onContentRendered}
@@ -166,7 +171,7 @@ class WikiMarkdownViewer extends React.Component {
 
     return (
       <MarkdownViewer
-        showTOC={true}
+        showTOC={isTOCShow}
         markdownContent={this.props.markdownContent}
         activeTitleIndex={this.state.activeTitleIndex}
         onContentRendered={this.onContentRendered}

frontend/src/css/lib-content-view.css

@@ -50,6 +50,10 @@
   font-size: 0.8125rem;
 }
 
+.heading-icon .action-icon {
+  font-size: 1.125rem;
+}
+
 /*tree view */
 .tree-view {
   padding: 0 12px 0 0;
@@ -65,6 +69,7 @@
 
 .tree-node-inner-hover {
   background-color: rgb(255,239,178);
+  border-radius: 0.25rem;
 }
 
 .tree-node-inner .tree-node-text {
@@ -79,7 +84,6 @@
 .tree-node-inner .left-icon {
   position: absolute;
   display:flex;
-  justify-content:center;
   align-items:center;
   top: 0;
   left: 0;
@@ -107,7 +111,7 @@
 .tree-node-inner .right-icon {
   position: absolute;
   top: 0;
-  right: 1rem;
+  right: 0.5rem;
   bottom: 0;
   width: 1.5rem;
   color: #888;   
@@ -151,6 +155,30 @@
   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;
+  display: flex;
+  flex: 1;
+  overflow: auto;
+}
+
+.cur-view-content .wiki-page-content {
+  /* width: calc(100% - 160px); */
+  flex: 1;
+  padding-right: 40px;
+}
+
+.dir-main-content .wiki-page-content .article {
+  padding: 0 10px;
+}
+
 .dir-main-content .wiki-page-content .ml-2 {
   text-decoration: underline;
 }
@@ -160,9 +188,57 @@
   color:#eb8205;
 }
 
-/* todo optimized */
+.wiki-page-content a {
+  cursor: pointer;
+}
+
+.wiki-side-nav .wiki-page-content a {
+  color: #212529;
+  cursor: pointer;
+}
+
+.wiki-page-ops {
+    position: fixed;
+    top: 10px;
+}
+
+@media (min-width: 768px) {
+  .wiki-page-ops:before {
+    content:'';
+    border-left:1px solid #ddd;
+    position:absolute;
+    top:3px;
+    left:-16px;
+    bottom:3px;
+  }
+}
+
+.wiki-page-list-item {
+  word-break:break-all;
+  line-height:1.6;
+  margin:3px 0;
+}
+
+.wiki-page-link,
+.wiki-page-link:hover {
+  font-size:1.15em;
+  font-weight:normal;
+  color:#444;
+  margin-left:5px;
+}
+
 #wiki-page-last-modified {
   padding: 40px 10px;
   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/side-panel.css

@@ -105,6 +105,7 @@
 
 .tree-node-inner-hover {
   background-color: rgb(255,239,178);
+  border-radius: 0.25rem;
 }
 
 .tree-node-inner .tree-node-text {

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -32,7 +32,7 @@ class LibContentView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      currentMode: cookie.load('seafile-view-mode'),
+      currentMode: cookie.load('seafile-view-mode') || 'list',
       path: '',
       pathExist: true,
       isViewFile: false,