01 notification more icon (#6551)

02 change trash mobile

03 mobile menu

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { navigate } from '@gatsbyjs/reach-router';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import moment from 'moment';
-import { Utils } from '../../utils/utils';
+import { Utils, isMobile } from '../../utils/utils';
 import { gettext, siteRoot, enableUserCleanTrash, username } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { repotrashAPI } from '../../utils/repo-trash-api';
@@ -338,7 +338,7 @@ class Item extends React.Component {
         <td title={moment(item.deleted_time).format('LLLL')}>{moment(item.deleted_time).format('YYYY-MM-DD')}</td>
         <td></td>
         <td>
-          <a href="#" className={isIconShown ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
+          <a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
         </td>
       </tr>
     ) : (
@@ -349,7 +349,7 @@ class Item extends React.Component {
         <td title={moment(item.deleted_time).format('LLLL')}>{moment(item.deleted_time).format('YYYY-MM-DD')}</td>
         <td>{Utils.bytesToSize(item.size)}</td>
         <td>
-          <a href="#" className={isIconShown ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
+          <a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
         </td>
       </tr>
     );

frontend/src/components/dropdown-menu/item-dropdown-menu.js

@@ -16,12 +16,14 @@ const propTypes = {
   onMenuItemClick: PropTypes.func.isRequired,
   freezeItem: PropTypes.func,
   unfreezeItem: PropTypes.func,
+  menuStyle: PropTypes.object,
 };
 
 class ItemDropdownMenu extends React.Component {
 
   static defaultProps = {
     isHandleContextMenuEvent: true,
+    menuStyle: {},
     toggleClass: 'sf3-font-more sf3-font'
   };
 
@@ -109,7 +111,7 @@ class ItemDropdownMenu extends React.Component {
 
   render() {
     let menuList = this.state.menuList;
-    let { toggleClass, toggleChildren, tagName } = this.props;
+    let { toggleClass, toggleChildren, tagName, menuStyle } = this.props;
     toggleClass = 'sf-dropdown-toggle ' + toggleClass;
 
     if (!menuList.length) {
@@ -160,7 +162,7 @@ class ItemDropdownMenu extends React.Component {
           // onClick={this.onDropdownToggleClick}
         />
         <ModalPortal>
-          <DropdownMenu>
+          <DropdownMenu style={menuStyle}>
             {menuList.map((menuItem, index) => {
               if (menuItem === 'Divider') {
                 return <DropdownItem key={index} divider />;

frontend/src/components/tree-section/index.js

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
+import { isMobile } from '../../utils/utils';
 
 import './index.css';
 
@@ -63,6 +64,7 @@ const TreeSection = ({ title, children, moreKey, moreOperations, moreOperationCl
                   unfreezeItem={unfreezeItem}
                   getMenuList={() => validMoreOperations}
                   onMenuItemClick={moreOperationClick}
+                  menuStyle={isMobile ? { zIndex: 1050 } : {}}
                 />
               </div>
             </>

frontend/src/components/tree-view/tree-node-view.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { permission } from '../../utils/constants';
 import TextTranslation from '../../utils/text-translation';
 import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
-import { Utils } from '../../utils/utils';
+import { Utils, isMobile } from '../../utils/utils';
 
 const LEFT_INDENT = 20;
 
@@ -325,6 +325,7 @@ class TreeNodeView extends React.Component {
                   onMenuItemClick={this.onMenuItemClick}
                   freezeItem={this.props.freezeItem}
                   unfreezeItem={this.unfreezeItem}
+                  menuStyle={isMobile ? { zIndex: 1050 } : {}}
                 />
               )}
             </div>