Style bug repair (#2394)

* optimized css code

* repair search module

* repair response bug

* repair notificition bug

* repair file-history bug

* repair search info bug

* optimized code

frontend/src/app.js

@@ -21,18 +21,31 @@ class App extends Component {
     super(props);
     this.state = {
       isOpen: false,
+      isSidePanelClosed: false,
     };
   }
 
+  onCloseSidePanel = () => {
+    this.setState({
+      isSidePanelClosed: !this.state.isSidePanelClosed
+    });
+  }
+
+  onShowSidePanel = () => {
+    this.setState({
+      isSidePanelClosed: !this.state.isSidePanelClosed
+    });
+  }
+
   render() {
     let  href = window.location.href.split('/');
     let currentTab = href[href.length - 2];
     
     return (
       <div id="main">
-        <SidePanel isOpen={this.state.isOpen} toggleClose={this.isOpen} currentTab={currentTab} />
+        <SidePanel isSidePanelClosed={this.state.isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} />
 
-        <MainPanel path='/'>
+        <MainPanel path='/' onShowSidePanel={this.onShowSidePanel}>
           <Router>
             <FilesActivities path='dashboard' />
             <DraftsView path='drafts' />

frontend/src/components/common/notification.js

@@ -45,7 +45,7 @@ class Notification extends React.Component {
         <div id="notice-popover" className={`sf-popover ${this.state.showNotice ? '': 'hide'}`}>
           <div className="outer-caret up-outer-caret"><div className="inner-caret"></div></div>
           <div className="sf-popover-hd ovhd">
-            <h3 className="sf-popover-title">{gettext('Notifications')}</h3>
+            <h3 className="sf-popover-title title">{gettext('Notifications')}</h3>
             <a href="#" onClick={this.onClick} title={gettext('Close')} aria-label={gettext('Close')} className="sf-popover-close js-close sf2-icon-x1 op-icon float-right"></a>
           </div>
           <div className="sf-popover-con">

frontend/src/components/main-panel.js

@@ -2,14 +2,7 @@ import React, { Component } from 'react';
 import CommonToolbar from './toolbar/common-toolbar';
 
 class MainPanel extends Component {
-  constructor(props) {
-    super(props);
-  }
 
-  onMenuClick = () => {
-    this.props.isOpen();
-  }
-  
   onSearchedClick = () => {
     //todos;
   }
@@ -20,9 +13,9 @@ class MainPanel extends Component {
       <div className="main-panel o-hidden">
         <div className="main-panel-north">
           <div className="cur-view-toolbar">
-            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.onMenuClick}></span>
+            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
           </div>
-          <CommonToolbar onSearchedClick={this.onSearchedClick}/>
+          <CommonToolbar onSearchedClick={this.onSearchedClick} searchPlaceholder={'Search Files'}/>
         </div>
         <div className="main-panel-center">
           {this.props.children}

frontend/src/components/search/search.js

@@ -205,7 +205,7 @@ class Search extends Component {
               onChange={this.onChangeHandler}
               autoComplete="off"
             />
-            <i className={`search-icon-right input-icon-addon fas fa-times ${this.state.isCloseShow ? "" : "hide"}`} onClick={this.onCloseHandler}></i>
+            {this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
           </div>
           <div className="search-result-container">
             {this.renderSearchResult()}

frontend/src/components/side-panel.js

@@ -6,15 +6,11 @@ import SideNavFooter from './side-nav-footer';
 
 class SidePanel extends React.Component {
 
-  onCloseSidePanel = () => {
-    //todos;
-  }
-
   render() {
     return (
-      <div className="side-panel">
+      <div className={`side-panel ${this.props.isSidePanelClosed ? '' : 'left-zero'}`}>
         <div className="side-panel-north">
-          <Logo onCloseSidePanel={this.onCloseSidePanel}/>
+          <Logo onCloseSidePanel={this.props.onCloseSidePanel}/>
         </div>
         <div className="side-panel-center">
           <MainSideNav currentTab={this.props.currentTab}/>

frontend/src/components/toolbar/common-toolbar.js

@@ -6,14 +6,15 @@ import Notification from '../common/notification';
 import Account from '../common/account';
 
 const propTypes = {
-  onSearchedClick: PropTypes.func.isRequired
+  onSearchedClick: PropTypes.func.isRequired,
+  searchPlaceholder: PropTypes.string
 };
 
 class  CommonToolbar extends React.Component {
   render() {
     return (
       <div className="common-toolbar">
-        {isPro && <Search onSearchedClick={this.props.onSearchedClick} placeholder={gettext("Search files")}/>}
+        {isPro && <Search onSearchedClick={this.props.onSearchedClick} placeholder={gettext(this.props.searchPlaceholder)}/>}
         <Notification  />
         <Account />
       </div>

frontend/src/css/common.css

@@ -10,11 +10,10 @@
   position: relative;
   padding: .5rem 1rem;
   width: 100%;
-  border-bottom: 1px solid #e8e8e8;
+  height: 2.5rem;
   font-size: 1rem;
   font-weight: normal;
   line-height: 1.5;
-  height: 36px;
   text-align: center;
 }
 

frontend/src/css/layout.css

@@ -35,7 +35,7 @@
   .side-panel {
     position:fixed;
     left:-300px;
-    z-index:1; /* important! */
+    z-index: 99; /* important! */
     width:300px;
     height:100%;
     background:#f8f8f8;
@@ -47,9 +47,9 @@
 
 .side-panel-north,
 .main-panel-north {
+  padding: .5rem 1rem;
   display: flex;
   flex-shrink: 0;
-  padding: .5rem 1rem;
   background: #f4f4f7;
   border-bottom: 1px solid #e8e8e8;
 }
@@ -68,43 +68,45 @@
 }
 
 .cur-view-container {
-  display:flex;
+  display: flex;
-  flex-direction:column;
+  flex-direction: column;
-  flex:1 1 auto;
+  flex: 1 1 auto;
   overflow: hidden;
 }
 
 .cur-view-path {
-  flex-shrink:0;
+  position: relative; /* for the ':after' */
-  min-height:40px;
+  padding: 8px 16px;
-  padding:8px 16px 0;
+  max-height: 40px;
   background:#f9f9f9;
-  position:relative; /* for the ':after' */
+  display: flex;
+  flex-shrink: 0;
+  justify-content: space-between;
 }
 
 .cur-view-path:after {
-  content:'';
+  position: absolute;
-  border-bottom:1px solid #e8e8e8;
+  left: 16px;
-  position:absolute;
+  right: 16px;
-  left:16px;
+  bottom: 0;
-  right:16px;
+  content: '';
-  bottom:0;
+  border-bottom: 1px solid #e8e8e8;
 }
 
 .cur-view-content {
-  padding:10px 16px 20px;
+  padding: 10px 16px 20px;
-  flex:1;
   height: calc(100% - 40px);
-  overflow:auto;
+  flex: 1;
+  overflow: auto;
 }
 
 .cur-view-content .hd {
-  padding-bottom:0;
+  padding-bottom: 0;
-  height:48px;
+  margin-bottom: .5em;
-  padding:9px 10px;
+  height: 48px;
-  background:#f2f2f2;
+  padding: 9px 10px;
-  margin-bottom:.5em;
+  background: #f2f2f2;
-  border-radius:2px;
+  border-radius: 2px;
 }
 
 [role=group] {

frontend/src/css/toolbar.css

@@ -54,7 +54,7 @@
   margin-left: auto;
 }
 
-.common-toolbar div{
+.common-toolbar > div{
   margin-left: .5rem;
 }
 /* end common-toolbar */

frontend/src/css/wiki.css

@@ -39,15 +39,6 @@
   padding: 30px 0 0;
 }
 
-.wiki-main .cur-view-path {
-  border-bottom: 1px solid #e8e8e8;
-  display: flex;
-  justify-content: space-between;
-}
-.wiki-main .cur-view-path::after {
-  display:none;
-}
-
 img[src=""] {
   opacity: 0;
 }

frontend/src/pages/file-history/main-panel.js

@@ -18,7 +18,7 @@ class MainPanel extends React.Component {
     Prism.highlightAll();
   }
 
-  onSelectedClick = () => {
+  onSearchedClick = () => {
     //todos;
   }
 
@@ -26,7 +26,7 @@ class MainPanel extends React.Component {
     return (
       <div className="main-panel viewer">
         <div className="main-panel-north">
-          <CommonToolbar onSelectedClick={this.onSelectedClick} />
+          <CommonToolbar onSearchedClick={this.onSearchedClick} />
         </div>
         <div className="main-panel-center history-viewer-contanier">
           <div className="content-viewer">

frontend/src/pages/repo-wiki-mode/main-panel.js

@@ -66,23 +66,21 @@ class MainPanel extends Component {
     });
 
     return (
-      <div className="wiki-main-panel o-hidden">
+      <div className="main-panel wiki-main-panel o-hidden">
         <div className="main-panel-top panel-top">
           <div className="cur-view-toolbar border-left-show">
-            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.onMenuClick}></span>
+            <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.onMenuClick}></span>
-            <div>
             { 
               this.props.permission === 'rw' && 
-              <button className="btn btn-secondary top-toolbar-btn" title="Edit File" onClick={this.onEditClick}>{gettext("Edit")}</button>
+              <button className="btn btn-secondary top-toolbar-btn" title={gettext('Edit File')} onClick={this.onEditClick}>{gettext("Edit")}</button>
             }
-            </div>
             <div className="btn-group">
               <button className="btn btn-secondary btn-icon sf-view-mode-change-btn sf2-icon-list-view" id='list' title={gettext("List")} onClick={this.switchViewMode}></button>
               <button className="btn btn-secondary btn-icon sf-view-mode-change-btn sf2-icon-grid-view" id='grid' title={gettext("Grid")} onClick={this.switchViewMode}></button>
               <button className={`btn btn-secondary btn-icon sf-view-mode-change-btn sf2-icon-wiki-view ${this.state.isWikiMode ? 'current-mode' : ''}`} id='wiki' title={gettext("wiki")} onClick={this.switchViewMode}></button>
             </div>
           </div>
-          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
+          <CommonToolbar onSearchedClick={this.props.onSearchedClick} searchPlaceholder={'Search files in this library'}/>
         </div>
         <div className="cur-view-container">
           <div className="cur-view-path">

frontend/src/pages/repo-wiki-mode/side-panel.js

@@ -158,7 +158,7 @@ class SidePanel extends Component {
 
   render() {
     return (
-      <div className={`wiki-side-panel ${this.props.closeSideBar ? "": "left-zero"}`}>
+      <div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? "": "left-zero"}`}>
         <div className="side-panel-top panel-top">
           <a href={siteRoot} id="logo">
             <img src={mediaUrl + logoPath} title={siteTitle} alt="logo" width={logoWidth} height={logoHeight} />

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

@@ -49,16 +49,16 @@ class MainPanel extends Component {
     });
 
     return (
-      <div className="wiki-main-panel o-hidden">
+      <div className="main-panel wiki-main-panel o-hidden">
         <div className="main-panel-top panel-top">
           <div className="cur-view-toolbar border-left-show">
-            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.onMenuClick}></span>
+            <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' && 
               <button className="btn btn-secondary top-toolbar-btn" title="Edit File" onClick={this.onEditClick}>{gettext("Edit Page")}</button>
             }
           </div>
-          <CommonToolbar onSearchedClick={this.props.onSearchedClick} />
+          <CommonToolbar onSearchedClick={this.props.onSearchedClick} searchPlaceholder={'Search files in this library'}/>
         </div>
         <div className="cur-view-container">
           <div className="cur-view-path">

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

@@ -158,7 +158,7 @@ class SidePanel extends Component {
 
   render() {
     return (
-      <div className={`wiki-side-panel ${this.props.closeSideBar ? "": "left-zero"}`}>
+      <div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? "": "left-zero"}`}>
         <div className="side-panel-top panel-top">
           <a href={siteRoot} id="logo">
             <img src={mediaUrl + logoPath} title={siteTitle} alt="logo" width={logoWidth} height={logoHeight} />

media/css/seahub.css

@@ -2129,8 +2129,7 @@ button.sf-dropdown-toggle:focus {
     margin-left: 8px;
 }
 
-#notifications a {
+#notifications #notice-icon {
-    width: 100%;
     height: 100%;
     display: flex;
     align-items: center;

media/css/seahub_react.css

@@ -124,7 +124,7 @@ ul,ol,li {
 .up-outer-caret .inner-caret {
     border-bottom-color:#fff;
     top:1px;
-    left:-18px;
+    left:-10px;
 }
 .up-outer-caret {
     position:absolute;
@@ -445,9 +445,12 @@ a.op-icon:focus {
 }
 
 .side-nav-toggle {
+    margin-right:0.9375rem;
+    height: 1.875rem;
+    line-height: 1.875rem;
     font-size:1.5rem;
     color:#999;
-    margin-right:15px;
+    cursor: pointer;
 }
 .side-panel-slide {
     transition: all .3s ease-in-out;
@@ -537,6 +540,12 @@ a.op-icon:focus {
 }
 
 /* notifications */
+#notifications .title {
+    line-height: 1.5;
+    font-size: 1rem;
+    color: #322;
+    font-weight: normal;
+}
 #notifications .sf2-icon-bell {
     font-size:24px;
     line-height:1;
@@ -580,11 +589,16 @@ a.op-icon:focus {
 }
 #notice-popover .brief {
     margin-left:40px;
+    margin-bottom: 1rem;
+    font-size: 0.8125rem;
+    line-height: 1.5rem;
 }
 #notice-popover .time {
+    margin:0;
     color:#999;
     text-align:right;
-    margin:0;
+    font-size: 0.8125rem;
+    line-height: 1.5rem;
     clear:both;
 }
 #notice-popover .view-all {
@@ -645,46 +659,6 @@ a.op-icon:focus {
 }
 
 /* basic layout */
-#wrapper {
-  height: 100%;
-}
-#main {
-  display: flex;
-  height: 100%;
-  width: 100%;
-}
-.main-panel {
-  flex: 1 0 75%;
-  display:flex;
-  flex-direction:column;
-}
-
-.side-panel {
-  flex: 0 0 25%;
-  display:flex;
-  flex-direction:column;
-  overflow:hidden;
-}
-@media (max-width: 767px) {
-    .side-panel {
-        background:#f8f8f8;
-        width:300px;
-        height:100%;
-        position:fixed;
-        left:-300px;
-        z-index:1; /* important! */
-        -webkit-transition: all 0.3s ease;
-        -moz-transition: all 0.3s ease;
-        transition: all 0.3s ease;
-    }
-}
-.panel-top {
-    padding:.5rem 1rem;
-    background:#f4f4f7;
-    border-bottom: 1px solid #e8e8e8;
-    display:flex;
-    flex-shrink:0;
-}
 .side-panel-top {
     padding: .5rem 1rem;
 }
@@ -696,44 +670,10 @@ a.op-icon:focus {
 .side-panel-close {
     margin:10px 0 0 auto;
 }
-
+.panel-top {
-.cur-view-main {
+    padding:.5rem 1rem;
-    flex:1 1 auto;
+    background:#f4f4f7;
+    border-bottom: 1px solid #e8e8e8;
     display:flex;
-    flex-direction:column;
-}
-.cur-view-path {
     flex-shrink:0;
-    min-height:40px;
-    padding:8px 16px 0;
-    background:#f9f9f9;
-    position:relative; /* for the ':after' */
-}
-.cur-view-path:after {
-    content:'';
-    border-bottom:1px solid #e8e8e8;
-    position:absolute;
-    left:16px;
-    right:16px;
-    bottom:0;
-}
-.cur-view-main-con {
-    padding:10px 16px 20px;
-    overflow:auto;
-    flex:auto;
-    height: calc(100% - 40px);
-}
-.cur-view-main-con .hd {
-    padding-bottom:0;
-    height:48px;
-    padding:9px 10px;
-    background:#f2f2f2;
-    margin-bottom:.5em;
-    border-radius:2px;
-}
-.main-panel-main {
-    flex:auto;
-    display:flex;
-    flex-direction:column;
-    overflow:hidden; /* for ff */
 }