Skip to content

Commit fa9c39b

Browse files
authored
Merge pull request #1727 from iamfaran/ui/environments-breadcrumbs
[Fix]: Consistent UI for Breadcrumbs and resolve merge conflict
2 parents cda5657 + 17641cd commit fa9c39b

File tree

2 files changed

+45
-47
lines changed

2 files changed

+45
-47
lines changed

client/packages/lowcoder/src/pages/setting/environments/WorkspaceDetail.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const WorkspaceDetail: React.FC = () => {
9191
key: 'environments',
9292
title: (
9393
<span>
94-
<HomeOutlined /> Environments
94+
Environments
9595
</span>
9696
),
9797
onClick: () => history.push("/setting/environments")
@@ -100,7 +100,7 @@ const WorkspaceDetail: React.FC = () => {
100100
key: 'environment',
101101
title: (
102102
<span>
103-
<TeamOutlined /> {environment.environmentName}
103+
{environment.environmentName}
104104
</span>
105105
),
106106
onClick: () => history.push(`/setting/environments/${environment.environmentId}`)

client/packages/lowcoder/src/pages/setting/environments/components/ModernBreadcrumbs.tsx

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { ReactNode } from 'react';
2-
import { Breadcrumb } from 'antd';
2+
import { default as AntdBreadcrumb } from 'antd/es/breadcrumb';
33
import { BreadcrumbProps } from 'antd/lib/breadcrumb';
4+
import styled from 'styled-components';
5+
import { ArrowIcon } from 'lowcoder-design';
46

57
interface ModernBreadcrumbsProps extends Omit<BreadcrumbProps, 'items'> {
68
/**
@@ -13,56 +15,52 @@ interface ModernBreadcrumbsProps extends Omit<BreadcrumbProps, 'items'> {
1315
}[];
1416
}
1517

16-
/**
17-
* Modern styled breadcrumb component with consistent styling
18-
*/
18+
const Breadcrumb = styled(AntdBreadcrumb)`
19+
margin-bottom: 10px;
20+
font-size: 20px;
21+
li:not(:last-child) {
22+
color: #8b8fa3;
23+
}
24+
25+
li:last-child {
26+
font-weight: 500;
27+
color: #222222;
28+
}
29+
30+
li.ant-breadcrumb-separator {
31+
display: flex;
32+
flex-direction: column;
33+
justify-content: center;
34+
}
35+
`;
36+
37+
const BreadcrumbItem = styled.div`
38+
cursor: pointer;
39+
`;
40+
41+
1942
const ModernBreadcrumbs: React.FC<ModernBreadcrumbsProps> = ({ items = [], ...props }) => {
20-
// Convert custom items format to Antd's expected format
43+
// Convert custom items format to the standard format used throughout the application
2144
const breadcrumbItems = items.map(item => ({
2245
key: item.key,
23-
title: item.onClick ? (
24-
<span
25-
style={{
26-
cursor: "pointer",
27-
color: '#1890ff',
28-
fontWeight: '500',
29-
transition: 'color 0.2s ease'
30-
}}
31-
onClick={item.onClick}
32-
onMouseEnter={(e) => {
33-
e.currentTarget.style.color = '#096dd9';
34-
e.currentTarget.style.textDecoration = 'underline';
35-
}}
36-
onMouseLeave={(e) => {
37-
e.currentTarget.style.color = '#1890ff';
38-
e.currentTarget.style.textDecoration = 'none';
39-
}}
40-
>
41-
{item.title}
42-
</span>
43-
) : (
44-
<span style={{ color: '#222222', fontWeight: '500' }}>
45-
{item.title}
46-
</span>
47-
)
46+
title: item.title,
47+
onClick: item.onClick
4848
}));
4949

5050
return (
51-
<div className="modern-breadcrumb" style={{
52-
background: '#ffffff',
53-
padding: '12px 20px',
54-
borderRadius: '4px',
55-
marginBottom: '20px',
56-
border: '1px solid #e8e8e8',
57-
display: 'flex',
58-
alignItems: 'center'
59-
}}>
60-
<Breadcrumb
61-
{...props}
62-
separator={<span style={{ color: '#8b8fa3' }}>/</span>}
63-
items={breadcrumbItems}
64-
/>
65-
</div>
51+
<Breadcrumb
52+
{...props}
53+
separator={<ArrowIcon />}
54+
items={breadcrumbItems}
55+
itemRender={(item) => (
56+
<BreadcrumbItem
57+
key={item.key}
58+
onClick={item.onClick}
59+
>
60+
{item.title}
61+
</BreadcrumbItem>
62+
)}
63+
/>
6664
);
6765
};
6866

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy