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>

frontend/src/css/trash-dialog.css

@@ -42,3 +42,9 @@
   color: #000;
   background: #dfdfdf;
 }
+
+@media (max-width: 768px) {
+  .trash-dialog .modal-header .trash-dialog-old-page {
+    font-size: 14px;
+  }
+}

frontend/src/metadata/metadata-tree-view/view-item/index.js

@@ -5,9 +5,10 @@ import { gettext } from '../../../utils/constants';
 import Icon from '../../../components/icon';
 import ItemDropdownMenu from '../../../components/dropdown-menu/item-dropdown-menu';
 import NameDialog from '../name-dialog';
+import { Utils, isMobile } from '../../../utils/utils';
 
 import './index.css';
-import { Utils } from '../../../utils/utils';
+
 
 const ViewItem = ({
   canDelete,
@@ -23,14 +24,17 @@ const ViewItem = ({
   const [freeze, setFreeze] = useState(false);
   const [isShowRenameDialog, setRenameDialogShow] = useState(false);
   const [isDropShow, setDropShow] = useState(false);
+
   const canUpdate = useMemo(() => {
     if (userPerm !== 'rw' && userPerm !== 'admin') return false;
     return true;
   }, [userPerm]);
+
   const canDrop = useMemo(() => {
     if (Utils.isIEBrowser() || !canUpdate) return false;
     return true;
   }, [canUpdate]);
+
   const operations = useMemo(() => {
     if (!canUpdate) return [];
     let value = [
@@ -159,6 +163,7 @@ const ViewItem = ({
               unfreezeItem={unfreezeItem}
               getMenuList={() => operations}
               onMenuItemClick={operationClick}
+              menuStyle={isMobile ? { zIndex: 1050 } : {}}
             />
           )}
         </div>

frontend/src/user-notifications.js

@@ -104,8 +104,13 @@ class UserNotificationsDialog extends React.Component {
     return (
       <div className="notification-header-close">
         <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleDropDownMenu}>
-          <DropdownToggle tag="span" data-toggle="dropdown" aria-expanded={this.state.isItemMenuShow} className="notification-dropdown-toggle">
-            <span className="sf3-font sf3-font-more-level item-dropdown-icon"></span>
+          <DropdownToggle
+            tag="span"
+            data-toggle="dropdown"
+            aria-expanded={this.state.isItemMenuShow}
+            className="notification-dropdown-toggle"
+          >
+            <span className="sf3-font sf3-font-more item-dropdown-icon"></span>
           </DropdownToggle>
           <DropdownMenu right={true} className="dtable-dropdown-menu large">
             <DropdownItem onClick={this.markAllRead}>{gettext('Mark all read')}</DropdownItem>