PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: add margin into profile popover

Browse Source
This commit is contained in:
caturbgs 2021-12-22 16:58:24 +07:00
parent 119fa6d0bd
commit 9460935e0a
2 changed files with 94 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/index.css
View File

@ -63,6 +63,7 @@ code {
.ant-menu-submenu-arrow{
padding-right: 40px !important;
}
.ant-breadcrumb {
margin-bottom: 10px !important;
}
@ -71,3 +72,7 @@ code {
color: #ed1f24 !important;
border-color: #ed1f24 !important;
}
.profile-container .ant-popover-inner-content {
padding: 0 !important;
}

173
src/pages/App/DesktopLayout.js
View File

@ -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"