yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-11-03 04:10:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix spacing on share buttons (#7272)

Browse Source
This commit is contained in:
Aditya Radhakrishnan 2023-02-07 12:02:04 -08:00 committed by GitHub
parent aa2a3ce224
commit cf1e627e55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
datahub-web-react/src/app/shared/share/ShareButtonMenu.tsx
View File

@ -19,6 +19,10 @@ const StyledMenu = styled(Menu)`
border: 1px solid ${ANTD_GRAY[3]}; border: 1px solid ${ANTD_GRAY[3]};
border-radius: 4px; border-radius: 4px;
min-width: 140px; min-width: 140px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
`; `;
export default function ShareButtonMenu({ urn, entityType, subType, name }: ShareButtonMenuProps) { export default function ShareButtonMenu({ urn, entityType, subType, name }: ShareButtonMenuProps) {

11
datahub-web-react/src/app/shared/share/items/CopyLinkMenuItem.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import styled from 'styled-components'; import styled from 'styled-components/macro';
import { CheckOutlined, LinkOutlined } from '@ant-design/icons'; import { CheckOutlined, LinkOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd'; import { Tooltip } from 'antd';
import MenuItem from 'antd/lib/menu/MenuItem'; import MenuItem from 'antd/lib/menu/MenuItem';
@ -12,9 +12,14 @@ interface CopyLinkMenuItemProps {
const StyledMenuItem = styled(MenuItem)` const StyledMenuItem = styled(MenuItem)`
&& { && {
color: ${ANTD_GRAY[8]}; color: ${ANTD_GRAY[8]};
background-color: ${ANTD_GRAY[1]};
} }
`; `;
const TextSpan = styled.span`
padding-left: 12px;
`;
const StyledLinkOutlined = styled(LinkOutlined)` const StyledLinkOutlined = styled(LinkOutlined)`
font-size: 14px; font-size: 14px;
`; `;
@ -35,9 +40,9 @@ export default function CopyLinkMenuItem({ key }: CopyLinkMenuItemProps) {
> >
<Tooltip title="Copy a shareable link to this entity."> <Tooltip title="Copy a shareable link to this entity.">
{isClicked ? <CheckOutlined /> : <StyledLinkOutlined />} {isClicked ? <CheckOutlined /> : <StyledLinkOutlined />}
<span> <TextSpan>
<b>Copy Link</b> <b>Copy Link</b>
</span> </TextSpan>
</Tooltip> </Tooltip>
</StyledMenuItem> </StyledMenuItem>
); );

9
datahub-web-react/src/app/shared/share/items/CopyUrnMenuItem.tsx
View File

@ -14,9 +14,14 @@ interface CopyUrnMenuItemProps {
const StyledMenuItem = styled(MenuItem)` const StyledMenuItem = styled(MenuItem)`
&& { && {
color: ${ANTD_GRAY[8]}; color: ${ANTD_GRAY[8]};
background-color: ${ANTD_GRAY[1]};
} }
`; `;
const TextSpan = styled.span`
padding-left: 12px;
`;
export default function CopyUrnMenuItem({ urn, key, type }: CopyUrnMenuItemProps) { export default function CopyUrnMenuItem({ urn, key, type }: CopyUrnMenuItemProps) {
/** /**
* Whether button has been clicked * Whether button has been clicked
@ -33,9 +38,9 @@ export default function CopyUrnMenuItem({ urn, key, type }: CopyUrnMenuItemProps
> >
<Tooltip title={`Copy the URN for this ${type}. An URN uniquely identifies an entity on DataHub.`}> <Tooltip title={`Copy the URN for this ${type}. An URN uniquely identifies an entity on DataHub.`}>
{isClicked ? <CheckOutlined /> : <CopyOutlined />} {isClicked ? <CheckOutlined /> : <CopyOutlined />}
<span> <TextSpan>
<b>Copy URN</b> <b>Copy URN</b>
</span> </TextSpan>
</Tooltip> </Tooltip>
</StyledMenuItem> </StyledMenuItem>
); );

9
datahub-web-react/src/app/shared/share/items/EmailMenuItem.tsx
View File

@ -16,9 +16,14 @@ interface EmailMenuItemProps {
const StyledMenuItem = styled(MenuItem)` const StyledMenuItem = styled(MenuItem)`
&& { && {
color: ${ANTD_GRAY[8]}; color: ${ANTD_GRAY[8]};
background-color: ${ANTD_GRAY[1]};
} }
`; `;
const TextSpan = styled.span`
padding-left: 12px;
`;
export default function EmailMenuItem({ urn, name, type, key }: EmailMenuItemProps) { export default function EmailMenuItem({ urn, name, type, key }: EmailMenuItemProps) {
/** /**
* Whether button has been clicked * Whether button has been clicked
@ -38,11 +43,11 @@ export default function EmailMenuItem({ urn, name, type, key }: EmailMenuItemPro
{(link) => ( {(link) => (
<Tooltip title={`Share this ${type} via email`}> <Tooltip title={`Share this ${type} via email`}>
{isClicked ? <CheckOutlined /> : <MailOutlined />} {isClicked ? <CheckOutlined /> : <MailOutlined />}
<span> <TextSpan>
<a href={link} style={{ color: 'inherit' }}> <a href={link} style={{ color: 'inherit' }}>
<b>Email</b> <b>Email</b>
</a> </a>
</span> </TextSpan>
</Tooltip> </Tooltip>
)} )}
</EmailShare> </EmailShare>