This is an automated email from the ASF dual-hosted git repository. mintsweet pushed a commit to branch refactor-theme-color in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 46dc5cf973296715f82c966239d14204537c16ca Author: mintsweet <[email protected]> AuthorDate: Mon Jan 15 20:23:12 2024 +1300 refactor(config-ui): move theme config to root --- config-ui/src/main.tsx | 15 ++- config-ui/src/routes/layout/layout.tsx | 162 ++++++++++++++++----------------- 2 files changed, 89 insertions(+), 88 deletions(-) diff --git a/config-ui/src/main.tsx b/config-ui/src/main.tsx index e72bc3db5..d3b35c690 100644 --- a/config-ui/src/main.tsx +++ b/config-ui/src/main.tsx @@ -19,6 +19,7 @@ import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { RouterProvider } from 'react-router-dom'; +import { ConfigProvider } from 'antd'; import { PageLoading } from '@/components'; @@ -27,8 +28,16 @@ import { router } from './app/routrer'; import './index.css'; ReactDOM.render( - <Provider store={store}> - <RouterProvider router={router} fallbackElement={<PageLoading />} /> - </Provider>, + <ConfigProvider + theme={{ + token: { + colorPrimary: import.meta.env.DEVLAKE_COLOR_CUSTOM ?? '#7497F7', + }, + }} + > + <Provider store={store}> + <RouterProvider router={router} fallbackElement={<PageLoading />} /> + </Provider> + </ConfigProvider>, document.getElementById('root'), ); diff --git a/config-ui/src/routes/layout/layout.tsx b/config-ui/src/routes/layout/layout.tsx index 437afadce..f57a81a93 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 { ConfigProvider, Layout as AntdLayout, Menu, Flex, Divider, Tooltip, Button } from 'antd'; +import { Layout as AntdLayout, Menu, Flex, Divider, Tooltip, Button } from 'antd'; import API from '@/api'; import { PageLoading, Logo, ExternalLink, Message } from '@/components'; @@ -117,91 +117,83 @@ export const Layout = () => { }; return ( - <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 + <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> - </AntdLayout> + /> + )} + </div> + <Tooltip title="Close"> + <Button shape="circle" ghost icon={<CloseOutlined />} onClick={() => dispatch(hideTips())} /> + </Tooltip> + </S.Tips> + </CSSTransition> </AntdLayout> - </ConfigProvider> + </AntdLayout> ); };
