diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/task-tab-new.less b/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/task-tab-new.less index 9a22b49566d..8e04c31ac6a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/task-tab-new.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/task-tab-new.less @@ -45,7 +45,7 @@ &:last-child { border-left: none; } - &.ant-btn.ant-btn-default:not(:hover) { + &.ant-btn.ant-btn-default:not(:hover):not(:disabled) { border-color: @blue-12; } } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ProfileCard/ProfileSectionUserDetailsCard.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ProfileCard/ProfileSectionUserDetailsCard.component.tsx index 0987a98e60d..0558fbe4ea2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ProfileCard/ProfileSectionUserDetailsCard.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ProfileCard/ProfileSectionUserDetailsCard.component.tsx @@ -20,6 +20,7 @@ import { ReactComponent as DeleteIcon } from '../../assets/svg/ic-trash.svg'; import { User } from '../../generated/entity/teams/user'; import { isMaskedEmail } from '../../utils/Users.util'; +import Icon from '@ant-design/icons'; import { AxiosError } from 'axios'; import { ICON_DIMENSION_USER_PAGE } from '../../constants/constants'; import { EntityType } from '../../enums/entity.enum'; @@ -294,7 +295,11 @@ const ProfileSectionUserDetailsCard = ({ - + + {t('label.deleted')} )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerAvtar/OwnerAvatar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerAvtar/OwnerAvatar.tsx index 2fa330a0c98..03ad2ed0b3c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerAvtar/OwnerAvatar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerAvtar/OwnerAvatar.tsx @@ -57,10 +57,10 @@ export const OwnerAvatar: React.FC = ({ key="profile-picture" name={owner.name ?? ''} type="circle" - width={isCompactView ? '18' : `${avatarSize}`} + width={isCompactView ? '24' : `${avatarSize}`} /> - {inheritedIcon && !isCompactView && ( + {inheritedIcon && (
{inheritedIcon}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerAvtar/owner-avtar.less b/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerAvtar/owner-avtar.less index 4b7865cb5ea..c264682dc4e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerAvtar/owner-avtar.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerAvtar/owner-avtar.less @@ -16,38 +16,55 @@ color: @grey-700; } +.avatar-group { + display: flex; + align-items: center; + flex-direction: row; + + .owner-avatar-container { + margin-right: -4px; + transition: transform 0.2s; + + &:not(.is-compact-view) { + &:hover { + transform: translateY(-2px); + z-index: 20 !important; + } + } + + &:first-child { + z-index: 1; + } + + &:last-child { + margin-right: 0; + z-index: 4; + } + } +} + .owner-avatar-icon { position: relative; .inherited-icon-styling { position: absolute; - bottom: -4px; - right: -4px; + bottom: -2px; + right: -2px; background-color: white; border-radius: 50%; - - width: 16px; - height: 16px; - z-index: 1; + width: 12px; + height: 12px; + z-index: 5; border: 1px solid @blue-9; + display: flex; + align-items: center; + justify-content: center; + padding: 2px; + svg { color: @blue-9; - } - } -} - -// Styling for the avatar group layout (for the overlapping effect) -.avatar-group { - display: flex; - - .owner-avatar-icon { - margin-right: -8px; - - border-radius: 50%; - overflow: hidden; - - &:hover { - z-index: 2; + width: 8px; + height: 8px; } } } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerItem/OwnerItem.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerItem/OwnerItem.tsx index e396842e2ee..59412f9342d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerItem/OwnerItem.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerItem/OwnerItem.tsx @@ -10,10 +10,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Tooltip } from 'antd'; import classNames from 'classnames'; import React, { ReactNode } from 'react'; -import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; import { ReactComponent as InheritIcon } from '../../../assets/svg/ic-inherit.svg'; import { EntityReference } from '../../../generated/entity/data/table'; @@ -38,24 +36,21 @@ export const OwnerItem: React.FC = ({ ownerDisplayName, avatarSize = 32, }) => { - const { t } = useTranslation(); const displayName = getEntityName(owner); const ownerPath = getOwnerPath(owner); const inheritedIcon = owner?.inherited ? ( - - - + ) : null; return (
{!isCompactView ? ( @@ -76,6 +71,7 @@ export const OwnerItem: React.FC = ({
@@ -91,7 +87,6 @@ export const OwnerItem: React.FC = ({ {ownerDisplayName ?? displayName} - {inheritedIcon &&
{inheritedIcon}
} )}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/OwnerLabel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/OwnerLabel.component.tsx index c7be1cbaf2c..19a714776ce 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/OwnerLabel.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/OwnerLabel/OwnerLabel.component.tsx @@ -114,48 +114,73 @@ export const OwnerLabel = ({ return (
- {/* Owner avatars list */} {ownerElementsNonCompactView} -
owner?.inherited)), - }, - className - )}> - {visibleOwners.map((owner, index) => ( - - ))} +
+
owner?.inherited)), + }, + className + )}> + {visibleOwners.map((owner, index) => ( +
+ +
+ ))} + {showMoreButton && isCompactView && ( + + )} +
- {/* Show more button/dropdown */} - {showMoreButton && ( - + {showMoreButton && !isCompactView && ( +
+ +
)}
- {isCompactView && onUpdate && (