This is an automated email from the ASF dual-hosted git repository.
likyh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new 776615de8 feat(config-ui): adjust the header link (#4114)
776615de8 is described below
commit 776615de824876ab3d0aec2603d4980d3f50bdc6
Author: 青湛 <[email protected]>
AuthorDate: Thu Jan 5 18:57:44 2023 +0800
feat(config-ui): adjust the header link (#4114)
---
config-ui/src/images/icons/file.svg | 18 ++++++
config-ui/src/images/icons/github.svg | 6 ++
config-ui/src/images/icons/slack.svg | 15 +++++
.../src/images/slack-mark-monochrome-black.svg | 43 --------------
config-ui/src/images/slack-rgb.svg | 65 ----------------------
config-ui/src/layouts/base/base.tsx | 58 ++++++++-----------
config-ui/src/layouts/base/styled.ts | 31 +++++------
7 files changed, 76 insertions(+), 160 deletions(-)
diff --git a/config-ui/src/images/icons/file.svg
b/config-ui/src/images/icons/file.svg
new file mode 100644
index 000000000..fcaba82e3
--- /dev/null
+++ b/config-ui/src/images/icons/file.svg
@@ -0,0 +1,18 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M3.23223 1.56524C3.70107 1.0964 4.33696 0.833008 5
0.833008H11.6667C11.8877 0.833008 12.0996 0.920805 12.2559 1.07709L17.2559
6.07709C17.4122 6.23337 17.5 6.44533 17.5 6.66634V16.6663C17.5 17.3294 17.2366
17.9653 16.7678 18.4341C16.2989 18.9029 15.663 19.1663 15 19.1663H5C4.33696
19.1663 3.70107 18.9029 3.23223 18.4341C2.76339 17.9653 2.5 17.3294 2.5
16.6663V3.33301C2.5 2.66997 2.76339 2.03408 3.23223 1.56524ZM5 2.49967C4.77899
2.49967 4.56702 2.58747 4.41074 2.74375C4.25446 2.900 [...]
+ fill="#7497F7" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M11.6666 0.833008C12.1268 0.833008 12.4999 1.2061 12.4999
1.66634V5.83301H16.6666C17.1268 5.83301 17.4999 6.2061 17.4999 6.66634C17.4999
7.12658 17.1268 7.49967 16.6666 7.49967H11.6666C11.2063 7.49967 10.8333 7.12658
10.8333 6.66634V1.66634C10.8333 1.2061 11.2063 0.833008 11.6666 0.833008Z"
+ fill="#7497F7" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M5.83325 10.8333C5.83325 10.3731 6.20635 10 6.66659 10H13.3333C13.7935
10 14.1666 10.3731 14.1666 10.8333C14.1666 11.2936 13.7935 11.6667 13.3333
11.6667H6.66659C6.20635 11.6667 5.83325 11.2936 5.83325 10.8333Z"
+ fill="#7497F7" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M5.83325 14.1663C5.83325 13.7061 6.20635 13.333 6.66659
13.333H13.3333C13.7935 13.333 14.1666 13.7061 14.1666 14.1663C14.1666 14.6266
13.7935 14.9997 13.3333 14.9997H6.66659C6.20635 14.9997 5.83325 14.6266 5.83325
14.1663Z"
+ fill="#7497F7" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M5.83325 7.50033C5.83325 7.04009 6.20635 6.66699 6.66659
6.66699H8.33325C8.79349 6.66699 9.16659 7.04009 9.16659 7.50033C9.16659 7.96056
8.79349 8.33366 8.33325 8.33366H6.66659C6.20635 8.33366 5.83325 7.96056 5.83325
7.50033Z"
+ fill="#7497F7" />
+</svg>
+
\ No newline at end of file
diff --git a/config-ui/src/images/icons/github.svg
b/config-ui/src/images/icons/github.svg
new file mode 100644
index 000000000..40855bb06
--- /dev/null
+++ b/config-ui/src/images/icons/github.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+ <path
+ d="M9.99219 1.48926C5.16211 1.48731 1.25 5.39746 1.25 10.2236C1.25 14.04
3.69727 17.2842 7.10547 18.4756C7.56445 18.5908 7.49414 18.2647 7.49414
18.042V16.5283C4.84375 16.8389 4.73633 15.085 4.55859 14.792C4.19922 14.1787
3.34961 14.0225 3.60352 13.7295C4.20703 13.4189 4.82227 13.8076 5.53516
14.8604C6.05078 15.624 7.05664 15.4951 7.56641 15.3682C7.67773 14.9092 7.91602
14.499 8.24414 14.1807C5.49805 13.6885 4.35352 12.0127 4.35352 10.0205C4.35352
9.05371 4.67188 8.16504 5.29688 7.44 [...]
+ fill="#7497F7" />
+</svg>
+
\ No newline at end of file
diff --git a/config-ui/src/images/icons/slack.svg
b/config-ui/src/images/icons/slack.svg
new file mode 100644
index 000000000..6ff0dc7f5
--- /dev/null
+++ b/config-ui/src/images/icons/slack.svg
@@ -0,0 +1,15 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+ <path
+ d="M5.18033 12.4719C5.18033 13.4398 4.39804 14.2221 3.43013
14.2221C2.46222 14.2221 1.67993 13.4398 1.67993 12.4719C1.67993 11.504 2.46222
10.7217 3.43013 10.7217H5.18033V12.4719ZM6.05543 12.4719C6.05543 11.504 6.83772
10.7217 7.80563 10.7217C8.77354 10.7217 9.55583 11.504 9.55583
12.4719V16.8474C9.55583 17.8153 8.77354 18.5976 7.80563 18.5976C6.83772 18.5976
6.05543 17.8153 6.05543 16.8474V12.4719Z"
+ fill="#7497F7" />
+ <path
+ d="M7.8057 5.44473C6.83779 5.44473 6.05551 4.66245 6.05551 3.69454C6.05551
2.72662 6.83779 1.94434 7.8057 1.94434C8.77362 1.94434 9.5559 2.72662 9.5559
3.69454V5.44473H7.8057ZM7.8057 6.33309C8.77362 6.33309 9.5559 7.11538 9.5559
8.08329C9.5559 9.05121 8.77362 9.83349 7.8057 9.83349H3.41695C2.44903 9.83349
1.66675 9.05121 1.66675 8.08329C1.66675 7.11538 2.44903 6.33309 3.41695
6.33309H7.8057Z"
+ fill="#7497F7" />
+ <path
+ d="M14.8198 8.08329C14.8198 7.11538 15.6021 6.33309 16.57 6.33309C17.5379
6.33309 18.3202 7.11538 18.3202 8.08329C18.3202 9.05121 17.5379 9.83349 16.57
9.83349H14.8198V8.08329ZM13.9447 8.08329C13.9447 9.05121 13.1624 9.83349
12.1945 9.83349C11.2266 9.83349 10.4443 9.05121 10.4443 8.08329V3.69454C10.4443
2.72662 11.2266 1.94434 12.1945 1.94434C13.1624 1.94434 13.9447 2.72662 13.9447
3.69454V8.08329Z"
+ fill="#7497F7" />
+ <path
+ d="M12.1945 15.0972C13.1624 15.0972 13.9447 15.8795 13.9447
16.8474C13.9447 17.8153 13.1624 18.5976 12.1945 18.5976C11.2266 18.5976 10.4443
17.8153 10.4443 16.8474V15.0972H12.1945ZM12.1945 14.2221C11.2266 14.2221
10.4443 13.4398 10.4443 12.4719C10.4443 11.504 11.2266 10.7217 12.1945
10.7217H16.5833C17.5512 10.7217 18.3335 11.504 18.3335 12.4719C18.3335 13.4398
17.5512 14.2221 16.5833 14.2221H12.1945Z"
+ fill="#7497F7" />
+</svg>
+
\ No newline at end of file
diff --git a/config-ui/src/images/slack-mark-monochrome-black.svg
b/config-ui/src/images/slack-mark-monochrome-black.svg
deleted file mode 100644
index 5540f24f6..000000000
--- a/config-ui/src/images/slack-mark-monochrome-black.svg
+++ /dev/null
@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-Licensed to the Apache Software Foundation (ASF) under one or more
-contributor license agreements. See the NOTICE file distributed with
-this work for additional information regarding copyright ownership.
-The ASF licenses this file to You under the Apache License, Version 2.0
-(the "License"); you may not use this file except in compliance with
-the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
- viewBox="0 0 270 270" style="enable-background:new 0 0 270 270;"
xml:space="preserve">
-<g>
- <g>
- <path
d="M99.4,151.2c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h12.9V151.2z"/>
- <path
d="M105.9,151.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9
- C105.9,183.5,105.9,151.2,105.9,151.2z"/>
- </g>
- <g>
- <path
d="M118.8,99.4c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v12.9H118.8z"/>
- <path
d="M118.8,105.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H86.5c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9
- C86.5,105.9,118.8,105.9,118.8,105.9z"/>
- </g>
- <g>
- <path
d="M170.6,118.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V118.8z"/>
- <path
d="M164.1,118.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V86.5c0-7.1,5.8-12.9,12.9-12.9
- c7.1,0,12.9,5.8,12.9,12.9V118.8z"/>
- </g>
- <g>
- <path
d="M151.2,170.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H151.2z"/>
- <path
d="M151.2,164.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9
- c0,7.1-5.8,12.9-12.9,12.9H151.2z"/>
- </g>
-</g>
-</svg>
diff --git a/config-ui/src/images/slack-rgb.svg
b/config-ui/src/images/slack-rgb.svg
deleted file mode 100644
index fced9ba40..000000000
--- a/config-ui/src/images/slack-rgb.svg
+++ /dev/null
@@ -1,65 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-Licensed to the Apache Software Foundation (ASF) under one or more
-contributor license agreements. See the NOTICE file distributed with
-this work for additional information regarding copyright ownership.
-The ASF licenses this file to You under the Apache License, Version 2.0
-(the "License"); you may not use this file except in compliance with
-the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
- viewBox="0 0 622.3 254.4" style="enable-background:new 0 0 622.3
254.4;" xml:space="preserve">
-<style type="text/css">
- .st0{fill:#E01E5A;}
- .st1{fill:#36C5F0;}
- .st2{fill:#2EB67D;}
- .st3{fill:#ECB22E;}
-</style>
-<g>
- <g>
- <path
d="M221.5,161.5l6.2-14.4c6.7,5,15.6,7.6,24.4,7.6c6.5,0,10.6-2.5,10.6-6.3c-0.1-10.6-38.9-2.3-39.2-28.9
-
c-0.1-13.5,11.9-23.9,28.9-23.9c10.1,0,20.2,2.5,27.4,8.2l-5.8,14.7c-6.6-4.2-14.8-7.2-22.6-7.2c-5.3,0-8.8,2.5-8.8,5.7
-
c0.1,10.4,39.2,4.7,39.6,30.1c0,13.8-11.7,23.5-28.5,23.5C241.4,170.6,230.1,167.7,221.5,161.5"/>
- <path
d="M459.4,141.9c-3.1,5.4-8.9,9.1-15.6,9.1c-9.9,0-17.9-8-17.9-17.9s8-17.9,17.9-17.9c6.7,0,12.5,3.7,15.6,9.1l17.1-9.5
-
c-6.4-11.4-18.7-19.2-32.7-19.2c-20.7,0-37.5,16.8-37.5,37.5c0,20.7,16.8,37.5,37.5,37.5c14.1,0,26.3-7.7,32.7-19.2L459.4,141.9z"
- />
- <rect x="290.8" y="64.5" width="21.4" height="104.7"/>
- <polygon points="484.9,64.5 484.9,169.2 506.3,169.2 506.3,137.8
531.7,169.2 559.1,169.2 526.8,131.9 556.7,97.1 530.5,97.1
- 506.3,126 506.3,64.5 "/>
- <path
d="M375.8,142.1c-3.1,5.1-9.5,8.9-16.7,8.9c-9.9,0-17.9-8-17.9-17.9s8-17.9,17.9-17.9c7.2,0,13.6,4,16.7,9.2V142.1z
-
M375.8,97.1v8.5c-3.5-5.9-12.2-10-21.3-10c-18.8,0-33.6,16.6-33.6,37.4c0,20.8,14.8,37.6,33.6,37.6c9.1,0,17.8-4.1,21.3-10v8.5
- h21.4v-72H375.8z"/>
- </g>
- <g>
- <g>
- <path class="st0"
d="M89.2,142c0,7.3-5.9,13.2-13.2,13.2s-13.2-5.9-13.2-13.2s5.9-13.2,13.2-13.2h13.2V142z"/>
- <path class="st0"
d="M95.8,142c0-7.3,5.9-13.2,13.2-13.2s13.2,5.9,13.2,13.2V175c0,7.3-5.9,13.2-13.2,13.2s-13.2-5.9-13.2-13.2
- V142z"/>
- </g>
- <g>
- <path class="st1"
d="M109,89c-7.3,0-13.2-5.9-13.2-13.2c0-7.3,5.9-13.2,13.2-13.2s13.2,5.9,13.2,13.2V89H109z"/>
- <path class="st1"
d="M109,95.7c7.3,0,13.2,5.9,13.2,13.2c0,7.3-5.9,13.2-13.2,13.2H75.9c-7.3,0-13.2-5.9-13.2-13.2
- c0-7.3,5.9-13.2,13.2-13.2H109z"/>
- </g>
- <g>
- <path class="st2"
d="M161.9,108.9c0-7.3,5.9-13.2,13.2-13.2s13.2,5.9,13.2,13.2c0,7.3-5.9,13.2-13.2,13.2h-13.2V108.9z"/>
- <path class="st2"
d="M155.3,108.9c0,7.3-5.9,13.2-13.2,13.2s-13.2-5.9-13.2-13.2V75.8c0-7.3,5.9-13.2,13.2-13.2
- s13.2,5.9,13.2,13.2V108.9z"/>
- </g>
- <g>
- <path class="st3"
d="M142.1,161.8c7.3,0,13.2,5.9,13.2,13.2c0,7.3-5.9,13.2-13.2,13.2s-13.2-5.9-13.2-13.2v-13.2H142.1z"/>
- <path class="st3"
d="M142.1,155.2c-7.3,0-13.2-5.9-13.2-13.2s5.9-13.2,13.2-13.2h33.1c7.3,0,13.2,5.9,13.2,13.2
- s-5.9,13.2-13.2,13.2H142.1z"/>
- </g>
- </g>
-</g>
-</svg>
diff --git a/config-ui/src/layouts/base/base.tsx
b/config-ui/src/layouts/base/base.tsx
index 490ee079e..51209d6c8 100644
--- a/config-ui/src/layouts/base/base.tsx
+++ b/config-ui/src/layouts/base/base.tsx
@@ -18,17 +18,17 @@
import React from 'react';
import { useLocation, useHistory } from 'react-router-dom';
-import { Menu, MenuItem, Navbar, Icon, Button, Alignment, Position, Intent }
from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
+import { Menu, MenuItem, Navbar, Alignment } from '@blueprintjs/core';
import { Logo } from '@/components';
+import { useVersion } from '@/store';
-import SlackIcon from '@/images/slack-mark-monochrome-black.svg';
-import SlackLogo from '@/images/slack-rgb.svg';
+import FileIcon from '@/images/icons/file.svg';
+import GitHubIcon from '@/images/icons/github.svg';
+import SlackIcon from '@/images/icons/slack.svg';
import { useMenu, MenuItemType } from './use-menu';
import * as S from './styled';
-import { useVersion } from "@/store";
interface Props {
children: React.ReactNode;
@@ -83,41 +83,29 @@ export const BaseLayout = ({ children }: Props) => {
<S.Inner>
<S.Header>
<Navbar.Group align={Alignment.RIGHT}>
- <a href="https://github.com/apache/incubator-devlake";
rel="noreferrer" target="_blank">
- <Icon icon="git-branch" size={16} />
+ <a
href="https://devlake.apache.org/docs/UserManuals/ConfigUI/Tutorial/";
rel="noreferrer" target="_blank">
+ <img src={FileIcon} alt="documents" />
+ <span>Docs</span>
</a>
<Navbar.Divider />
- <a href="mailto:[email protected]"; rel="noreferrer" target="_blank"
className="navIconLink">
- <Icon icon="envelope" size={16} />
+ <a
+ href="https://github.com/apache/incubator-devlake";
+ rel="noreferrer"
+ target="_blank"
+ className="navIconLink"
+ >
+ <img src={GitHubIcon} alt="github" />
+ <span>GitHub</span>
</a>
<Navbar.Divider />
- <Popover2
- position={Position.LEFT}
- content={
- <S.SlackContainer>
- <img src={SlackLogo} alt="" />
- <p>
- <span>Want to interact with the </span>
- <strong>Merico Community</strong>
- <span>? Join us on our Slack Channel.</span>
- </p>
- <p>
- <a
-
href="https://join.slack.com/t/devlake-io/shared_invite/zt-17b6vuvps-x98pqseoUagM7EAmKC82xQ";
- rel="noreferrer"
- target="_blank"
- >
- <Button intent={Intent.WARNING}>
- <span>Message us on </span>
- <strong>Slack</strong>
- </Button>
- </a>
- </p>
- </S.SlackContainer>
- }
+ <a
+
href="https://join.slack.com/t/devlake-io/shared_invite/zt-17b6vuvps-x98pqseoUagM7EAmKC82xQ";
+ rel="noreferrer"
+ target="_blank"
>
- <img src={SlackIcon} width={30} alt="" style={{ cursor:
'pointer' }} />
- </Popover2>
+ <img src={SlackIcon} alt="slack" />
+ <span>Slack</span>
+ </a>
</Navbar.Group>
</S.Header>
<S.Content>{children}</S.Content>
diff --git a/config-ui/src/layouts/base/styled.ts
b/config-ui/src/layouts/base/styled.ts
index 614c6a389..443c90a43 100644
--- a/config-ui/src/layouts/base/styled.ts
+++ b/config-ui/src/layouts/base/styled.ts
@@ -94,6 +94,20 @@ export const Header = styled(Navbar)`
flex: 0 0 50px;
background-color: #f9f9fa;
box-shadow: none;
+
+ a {
+ display: flex;
+ align-items: center;
+
+ img {
+ margin-right: 4px;
+ width: 16px;
+ }
+
+ span {
+ font-size: 12px;
+ }
+ }
`;
export const Content = styled.div`
@@ -102,20 +116,3 @@ export const Content = styled.div`
max-width: 900px;
width: 100%;
`;
-
-export const SlackContainer = styled.div`
- padding: 10px;
- width: 200px;
- font-size: 12px;
-
- & > img {
- display: block;
- margin: 0 auto;
- width: 130px;
- height: 50px;
- }
-
- & > p {
- text-align: center;
- }
-`;
