12.0 change edit wiki page style (#6109)

* 00 change className from app

* change wiki2 side panel style

frontend/src/assets/icons/drag.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#949494;}
-</style>
-<title>drag</title>
-<desc>Created with Sketch.</desc>
-<g id="drag">
-	<g id="形状结合" transform="translate(8.000000, 3.000000)">
-		<path class="st0" d="M0,0h6v6H0V0z M10,0h6v6h-6V0z M10,10h6v6h-6V10z M0,10h6v6H0V10z M0,20h6v6H0V20z M10,20h6v6h-6V20z"/>
-	</g>
-</g>
-</svg>

frontend/src/assets/icons/wiki-folder.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#949494;}
+</style>
+<g>
+	<path id="path-1" class="st0" d="M28.8,12.8H3.2v-8c0-0.9,0.5-1.6,1.4-1.6H10c0.6,0,1.2,0.3,1.4,0.9l1.8,3.7
+		c0.5,1.1,1.7,1.8,2.9,1.8H27c0.9,0,1.8,0.7,1.8,1.6V12.8z M28.8,27.2c0,0.9-0.9,1.6-1.8,1.6H4.6c-0.9,0-1.4-0.7-1.4-1.6V16h25.6
+		V27.2z M28.6,6.4H17.8c-1.2,0-2.3-0.7-2.9-1.8l-1.4-2.9C13,0.7,11.9,0,10.6,0H3C1.3,0,0,1.4,0,3.2v25.6C0,30.6,1.3,32,3,32h25.6
+		c1.8,0,3.4-1.4,3.4-3.2V9.6C32,7.8,30.4,6.4,28.6,6.4L28.6,6.4z"/>
+</g>
+<title>folder</title>
+<g id="folder">
+	<g>
+		<path id="path-1_1_" class="st1" d="M28.8,12.8H3.2v-8c0-0.9,0.5-1.6,1.4-1.6H10c0.6,0,1.2,0.3,1.4,0.9l1.8,3.7
+			c0.5,1.1,1.7,1.8,2.9,1.8H27c0.9,0,1.8,0.7,1.8,1.6V12.8z M28.8,27.2c0,0.9-0.9,1.6-1.8,1.6H4.6c-0.9,0-1.4-0.7-1.4-1.6V16h25.6
+			V27.2z M28.6,6.4H17.8c-1.2,0-2.3-0.7-2.9-1.8l-1.4-2.9C13,0.7,11.9,0,10.6,0H3C1.3,0,0,1.4,0,3.2v25.6C0,30.6,1.3,32,3,32h25.6
+			c1.8,0,3.4-1.4,3.4-3.2V9.6C32,7.8,30.4,6.4,28.6,6.4L28.6,6.4z"/>
+	</g>
+</g>
+</svg>

frontend/src/pages/wiki2/constant.js

@@ -0,0 +1,4 @@
+const FOLDER = 'folder';
+const PAGE = 'page';
+
+export { FOLDER, PAGE };

frontend/src/pages/wiki2/css/view-structure.css

@@ -1,5 +1,5 @@
 .view-structure {
-  height: calc(100% - 50px);
+  height: 100%;
   display: flex;
   flex-direction: column;
 }
@@ -12,7 +12,6 @@
 }
 
 .view-structure-body {
-  margin-top: 10px;
   padding-bottom: 0.5rem;
   overflow: auto;
   user-select: none;
@@ -65,13 +64,21 @@
   font-weight: 500;
   align-items: center;
   justify-content: center;
-  background-color: #fff;
+  border-radius: 3px;
+  background-color: #F7F7F5;
+}
+
+.view-structure .view-item.selected-view {
+  background-color: #EDEDEA;
 }
 
-.view-structure .view-item.selected-view,
 .view-structure .view-folder-wrapper:hover,
 .view-structure .view-item:hover {
-  background-color: #f5f5f5;
+  background-color: #EFEFED;
+}
+
+.view-structure .view-item.selected-view:hover {
+  background-color: #E6E6E4;
 }
 
 .view-structure .folder-main,
@@ -87,24 +94,6 @@
   padding-left: 20px;
 }
 
-.view-structure .rdg-drag-handle {
-  width: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  visibility: hidden;
-}
-
-.view-structure .rdg-drag-handle:hover {
-  cursor: move;
-  cursor: grab;
-}
-
-.view-structure .view-folder-wrapper:hover .rdg-drag-handle,
-.view-structure .view-item:hover .rdg-drag-handle {
-  visibility: visible;
-}
-
 .view-structure .view-folder-wrapper .icon-expand-folder {
   display: inline-block;
   font-size: 12px;
@@ -185,6 +174,10 @@
   user-select: none;
 }
 
+.view-structure-footer:hover {
+  background-color: #EFEFED;
+}
+
 .view-structure-footer.return-to-app {
   position: absolute;
   width: 100%;
@@ -222,9 +215,10 @@
 }
 
 .view-structure-footer .add-view-btn {
-  padding-left: 20px;
-  border-top: none;
+  padding: 0 12px;
   height: 40px;
+  border-top: none;
+  background-color: transparent;
 }
 
 .view-structure-footer .add-view-btn .dtable-icon-add-table {
@@ -380,7 +374,6 @@
 .view-structure-light.view-structure .view-folder .seafile-multicolor-icon-more-level,
 .view-structure-light.view-structure .view-folder .icon-expand-folder {
   color: #666;
-  margin-left: 4px;
 }
 
 .view-structure .view-folder-wrapper.can-drop-top::before {

frontend/src/pages/wiki2/index.js

@@ -214,7 +214,6 @@ class Wiki extends Component {
     this.removePythonWrapper();
     wikiAPI.getWiki2FileContent(wikiId, filePath).then(res => {
       let data = res.data;
-
       this.setState({
         isDataLoading: false,
         content: data.content,
@@ -605,6 +604,8 @@ class Wiki extends Component {
         />
         <MainPanel
           path={this.state.path}
+          config={this.state.config}
+          currentPageId={this.state.currentPageId}
           pathExist={this.state.pathExist}
           isViewFile={this.state.isViewFile}
           isDataLoading={this.state.isDataLoading}

frontend/src/pages/wiki2/main-panel.js

@@ -1,15 +1,11 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { SdocWikiViewer } from '@seafile/sdoc-editor';
-import { gettext, repoID, siteRoot, username, isWiki2 } from '../../utils/constants';
-import SeafileMarkdownViewer from '../../components/seafile-markdown-viewer';
+import { gettext, repoID, siteRoot, username } from '../../utils/constants';
 import Loading from '../../components/loading';
 import { Utils } from '../../utils/utils';
-// import Search from '../../components/search/search';
-import Notification from '../../components/common/notification';
 import Account from '../../components/common/account';
-
-import './wiki.css';
+import WikiTopNav from './top-nav';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -26,6 +22,8 @@ const propTypes = {
   onLinkClick: PropTypes.func.isRequired,
   seadoc_access_token: PropTypes.string,
   assets_url: PropTypes.string,
+  config: PropTypes.object,
+  currentPageId: PropTypes.string,
 };
 
 class MainPanel extends Component {
@@ -110,57 +108,21 @@ class MainPanel extends Component {
     const editorContent = content && JSON.parse(content);
     const isReadOnly = !(permission === 'rw');
     return (
-      <div className="main-panel wiki-main-panel" style={{ flex: isWiki2 ? '1 0 76%' : '1 0 80%' }}>
+      <div className="wiki2-main-panel">
         <div className="main-panel-hide hide">{this.props.content}</div>
-        <div className={`main-panel-north panel-top ${this.props.permission === 'rw' ? 'border-left-show' : ''}`}>
-          {!username &&
-            <Fragment>
-              <div className="cur-view-toolbar">
-                <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span>
-                {this.props.permission == 'rw' && (
-                  Utils.isDesktop() ?
-                    <button className="btn btn-secondary operation-item" title={gettext('Edit')} onClick={this.onEditClick}>{gettext('Edit')}</button> :
-                    <span className="fa fa-pencil-alt mobile-toolbar-icon" title={gettext('Edit')} onClick={this.onEditClick} style={{ 'fontSize': '1.1rem' }}></span>
-                )}
-              </div>
-              <div className="common-toolbar">
-                {/* {isPro && (
-                  <Search isPublic={true} repoID={repoID} onSearchedClick={onSearchedClick} placeholder={gettext('Search files')}/>
-                )} */}
-              </div>
-            </Fragment>
-          }
-          {username && (
-            <Fragment>
-              <div className="cur-view-toolbar">
-                <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span>
-              </div>
-              <div className="common-toolbar">
-                {/* {isPro && (
-                  <Search isPublic={true} repoID={repoID} onSearchedClick={onSearchedClick} placeholder={gettext('Search files')}/>
-                )} */}
-                <Notification />
+        <div className='wiki2-main-panel-north'>
+          <WikiTopNav
+            config={this.props.config}
+            currentPageId={this.props.currentPageId}
+          />
+          {username &&
             <Account />
-              </div>
-            </Fragment>
-          )}
+          }
         </div>
         <div className="main-panel-center">
           <div className={`cur-view-content ${isViewingFile ? 'o-hidden' : ''}`}>
             {!this.props.pathExist && errMessage}
             {this.props.pathExist && this.props.isDataLoading && <Loading />}
-            {/* {isViewingFile && Utils.isMarkdownFile(this.props.path) && (
-              <SeafileMarkdownViewer
-                isWiki={true}
-                path={this.props.path}
-                repoID={repoID}
-                markdownContent={content}
-                isFileLoading={this.props.isDataLoading}
-                lastModified={this.props.lastModified}
-                latestContributor={this.props.latestContributor}
-                onLinkClick={this.props.onLinkClick}
-              />
-            )} */}
             {isViewingFile && Utils.isSdocFile(this.props.path) && (
               <SdocWikiViewer
                 document={editorContent}

frontend/src/pages/wiki2/side-panel.css

@@ -0,0 +1,46 @@
+.wiki2-side-panel {
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: #F7F7F5;;
+  border-right: 1px solid #F1F1EF;
+}
+
+.wiki2-side-panel .wiki2-side-panel-top {
+  padding: 8px 20px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 44px;
+}
+
+.wiki2-side-panel .wiki2-side-nav {
+  flex: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.wiki2-side-panel .wiki2-side-nav .wiki2-pages-container {
+  flex: 1;
+  overflow: hidden;
+  padding: 8px;
+  padding-top: 10px;
+}
+
+.wiki2-side-panel .wiki2-side-nav .wiki2-pages-container:hover {
+  overflow: auto;
+}
+
+.wiki2-side-panel .wiki2-side-nav .wiki2-pages-container .tree-view {
+  margin-left: -10px;
+  margin-top: 14px;
+  padding-left: 0;
+}
+
+@media (max-width: 767px) {
+  .wiki2-side-panel {
+    z-index: 1051;
+  }
+}

frontend/src/pages/wiki2/side-panel.js

@@ -15,9 +15,9 @@ import { generateUniqueId, isObjectNotEmpty } from './utils';
 import Folder from './models/folder';
 import Page from './models/page';
 import { seafileAPI } from '../../utils/seafile-api';
+import { FOLDER } from './constant';
 
-export const FOLDER = 'folder';
-export const PAGE = 'page';
+import './side-panel.css';
 
 const { repoName } = window.wiki.config;
 
@@ -52,7 +52,7 @@ class SidePanel extends Component {
 
   renderIndexView = () => {
     return (
-      <div className="wiki-pages-container">
+      <div className="wiki2-pages-container">
         <div style={{ marginTop: '2px' }}></div>
         <IndexMdViewer
           indexContent={this.props.indexContent}
@@ -64,7 +64,7 @@ class SidePanel extends Component {
 
   renderTreeView = () => {
     return (
-      <div className="wiki-pages-container">
+      <div className="wiki2-pages-container">
         {/* {this.props.treeData && (
           <TreeView
             treeData={this.props.treeData}
@@ -339,7 +339,7 @@ class SidePanel extends Component {
     const { config } = this.props;
     const { pages, navigation } = config;
     return (
-      <div className="wiki-pages-container">
+      <div className="wiki2-pages-container">
         <ViewStructure
           isEditMode={isWiki2}
           navigation={navigation}
@@ -392,11 +392,11 @@ class SidePanel extends Component {
 
   render() {
     return (
-      <div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? '' : 'left-zero'}`}>
-        <div className="side-panel-top panel-top">
-          <h4 className="ml-0 mb-0 text-truncate" title={repoName}>{repoName}</h4>
+      <div className={`wiki2-side-panel${this.props.closeSideBar ? '' : ' left-zero'}`}>
+        <div className="wiki2-side-panel-top">
+          <h4 className="text-truncate ml-0 mb-0" title={repoName}>{repoName}</h4>
         </div>
-        <div id="side-nav" className="wiki-side-nav" role="navigation">
+        <div className="wiki2-side-nav">
           {this.renderContent()}
         </div>
       </div>

frontend/src/pages/wiki2/top-nav/index.css

@@ -0,0 +1,21 @@
+.wiki2-top-nav .wiki2-top-nav-item {
+  align-items: center;
+  padding: 2px 6px;
+}
+
+.wiki2-top-nav>div:not(.wiki2-top-nav-item) {
+  margin: 2px 2px 0 2px;
+}
+
+.wiki2-top-nav .wiki2-top-nav-item:hover {
+  background-color: #EFEFEF;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.wiki2-top-nav .wiki2-top-nav-item .nav-item-icon {
+  width: 16px;
+  height: 16px;
+  margin-left: 0;
+  margin-right: 4px;
+}

frontend/src/pages/wiki2/top-nav/index.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import NavItemIcon from '../view-structure/nav-item-icon';
+import './index.css';
+
+function WikiTopNav({ config, currentPageId }) {
+  const { navigation, pages } = config;
+  const folder = navigation.find(item => {
+    return item.type === 'folder' && item.children && item.children.find(item => item.id === currentPageId);
+  });
+  const page = pages.find(page => page.id === currentPageId);
+  return (
+    <div className="wiki2-top-nav d-flex">
+      {folder &&
+        <>
+          <div className='wiki2-top-nav-item d-flex'>
+            <NavItemIcon symbol={'wiki-folder'} disable={true} />
+            {folder.name}
+          </div>
+          <div>/</div>
+        </>
+      }
+      {page &&
+        <div className='wiki2-top-nav-item d-flex'>
+          <NavItemIcon symbol={'file'} disable={true} />
+          {page.name}
+        </div>
+      }
+    </div>
+  );
+}
+
+WikiTopNav.propTypes = {
+  config: PropTypes.object,
+  currentPageId: PropTypes.string,
+};
+
+export default WikiTopNav;

frontend/src/pages/wiki2/view-structure/folders/folder-item.js

@@ -5,9 +5,8 @@ import FolderOperationDropdownMenu from './folder-operation-dropdownmenu';
 import ViewItem from '../views/view-item';
 import DraggedFolderItem from './dragged-folder-item';
 import ViewEditPopover from '../../view-structure/views/view-edit-popover';
-import Icon from '../../../../components/icon';
-
-const FOLDER = 'folder';
+import { FOLDER } from '../../constant';
+import NavItemIcon from '../nav-item-icon';
 
 class FolderItem extends Component {
 
@@ -18,6 +17,7 @@ class FolderItem extends Component {
       isEditing: false,
       icon: icon || '',
       name: name || '',
+      isMouseEnter: false,
     };
   }
 
@@ -178,43 +178,49 @@ class FolderItem extends Component {
     return height;
   };
 
+  onMouseEnter = () => {
+    this.setState({ isMouseEnter: true });
+  };
+
+  onMouseLeave = () => {
+    this.setState({ isMouseEnter: false });
+  };
+
   render() {
     const {
       connectDropTarget, connectDragPreview, connectDragSource, isOver, canDrop,
       isEditMode, folder, tableGridsLength, id_view_map, isOnlyOneView, layerDragProps,
     } = this.props;
     const { isEditing } = this.state;
-    const { id: folderId, name, children, icon } = folder;
+    const { id: folderId, name, children } = folder;
     const folded = this.props.getFolderState(folderId);
     let viewEditorId = `folder-item-${folderId}`;
+    let fn = isEditMode ? connectDragSource : (argu) => {argu;};
     return (
       <div
         className={classnames('view-folder', { 'readonly': !isEditMode })}
         ref={ref => this.foldRef = ref}
         onClick={this.onToggleExpandFolder}
       >
-        {connectDropTarget(
+        {fn(connectDropTarget(
           connectDragPreview(
             <div
               className={this.getFolderClassName(layerDragProps, isOver && canDrop)}
               ref={ref => this.foldWrapprRef = ref}
+              onMouseEnter={this.onMouseEnter}
+              onMouseLeave={this.onMouseLeave}
             >
               <div className='folder-main'>
-                {isEditMode ?
-                  connectDragSource(
-                    <div className="rdg-drag-handle">
-                      <Icon symbol={'drag'}/>
-                    </div>
-                  )
-                  :
-                  <div className="rdg-drag-handle"></div>
-                }
                 <div
                   className='folder-content'
                   style={{ marginLeft: `${(this.props.foldersStr.split('-').length - 1) * 16}px` }}
                   id={viewEditorId}
                 >
-                  {icon && <svg className="mr-2 svg-item"><use xlinkHref={`#${icon}`}/></svg>}
+                  {this.state.isMouseEnter ?
+                    <NavItemIcon className="icon-expand-folder" symbol={folded ? 'right-slide' : 'drop-down'}/>
+                    :
+                    <NavItemIcon symbol={'wiki-folder'} disable={true} />
+                  }
                   <span className='folder-name text-truncate' title={name}>{name}</span>
                   {isEditing &&
                     <ViewEditPopover
@@ -237,10 +243,10 @@ class FolderItem extends Component {
                   folderId={folderId}
                 />
               }
-              <Icon className="icon-expand-folder" symbol={folded ? 'left-slide' : 'drop-down'}/>
             </div>
           )
-        )}
+        ))
+        }
         <div
           className="view-folder-children"
           style={{ height: this.getFolderChildrenHeight() }}

frontend/src/pages/wiki2/view-structure/nav-item-icon.css

@@ -0,0 +1,14 @@
+.nav-item-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.nav-item-icon:hover:not(.nav-item-icon-disable) {
+  background-color: #DFDFDD;
+}

frontend/src/pages/wiki2/view-structure/nav-item-icon.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '../../../components/icon';
+import classNames from 'classnames';
+import './nav-item-icon.css';
+
+function NavItemIcon({ symbol, className, disable }) {
+  return (
+    <div className={classNames('nav-item-icon', {'nav-item-icon-disable': disable})}>
+      <Icon symbol={symbol} className={className} />
+    </div>
+  );
+}
+
+NavItemIcon.propTypes = {
+  symbol: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  disable: PropTypes.bool,
+};
+
+export default NavItemIcon;

frontend/src/pages/wiki2/view-structure/page-utils.js

@@ -1,5 +1,4 @@
-const FOLDER = 'folder';
-const PAGE = 'page';
+import { FOLDER, PAGE } from '../constant';
 
 export default class PageUtils {
 

frontend/src/pages/wiki2/view-structure/view-structure.js

@@ -11,9 +11,6 @@ import { repoID } from '../../../utils/constants';
 
 import '../css/view-structure.css';
 
-export const FOLDER = 'folder';
-export const PAGE = 'page';
-
 class ViewStructure extends Component {
 
   static propTypes = {

frontend/src/pages/wiki2/view-structure/views/view-item.js

@@ -7,6 +7,7 @@ import PageDropdownMenu from './page-dropdownmenu';
 import DeleteDialog from './delete-dialog';
 import { DRAGGED_FOLDER_MODE, DRAGGED_VIEW_MODE } from '../constant';
 import Icon from '../../../../components/icon';
+import NavItemIcon from '../nav-item-icon';
 
 const dragSource = {
   beginDrag: props => {
@@ -217,8 +218,9 @@ class ViewItem extends Component {
       viewCanDrop = isOverView && !isDragging;
     }
     let viewEditorId = `view-editor-${view.id}`;
+    let fn = isEditMode ? connectDragSource : (argu) => {argu;};
 
-    return connectDropTarget(
+    return fn(connectDropTarget(
       connectDragPreview(
         <div
           className={classnames('view-item', 'view',
@@ -233,17 +235,9 @@ class ViewItem extends Component {
           id={viewEditorId}
         >
           <div className="view-item-main" onClick={isShowViewEditor ? () => {} : this.props.onSelectView}>
-            {(isEditMode && !isSpecialInstance) ?
-              connectDragSource(
-                <div className="rdg-drag-handle">
-                  <Icon symbol={'drag'}/>
-                </div>
-              )
-              :
-              <div className="rdg-drag-handle"></div>
-            }
             <div className='view-content' style={foldersStr ? { marginLeft: `${(foldersStr.split('-').length) * 24}px` } : {}}>
-              {this.renderIcon(view.icon)}
+              <NavItemIcon symbol={'file'} disable={true} />
+              {/* {this.renderIcon(view.icon)} */}
               <span className="view-title text-truncate" title={view.name}>{view.name}</span>
               {isShowViewEditor && (
                 <ViewEditPopover
@@ -290,7 +284,7 @@ class ViewItem extends Component {
           }
         </div>
       )
-    );
+    ));
   }
 }
 

frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.css

@@ -1,4 +1,4 @@
-.seatable-app-universal-left-bar {
+.wiki-left-bar {
   flex: 0 0 4%;
   width: 50px;
   background: #f5f5f5;
@@ -6,24 +6,24 @@
   z-index: 101;
 }
 
-.seatable-app-universal-left-bar .left-bar-button {
+.wiki-left-bar .left-bar-button {
   height: 50px;
   line-height: 50px;
   text-align: center;
 }
 
-.seatable-app-universal-left-bar .left-bar-button:hover {
+.wiki-left-bar .left-bar-button:hover {
   cursor: pointer;
 }
 
-.seatable-app-universal-left-bar .left-bar-button .seafile-multicolor-icon {
+.wiki-left-bar .left-bar-button .seafile-multicolor-icon {
   font-size: 22px;
 }
 
-.seatable-app-universal-left-bar .left-bar-button .seafile-multicolor-icon {
+.wiki-left-bar .left-bar-button .seafile-multicolor-icon {
   color: rgba(0, 0, 0, 0.8);
 }
 
-.seatable-app-universal-left-bar .left-bar-button:hover .seafile-multicolor-icon {
+.wiki-left-bar .left-bar-button:hover .seafile-multicolor-icon {
   color: rgba(0, 0, 0, 0.9);
 }

frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.js

@@ -35,7 +35,7 @@ export default class WikiLeftBar extends React.Component {
 
   render() {
     return (
-      <div className="seatable-app-universal-left-bar">
+      <div className="wiki-left-bar">
         <Icon onClick={this.openAppSettingsDialog} iconClass="wiki-settings" tipText={gettext('Settings')}/>
         <Icon onClick={this.openPreviewApp} iconClass="wiki-preview" tipText={gettext('Go to wiki page to preview')}/>
         {this.state.isShowSettingsDialog &&

frontend/src/pages/wiki2/wiki.css

@@ -2,33 +2,6 @@ body {
   overflow: hidden;
 }
 
-.wiki-side-panel .panel-top {
-  background: #fff;
-  display: flex;
-  align-items: center;
-}
-
-.wiki-side-nav {
-  flex: auto;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  /* for ff */
-  border-right: 1px solid #eee;
-}
-
-.wiki-pages-heading {
-  position: relative;
-  font-size: 1rem;
-  font-weight: normal;
-  padding: 0.5rem 0 0.5rem 2rem;
-  border-bottom: 1px solid #e8e8e8;
-  line-height: 1.5;
-  height: 40px;
-  background-color: #f9f9f9;
-  margin-bottom: 0;
-}
-
 .heading-icon {
   position: absolute;
   right: 1rem;
@@ -37,49 +10,25 @@ body {
   font-size: 0.8125rem;
 }
 
-.wiki-pages-container {
-  flex: 1;
-  overflow: hidden;
-  padding-bottom: 10px;
-}
-
-.wiki-pages-container:hover {
-  overflow: auto;
-}
-
-.wiki-pages-container .tree-view {
-  margin-left: -10px;
-  margin-top: 14px;
-  padding-left: 0;
-}
-
 img[src=""] {
   opacity: 0;
 }
 
-.wiki-side-panel {
-  flex: 0 0 20%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-@media (max-width: 767px) {
-  .wiki-side-panel {
-    z-index: 1051;
-  }
-}
-
-.wiki-main-panel {
-  flex: 1 0 80%;
+.wiki2-main-panel {
+  width: calc(100% - 300px);
   display: flex;
   flex-direction: column;
   min-height: 0;
   overflow: hidden;
 }
 
-.wiki-main-panel .main-panel-north {
-  background-color: #fff;
+.wiki2-main-panel .wiki2-main-panel-north {
+  height: 44px;
+  position: relative;
+  padding: 0.5rem 1rem;
+  display: flex;
+  z-index: 100;
+  justify-content: space-between;
 }
 
 .cur-view-content .wiki-page-container {
@@ -114,7 +63,7 @@ img[src=""] {
 
 
 /* reset article h1 */
-.wiki-main-panel .article h1 {
+.wiki2-main-panel .article h1 {
   margin-top: 0;
 }
 
@@ -278,4 +227,5 @@ img[src=""] {
   width: 100%;
   box-shadow: none;
   border: none;
+  padding: 52px 142px 0;
 }