change side nav tooltip and animation (#6361)

* change side nav tooltip and animation

* fix code warnings

frontend/src/components/dialog/trash-dialog.js

@@ -4,7 +4,7 @@ import { navigate } from '@gatsbyjs/reach-router';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import moment from 'moment';
 import { Utils } from '../../utils/utils';
-import {gettext, siteRoot, enableUserCleanTrash, username} from '../../utils/constants';
+import { gettext, siteRoot, enableUserCleanTrash, username } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { repotrashAPI } from '../../utils/repo-trash-api';
 import ModalPortal from '../../components/modal-portal';
@@ -65,7 +65,7 @@ class TrashDialog extends React.Component {
   onSearchedClick = (selectedItem) => {
     if (selectedItem.is_dir === true) {
       let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
-      navigate(url, {repalce: true});
+      navigate(url, { repalce: true });
     } else {
       let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
       let newWindow = window.open('about:blank');
@@ -161,7 +161,7 @@ class TrashDialog extends React.Component {
             </>
           }
         >
-          <div dangerouslySetInnerHTML={{__html: title}}></div>
+          <div dangerouslySetInnerHTML={{ __html: title }}></div>
         </ModalHeader>
         <ModalBody>
           <Content
@@ -195,12 +195,12 @@ class Content extends React.Component {
   constructor(props) {
     super(props);
     this.theadData = [
-      {width: '5%', text: ''},
+      { width: '5%', text: '' },
-      {width: '20%', text: gettext('Name')},
+      { width: '20%', text: gettext('Name') },
-      {width: '40%', text: gettext('Original path')},
+      { width: '40%', text: gettext('Original path') },
-      {width: '12%', text: gettext('Delete Time')},
+      { width: '12%', text: gettext('Delete Time') },
-      {width: '13%', text: gettext('Size')},
+      { width: '13%', text: gettext('Size') },
-      {width: '10%', text: ''}
+      { width: '10%', text: '' }
     ];
   }
 
@@ -287,11 +287,11 @@ class Item extends React.Component {
   }
 
   handleMouseOver = () => {
-    this.setState({isIconShown: true});
+    this.setState({ isIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isIconShown: false});
+    this.setState({ isIconShown: false });
   };
 
   restoreItem = (e) => {
@@ -374,11 +374,11 @@ class FolderItem extends React.Component {
   }
 
   handleMouseOver = () => {
-    this.setState({isIconShown: true});
+    this.setState({ isIconShown: true });
   };
 
   handleMouseOut = () => {
-    this.setState({isIconShown: false});
+    this.setState({ isIconShown: false });
   };
 
   renderFolder = (e) => {

frontend/src/components/header.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Logo from './logo';
 import CommonToolbar from './toolbar/common-toolbar';
 
-import './header.css';
+import '../css/header.css';
 
 const propTypes = {
   children: PropTypes.object,

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

@@ -0,0 +1,151 @@
+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';
+import Tip from './side-nav-icon-tip';
+
+import '../css/main-side-nav-folded.css';
+
+const propTypes = {
+  currentTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  tabItemClick: PropTypes.func.isRequired,
+  toggleFoldSideNav: PropTypes.func
+};
+
+class MainSideNavFolded extends React.Component {
+
+  tabItemClick = (e, param, id) => {
+    if (window.uploader &&
+      window.uploader.isUploadProgressDialogShow &&
+      window.uploader.totalProgress !== 100) {
+      if (!window.confirm(gettext('A file is being uploaded. Are you sure you want to leave this page?'))) {
+        e.preventDefault();
+        return false;
+      }
+      window.uploader.isUploadProgressDialogShow = false;
+    }
+    this.props.tabItemClick(param, id);
+  };
+
+  getActiveClass = (tab) => {
+    return this.props.currentTab === tab ? 'active' : '';
+  };
+
+  render() {
+    let showActivity = isDocs || isPro || !isDBSqlite3;
+    return (
+      <div className="side-nav side-nav-folded">
+        <div className={'side-nav-con d-flex flex-column'}>
+          <ul className="nav nav-pills flex-column nav-container">
+
+            <li id="files" className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
+              <Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}>
+                <span className="sf3-font-files sf3-font" aria-hidden="true"></span>
+              </Link>
+            </li>
+            <Tip target="files" text={gettext('Files')} />
+
+            <li className={`nav-item ${this.getActiveClass('starred')}`} id="main-side-nav-folded-starred">
+              <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} onClick={(e) => this.tabItemClick(e, 'starred')}>
+                <span className="sf3-font-starred sf3-font" aria-hidden="true"></span>
+              </Link>
+            </li>
+            <Tip target="main-side-nav-folded-starred" text={gettext('Favorites')} />
+
+            {showActivity &&
+              <>
+                <li className={`nav-item ${this.getActiveClass('dashboard')}`} id="main-side-nav-folded-dashboard">
+                  <Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} onClick={(e) => this.tabItemClick(e, 'dashboard')}>
+                    <span className="sf3-font-activities sf3-font" aria-hidden="true"></span>
+                  </Link>
+                </li>
+                <Tip target="main-side-nav-folded-dashboard" text={gettext('Activities')} />
+              </>
+            }
+
+            <li className={`nav-item ${this.getActiveClass('published')}`} id="main-side-nav-folded-wikis">
+              <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} onClick={(e) => this.tabItemClick(e, 'published')}>
+                <span className="sf3-font-wiki sf3-font" aria-hidden="true"></span>
+              </Link>
+            </li>
+            <Tip target="main-side-nav-folded-wikis" text={gettext('Wikis')} />
+
+            {canInvitePeople &&
+              <>
+                <li className={`nav-item ${this.getActiveClass('invitations')}`} id="main-side-nav-folded-invitations">
+                  <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} onClick={(e) => this.tabItemClick(e, 'invitations')}>
+                    <span className="sf3-font-invite-visitors sf3-font" aria-hidden="true"></span>
+                  </Link>
+                </li>
+                <Tip target="main-side-nav-folded-invitations" text={gettext('Invite Guest')} />
+              </>
+            }
+
+            {customNavItems &&
+              customNavItems.map((item, idx) => {
+                return (
+                  <li key={idx} className='nav-item'>
+                    <a href={item.link} className="nav-link ellipsis" title={item.desc}>
+                      <span className={item.icon} aria-hidden="true" title={item.desc}></span>
+                    </a>
+                  </li>
+                );
+              })
+            }
+          </ul>
+
+          {sideNavFooterCustomHtml ?
+            <div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
+            :
+            <ul className="nav nav-pills flex-column nav-container">
+              <li className='nav-item' id="main-side-nav-folded-help">
+                <a className={'nav-link'} href={siteRoot + 'help/'} title={gettext('Help')}>
+                  <span className="sf3-font-help sf3-font" aria-hidden="true"></span>
+                </a>
+              </li>
+              <Tip target="main-side-nav-folded-help" text={gettext('Help')} />
+              {enableTC &&
+                <>
+                  <li className='nav-item' id="main-side-nav-folded-terms">
+                    <a href={`${siteRoot}terms/`} className="nav-link">
+                      <span className="sf3-font-terms sf3-font" aria-hidden="true"></span>
+                    </a>
+                  </li>
+                  <Tip target="main-side-nav-folded-terms" text={gettext('Terms')} />
+                </>
+              }
+              {additionalAppBottomLinks && (
+                <>
+                  {Object.keys(additionalAppBottomLinks).map((key, index) => {
+                    return (
+                      <a className="nav-link" href={additionalAppBottomLinks[key]}>
+                        <span className="sf3-font-terms sf3-font" aria-hidden="true"></span>
+                      </a>
+                    );
+                  })}
+                </>
+              )}
+              <li className='nav-item' id="main-side-nav-folded-clients">
+                <a href={siteRoot + 'download_client_program/'} className="nav-link">
+                  <span className="sf3-font-devices sf3-font" aria-hidden="true"></span>
+                </a>
+              </li>
+              <Tip target="main-side-nav-folded-clients" text={gettext('Clients')} />
+            </ul>
+          }
+          <div
+            className="side-nav-bottom-toolbar d-none d-md-flex mt-auto px-2 rounded flex-shrink-0 align-items-center"
+            onClick={this.props.toggleFoldSideNav}
+          >
+            <img src={`${mediaUrl}img/open-sidebar.svg`} width="20" alt="" title={gettext('Unfold the sidebar')} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+MainSideNavFolded.propTypes = propTypes;
+
+export default MainSideNavFolded;

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

@@ -16,7 +16,6 @@ import CreateGroupDialog from '../components/dialog/create-group-dialog';
 const propTypes = {
   currentTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   tabItemClick: PropTypes.func.isRequired,
-  isSidePanelFolded: PropTypes.bool,
   toggleFoldSideNav: PropTypes.func
 };
 
@@ -29,7 +28,6 @@ class MainSideNav extends React.Component {
     this.state = {
       filesNavUnfolded: false,
       sharedExtended: false,
-      closeSideBar: false,
       groupItems: [],
       isCreateGroupDialogOpen: false,
     };
@@ -217,19 +215,9 @@ class MainSideNav extends React.Component {
     });
   };
 
-  toggleMinimize = () => {
-    this.setState({
-      isMinimized: !this.state.isMinimized
-    }, () => {
-      localStorage.setItem('sf_user_side_nav_minimized', this.state.isMinimized);
-    });
-  };
-
-
   render() {
     let showActivity = isDocs || isPro || !isDBSqlite3;
     const { filesNavUnfolded } = this.state;
-    const { isSidePanelFolded } = this.props;
     return (
       <div className="side-nav">
         <div className={'side-nav-con d-flex flex-column'}>
@@ -349,12 +337,8 @@ class MainSideNav extends React.Component {
           }
 
           <div className="side-nav-bottom-toolbar d-none d-md-flex mt-auto px-2 rounded flex-shrink-0 align-items-center" onClick={this.props.toggleFoldSideNav}>
-            {isSidePanelFolded ? <img src={`${mediaUrl}img/open-sidebar.svg`} width="20" alt="" title={gettext('Unfold the sidebar')} /> : (
+            <img className="mr-2" src={`${mediaUrl}img/close-sidebar.svg`} width="20" alt="" />
-              <>
+            <span>{gettext('Fold the sidebar')}</span>
-                <img className="mr-2" src={`${mediaUrl}img/close-sidebar.svg`} width="20" alt="" />
-                <span>{gettext('Fold the sidebar')}</span>
-              </>
-            )}
           </div>
 
         </div>

frontend/src/components/side-nav-icon-tip.js

@@ -0,0 +1,43 @@
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip } from 'reactstrap';
+import '../css/side-nav-icon-tip.css';
+
+function SideNavIconTip(props) {
+
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [showAnimation, setShowAnimation] = useState(false);
+
+  const toggleTooltip = useCallback(() => {
+    if (!showTooltip) {
+      setShowTooltip(true);
+      setTimeout(() => {
+        setShowAnimation(true);
+      }, 10);
+    } else {
+      setShowTooltip(false);
+      setShowAnimation(false);
+    }
+  }, [showTooltip]);
+
+  return (
+    <Tooltip
+      innerClassName={showAnimation ? 'side-nav-icon-tip side-nav-icon-tip-animation' : 'side-nav-icon-tip'}
+      toggle={toggleTooltip}
+      hideArrow={true}
+      delay={{ show: 0, hide: 0 }}
+      target={props.target}
+      placement="right"
+      isOpen={showTooltip}
+    >
+      {props.text}
+    </Tooltip>
+  );
+}
+
+SideNavIconTip.propTypes = {
+  text: PropTypes.string.isRequired,
+  target: PropTypes.string.isRequired,
+};
+
+export default SideNavIconTip;

frontend/src/components/side-panel.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import MediaQuery from 'react-responsive';
 import Logo from './logo';
 import MainSideNav from './main-side-nav';
+import MainSideNavFolded from './main-side-nav-folded';
 import { SIDE_PANEL_FOLDED_WIDTH } from '../constants';
 
 const propTypes = {
@@ -32,14 +33,22 @@ class SidePanel extends React.Component {
           </div>
         </MediaQuery>
         <div className="side-panel-center">
-          {children ? children : (
+          {children ? children : null}
+          {(!children && !isSidePanelFolded) &&
             <MainSideNav
               tabItemClick={this.props.tabItemClick}
               currentTab={this.props.currentTab}
               isSidePanelFolded={isSidePanelFolded}
               toggleFoldSideNav={this.props.toggleFoldSideNav}
             />
-          )}
+          }
+          {(!children && isSidePanelFolded) &&
+            <MainSideNavFolded
+              tabItemClick={this.props.tabItemClick}
+              currentTab={this.props.currentTab}
+              toggleFoldSideNav={this.props.toggleFoldSideNav}
+            />
+          }
         </div>
       </div>
     );

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

@@ -0,0 +1,11 @@
+.side-panel .side-nav-folded {
+  overflow: visible;
+}
+
+.side-panel .side-nav-folded .side-nav-con {
+  overflow: visible;
+}
+
+.side-panel .side-nav-folded .nav-item .nav-link:hover {
+  transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1);
+}

frontend/src/css/side-nav-icon-tip.css

@@ -0,0 +1,10 @@
+.side-nav-icon-tip {
+  opacity: 0;
+  transform: translateX(0px);
+  transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1);
+}
+
+.side-nav-icon-tip.side-nav-icon-tip-animation {
+  opacity: 1;
+  transform: translateX(20px);
+}

frontend/src/utils/repo-trash-api.js

@@ -40,7 +40,7 @@ class RepotrashAPI {
       page: page || 1,
       per_page: per_page
     };
-    return this.req.get(url, {params: params});
+    return this.req.get(url, { params: params });
   }
 }