style: add margin into profile popover
This commit is contained in:
caturbgs
parent
119fa6d0bd
commit
9460935e0a
|
|
@ -61,8 +61,9 @@ code {
|
|||
background-color: #e3e8ee !important;
|
||||
}
|
||||
.ant-menu-submenu-arrow{
|
||||
padding-right: 40px !important;
|
||||
padding-right: 40px !important;
|
||||
}
|
||||
|
||||
.ant-breadcrumb {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
|
@ -70,4 +71,8 @@ code {
|
|||
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||
color: #ed1f24 !important;
|
||||
border-color: #ed1f24 !important;
|
||||
}
|
||||
|
||||
.profile-container .ant-popover-inner-content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
|
@ -1,64 +1,64 @@
|
|||
import React, { useState } from "react";
|
||||
import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
|
||||
import { MenuList } from "./MenuList";
|
||||
import { Link, useHistory } from "react-router-dom";
|
||||
import React, {useState} from "react";
|
||||
import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd";
|
||||
import {MenuList} from "./MenuList";
|
||||
import {Link, useHistory} from "react-router-dom";
|
||||
import {
|
||||
HomeOutlined,
|
||||
MenuOutlined,
|
||||
UserOutlined,
|
||||
ProfileOutlined,
|
||||
DatabaseOutlined,
|
||||
FileAddOutlined,
|
||||
FileSyncOutlined,
|
||||
FileProtectOutlined,
|
||||
ShoppingCartOutlined,
|
||||
AlipayOutlined,
|
||||
PayCircleOutlined
|
||||
AlipayOutlined,
|
||||
DatabaseOutlined,
|
||||
FileAddOutlined,
|
||||
FileProtectOutlined,
|
||||
FileSyncOutlined,
|
||||
HomeOutlined,
|
||||
MenuOutlined,
|
||||
PayCircleOutlined,
|
||||
ProfileOutlined,
|
||||
ShoppingCartOutlined,
|
||||
UserOutlined
|
||||
} from "@ant-design/icons";
|
||||
import { AppRoute, LINKS } from "../../routes/app";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useMediaQuery } from "react-responsive";
|
||||
import {AppRoute, LINKS} from "../../routes/app";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import {useMediaQuery} from "react-responsive";
|
||||
|
||||
const { Text, Paragraph } = Typography;
|
||||
const { Header, Content, Sider } = Layout;
|
||||
const { SubMenu } = Menu;
|
||||
const {Text, Paragraph} = Typography;
|
||||
const {Header, Content, Sider} = Layout;
|
||||
const {SubMenu} = Menu;
|
||||
|
||||
export const DesktopLayout = observer(() => {
|
||||
let history = useHistory();
|
||||
const xl = useMediaQuery({ minWidth: 1024 });
|
||||
const store = useStore();
|
||||
const [clicked, setClicked] = useState(false);
|
||||
let history = useHistory();
|
||||
const xl = useMediaQuery({minWidth: 1024});
|
||||
const store = useStore();
|
||||
const [clicked, setClicked] = useState(false);
|
||||
|
||||
return (
|
||||
<Layout
|
||||
theme={"light"}
|
||||
className={"transparent"}
|
||||
hasSider={store.ui.mediaQuery.isDesktop}
|
||||
style={{
|
||||
paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
|
||||
display: "flex",
|
||||
// minWidth: 1024,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{store.ui.mediaQuery.isDesktop && (
|
||||
<Sider
|
||||
className={"transparent"}
|
||||
width={240}
|
||||
style={{
|
||||
overflowX: "hidden",
|
||||
bottom: 0,
|
||||
justifyContent: "flex-start",
|
||||
paddingTop: 20,
|
||||
paddingLeft: 20,
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
zIndex: 10,
|
||||
}}
|
||||
return (
|
||||
<Layout
|
||||
theme={"light"}
|
||||
className={"transparent"}
|
||||
hasSider={store.ui.mediaQuery.isDesktop}
|
||||
style={{
|
||||
paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
|
||||
display: "flex",
|
||||
// minWidth: 1024,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{store.ui.mediaQuery.isDesktop && (
|
||||
<Sider
|
||||
className={"transparent"}
|
||||
width={240}
|
||||
style={{
|
||||
overflowX: "hidden",
|
||||
bottom: 0,
|
||||
justifyContent: "flex-start",
|
||||
paddingTop: 20,
|
||||
paddingLeft: 20,
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
paddingLeft: 20,
|
||||
|
|
@ -450,41 +450,44 @@ export const DesktopLayout = observer(() => {
|
|||
autoAdjustOverflow={true}
|
||||
placement="bottomRight"
|
||||
content={
|
||||
<Menu
|
||||
type={"line"}
|
||||
inlineIndent={0}
|
||||
theme="light"
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
}}
|
||||
mode="inline"
|
||||
>
|
||||
<Menu.Item key={"profile"}>
|
||||
<Link to={LINKS.PROFILE}>
|
||||
<span>Profile</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key={"logout"}
|
||||
onClick={() => {
|
||||
store.authentication.logout();
|
||||
history.push("/login");
|
||||
}}
|
||||
<Menu
|
||||
type={"line"}
|
||||
inlineIndent={0}
|
||||
theme="light"
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
}}
|
||||
mode="inline"
|
||||
>
|
||||
<span>Sign out</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
{store.authentication.userData.role !== "Admin" && (
|
||||
<Menu.Item key="profile">
|
||||
<Link to={LINKS.PROFILE}>
|
||||
<UserOutlined/>
|
||||
<span>Profile</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item
|
||||
key={"logout"}
|
||||
onClick={() => {
|
||||
store.authentication.logout();
|
||||
history.push("/login");
|
||||
}}
|
||||
>
|
||||
<span>Sign out</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
title={
|
||||
<Text>
|
||||
{store.user.data.email}{" "}
|
||||
<Paragraph
|
||||
style={{ fontWeight: 400 }}
|
||||
type={"secondary-dark"}
|
||||
>
|
||||
{store.authentication.userData.username}
|
||||
</Paragraph>
|
||||
<Paragraph
|
||||
style={{fontWeight: 400, marginTop: '0.5rem'}}
|
||||
type={"secondary-dark"}
|
||||
strong
|
||||
>
|
||||
{store.authentication.userData.username}
|
||||
</Paragraph>
|
||||
</Text>
|
||||
}
|
||||
trigger="click"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user