增加：移动端侧边栏点击头像有更多操作

src/actions/index.js

@@ -89,6 +89,14 @@ export const openCreateFolderDialog = () => {
     }
 }
 
+export const setUserPopover = anchor => {
+    return {
+        type: 'SET_USER_POPOVER',
+        anchor: anchor,
+    }
+}
+
+
 export const openRenameDialog = () => {
     return {
         type: 'OPEN_RENAME_DIALOG',

src/component/UserAvatar.js

@@ -5,25 +5,16 @@ import Grow from '@material-ui/core/Grow';
 import { connect } from 'react-redux'
 import Avatar from '@material-ui/core/Avatar';
 import IconButton from '@material-ui/core/IconButton';
-import Popover from '@material-ui/core/Popover';
 import SettingIcon from '@material-ui/icons/Settings'
-import Typography from '@material-ui/core/Typography';
-import Chip from '@material-ui/core/Chip';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import MenuItem from '@material-ui/core/MenuItem';
-import Divider from '@material-ui/core/Divider';
 import SaveIcon from '@material-ui/icons/Save';
 import Tooltip from '@material-ui/core/Tooltip';
+import UserAvatarPopover from './UserAvatarPopover';
 import {
-    LogoutVariant,
-    HomeAccount,
-    DesktopMacDashboard,
     AccountCircle,
-    AccountArrowRight,
-    AccountPlus
 } from 'mdi-material-ui'
 import {
-    openResaveDialog
+    openResaveDialog,
+    setUserPopover
 }from "../actions/index"
 
 const mapStateToProps = state => {
@@ -39,6 +30,9 @@ const mapDispatchToProps = dispatch => {
     return {
         openResave:()=>{
             dispatch(openResaveDialog())
+        },
+        setUserPopover:anchor=>{
+            dispatch(setUserPopover(anchor))
         }
     }
 }
@@ -80,9 +74,7 @@ class UserAvatarCompoment extends Component {
     }
 
     showUserInfo = e=>{
-        this.setState({
-            anchorEl:e.currentTarget
-        });
+        this.props.setUserPopover(e.currentTarget);
     }
 
     handleClose=()=>{
@@ -119,67 +111,7 @@ class UserAvatarCompoment extends Component {
                         
                         </IconButton> </div>
                 </Grow>
-                <Popover 
-                open = {this.state.anchorEl!==null}
-                onClose={this.handleClose}
-                anchorEl={this.state.anchorEl}
-                anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'right',
-                }}
-                transformOrigin={{
-                    vertical: 'top',
-                    horizontal: 'right',
-                }}
-                >
-                {window.userInfo.uid===-1&&
-                     <div className={classes.visitorMenu}>
-                     <Divider/>
-                     <MenuItem onClick={()=>this.openURL("/Login")}>
-                             <ListItemIcon><AccountArrowRight/></ListItemIcon>
-                                 登录
-                         </MenuItem>
-                     <MenuItem onClick={()=>this.openURL("/Signup")}>
-                         <ListItemIcon><AccountPlus/></ListItemIcon>
-                             注册
-                     </MenuItem>
-                   </div>
-                }
-                {window.userInfo.uid!==-1&&
-                <div>
-                    <div className={classes.header}>
-                        <div className={classes.largeAvatarContainer}>
-                            <Avatar className={classes.largeAvatar} src={"/Member/Avatar/"+window.userInfo.uid+"/l"} />
-                        </div>
-                        <div className={classes.info}>
-                            <Typography noWrap>{window.userInfo.nick}</Typography>
-                            <Typography color="textSecondary" noWrap>{window.userInfo.email}</Typography>
-                            <Chip
-                                className={classes.badge}
-                                color={window.userInfo.groupId === 1?"secondary":"default"}
-                                label={window.userInfo.group}
-                            />
-                        </div>
-                    </div>
-                    <div>
-                        <Divider/>
-                        <MenuItem onClick={()=>this.openURL("/Profile/"+window.userInfo.uid)}>
-                                <ListItemIcon><HomeAccount/></ListItemIcon>
-                                    个人主页
-                            </MenuItem>
-                        {(window.userInfo.groupId === 1)&&
-                            <MenuItem onClick={()=>this.openURL("/Admin")}>
-                                <ListItemIcon><DesktopMacDashboard/></ListItemIcon>
-                                    管理面板
-                            </MenuItem>
-                        }
-                       
-                        <MenuItem onClick={()=>this.openURL("/Member/LogOut")}>
-                            <ListItemIcon><LogoutVariant/></ListItemIcon>
-                                退出
-                        </MenuItem>
-                    </div></div>}
-                </Popover>
+              <UserAvatarPopover/>
             </div>
         );
     }

src/component/UserAvatarPopover.js

@@ -0,0 +1,151 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux'
+import Avatar from '@material-ui/core/Avatar';
+import Popover from '@material-ui/core/Popover';
+import Typography from '@material-ui/core/Typography';
+import Chip from '@material-ui/core/Chip';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import MenuItem from '@material-ui/core/MenuItem';
+import Divider from '@material-ui/core/Divider';
+import {
+    LogoutVariant,
+    HomeAccount,
+    DesktopMacDashboard,
+    AccountArrowRight,
+    AccountPlus
+} from 'mdi-material-ui'
+import {
+    setUserPopover
+}from "../actions/index"
+
+const mapStateToProps = state => {
+    return {
+        anchorEl:state.viewUpdate.userPopoverAnchorEl,
+    }
+}
+
+const mapDispatchToProps = dispatch => {
+    return {
+        setUserPopover:anchor=>{
+            dispatch(setUserPopover(anchor))
+        }
+    }
+}
+const styles = theme => ({
+    avatar:{
+        width:"30px",
+        height:"30px",
+    },
+    header:{
+        display:"flex",
+        padding: "20px 20px 20px 20px",
+    },
+    largeAvatar:{
+        height:"90px",
+        width:"90px",
+    },
+    info:{
+        marginLeft: "10px",
+        width: "139px",
+    },
+    badge:{
+        marginTop:"10px",
+    },
+    visitorMenu:{
+        width:200,
+    }
+})
+
+class UserAvatarPopoverCompoment extends Component {
+
+
+
+
+    handleClose=()=>{
+        this.props.setUserPopover(null)
+    }
+    
+    openURL = (url)=>{
+        window.location.href=url;
+    }
+
+    render() {
+        const { classes} = this.props;
+        return (
+                <Popover 
+                open = {this.props.anchorEl!==null}
+                onClose={this.handleClose}
+                anchorEl={this.props.anchorEl}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+                >
+                {window.userInfo.uid===-1&&
+                     <div className={classes.visitorMenu}>
+                     <Divider/>
+                     <MenuItem onClick={()=>this.openURL("/Login")}>
+                             <ListItemIcon><AccountArrowRight/></ListItemIcon>
+                                 登录
+                         </MenuItem>
+                     <MenuItem onClick={()=>this.openURL("/Signup")}>
+                         <ListItemIcon><AccountPlus/></ListItemIcon>
+                             注册
+                     </MenuItem>
+                   </div>
+                }
+                {window.userInfo.uid!==-1&&
+                <div>
+                    <div className={classes.header}>
+                        <div className={classes.largeAvatarContainer}>
+                            <Avatar className={classes.largeAvatar} src={"/Member/Avatar/"+window.userInfo.uid+"/l"} />
+                        </div>
+                        <div className={classes.info}>
+                            <Typography noWrap>{window.userInfo.nick}</Typography>
+                            <Typography color="textSecondary" noWrap>{window.userInfo.email}</Typography>
+                            <Chip
+                                className={classes.badge}
+                                color={window.userInfo.groupId === 1?"secondary":"default"}
+                                label={window.userInfo.group}
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <Divider/>
+                        <MenuItem onClick={()=>this.openURL("/Profile/"+window.userInfo.uid)}>
+                                <ListItemIcon><HomeAccount/></ListItemIcon>
+                                    个人主页
+                            </MenuItem>
+                        {(window.userInfo.groupId === 1)&&
+                            <MenuItem onClick={()=>this.openURL("/Admin")}>
+                                <ListItemIcon><DesktopMacDashboard/></ListItemIcon>
+                                    管理面板
+                            </MenuItem>
+                        }
+                       
+                        <MenuItem onClick={()=>this.openURL("/Member/LogOut")}>
+                            <ListItemIcon><LogoutVariant/></ListItemIcon>
+                                退出
+                        </MenuItem>
+                    </div></div>}
+                </Popover>
+        );
+    }
+}
+
+UserAvatarPopoverCompoment.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+const UserAvatarPopover = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)( withStyles(styles)(UserAvatarPopoverCompoment))
+  
+export default UserAvatarPopover

src/component/UserInfo.js

@@ -4,6 +4,8 @@ import { withStyles } from '@material-ui/core/styles';
 import { connect } from 'react-redux'
 import Typography from '@material-ui/core/Typography';
 import {
+    openResaveDialog,
+    setUserPopover
 }from "../actions/index"
 
 const mapStateToProps = state => {
@@ -13,6 +15,9 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
     return {
+        setUserPopover:anchor=>{
+            dispatch(setUserPopover(anchor))
+        }
     }
 }
 
@@ -57,13 +62,17 @@ const styles = theme => ({
 
 class UserInfoCompoment extends Component {
 
+    showUserInfo = e=>{
+        this.props.setUserPopover(e.currentTarget);
+    }
+
     render() {
         const { classes} = this.props;
 
         return (
             <div className={classes.userNav}>
                 <div className={classes.flexAvatar}>
-                    <a href={"/Profile/"+window.userInfo.uid} className={classes.avatar}>
+                    <a onClick={this.showUserInfo} className={classes.avatar}>
                         {(window.userInfo.uid!==-1)&&<img alt="avatar" src={"/Member/Avatar/"+window.userInfo.uid+"/l"} className={classes.avatarImg}></img>}
                         {(window.userInfo.uid===-1)&&<img alt="avatar" src={"/Member/Avatar/0/l"} className={classes.avatarImg}></img>}
                     </a>

src/index.js

@@ -23,6 +23,7 @@ const defaultStatus = {
         navigatorErrorMsg:null,
         modalsLoading:false,
         storageRefresh:false,
+        userPopoverAnchorEl:null,
         modals:{
             createNewFolder:false,
             rename:false,
@@ -70,7 +71,3 @@ ReactDOM.render(
 
 
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();

src/reducers/index.js

@@ -215,6 +215,12 @@ const cloudreveApp = (state = [], action) => {
                     contextOpen:false,
                 }),
             });
+        case 'SET_USER_POPOVER':
+            return Object.assign({}, state, {
+                viewUpdate: Object.assign({}, state.viewUpdate, {
+                    userPopoverAnchorEl:action.anchor,
+                }),
+            });
         case 'OPEN_SHARE_DIALOG':
             return Object.assign({}, state, {
                 viewUpdate: Object.assign({}, state.viewUpdate, {