Skip to content

Commit 2598f9e

Browse files
GerilLetoGerilLeto
authored
Merge pull request #1247 from merico-dev/1241-able-to-collapse-dashboard-list-to-get-more-space-for-dashboard
1241 able to collapse dashboard list to get more space for dashboard
2 parents a1657e9 + 87a9ff6 commit 2598f9e

File tree

31 files changed

+349
-351
lines changed

31 files changed

+349
-351
lines changed

‎api/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtable/api",
3-
"version": "10.46.1",
3+
"version": "10.47.1",
44
"description": "",
55
"main": "index.js",
66
"scripts": {

‎dashboard/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtable/dashboard",
3-
"version": "10.46.1",
3+
"version": "10.47.1",
44
"license": "Apache-2.0",
55
"publishConfig": {
66
"access": "public",
@@ -91,9 +91,9 @@
9191
"crypto-js": "^4.1.1",
9292
"cypress": "^12.9.0",
9393
"cypress-wait-until": "^1.7.2",
94-
"echarts": "^5.3.2",
95-
"echarts-for-react": "^3.0.2",
96-
"echarts-gl": "^2.0.9",
94+
"echarts": "5.4.1",
95+
"echarts-for-react": "3.0.2",
96+
"echarts-gl": "2.0.9",
9797
"jsdom": "^20.0.0",
9898
"jsdom-testing-mocks": "^1.5.0",
9999
"lodash": "^4.17.21",
@@ -148,9 +148,9 @@
148148
"d3-array": "3.2.3",
149149
"d3-regression": "1.3.10",
150150
"dayjs": "1.11.9",
151-
"echarts": "^5.3.2",
152-
"echarts-for-react": "^3.0.2",
153-
"echarts-gl": "^2.0.9",
151+
"echarts": "5.4.1",
152+
"echarts-for-react": "3.0.2",
153+
"echarts-gl": "2.0.9",
154154
"eventemitter2": "^6.4.6",
155155
"jszip": "3.10.1",
156156
"lodash": "^4.17.21",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtable/root",
3-
"version": "10.46.1",
3+
"version": "10.47.1",
44
"private": true,
55
"workspaces": [
66
"api",

‎settings-form/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtable/settings-form",
3-
"version": "10.46.1",
3+
"version": "10.47.1",
44
"license": "Apache-2.0",
55
"publishConfig": {
66
"access": "public",

‎website/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@devtable/website",
33
"private": true,
44
"license": "Apache-2.0",
5-
"version": "10.46.1",
5+
"version": "10.47.1",
66
"scripts": {
77
"dev": "vite",
88
"preview": "vite preview"
@@ -48,9 +48,9 @@
4848
"d3-array": "3.2.3",
4949
"d3-regression": "1.3.10",
5050
"dayjs": "1.11.9",
51-
"echarts": "^5.3.2",
52-
"echarts-for-react": "^3.0.2",
53-
"echarts-gl": "^2.0.9",
51+
"echarts": "5.4.1",
52+
"echarts-for-react": "3.0.2",
53+
"echarts-gl": "2.0.9",
5454
"eventemitter2": "^6.4.6",
5555
"json-stable-stringify": "^1.0.2",
5656
"jszip": "3.10.1",

‎website/src/components/account-dropdown/index.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Group, Menu, Text, UnstyledButton } from '@mantine/core';
1+
import { Group, Menu, Stack, Text, UnstyledButton } from '@mantine/core';
22
import { useBoolean } from 'ahooks';
33
import { forwardRef } from 'react';
44
import { useNavigate } from 'react-router-dom';
@@ -10,18 +10,19 @@ import { UpdateProfileModal } from './update-profile';
1010
interface UserButtonProps extends React.ComponentPropsWithoutRef<'button'> {
1111
username: string;
1212
email: string;
13+
height: number;
1314
}
1415

1516
const UserButton = forwardRef<HTMLButtonElement, UserButtonProps>(
16-
({ username, email, ...rest }: UserButtonProps, ref) => (
17+
({ username, email, height, ...rest }: UserButtonProps, ref) => (
1718
<UnstyledButton
1819
ref={ref}
1920
px="md"
2021
py={0}
2122
sx={(theme) => ({
2223
display: 'block',
2324
width: '100%',
24-
height: '60px',
25+
height,
2526
color: theme.black,
2627

2728
'&:hover': {
@@ -31,23 +32,24 @@ const UserButton = forwardRef<HTMLButtonElement, UserButtonProps>(
3132
{...rest}
3233
>
3334
<Group>
34-
<div style={{ flex: 1 }}>
35+
<Stack spacing={0} style={{ flex: 1 }}>
3536
<Text size="sm" weight={500}>
3637
{username}
3738
</Text>
38-
39-
<Text color="dimmed" size="xs">
40-
{email}
41-
</Text>
42-
</div>
39+
{email && (
40+
<Text mt={-4} color="dimmed" size={11}>
41+
{email}
42+
</Text>
43+
)}
44+
</Stack>
4345

4446
<ChevronRight size={16} />
4547
</Group>
4648
</UnstyledButton>
4749
),
4850
);
4951

50-
export function AccountDropdown() {
52+
export function AccountDropdown({ height }: { height: number }) {
5153
const { account } = useAccountContext();
5254
const navigate = useNavigate();
5355
const logout = () => {
@@ -62,7 +64,7 @@ export function AccountDropdown() {
6264
<Group position="center">
6365
<Menu withinPortal>
6466
<Menu.Target>
65-
<UserButton username={account.name} email={account.email} />
67+
<UserButton username={account.name} email={account.email} height={height} />
6668
</Menu.Target>
6769
<Menu.Dropdown>
6870
<Menu.Label>Account Settings</Menu.Label>

‎website/src/components/logo/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import { useRequest } from 'ahooks';
22
import { ConfigAPI } from '../../api-caller/config';
33
import { LogoLink } from './logo-link';
4+
import { Box } from '@mantine/core';
45

5-
export const Logo = () => {
6+
export const Logo = ({ height }: { height: string | number }) => {
67
const { data } = useRequest(ConfigAPI.getWebsiteSettings);
78
if (!data) {
89
return null;
910
}
1011

1112
return (
12-
<>
13+
<Box sx={{ height, img: { height: '100%' } }}>
1314
<LogoLink data={data} />
14-
</>
15+
</Box>
1516
);
1617
};

‎website/src/frames/admin/breadcrumbs.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Anchor, Breadcrumbs, Group, Text } from '@mantine/core';
2+
import { useMemo } from 'react';
3+
import { useLocation } from 'react-router-dom';
4+
import { adminPageLinks } from './page-links';
5+
import { Helmet } from 'react-helmet-async';
6+
7+
export const AdminBreadcrumbs = () => {
8+
const location = useLocation();
9+
const pathname = location.pathname;
10+
11+
const item = useMemo(() => {
12+
const match = adminPageLinks.find((l) => l.to === pathname);
13+
return match ?? null;
14+
}, [pathname]);
15+
16+
return (
17+
<>
18+
{item && (
19+
<Helmet>
20+
<title>{item.name}</title>
21+
</Helmet>
22+
)}
23+
<Breadcrumbs>
24+
<Group spacing={6}>
25+
<Text size="sm" color="#868e96" sx={{ cursor: 'default', userSelect: 'none' }}>
26+
System Settings
27+
</Text>
28+
</Group>
29+
{item && (
30+
<Anchor key={item.to} href={item.to} size="sm">
31+
<Group spacing={6}>{item.name}</Group>
32+
</Anchor>
33+
)}
34+
</Breadcrumbs>
35+
</>
36+
);
37+
};

‎website/src/frames/admin/header/index.tsx‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎website/src/frames/admin/index.tsx‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { AppShell, MantineProvider } from '@mantine/core';
2-
import { AdminHeader } from './header';
1+
import { AppShell, Box, Group, MantineProvider } from '@mantine/core';
32
import { Notifications } from '@mantine/notifications';
43
import { Navigate, Outlet } from 'react-router-dom';
5-
import { AdminNavbar } from './navbar';
6-
import './index.css';
4+
import { AccountDropdown } from '../../components/account-dropdown';
75
import { useAccountContext } from '../require-auth/account-context';
6+
import './index.css';
7+
import { AdminNavbar } from './navbar';
8+
import { AdminBreadcrumbs } from './breadcrumbs';
89

910
export function AdminFrame() {
1011
const { isAdmin } = useAccountContext();
@@ -14,27 +15,32 @@ export function AdminFrame() {
1415
return (
1516
<AppShell
1617
padding="md"
17-
header={<AdminHeader />}
1818
navbar={<AdminNavbar />}
1919
styles={{
20-
root: {
21-
minHeight: '100vh',
22-
display: 'flex',
23-
flexDirection: 'column',
24-
},
25-
body: {
26-
flexGrow: 1,
27-
},
2820
main: {
29-
flexGrow: 1,
30-
display: 'flex',
31-
flexDirection: 'column',
21+
height: '100vh',
22+
overflow: 'hidden',
23+
paddingTop: 0,
24+
paddingRight: 0,
25+
paddingBottom: 'calc(var(--mantine-footer-height, 0px) + 10px)',
26+
paddingLeft: 'calc(var(--mantine-navbar-width, 0px) + 0px)',
27+
width: '100vw',
28+
transition: 'padding-left ease 100ms',
3229
},
3330
}}
3431
>
3532
<MantineProvider>
36-
<Notifications position="top-right" />
37-
<Outlet />
33+
<Group position="apart" pl={10} sx={{ height: '40px', borderBottom: '0.0625rem solid #e9ecef' }}>
34+
<Group position="left">
35+
{/* should place breadcrumbs here */}
36+
<AdminBreadcrumbs />
37+
</Group>
38+
<AccountDropdown height={39} />
39+
</Group>
40+
<Box p={10} sx={{ height: 'calc(100vh - 30px)', overflow: 'auto' }}>
41+
<Notifications position="top-right" />
42+
<Outlet />
43+
</Box>
3844
</MantineProvider>
3945
</AppShell>
4046
);

0 commit comments

Comments
 (0)