[wiki side panel] redesigned it (added 'Pages' & 'Other' header bars) (#7134)

frontend/src/pages/wiki2/css/wiki-nav.css

@@ -292,7 +292,6 @@
   display: flex;
   align-items: center;
   padding-left: 10px;
-  margin-top: 16px;
   cursor: pointer;
 }
 

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

@@ -31,16 +31,18 @@
   height: 44px;
 }
 
-.wiki2-side-panel .wiki2-side-panel-top .wiki-new-page-tooltip {
+.wiki2-side-panel .wiki-new-page-tooltip {
   z-index: 1001;
 }
 
-.wiki2-side-panel .wiki2-side-panel-top .add-new-page {
+.wiki2-side-panel .add-new-page {
   cursor: pointer;
   border-radius: 4px;
+  font-size: 14px;
+  padding: 3px;
 }
 
-.wiki2-side-panel .wiki2-side-panel-top .add-new-page:hover {
+.wiki2-side-panel .add-new-page:hover {
   background-color: #DFDFDD;
 }
 
@@ -54,8 +56,7 @@
 .wiki2-side-panel .wiki2-side-nav .wiki2-pages-container {
   flex: 1;
   overflow: hidden;
-  padding: 8px;
-  padding-top: 20px;
+  padding: 0 8px 8px;
 }
 
 .wiki2-side-panel .wiki2-side-nav .wiki2-pages-container:hover {
@@ -67,3 +68,9 @@
   margin-top: 14px;
   padding-left: 0;
 }
+
+.wiki-nav-group-header {
+  margin-top: 10px;
+  height: 32px;
+  color: #666;
+}

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

@@ -2,8 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import deepCopy from 'deep-copy';
 import classNames from 'classnames';
-import { UncontrolledTooltip } from 'reactstrap';
-import { gettext, isWiki2, wikiId, wikiPermission } from '../../utils/constants';
+import { isWiki2, wikiId, wikiPermission } from '../../utils/constants';
 import toaster from '../../components/toast';
 import Loading from '../../components/loading';
 import WikiNav from './wiki-nav/index';
@@ -142,6 +141,7 @@ class SidePanel extends PureComponent {
             addPageInside={this.addPageInside}
             toggleTrashDialog={this.toggleTrashDialog}
             addSiblingPage={this.addSiblingPage}
+            handleAddNewPage={this.handleAddNewPage}
           />
         }
       </div>
@@ -174,24 +174,10 @@ class SidePanel extends PureComponent {
 
   render() {
     const { isLoading, config } = this.props;
-    const isDesktop = Utils.isDesktop();
     return (
       <div className={classNames('wiki2-side-panel', { 'left-zero': this.props.isSidePanelOpen })}>
         <div className="wiki2-side-panel-top">
-          <h4 className="text-truncate ml-0 mb-0" title={repoName}>{repoName}</h4>
-          {isDesktop && wikiPermission !== 'public' &&
-            <div>
-              <i
-                id='wiki-add-new-page'
-                onClick={this.handleAddNewPage.bind(true)}
-                className='sf3-font sf3-font-new-page add-new-page p-1'
-              >
-              </i>
-              <UncontrolledTooltip className='wiki-new-page-tooltip' target="wiki-add-new-page">
-                {gettext('New page')}
-              </UncontrolledTooltip>
-            </div>
-          }
+          <h1 className="h4 text-truncate ml-0 mb-0" title={repoName}>{repoName}</h1>
         </div>
         <Wiki2Search
           wikiId={wikiId}

frontend/src/pages/wiki2/wiki-nav/wiki-nav.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { UncontrolledTooltip } from 'reactstrap';
 import { DropTarget, DragLayer } from 'react-dnd';
 import html5DragDropContext from './html5DragDropContext';
 import DraggedPageItem from './pages/dragged-page-item';
 import { gettext, wikiPermission } from '../../../utils/constants';
+import { Utils } from '../../../utils/utils';
 
 import '../css/wiki-nav.css';
 
@@ -24,6 +26,7 @@ class WikiNav extends Component {
     addPageInside: PropTypes.func,
     updateWikiConfig: PropTypes.func.isRequired,
     toggleTrashDialog: PropTypes.func.isRequired,
+    handleAddNewPage: PropTypes.func.isRequired,
   };
 
   constructor(props) {
@@ -110,16 +113,38 @@ class WikiNav extends Component {
     const isOnlyOnePage = pagesLen === 1;
     let id_page_map = {};
     pages.forEach(page => id_page_map[page.id] = page);
+    const isDesktop = Utils.isDesktop();
     return (
       <div className='wiki-nav-body' onScroll={this.onWikiNavBodyScroll} ref={this.wikiNavBodyRef}>
+        <div className="wiki-nav-group-header d-flex justify-content-between align-items-center px-2">
+          <h2 className="h6 font-weight-normal m-0">{gettext('Pages')}</h2>
+          {isDesktop && wikiPermission !== 'public' &&
+          <div>
+            <i
+              id='wiki-add-new-page'
+              onClick={this.props.handleAddNewPage}
+              className='sf3-font sf3-font-enlarge add-new-page'
+            >
+            </i>
+            <UncontrolledTooltip className='wiki-new-page-tooltip' target="wiki-add-new-page">
+              {gettext('New page')}
+            </UncontrolledTooltip>
+          </div>
+          }
+        </div>
         {navigation.map((item, index) => {
           return this.renderPage(item, index, pages.length, isOnlyOnePage, id_page_map, layerDragProps);
         })}
         {wikiPermission !== 'public' &&
+        <>
+          <div className="wiki-nav-group-header d-flex justify-content-between align-items-center px-2">
+            <h2 className="h6 font-weight-normal m-0">{gettext('Other')}</h2>
+          </div>
           <div className={classNames('wiki2-trash', { 'mt-0': !pagesLen })} onClick={this.props.toggleTrashDialog}>
             <span className="sf3-font-trash sf3-font mr-2"></span>
             <span>{gettext('Trash')}</span>
           </div>
+        </>
         }
       </div>
     );