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

7
src/index.css
View File

@ -61,8 +61,9 @@ code {
background-color: #e3e8ee !important; background-color: #e3e8ee !important;
} }
.ant-menu-submenu-arrow{ .ant-menu-submenu-arrow{
padding-right: 40px !important; padding-right: 40px !important;
} }
.ant-breadcrumb { .ant-breadcrumb {
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
@ -70,4 +71,8 @@ code {
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
color: #ed1f24 !important; color: #ed1f24 !important;
border-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 React, {useState} from "react";
import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd"; import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd";
import { MenuList } from "./MenuList"; import {MenuList} from "./MenuList";
import { Link, useHistory } from "react-router-dom"; import {Link, useHistory} from "react-router-dom";
import { import {
HomeOutlined, AlipayOutlined,
MenuOutlined, DatabaseOutlined,
UserOutlined, FileAddOutlined,
ProfileOutlined, FileProtectOutlined,
DatabaseOutlined, FileSyncOutlined,
FileAddOutlined, HomeOutlined,
FileSyncOutlined, MenuOutlined,
FileProtectOutlined, PayCircleOutlined,
ShoppingCartOutlined, ProfileOutlined,
AlipayOutlined, ShoppingCartOutlined,
PayCircleOutlined UserOutlined
} from "@ant-design/icons"; } from "@ant-design/icons";
import { AppRoute, LINKS } from "../../routes/app"; import {AppRoute, LINKS} from "../../routes/app";
import { useStore } from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import { observer } from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { useMediaQuery } from "react-responsive"; import {useMediaQuery} from "react-responsive";
const { Text, Paragraph } = Typography; const {Text, Paragraph} = Typography;
const { Header, Content, Sider } = Layout; const {Header, Content, Sider} = Layout;
const { SubMenu } = Menu; const {SubMenu} = Menu;
export const DesktopLayout = observer(() => { export const DesktopLayout = observer(() => {
let history = useHistory(); let history = useHistory();
const xl = useMediaQuery({ minWidth: 1024 }); const xl = useMediaQuery({minWidth: 1024});
const store = useStore(); const store = useStore();
const [clicked, setClicked] = useState(false); const [clicked, setClicked] = useState(false);
return ( return (
<Layout <Layout
theme={"light"} theme={"light"}
className={"transparent"} className={"transparent"}
hasSider={store.ui.mediaQuery.isDesktop} hasSider={store.ui.mediaQuery.isDesktop}
style={{ style={{
paddingLeft: xl ? "calc(70vw - 1024px)" : "0", paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
display: "flex", display: "flex",
// minWidth: 1024, // minWidth: 1024,
width: "100%", width: "100%",
height: "100%", height: "100%",
position: "relative", 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,
}}
> >
{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 <div
style={{ style={{
paddingLeft: 20, paddingLeft: 20,
@ -450,41 +450,44 @@ export const DesktopLayout = observer(() => {
autoAdjustOverflow={true} autoAdjustOverflow={true}
placement="bottomRight" placement="bottomRight"
content={ content={
<Menu <Menu
type={"line"} type={"line"}
inlineIndent={0} inlineIndent={0}
theme="light" theme="light"
style={{ style={{
backgroundColor: "transparent", backgroundColor: "transparent",
borderRightWidth: 0, borderRightWidth: 0,
}} }}
mode="inline" 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");
}}
> >
<span>Sign out</span> {store.authentication.userData.role !== "Admin" && (
</Menu.Item> <Menu.Item key="profile">
</Menu> <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={ title={
<Text> <Text>
{store.user.data.email}{" "} <Paragraph
<Paragraph style={{fontWeight: 400, marginTop: '0.5rem'}}
style={{ fontWeight: 400 }} type={"secondary-dark"}
type={"secondary-dark"} strong
> >
{store.authentication.userData.username} {store.authentication.userData.username}
</Paragraph> </Paragraph>
</Text> </Text>
} }
trigger="click" trigger="click"