You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by mi...@apache.org on 2024/01/15 03:43:40 UTC
(incubator-devlake) 02/02: fix(config-ui): theme color config move to layout
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch fix-theme-color
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 8878a09379825745b90b9b4d4deed2af0e6f9ded
Author: mintsweet <0x...@gmail.com>
AuthorDate: Mon Jan 15 16:43:26 2024 +1300
fix(config-ui): theme color config move to layout
---
config-ui/src/main.tsx | 15 +--
config-ui/src/routes/layout/layout.tsx | 162 +++++++++++++++++----------------
2 files changed, 88 insertions(+), 89 deletions(-)
diff --git a/config-ui/src/main.tsx b/config-ui/src/main.tsx
index d3b35c690..e72bc3db5 100644
--- a/config-ui/src/main.tsx
+++ b/config-ui/src/main.tsx
@@ -19,7 +19,6 @@
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { RouterProvider } from 'react-router-dom';
-import { ConfigProvider } from 'antd';
import { PageLoading } from '@/components';
@@ -28,16 +27,8 @@ import { router } from './app/routrer';
import './index.css';
ReactDOM.render(
- <ConfigProvider
- theme={{
- token: {
- colorPrimary: import.meta.env.DEVLAKE_COLOR_CUSTOM ?? '#7497F7',
- },
- }}
- >
- <Provider store={store}>
- <RouterProvider router={router} fallbackElement={<PageLoading />} />
- </Provider>
- </ConfigProvider>,
+ <Provider store={store}>
+ <RouterProvider router={router} fallbackElement={<PageLoading />} />
+ </Provider>,
document.getElementById('root'),
);
diff --git a/config-ui/src/routes/layout/layout.tsx b/config-ui/src/routes/layout/layout.tsx
index f57a81a93..437afadce 100644
--- a/config-ui/src/routes/layout/layout.tsx
+++ b/config-ui/src/routes/layout/layout.tsx
@@ -20,7 +20,7 @@ import { useState, useEffect, useRef } from 'react';
import { useLoaderData, Outlet, useNavigate, useLocation } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';
import { CloseOutlined } from '@ant-design/icons';
-import { Layout as AntdLayout, Menu, Flex, Divider, Tooltip, Button } from 'antd';
+import { ConfigProvider, Layout as AntdLayout, Menu, Flex, Divider, Tooltip, Button } from 'antd';
import API from '@/api';
import { PageLoading, Logo, ExternalLink, Message } from '@/components';
@@ -117,83 +117,91 @@ export const Layout = () => {
};
return (
- <AntdLayout style={{ height: '100vh' }}>
- <Sider>
- {import.meta.env.DEVLAKE_TITLE_CUSTOM ? (
- <h2 style={{ margin: '36px 0', textAlign: 'center', color: '#fff' }}>
- {import.meta.env.DEVLAKE_TITLE_CUSTOM}
- </h2>
- ) : (
- <Logo style={{ padding: 24 }} />
- )}
- <Menu
- mode="inline"
- theme="dark"
- items={menuItems}
- openKeys={openKeys}
- selectedKeys={selectedKeys}
- onClick={({ key }) => navigate(key)}
- onOpenChange={(keys) => setOpenKeys(keys)}
- />
- <div style={{ position: 'absolute', right: 0, bottom: 20, left: 0, color: '#fff', textAlign: 'center' }}>
- {version}
- </div>
- </Sider>
- <AntdLayout style={{ overflowY: 'auto' }}>
- <Header
- style={{
- display: 'flex',
- justifyContent: 'flex-end',
- alignItems: 'center',
- padding: '0 24px',
- height: 50,
- background: 'transparent',
- }}
- >
- {headerItems
- .filter((item) =>
- import.meta.env.DEVLAKE_COPYRIGHT_HIDE ? !['GitHub', 'Slack'].includes(item.label) : true,
- )
- .map((item, i, arr) => (
- <ExternalLink key={item.label} link={item.link} style={{ display: 'flex', alignItems: 'center' }}>
- {item.icon}
- <span style={{ marginLeft: 4 }}>{item.label}</span>
- {i !== arr.length - 1 && <Divider type="vertical" />}
- </ExternalLink>
- ))}
- </Header>
- <Content style={{ margin: '16px auto', width: 1188 }}>
- <Outlet />
- </Content>
- {!import.meta.env.DEVLAKE_COPYRIGHT_HIDE && (
- <Footer>
- <p style={{ textAlign: 'center' }}>Apache 2.0 License</p>
- </Footer>
- )}
- <CSSTransition in={!!tipsShow} unmountOnExit timeout={300} nodeRef={tipsRef} classNames="tips">
- <S.Tips ref={tipsRef}>
- <div className="content">
- {tipsType === 'data-scope-changed' && (
- <Flex gap="middle">
- <Message content="The change of Data Scope(s) will affect the metrics of this project. Would you like to recollect the data to get them updated?" />
- <Button type="primary" loading={operating} onClick={handleRunBP}>
- Recollect Data
- </Button>
- </Flex>
- )}
- {tipsType === 'scope-config-changed' && (
- <Message
- content="Scope Config(s) have been updated. If you would like to re-transform or re-collect the data in the related
+ <ConfigProvider
+ theme={{
+ token: {
+ colorPrimary: import.meta.env.DEVLAKE_COLOR_CUSTOM ?? '#7497F7',
+ },
+ }}
+ >
+ <AntdLayout style={{ height: '100vh' }}>
+ <Sider>
+ {import.meta.env.DEVLAKE_TITLE_CUSTOM ? (
+ <h2 style={{ margin: '36px 0', textAlign: 'center', color: '#fff' }}>
+ {import.meta.env.DEVLAKE_TITLE_CUSTOM}
+ </h2>
+ ) : (
+ <Logo style={{ padding: 24 }} />
+ )}
+ <Menu
+ mode="inline"
+ theme="dark"
+ items={menuItems}
+ openKeys={openKeys}
+ selectedKeys={selectedKeys}
+ onClick={({ key }) => navigate(key)}
+ onOpenChange={(keys) => setOpenKeys(keys)}
+ />
+ <div style={{ position: 'absolute', right: 0, bottom: 20, left: 0, color: '#fff', textAlign: 'center' }}>
+ {version}
+ </div>
+ </Sider>
+ <AntdLayout style={{ overflowY: 'auto' }}>
+ <Header
+ style={{
+ display: 'flex',
+ justifyContent: 'flex-end',
+ alignItems: 'center',
+ padding: '0 24px',
+ height: 50,
+ background: 'transparent',
+ }}
+ >
+ {headerItems
+ .filter((item) =>
+ import.meta.env.DEVLAKE_COPYRIGHT_HIDE ? !['GitHub', 'Slack'].includes(item.label) : true,
+ )
+ .map((item, i, arr) => (
+ <ExternalLink key={item.label} link={item.link} style={{ display: 'flex', alignItems: 'center' }}>
+ {item.icon}
+ <span style={{ marginLeft: 4 }}>{item.label}</span>
+ {i !== arr.length - 1 && <Divider type="vertical" />}
+ </ExternalLink>
+ ))}
+ </Header>
+ <Content style={{ margin: '16px auto', width: 1188 }}>
+ <Outlet />
+ </Content>
+ {!import.meta.env.DEVLAKE_COPYRIGHT_HIDE && (
+ <Footer>
+ <p style={{ textAlign: 'center' }}>Apache 2.0 License</p>
+ </Footer>
+ )}
+ <CSSTransition in={!!tipsShow} unmountOnExit timeout={300} nodeRef={tipsRef} classNames="tips">
+ <S.Tips ref={tipsRef}>
+ <div className="content">
+ {tipsType === 'data-scope-changed' && (
+ <Flex gap="middle">
+ <Message content="The change of Data Scope(s) will affect the metrics of this project. Would you like to recollect the data to get them updated?" />
+ <Button type="primary" loading={operating} onClick={handleRunBP}>
+ Recollect Data
+ </Button>
+ </Flex>
+ )}
+ {tipsType === 'scope-config-changed' && (
+ <Message
+ content="Scope Config(s) have been updated. If you would like to re-transform or re-collect the data in the related
project(s), please go to the Project page and do so."
- />
- )}
- </div>
- <Tooltip title="Close">
- <Button shape="circle" ghost icon={<CloseOutlined />} onClick={() => dispatch(hideTips())} />
- </Tooltip>
- </S.Tips>
- </CSSTransition>
+ />
+ )}
+ </div>
+ <Tooltip title="Close">
+ <Button shape="circle" ghost icon={<CloseOutlined />} onClick={() => dispatch(hideTips())} />
+ </Tooltip>
+ </S.Tips>
+ </CSSTransition>
+ </AntdLayout>
</AntdLayout>
- </AntdLayout>
+ </ConfigProvider>
);
};