change side nav style when notification open (#6650)

frontend/src/app.js

@@ -273,6 +273,7 @@ class App extends Component {
           onShowSidePanel={this.onShowSidePanel}
           onSearchedClick={this.onSearchedClick}
           eventBus={this.eventBus}
+          isSidePanelFolded={isSidePanelFolded}
         />
         <div
           id="main"
@@ -288,6 +289,7 @@ class App extends Component {
             tabItemClick={this.tabItemClick}
             toggleFoldSideNav={this.toggleFoldSideNav}
             style={sidePanelStyle}
+            eventBus={this.eventBus}
           />
           {Utils.isDesktop() && !isSidePanelFolded &&
             <ResizeBar

frontend/src/components/header.js

@@ -13,15 +13,21 @@ const propTypes = {
   onShowSidePanel: PropTypes.func,
   onSearchedClick: PropTypes.func,
   searchPlaceholder: PropTypes.string,
-  showSearch: PropTypes.bool
+  showSearch: PropTypes.bool,
+  isSidePanelFolded: PropTypes.bool,
 };
-
 class Header extends React.Component {
 
+  onMouseEnter = () => {
+    if (this.props.isSidePanelFolded) {
+      this.props.eventBus.dispatch('top-header-mouse-enter');
+    }
+  };
+
   render() {
     const { onShowSidePanel, onSearchedClick, showSearch, children } = this.props;
     return (
-      <div id="header" className="top-header d-flex justify-content-between flex-shrink-0">
+      <div id="header" className="top-header d-flex justify-content-between flex-shrink-0" onMouseEnter={this.onMouseEnter}>
         <div className={'flex-shrink-0 d-none d-md-flex'}>
           <Logo onCloseSidePanel={this.props.onCloseSidePanel} />
         </div>

frontend/src/components/main-side-nav-folded.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import { gettext, siteRoot, canInvitePeople, enableTC, sideNavFooterCustomHtml, additionalAppBottomLinks,
-  isDocs, isPro, isDBSqlite3, customNavItems, mediaUrl } from '../utils/constants';
+  isDocs, isPro, isDBSqlite3, customNavItems, mediaUrl, curNoteMsg } from '../utils/constants';
 import { SIDE_PANEL_FOLDED_WIDTH, SUB_NAV_ITEM_HEIGHT } from '../constants';
 import Tip from './side-nav-icon-tip';
 import FilesSubNav from '../components/files-sub-nav';
@@ -18,6 +18,7 @@ import '../css/main-side-nav-folded.css';
 const propTypes = {
   currentTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   tabItemClick: PropTypes.func.isRequired,
+  eventBus: PropTypes.object,
   toggleFoldSideNav: PropTypes.func
 };
 
@@ -33,6 +34,7 @@ class MainSideNavFolded extends React.Component {
 
   componentDidMount() {
     document.addEventListener('click', this.handleOutsideClick);
+    this.unsubscribeHeaderEvent = this.props.eventBus.subscribe('top-header-mouse-enter', this.closeSubNav);
     seafileAPI.listGroups().then(res => {
       this.setState({
         groupItems: res.data.map(item => new Group(item)).sort((a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1),
@@ -45,6 +47,7 @@ class MainSideNavFolded extends React.Component {
 
   componentWillUnmount() {
     document.removeEventListener('click', this.handleOutsideClick);
+    this.unsubscribeHeaderEvent();
   }
 
   handleOutsideClick = (e) => {
@@ -56,6 +59,11 @@ class MainSideNavFolded extends React.Component {
 
   openSubNav = () => {
     if (this.state.isFilesSubNavShown) return;
+    if (curNoteMsg) {
+      const infoBar = document.getElementById('info-bar');
+      const top = (60 + (infoBar ? infoBar.clientHeight : 0)) + 'px';
+      this.filesSubNav.style.top = top;
+    }
     this.setState({ isFilesSubNavShown: true });
   };
 
@@ -122,7 +130,7 @@ class MainSideNavFolded extends React.Component {
                   to={ siteRoot + 'libraries/' }
                   className={`nav-link ellipsis ${this.getActiveClass('libraries')}`}
                   onClick={(e) => this.tabItemClick(e, 'libraries')}
-                  onMouseOver={this.openSubNav}
+                  onMouseEnter={this.openSubNav}
                 >
                   <span className="sf3-font-files sf3-font mr-0" aria-hidden="true"></span>
                 </Link>

frontend/src/components/side-panel.js

@@ -14,6 +14,7 @@ const propTypes = {
   tabItemClick: PropTypes.func,
   children: PropTypes.object,
   style: PropTypes.object,
+  eventBus: PropTypes.object,
   isSidePanelFolded: PropTypes.bool,
   toggleFoldSideNav: PropTypes.func
 };
@@ -21,7 +22,7 @@ const propTypes = {
 class SidePanel extends React.Component {
 
   render() {
-    const { children, isSidePanelFolded, style } = this.props;
+    const { children, isSidePanelFolded, style, eventBus } = this.props;
     return (
       <div
         className={classnames('side-panel', { 'side-panel-folded': isSidePanelFolded, 'left-zero': !this.props.isSidePanelClosed })}
@@ -47,6 +48,7 @@ class SidePanel extends React.Component {
               tabItemClick={this.props.tabItemClick}
               currentTab={this.props.currentTab}
               toggleFoldSideNav={this.props.toggleFoldSideNav}
+              eventBus={eventBus}
             />
           }
         </div>

frontend/src/css/main-side-nav-folded.css

@@ -20,5 +20,5 @@
   width: 240px;
   background: #fff;
   top: 60px;
-  transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  transition: left 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1), opacity 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1);
 }