mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2026-01-06 04:26:57 +00:00
MINOR : Fixed Header component (#20340)
* fixed header displayname ||vote buttons || edit buttons * replaced hashcode with varibalenames * style changes * fixed displayname * minor changes --------- Co-authored-by: Karan Hotchandani <33024356+karanh37@users.noreply.github.com>
This commit is contained in:
Dhruv Parmar
GitHub
parent
e2cce8372e
commit
092cb94fb8
@ -1,4 +1,4 @@
|
||||
<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.3533 0.361911C9.1685 0.638628 9.72612 1.5317 9.54496 2.39143L9.21446 4.50664C9.20186 4.59922 9.22905 4.65027 9.25309 4.67752C9.28098 4.70913 9.32661 4.73333 9.38651 4.73333H12.0532C12.6885 4.73333 13.2483 4.99096 13.589 5.4534C13.9309 5.91741 14.0062 6.52572 13.793 7.12848L12.2001 11.9735C12.0629 12.5003 11.7178 12.9361 11.3068 13.2368C10.8912 13.541 10.373 13.7333 9.85318 13.7333H7.31984C7.07155 13.7333 6.77536 13.693 6.49915 13.6141C6.2453 13.5416 5.9458 13.419 5.72557 13.212L3.68042 11.6287L4.2926 10.838L6.38432 12.4574L6.40673 12.4798C6.45116 12.5242 6.57117 12.5947 6.77387 12.6526C6.96433 12.707 7.16813 12.7333 7.31984 12.7333H9.85318C10.1333 12.7333 10.4485 12.6257 10.7163 12.4298C10.9836 12.2342 11.1686 11.9768 11.2348 11.7121L11.2392 11.6944L12.8468 6.80448L12.849 6.7985C12.9663 6.47 12.9075 6.2143 12.784 6.0466C12.6581 5.87571 12.4179 5.73333 12.0532 5.73333H9.38651C8.69095 5.73333 8.11395 5.13907 8.22487 4.36262L8.22579 4.35614L8.56163 2.20708L8.56508 2.19153C8.63886 1.85952 8.40308 1.43257 8.02839 1.30768L8.01961 1.30475L8.01095 1.3015C7.87563 1.25075 7.6978 1.25192 7.51572 1.31451C7.33027 1.37826 7.19646 1.48646 7.13587 1.57735L7.13482 1.57892L4.40148 5.64558L3.57153 5.08775L6.30382 1.02265C6.30401 1.02236 6.30421 1.02206 6.30441 1.02177C6.51053 0.713107 6.84308 0.488295 7.19064 0.368824C7.53931 0.248968 7.95786 0.21639 8.3533 0.361911Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.24248 4.08407C1.17667 4.14482 1.08667 4.28968 1.08667 4.7V11.2333C1.08667 11.6437 1.17667 11.7885 1.24248 11.8493C1.31811 11.9191 1.49166 12 1.92 12H2.58667C3.01501 12 3.18856 11.9191 3.2642 11.8493C3.33001 11.7885 3.42 11.6437 3.42 11.2333V4.7C3.42 4.28968 3.33001 4.14482 3.2642 4.08407C3.18856 4.01425 3.01501 3.93333 2.58667 3.93333H1.92C1.49166 3.93333 1.31811 4.01425 1.24248 4.08407ZM0.564197 3.34927C0.921894 3.01908 1.41501 2.93333 1.92 2.93333H2.58667C3.09166 2.93333 3.58478 3.01908 3.94248 3.34927C4.31 3.68852 4.42 4.17699 4.42 4.7V11.2333C4.42 11.7563 4.31 12.2448 3.94248 12.5841C3.58478 12.9143 3.09166 13 2.58667 13H1.92C1.41501 13 0.921894 12.9143 0.564197 12.5841C0.196674 12.2448 0.0866699 11.7563 0.0866699 11.2333V4.7C0.0866699 4.17699 0.196674 3.68852 0.564197 3.34927Z" fill="black"/>
|
||||
<svg viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.3533 0.361911C9.1685 0.638628 9.72612 1.5317 9.54496 2.39143L9.21446 4.50664C9.20186 4.59922 9.22905 4.65027 9.25309 4.67752C9.28098 4.70913 9.32661 4.73333 9.38651 4.73333H12.0532C12.6885 4.73333 13.2483 4.99096 13.589 5.4534C13.9309 5.91741 14.0062 6.52572 13.793 7.12848L12.2001 11.9735C12.0629 12.5003 11.7178 12.9361 11.3068 13.2368C10.8912 13.541 10.373 13.7333 9.85318 13.7333H7.31984C7.07155 13.7333 6.77536 13.693 6.49915 13.6141C6.2453 13.5416 5.9458 13.419 5.72557 13.212L3.68042 11.6287L4.2926 10.838L6.38432 12.4574L6.40673 12.4798C6.45116 12.5242 6.57117 12.5947 6.77387 12.6526C6.96433 12.707 7.16813 12.7333 7.31984 12.7333H9.85318C10.1333 12.7333 10.4485 12.6257 10.7163 12.4298C10.9836 12.2342 11.1686 11.9768 11.2348 11.7121L11.2392 11.6944L12.8468 6.80448L12.849 6.7985C12.9663 6.47 12.9075 6.2143 12.784 6.0466C12.6581 5.87571 12.4179 5.73333 12.0532 5.73333H9.38651C8.69095 5.73333 8.11395 5.13907 8.22487 4.36262L8.22579 4.35614L8.56163 2.20708L8.56508 2.19153C8.63886 1.85952 8.40308 1.43257 8.02839 1.30768L8.01961 1.30475L8.01095 1.3015C7.87563 1.25075 7.6978 1.25192 7.51572 1.31451C7.33027 1.37826 7.19646 1.48646 7.13587 1.57735L7.13482 1.57892L4.40148 5.64558L3.57153 5.08775L6.30382 1.02265C6.30401 1.02236 6.30421 1.02206 6.30441 1.02177C6.51053 0.713107 6.84308 0.488295 7.19064 0.368824C7.53931 0.248968 7.95786 0.21639 8.3533 0.361911Z" fill="currentColor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.24248 4.08407C1.17667 4.14482 1.08667 4.28968 1.08667 4.7V11.2333C1.08667 11.6437 1.17667 11.7885 1.24248 11.8493C1.31811 11.9191 1.49166 12 1.92 12H2.58667C3.01501 12 3.18856 11.9191 3.2642 11.8493C3.33001 11.7885 3.42 11.6437 3.42 11.2333V4.7C3.42 4.28968 3.33001 4.14482 3.2642 4.08407C3.18856 4.01425 3.01501 3.93333 2.58667 3.93333H1.92C1.49166 3.93333 1.31811 4.01425 1.24248 4.08407ZM0.564197 3.34927C0.921894 3.01908 1.41501 2.93333 1.92 2.93333H2.58667C3.09166 2.93333 3.58478 3.01908 3.94248 3.34927C4.31 3.68852 4.42 4.17699 4.42 4.7V11.2333C4.42 11.7563 4.31 12.2448 3.94248 12.5841C3.58478 12.9143 3.09166 13 2.58667 13H1.92C1.41501 13 0.921894 12.9143 0.564197 12.5841C0.196674 12.2448 0.0866699 11.7563 0.0866699 11.2333V4.7C0.0866699 4.17699 0.196674 3.68852 0.564197 3.34927Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
@ -615,15 +615,14 @@ export const DataAssetsHeader = ({
|
||||
entity: t('label.tier'),
|
||||
})}>
|
||||
<Button
|
||||
className="flex-center edit-tier-button"
|
||||
className="flex-center edit-tier-button p-0"
|
||||
data-testid="edit-tier"
|
||||
icon={
|
||||
<EditIcon
|
||||
color={DE_ACTIVE_COLOR}
|
||||
width="14px"
|
||||
width="12px"
|
||||
/>
|
||||
}
|
||||
size="small"
|
||||
type="text"
|
||||
/>
|
||||
</Tooltip>
|
||||
@ -650,15 +649,14 @@ export const DataAssetsHeader = ({
|
||||
entity: t('label.tier'),
|
||||
})}>
|
||||
<Button
|
||||
className="flex-center edit-tier-button"
|
||||
className="flex-center edit-tier-button p-0"
|
||||
data-testid="edit-tier"
|
||||
icon={
|
||||
<EditIcon
|
||||
color={DE_ACTIVE_COLOR}
|
||||
width="14px"
|
||||
width="12px"
|
||||
/>
|
||||
}
|
||||
size="small"
|
||||
type="text"
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
@ -38,6 +38,9 @@
|
||||
|
||||
.ant-btn-icon-only.edit-tier-button {
|
||||
border: 1px solid @border-light;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
svg {
|
||||
color: @grey-600;
|
||||
}
|
||||
@ -81,14 +84,31 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn-group {
|
||||
.ant-btn {
|
||||
height: 40px;
|
||||
.ant-btn-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
.ant-btn {
|
||||
background-color: @background-color;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 1px 2px 0px #0a0d120f, 0px 1px 3px 0px #0a0d121a;
|
||||
}
|
||||
|
||||
> .ant-btn:first-child:not(:last-child),
|
||||
> span:first-child:not(:last-child) > .ant-btn {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn-group {
|
||||
.ant-btn {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-divider.ant-divider-vertical.vertical-divider {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-divider.ant-divider-vertical.vertical-divider {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
@ -20,7 +20,6 @@ import { Link } from 'react-router-dom';
|
||||
import { ReactComponent as ShareIcon } from '../../../assets/svg/copy-right.svg';
|
||||
import { ReactComponent as IconExternalLink } from '../../../assets/svg/external-link-grey.svg';
|
||||
import { ReactComponent as StarFilledIcon } from '../../../assets/svg/ic-star-filled.svg';
|
||||
import { TEXT_COLOR } from '../../../constants/Color.constants';
|
||||
import { ROUTES } from '../../../constants/constants';
|
||||
import { useClipboard } from '../../../hooks/useClipBoard';
|
||||
import useCustomLocation from '../../../hooks/useCustomLocation/useCustomLocation';
|
||||
@ -40,7 +39,6 @@ const EntityHeaderTitle = ({
|
||||
badge,
|
||||
isDisabled,
|
||||
className,
|
||||
color,
|
||||
showName = true,
|
||||
certification,
|
||||
excludeEntityService,
|
||||
@ -82,7 +80,7 @@ const EntityHeaderTitle = ({
|
||||
}`}>
|
||||
{/* If we do not have displayName name only be shown in the bold from the below code */}
|
||||
{!isEmpty(displayName) && showName ? (
|
||||
<Tooltip placement="bottom" title={stringToHTML(name)}>
|
||||
<Tooltip placement="bottom" title={stringToHTML(displayName ?? name)}>
|
||||
<Typography.Text
|
||||
className={classNames(
|
||||
'entity-header-name',
|
||||
@ -91,7 +89,7 @@ const EntityHeaderTitle = ({
|
||||
)}
|
||||
data-testid="entity-header-name"
|
||||
ellipsis={{ tooltip: true }}>
|
||||
{stringToHTML(name)}
|
||||
{stringToHTML(displayName ?? name)}
|
||||
</Typography.Text>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
@ -99,17 +97,15 @@ const EntityHeaderTitle = ({
|
||||
<div
|
||||
className="d-flex gap-3 items-center"
|
||||
data-testid="entity-header-title">
|
||||
<Tooltip placement="bottom" title={stringToHTML(displayName || name)}>
|
||||
<Tooltip placement="bottom" title={stringToHTML(name)}>
|
||||
<Typography.Text
|
||||
className={classNames(
|
||||
'entity-header-display-name',
|
||||
displayNameClassName,
|
||||
'm-b-0 text-md font-medium'
|
||||
)}
|
||||
className={classNames(displayNameClassName, 'm-b-0', {
|
||||
'display-sm entity-header-name font-semibold': !displayName,
|
||||
'text-md entity-header-display-name font-medium': displayName,
|
||||
})}
|
||||
data-testid="entity-header-display-name"
|
||||
ellipsis={{ tooltip: true }}
|
||||
style={{ color: color ?? TEXT_COLOR }}>
|
||||
{stringToHTML(displayName || name)}
|
||||
ellipsis={{ tooltip: true }}>
|
||||
{stringToHTML(name)}
|
||||
{openEntityInNewPage && (
|
||||
<IconExternalLink
|
||||
className="anticon vertical-baseline m-l-xss"
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
}
|
||||
.ant-typography-ellipsis.entity-header-display-name {
|
||||
font-size: 16px;
|
||||
color: @grey-700;
|
||||
}
|
||||
.ant-col.entity-header-content {
|
||||
max-width: calc(100% - 100px);
|
||||
|
||||
@ -227,7 +227,7 @@
|
||||
|
||||
// lineage
|
||||
.lineage-card {
|
||||
height: calc(100vh - 240px);
|
||||
height: calc(100vh - 350px);
|
||||
|
||||
// lineage and it's children's always should be ltr
|
||||
direction: ltr;
|
||||
|
||||
@ -12,11 +12,12 @@
|
||||
*/
|
||||
|
||||
import { Button, Tooltip, Typography } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ReactComponent as ThumbsUpFilled } from '../../../assets/svg/thumbs-up-filled.svg';
|
||||
import { ReactComponent as ThumbsUpOutline } from '../../../assets/svg/thumbs-up-outline.svg';
|
||||
import { QueryVoteType } from '../../Database/TableQueries/TableQueries.interface';
|
||||
import './voting-component.less';
|
||||
import { VotingProps } from './voting.interface';
|
||||
|
||||
const Voting = ({ votes, disabled, voteStatus, onUpdateVote }: VotingProps) => {
|
||||
@ -39,16 +40,12 @@ const Voting = ({ votes, disabled, voteStatus, onUpdateVote }: VotingProps) => {
|
||||
<>
|
||||
<Tooltip title={t('label.up-vote')}>
|
||||
<Button
|
||||
className=" ant-button-vote flex-center"
|
||||
className={classNames(' ant-button-vote flex-center', {
|
||||
'ant-button-vote-active': voteStatus === QueryVoteType.votedUp,
|
||||
})}
|
||||
data-testid="up-vote-btn"
|
||||
disabled={disabled}
|
||||
icon={
|
||||
voteStatus === QueryVoteType.votedUp ? (
|
||||
<ThumbsUpFilled className="text-success" height={15} width={15} />
|
||||
) : (
|
||||
<ThumbsUpOutline height={15} width={15} />
|
||||
)
|
||||
}
|
||||
icon={<ThumbsUpOutline height={15} width={15} />}
|
||||
loading={loading === QueryVoteType.votedUp}
|
||||
onClick={() => handleVoteChange(QueryVoteType.votedUp)}>
|
||||
<Typography.Text className="m-l-xs" data-testid="up-vote-count">
|
||||
@ -58,23 +55,17 @@ const Voting = ({ votes, disabled, voteStatus, onUpdateVote }: VotingProps) => {
|
||||
</Tooltip>
|
||||
<Tooltip title={t('label.down-vote')}>
|
||||
<Button
|
||||
className="ant-button-vote flex-center"
|
||||
className={classNames('ant-button-vote flex-center', {
|
||||
'ant-button-vote-active': voteStatus === QueryVoteType.votedDown,
|
||||
})}
|
||||
data-testid="down-vote-btn"
|
||||
disabled={disabled}
|
||||
icon={
|
||||
voteStatus === QueryVoteType.votedDown ? (
|
||||
<ThumbsUpFilled
|
||||
className="rotate-inverse text-warning-7"
|
||||
height={15}
|
||||
width={15}
|
||||
/>
|
||||
) : (
|
||||
<ThumbsUpOutline
|
||||
className="rotate-inverse"
|
||||
height={15}
|
||||
width={15}
|
||||
/>
|
||||
)
|
||||
<ThumbsUpOutline
|
||||
className="rotate-inverse"
|
||||
height={15}
|
||||
width={15}
|
||||
/>
|
||||
}
|
||||
loading={loading === QueryVoteType.votedDown}
|
||||
onClick={() => handleVoteChange(QueryVoteType.votedDown)}>
|
||||
|
||||
@ -10,3 +10,28 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import (reference) url('../../../styles/variables.less');
|
||||
|
||||
.data-assets-header-container {
|
||||
.data-asset-button-group {
|
||||
.ant-button-vote {
|
||||
outline: black;
|
||||
&:hover {
|
||||
background-color: @blue-11;
|
||||
}
|
||||
}
|
||||
.ant-btn.ant-button-vote-active {
|
||||
background-color: @blue-11;
|
||||
border: 1px solid @blue-12;
|
||||
svg {
|
||||
path {
|
||||
fill: @blue-12;
|
||||
}
|
||||
}
|
||||
.ant-typography {
|
||||
color: @blue-12;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -135,10 +135,10 @@ const DomainSelectableList = ({
|
||||
: NO_PERMISSION_FOR_ACTION
|
||||
}>
|
||||
<Button
|
||||
className="d-flex align-center justify-center p-xss w-6 h-6"
|
||||
className="d-flex align-center justify-center "
|
||||
data-testid="add-domain"
|
||||
disabled={!hasPermission}
|
||||
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
|
||||
icon={<EditIcon color={DE_ACTIVE_COLOR} width="12px" />}
|
||||
type="text"
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
@ -46,6 +46,7 @@
|
||||
border: 1px solid @border-light;
|
||||
background-color: @background-color;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -227,7 +227,10 @@ const DescriptionV1 = ({
|
||||
data-testid="asset-description-container"
|
||||
direction="vertical"
|
||||
size={16}>
|
||||
<div className="d-flex justify-between flex-wrap">
|
||||
<div
|
||||
className={classNames('d-flex justify-between flex-wrap', {
|
||||
'm-t-sm': suggestions?.length > 0,
|
||||
})}>
|
||||
<div className="d-flex items-center gap-2">
|
||||
<Text className="right-panel-label">{t('label.description')}</Text>
|
||||
{showActions && actionButtons}
|
||||
|
||||
@ -361,8 +361,7 @@ export const UserTeamSelectableList = ({
|
||||
<Button
|
||||
className="flex-center p-0 edit-owner-button"
|
||||
data-testid="edit-owner"
|
||||
icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
|
||||
size="small"
|
||||
icon={<EditIcon color={DE_ACTIVE_COLOR} width="12px" />}
|
||||
type="text"
|
||||
onClick={openPopover}
|
||||
/>
|
||||
|
||||
@ -96,12 +96,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn-icon-only.edit-owner-button {
|
||||
.ant-btn.ant-btn-icon-only.edit-owner-button {
|
||||
border: 1px solid @border-light;
|
||||
background-color: @background-color;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -1177,7 +1177,7 @@
|
||||
"search": "Search",
|
||||
"search-by-type": "Search by {{type}}",
|
||||
"search-entity": "Search {{entity}}",
|
||||
"search-entity-for-lineage": "Nach {{entity}} suchen, um Abstammung anzuzeigen",
|
||||
"search-entity-for-lineage": "Search {{entity}} to view lineage",
|
||||
"search-for-type": "Search for {{type}}",
|
||||
"search-index": "Search Index",
|
||||
"search-index-ingestion": "Search Index Ingestion",
|
||||
|
||||
@ -31,3 +31,9 @@
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.members .global-setting-card {
|
||||
.ant-card-body .setting-card-icon-container .setting-card-icon svg {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -75,19 +75,3 @@ button {
|
||||
color: @primary-color;
|
||||
background: transparent;
|
||||
}
|
||||
.ant-btn-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
.ant-btn {
|
||||
background-color: @background-color;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 1px 2px 0px #0a0d120f, 0px 1px 3px 0px #0a0d121a;
|
||||
}
|
||||
|
||||
> .ant-btn:first-child:not(:last-child),
|
||||
> span:first-child:not(:last-child) > .ant-btn {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user