From 52a163103ffaec695ff14b51adebec54266a2843 Mon Sep 17 00:00:00 2001 From: Sny <sny.aggarwal@gmail.com> Date: Wed, 2 Oct 2024 11:35:22 +0530 Subject: [PATCH] OpenConceptLab/ocl_issues#1776 | Chips usage --- src/common/utils.js | 4 +- src/components/common/BaseEntityChip.jsx | 29 ++++++++---- src/components/common/Bookmark.jsx | 13 +---- src/components/common/Breadcrumbs.jsx | 2 +- src/components/common/Events.jsx | 2 +- src/components/common/FollowActionButton.jsx | 2 +- src/components/common/OwnerButton.jsx | 6 +-- src/components/concepts/ConceptCard.jsx | 6 +-- src/components/orgs/OrgIcon.jsx | 26 +++++++--- src/components/orgs/OrgMembers.jsx | 9 ++-- src/components/orgs/OrgStatistics.jsx | 2 +- src/components/orgs/OrgTooltip.jsx | 6 +-- src/components/repos/CompareToolbar.jsx | 2 +- src/components/repos/RepoChip.jsx | 10 ++-- src/components/repos/RepoHeader.jsx | 2 +- src/components/repos/RepoIcon.jsx | 23 +++++++-- src/components/repos/RepoTooltip.jsx | 50 ++++++++++++++------ src/components/repos/RepoVersionButton.jsx | 4 +- src/components/search/Search.jsx | 2 +- src/components/users/Following.jsx | 9 ++-- src/components/users/UserIcon.jsx | 19 ++++++-- src/components/users/UserProfile.jsx | 8 ++-- src/components/users/UserProfileButton.jsx | 2 +- src/components/users/UserStatistics.jsx | 4 +- src/components/users/UserTooltip.jsx | 4 +- 25 files changed, 150 insertions(+), 96 deletions(-) diff --git a/src/common/utils.js b/src/common/utils.js index 6a4c0536..90ed8175 100644 --- a/src/common/utils.js +++ b/src/common/utils.js @@ -134,7 +134,7 @@ export const copyURL = url => copyToClipboard(url, 'Copied URL to clipboard!'); export const toParentURI = uri => uri.split('/').splice(0, 5).join('/') + '/'; -export const toOwnerURI = uri => uri.split('/').splice(0, 3).join('/') + '/'; +export const toOwnerURI = uri => uri && uri.split('/').splice(0, 3).join('/') + '/'; export const headFirst = versions => compact([find(versions, version => (version.version || version.id) === 'HEAD'), ...reject(versions, version => (version.version || version.id) === 'HEAD')]); @@ -733,7 +733,7 @@ export const URIToOwnerParams = uri => { owner.owner = ownerURI.split('/orgs/')[1].replaceAll('/', '') } else { owner.ownerType = 'User' - owner.owner = ownerURI.split('/users/')[1].replaceAll('/', '') + owner.owner = ownerURI?.split('/users/')[1]?.replaceAll('/', '') } return owner } diff --git a/src/components/common/BaseEntityChip.jsx b/src/components/common/BaseEntityChip.jsx index 864c7df5..130ee92d 100644 --- a/src/components/common/BaseEntityChip.jsx +++ b/src/components/common/BaseEntityChip.jsx @@ -7,6 +7,7 @@ const PRIMARY_STYLE = { backgroundColor: `${PRIMARY_COLORS['95']} !important`, '&:hover': { backgroundColor: `${PRIMARY_COLORS['95']} !important`, + textDecoration: 'none !important' } } @@ -14,6 +15,7 @@ const SECONDARY_STYLE = { backgroundColor: "#FFF", '&:hover': { backgroundColor: `${PRIMARY_COLORS['95']} !important`, + textDecoration: 'none !important' } } @@ -66,9 +68,9 @@ const ENTITY_CHIP_SIZE_MAP = { backgroundColor: 'transparent', }, '.MuiSvgIcon-root': { - color: '#000', - fontSize: '16px' - }, + color: '#000', + fontSize: '16px' + }, '.divider-span': { width: '3px', height: '3px', @@ -95,28 +97,33 @@ const Avatar = ({ entity, icon }) => { </MuiAvatar> } -const Label = ({ entity }) => { +const Label = ({ entity, hideType }) => { return ( <span style={{display: 'flex', alignItems: 'center'}}> <span className='entity-id'> <b>{entity.short_code || entity.id || entity.username}</b> </span> - <span className='divider-span' /> - <span className='entity-type'> - {entity.type} - </span> + { + !hideType && + <React.Fragment> + <span className='divider-span' /> + <span className='entity-type'> + {entity.type} + </span> + </React.Fragment> + } </span> ) } -const BaseEntityChip = ({ entity, icon, primary, size, sx, ...rest }) => { +const BaseEntityChip = ({ entity, icon, hideType, primary, size, sx, ...rest }) => { const sizeStyle = ENTITY_CHIP_SIZE_MAP[size || 'medium'] || ENTITY_CHIP_SIZE_MAP.medium const baseStyle = primary ? PRIMARY_STYLE : SECONDARY_STYLE return ( <Chip avatar={<Avatar entity={entity} icon={icon} />} - label={<Label entity={entity} />} + label={<Label entity={entity} hideType={hideType} />} variant='outlined' sx={{ borderRadius: '4px', @@ -127,6 +134,8 @@ const BaseEntityChip = ({ entity, icon, primary, size, sx, ...rest }) => { ...sizeStyle, ...sx }} + href={'#' + (entity.version_url || entity.url)} + component='a' {...rest} /> ) diff --git a/src/components/common/Bookmark.jsx b/src/components/common/Bookmark.jsx index 7587de28..c5769891 100644 --- a/src/components/common/Bookmark.jsx +++ b/src/components/common/Bookmark.jsx @@ -3,8 +3,7 @@ import { useHistory } from 'react-router-dom'; import Card from '@mui/material/Card'; import CardHeader from '@mui/material/CardHeader'; import Typography from '@mui/material/Typography'; -import RepoIcon from '../repos/RepoIcon'; -import OrganizationIcon from '@mui/icons-material/AccountBalance'; +import EntityIcon from './EntityIcon' const Title = ({ bookmark }) => { @@ -27,15 +26,7 @@ const Title = ({ bookmark }) => { } export const getIcon = (bookmark, style) => { - if(bookmark.resource?.logo_url) { - return <img src={bookmark.resource.logo_url} className='user-img-small' style={style || {width: '56px', height: '56px'}} /> - } - if(['Collection', 'Collection Version', 'Source', 'Source Version'].includes(bookmark.resource?.type)) { - return <RepoIcon sx={ style || {width: '56px', height: '56px', color: 'secondary.main'}} /> - } - if(['Organization', 'Org'].includes(bookmark.resource?.type)) { - return <OrganizationIcon sx={style || {width: '56px', height: '56px', color: 'secondary.main'}} /> - } + return <EntityIcon entity={bookmark.resource} sx={style || {width: '56px', height: '56px', color: 'secondary.main'}}/> } const Bookmark = ({ bookmark, isLast }) => { diff --git a/src/components/common/Breadcrumbs.jsx b/src/components/common/Breadcrumbs.jsx index 4fef00d8..2b177a79 100644 --- a/src/components/common/Breadcrumbs.jsx +++ b/src/components/common/Breadcrumbs.jsx @@ -25,7 +25,7 @@ const Breadcrumbs = ({owner, ownerType, repo, repoVersion, repoURL, id, version, repo && <React.Fragment> <DotSeparator /> - <RepoVersionButton size={size} href={repoURL} icon={noIcons ? false : <RepoIcon sx={{color: 'secondary'}} />} repo={repo} version={repoVersion} versionStyle={{fontSize: fontSize || '14px'}} /> + <RepoVersionButton size={size} href={repoURL} icon={noIcons ? false : <RepoIcon noTooltip sx={{color: 'secondary'}} />} repo={repo} version={repoVersion} versionStyle={{fontSize: fontSize || '14px'}} /> </React.Fragment> } { diff --git a/src/components/common/Events.jsx b/src/components/common/Events.jsx index 9255b19b..92099711 100644 --- a/src/components/common/Events.jsx +++ b/src/components/common/Events.jsx @@ -85,7 +85,7 @@ const Events = ({ user, events, onLoadMore, showAvatar, moreMarginLeft }) => { <Typography component='h3' sx={{margin: '16px 0', fontWeight: 'bold', display: 'flex', alignItems: 'center'}}> { showAvatar && - <UserIcon user={user} sx={{width: '40px', height: '40px', marginRight: '16px'}} color='primary' /> + <UserIcon noTooltip user={user} sx={{width: '40px', height: '40px', marginRight: '16px'}} color='primary' /> } {`${isSelf ? t('user.your') : (user.name + "'s")} ${t('user.recent_activity')}`} </Typography> diff --git a/src/components/common/FollowActionButton.jsx b/src/components/common/FollowActionButton.jsx index b1c3d628..a3176c04 100644 --- a/src/components/common/FollowActionButton.jsx +++ b/src/components/common/FollowActionButton.jsx @@ -17,7 +17,7 @@ const FollowIconButton = ({isFollowing, onClick, entity, size, sx}) => { const { t } = useTranslation() return ( - <Tooltip title={`${isFollowing ? t('common.unfollow') : t('common.follow')} ${entity.id || entity.username || entity.name}`}> + <Tooltip title={`${isFollowing ? t('common.unfollow') : t('common.follow')} ${entity?.id || entity?.username || entity?.name}`}> <IconButton sx={{color: 'surface.contrastText', mr: 1, ...sx}} onClick={onClick} size={size}> <Icon isFollowing={isFollowing} fontSize='inherit' /> </IconButton> diff --git a/src/components/common/OwnerButton.jsx b/src/components/common/OwnerButton.jsx index 92c27f5a..0d1295f7 100644 --- a/src/components/common/OwnerButton.jsx +++ b/src/components/common/OwnerButton.jsx @@ -24,13 +24,13 @@ const OwnerButton = ({owner, ownerType, ownerURL, noIcons, sx, ...rest}) => { minWidth: 'auto', ...sx }} - startIcon={!noIcons && <OwnerIcon ownerType={ownerType} {...iconProps} />} + startIcon={!noIcons && <OwnerIcon noTooltip ownerType={ownerType} {...iconProps} />} href={ownerURL ? '#' + ownerURL : undefined} component="button" - {...rest} + {...rest} > - <span>{owner}</span> + <span className='owner-button-label'>{owner}</span> </Button> ) } diff --git a/src/components/concepts/ConceptCard.jsx b/src/components/concepts/ConceptCard.jsx index 4d784c14..644cd503 100644 --- a/src/components/concepts/ConceptCard.jsx +++ b/src/components/concepts/ConceptCard.jsx @@ -39,16 +39,16 @@ const ConceptCard = ({ concept, onSelect, isSelected, onCardClick, bgColor, isSh <div className='col-xs-12' style={{marginTop: '16px', display: 'flex', alignItems: 'center'}}> <div className={(isSplitView ? 'col-xs-12' : 'col-xs-6') + ' padding-0'} style={{display: 'flex', alignItems: 'center'}}> <span style={{display: 'flex', alignItems: 'center', fontSize: '14px', color: COLORS.secondary['40']}}> - <OwnerIcon fontSize='inherit' sx={{marginRight: '8px'}} ownerType={concept.owner_type} /> {concept.owner} + <OwnerIcon noTooltip fontSize='inherit' sx={{marginRight: '8px'}} ownerType={concept.owner_type} /> {concept.owner} </span> <DotSeparator /> <span style={{display: 'flex', alignItems: 'center', fontSize: '14px', color: COLORS.secondary['40']}}> - <RepoIcon fontSize='inherit' style={{marginRight: '8px'}} /> + <RepoIcon noTooltip fontSize='inherit' style={{marginRight: '8px'}} /> <RepoVersionButton repo={concept.source} version={concept.latest_source_version}/> </span> <DotSeparator /> <span className='searchable' style={{display: 'flex', alignItems: 'center', fontSize: '14px', color: COLORS.secondary['40']}}> - <ConceptIcon fontSize='inherit' style={{marginRight: '8px'}} selected color='secondary' /> {concept.id} + <ConceptIcon noTooltip fontSize='inherit' style={{marginRight: '8px'}} selected color='secondary' /> {concept.id} </span> </div> { diff --git a/src/components/orgs/OrgIcon.jsx b/src/components/orgs/OrgIcon.jsx index 2da2833a..3a727328 100644 --- a/src/components/orgs/OrgIcon.jsx +++ b/src/components/orgs/OrgIcon.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import Chip from '@mui/material/Chip' import OrganizationIcon from '@mui/icons-material/AccountBalance'; +import OrgTooltip from './OrgTooltip' const Icon = ({ org, logoClassName, strict, iconColor, sx, fontSize }) => { return org?.logo_url ? @@ -13,12 +14,25 @@ const Icon = ({ org, logoClassName, strict, iconColor, sx, fontSize }) => { ) } -const OrgIcon = ({ org, logoClassName, strict, iconColor, noLink, sx, fontSize }) => { - return noLink ? - <Icon org={org} logoClassName={logoClassName} strict={strict} iconColor={iconColor} sx={sx} fontSize={fontSize} /> : - <Link to={org?.url}> - <Icon org={org} logoClassName={logoClassName} strict={strict} iconColor={iconColor} sx={sx} fontSize={fontSize} /> - </Link> +const OrgIcon = ({ org, noTooltip, logoClassName, strict, iconColor, noLink, sx, fontSize }) => { + return noTooltip ? + ( + noLink ? + <Icon org={org} logoClassName={logoClassName} strict={strict} iconColor={iconColor} sx={sx} fontSize={fontSize} /> : + <Link to={org?.url}> + <Icon org={org} logoClassName={logoClassName} strict={strict} iconColor={iconColor} sx={sx} fontSize={fontSize} /> + </Link> + ) : ( + <OrgTooltip org={org}> + { + noLink ? + <Icon org={org} logoClassName={logoClassName} strict={strict} iconColor={iconColor} sx={sx} fontSize={fontSize} /> : + <Link to={org?.url}> + <Icon org={org} logoClassName={logoClassName} strict={strict} iconColor={iconColor} sx={sx} fontSize={fontSize} /> + </Link> + } + </OrgTooltip> + ) } export default OrgIcon; diff --git a/src/components/orgs/OrgMembers.jsx b/src/components/orgs/OrgMembers.jsx index c8efc2cc..6e860493 100644 --- a/src/components/orgs/OrgMembers.jsx +++ b/src/components/orgs/OrgMembers.jsx @@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'; import {map, reject, filter, orderBy} from 'lodash'; import Typography from '@mui/material/Typography' import IconButton from '@mui/material/IconButton'; -import Tooltip from '@mui/material/Tooltip'; import UserIcon from '../users/UserIcon'; import Link from '../common/Link'; @@ -11,11 +10,9 @@ const DEFAULT_MEMBERS_TO_SHOW = 12 const Member = ({ member }) => { return ( - <Tooltip key={member.url} title={member.name}> - <IconButton href={`#${member.url}`} sx={{marginRight: '10px', padding: 0, marginBottom: '10px'}}> - <UserIcon user={member} sx={{width: '32px', height: '32px'}} /> - </IconButton> - </Tooltip> + <IconButton href={`#${member.url}`} sx={{marginRight: '10px', padding: 0, marginBottom: '10px'}}> + <UserIcon user={member} sx={{width: '32px', height: '32px'}} /> + </IconButton> ) } diff --git a/src/components/orgs/OrgStatistics.jsx b/src/components/orgs/OrgStatistics.jsx index 457eacfc..0c5e1327 100644 --- a/src/components/orgs/OrgStatistics.jsx +++ b/src/components/orgs/OrgStatistics.jsx @@ -27,7 +27,7 @@ const OrgStatistics = ({ org, members }) => { <List sx={{color: 'secondary.main', p: 0}}> <ListItem disablePadding href={`#${org.url}repos`} sx={{cursor: 'pointer'}} onClick={onRepoStatsClick}> <ListItemIcon sx={{minWidth: 0, marginRight: '8px'}}> - <RepoIcon sx={{color: 'default.light', width: '20px', height: '20px'}} /> + <RepoIcon noTooltip sx={{color: 'default.light', width: '20px', height: '20px'}} /> </ListItemIcon> <ListItemText sx={{color: 'default.light', '.MuiListItemText-primary': {fontSize: '12px'}}} diff --git a/src/components/orgs/OrgTooltip.jsx b/src/components/orgs/OrgTooltip.jsx index 8f62df38..88e79932 100644 --- a/src/components/orgs/OrgTooltip.jsx +++ b/src/components/orgs/OrgTooltip.jsx @@ -34,7 +34,7 @@ const TooltipTitle = ({ org }) => { ) } -const OrgTooltip = ({ org, children }) => { +const OrgTooltip = ({ org, children, spanStyle }) => { return ( <HTMLTooltip title={ @@ -43,9 +43,9 @@ const OrgTooltip = ({ org, children }) => { </React.Fragment> } > - <span> + <span style={{display: 'flex', ...spanStyle}}> {children} - </span> + </span> </HTMLTooltip> ) } diff --git a/src/components/repos/CompareToolbar.jsx b/src/components/repos/CompareToolbar.jsx index 40e4ef36..350836e3 100644 --- a/src/components/repos/CompareToolbar.jsx +++ b/src/components/repos/CompareToolbar.jsx @@ -51,7 +51,7 @@ const CompareToolbar = ({version1, version2, versions, metric, onMetricChange, o <span style={{display: 'flex', alignItems: 'center'}}> <ButtonGroup size="small" aria-label="Small button group" color='secondary'> <ButtonControl label={t('common.statistics')} selected={metric === 'stats'} terminal onClick={() => onMetricChange('stats')} icon={<StatsIcon fontSize='inherit' />} /> - <ButtonControl label={t('common.metadata')} selected={metric === 'meta'} onClick={() => onMetricChange('meta')} icon={<RepoIcon fontSize='inherit' />} /> + <ButtonControl label={t('common.metadata')} selected={metric === 'meta'} onClick={() => onMetricChange('meta')} icon={<RepoIcon noTooltip fontSize='inherit' />} /> <ButtonControl label={t('concept.concepts')} selected={metric === 'concepts'} onClick={() => onMetricChange('concepts')} icon={<ConceptIcon selected color='secondary' fontSize='inherit' sx={{width: '10px', height: '10px'}} />} /> <ButtonControl label={t('mapping.mappings')} selected={metric === 'mappings'} onClick={() => onMetricChange('mappings')} icon={<MappingIcon fontSize='inherit' />} /> <ButtonControl label={t('common.json')} terminal selected={metric === 'json'} onClick={() => onMetricChange('json')} icon={<JSONIcon fontSize='inherit' />} /> diff --git a/src/components/repos/RepoChip.jsx b/src/components/repos/RepoChip.jsx index 9c8aa196..67031450 100644 --- a/src/components/repos/RepoChip.jsx +++ b/src/components/repos/RepoChip.jsx @@ -12,11 +12,11 @@ const RepoChip = ({ repo, noTooltip, ...rest }) => { /> ) : ( <RepoTooltip repo={repo}> - <BaseEntityChip - entity={repo} - icon={<RepoIcon />} - {...rest} - /> + <BaseEntityChip + entity={repo} + icon={<RepoIcon />} + {...rest} + /> </RepoTooltip> ) } diff --git a/src/components/repos/RepoHeader.jsx b/src/components/repos/RepoHeader.jsx index 272160f3..f2312b5b 100644 --- a/src/components/repos/RepoHeader.jsx +++ b/src/components/repos/RepoHeader.jsx @@ -41,7 +41,7 @@ const RepoHeader = ({repo, versions, onVersionChange, onCreateConceptClick}) => return ( <Paper component="div" className='col-xs-12' sx={{backgroundColor: 'surface.main', boxShadow: 'none', padding: '16px', borderRadius: '8px 8px 0 0'}}> <div className='col-xs-6 padding-0'> - <HeaderChip label={repo.type} icon={<RepoIcon sx={{color: 'surface.contrastText'}} />} /> + <HeaderChip label={repo.type} icon={<RepoIcon noTooltip sx={{color: 'surface.contrastText'}} />} /> { onVersionChange && <RepoVersionChip checkbox version={repo} versions={versions} sx={{marginLeft: '8px'}} onChange={onVersionChange} /> diff --git a/src/components/repos/RepoIcon.jsx b/src/components/repos/RepoIcon.jsx index 82f655b4..7f06ecfd 100644 --- a/src/components/repos/RepoIcon.jsx +++ b/src/components/repos/RepoIcon.jsx @@ -2,12 +2,27 @@ import React from 'react'; import RepoOutlinedIcon from '@mui/icons-material/FolderOutlined'; import RepoFilledIcon from '@mui/icons-material/Folder'; import VersionIcon from '@mui/icons-material/AccountTreeOutlined'; +import RepoTooltip from './RepoTooltip' - -const RepoIcon = ({selected, isVersion, ...rest}) => { +const Icon = ({isVersion, selected, ...rest}) => { if(isVersion) - return <VersionIcon {...rest} /> - return selected ? <RepoFilledIcon color='primary' {...rest} /> : <RepoOutlinedIcon {...rest} /> + return <VersionIcon {...rest}/> + if(selected) + return <RepoFilledIcon color='primary' {...rest} /> + return <RepoOutlinedIcon {...rest} /> +} + + +const RepoIcon = ({repo, noTooltip, selected, isVersion, ...rest}) => { + return noTooltip ? ( + <React.Fragment> + <Icon isVersion={isVersion} selected={selected} {...rest} /> + </React.Fragment> + ) : ( + <RepoTooltip repo={repo}> + <Icon isVersion={isVersion} selected={selected} {...rest} /> + </RepoTooltip> + ) } export default RepoIcon; diff --git a/src/components/repos/RepoTooltip.jsx b/src/components/repos/RepoTooltip.jsx index db64f496..9e0f3a67 100644 --- a/src/components/repos/RepoTooltip.jsx +++ b/src/components/repos/RepoTooltip.jsx @@ -3,13 +3,13 @@ import { useHistory } from 'react-router-dom'; import RepoIcon from '@mui/icons-material/FolderOutlined'; import HTMLTooltip from '../common/HTMLTooltip' import FollowActionButton from '../common/FollowActionButton' -import VersionIcon from '@mui/icons-material/AccountTreeOutlined'; import OwnerButton from '../common/OwnerButton' import RepoVersionButton from './RepoVersionButton' -import { URIToOwnerParams, dropVersion } from '../../common/utils' +import { URIToOwnerParams } from '../../common/utils' import DotSeparator from '../common/DotSeparator' const TooltipTitle = ({ repo }) => { + // only need --> repo = {url: '/orgs/MyOrg/sources/MySource/', id: 'MyOrg'} const history = useHistory() const url = repo?.version_url || repo?.url const owner = URIToOwnerParams(url) @@ -26,29 +26,42 @@ const TooltipTitle = ({ repo }) => { '.MuiSvgIcon-root': { width: '15px', height: '15px' + }, + '.MuiButton-startIcon': { + marginRight: '4px', + '.span': { + display: 'flex', + alignItems: 'center', + } + }, + '.owner-button-label': { + maxWidth: '120px', + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', } }} /> <DotSeparator margin='0 8px' /> <RepoVersionButton - icon={<RepoIcon sx={{width: '15px', height: '15px'}} />} + icon={<RepoIcon noTooltip sx={{width: '15px', height: '15px'}} />} repo={repoId} - href={dropVersion(url)} - size='small' - /> - <DotSeparator margin='0 8px' /> - <RepoVersionButton - icon={<VersionIcon sx={{width: '15px', height: '15px'}} />} - repo={repo?.version || repo?.id} href={url} size='small' + repoLabelStyle={{ + maxWidth: '120px', + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + display: 'inline-block' + }} /> - </span> + </span> <FollowActionButton iconButton entity={repo} sx={{mr: 0, ml: 1.5}} size='small' /> </div> <div style={{width: '100%', fontSize: '14px', marginTop: '6px'}}> <span style={{color: '#000', cursor: 'pointer'}} onClick={() => history.push(url)}> - <b>{repo.name}</b> + <b>{repo?.name}</b> </span> </div> { @@ -57,11 +70,20 @@ const TooltipTitle = ({ repo }) => { {repo.description} </div> } + <div style={{width: '100%', fontSize: '12px', marginTop: '6px', display: 'flex', justifyContent: 'space-between'}}> + <span /> + { + (repo?.type === 'Source Version' || repo?.type === 'Collection Version') && + <span style={{marginLeft: '8px', cursor: 'pointer'}} onClick={() => history.push(url)}> + {repo?.version || repo?.id} + </span> + } + </div> </React.Fragment> ) } -const RepoTooltip = ({ repo, children }) => { +const RepoTooltip = ({ repo, children, spanStyle }) => { return ( <HTMLTooltip title={ @@ -70,7 +92,7 @@ const RepoTooltip = ({ repo, children }) => { </React.Fragment> } > - <span> + <span style={{display: 'flex', ...spanStyle}}> {children} </span> </HTMLTooltip> diff --git a/src/components/repos/RepoVersionButton.jsx b/src/components/repos/RepoVersionButton.jsx index 08c9f21b..347bac18 100644 --- a/src/components/repos/RepoVersionButton.jsx +++ b/src/components/repos/RepoVersionButton.jsx @@ -2,7 +2,7 @@ import React from 'react'; import Typography from '@mui/material/Typography' import Button from '@mui/material/Button' -const RepoVersionButton = ({icon, repo, version, versionStyle, href, vertical, size}) => { +const RepoVersionButton = ({icon, repo, version, repoLabelStyle, versionStyle, href, vertical, size}) => { const verticalStyle = version && vertical ? {flexDirection: 'column', alignItems: 'baseline'} : {} return ( <Button @@ -29,7 +29,7 @@ const RepoVersionButton = ({icon, repo, version, versionStyle, href, vertical, s component="button" size={size} > - <span style={{display: 'flex', fontSize: versionStyle?.fontSize}}>{repo}</span> + <span style={{display: 'flex', fontSize: versionStyle?.fontSize, ...repoLabelStyle}}>{repo}</span> { version && <Typography component='span' sx={{marginLeft: '4px', color: 'secondary.50', fontFamily: '"Roboto Mono","Helvetica","Arial",sans-serif', display: 'flex', fontSize: '0.85rem', marginTop: '1px', ...(versionStyle || {})}}> diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx index 56104f22..f37c7b4f 100644 --- a/src/components/search/Search.jsx +++ b/src/components/search/Search.jsx @@ -343,7 +343,7 @@ const Search = props => { <div className='col-xs-12 padding-0' style={{borderBottom: `1px solid ${COLORS.surface.n90}`}}> <Tabs value={resource} onChange={handleResourceChange} aria-label="search tabs" TabIndicatorProps={{style: {height: '3px'}}}> <Tab value='concepts' icon={<ConceptIcon selected={resource == 'concepts'} fontSize='small' />} label={t('concept.concepts')} style={TAB_STYLES} /> - <Tab value='repos' icon={<RepoIcon selected={resource == 'repos'} fontSize='small' />} label={t('repo.repos')} style={TAB_STYLES} /> + <Tab value='repos' icon={<RepoIcon noTooltip selected={resource == 'repos'} fontSize='small' />} label={t('repo.repos')} style={TAB_STYLES} /> <Tab value='orgs' icon={<OrgIcon color={resource === 'orgs' ? 'primary' : 'secondary'} fontSize='small' />} label={t('org.orgs')} style={TAB_STYLES} /> <Tab value='users' icon={<UserIcon color={resource === 'users' ? 'primary' : 'secondary'} fontSize='small' />} label={t('user.users')} style={TAB_STYLES} /> </Tabs> diff --git a/src/components/users/Following.jsx b/src/components/users/Following.jsx index 7e884713..4e8200f2 100644 --- a/src/components/users/Following.jsx +++ b/src/components/users/Following.jsx @@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'; import {map, reject, filter, orderBy} from 'lodash'; import Typography from '@mui/material/Typography' import IconButton from '@mui/material/IconButton'; -import Tooltip from '@mui/material/Tooltip'; import EntityIcon from '../common/EntityIcon'; import Link from '../common/Link'; @@ -11,11 +10,9 @@ const DEFAULT_MEMBERS_TO_SHOW = 12 const Followed = ({ object }) => { return ( - <Tooltip key={object.url} title={object.name || object.id}> - <IconButton href={`#${object.url}`} sx={{marginRight: '10px', padding: 0, marginBottom: '10px'}}> - <EntityIcon noLink strict entity={object} isVersion={(object?.short_code && object?.version_url)} sx={{width: '32px', height: '32px'}} /> - </IconButton> - </Tooltip> + <IconButton href={`#${object.url}`} sx={{marginRight: '10px', padding: 0, marginBottom: '10px'}}> + <EntityIcon noLink strict entity={object} isVersion={(object?.short_code && object?.version_url)} sx={{width: '32px', height: '32px'}} /> + </IconButton> ) } diff --git a/src/components/users/UserIcon.jsx b/src/components/users/UserIcon.jsx index 5fe697ac..65b5d3e9 100644 --- a/src/components/users/UserIcon.jsx +++ b/src/components/users/UserIcon.jsx @@ -2,11 +2,22 @@ import React from 'react'; import PersonIcon from '@mui/icons-material/Face2'; import StrangerIcon from '@mui/icons-material/Person'; import { isLoggedIn } from '../../common/utils'; +import UserTooltip from './UserTooltip' -const UserIcon = ({ user, color, logoClassName, sx, authenticated }) => { +const UserIcon = ({ user, color, logoClassName, sx, authenticated, noTooltip }) => { const iconStyle = {...(sx || {})} - return ( - <React.Fragment> + return noTooltip ? ( + user?.logo_url ? + <img + src={user.logo_url} + className={logoClassName || 'user-img-small'} + style={iconStyle} + /> : + (authenticated || isLoggedIn()) ? + <PersonIcon color={color} sx={iconStyle} /> : + <StrangerIcon color={color} sx={iconStyle} /> + ) : ( + <UserTooltip user={user}> { user?.logo_url ? <img @@ -18,7 +29,7 @@ const UserIcon = ({ user, color, logoClassName, sx, authenticated }) => { <PersonIcon color={color} sx={iconStyle} /> : <StrangerIcon color={color} sx={iconStyle} /> } - </React.Fragment> + </UserTooltip> ) } diff --git a/src/components/users/UserProfile.jsx b/src/components/users/UserProfile.jsx index de3768a7..cc6c0aba 100644 --- a/src/components/users/UserProfile.jsx +++ b/src/components/users/UserProfile.jsx @@ -15,7 +15,7 @@ import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined import CopyIcon from '@mui/icons-material/ContentCopyOutlined'; import { formatWebsiteLink, formatDate, canEditUser, sortOrgs, copyToClipboard, getCurrentUser } from '../../common/utils' import UserIcon from './UserIcon'; -import OrgIcon from '../orgs/OrgIcon'; +import OrgChip from '../orgs/OrgChip' import Link from '../common/Link' import { OperationsContext } from '../app/LayoutContext'; import APIService from '../../services/APIService'; @@ -70,7 +70,7 @@ const UserProfile = ({ user }) => { return ( <React.Fragment> - <UserIcon user={user} color='primary' sx={{color: 'primary', fontSize: '100px'}} logoClassName='user-img-medium' /> + <UserIcon noTooltip user={user} color='primary' sx={{color: 'primary', fontSize: '100px'}} logoClassName='user-img-medium' /> <Typography component='h2' sx={{marginTop: '16px', color: 'surface.dark', fontWeight: 'bold', fontSize: '24px', letterSpacing: 'normal'}}> {user?.name} </Typography> @@ -99,9 +99,7 @@ const UserProfile = ({ user }) => { <div className='col-xs-12 padding-0' style={{marginTop: '8px', maxHeight: '300px', overflow: 'auto'}}> { userOrgs.map(org => ( - <span key={org.url} style={{margin: '4px', display: 'inline-block'}}> - <OrgIcon org={org} /> - </span> + <OrgChip hideType key={org?.id} org={org} sx={{margin: '4px'}} /> )) } </div> diff --git a/src/components/users/UserProfileButton.jsx b/src/components/users/UserProfileButton.jsx index 8a5b6478..38aea1df 100644 --- a/src/components/users/UserProfileButton.jsx +++ b/src/components/users/UserProfileButton.jsx @@ -6,7 +6,7 @@ import UserIcon from './UserIcon'; const UserProfileButton = props => { return ( <IconButton color='primary' {...props}> - <UserIcon user={getCurrentUser()} /> + <UserIcon noTooltip user={getCurrentUser()} /> </IconButton> ) } diff --git a/src/components/users/UserStatistics.jsx b/src/components/users/UserStatistics.jsx index b0e0c7e7..b9ff7c5b 100644 --- a/src/components/users/UserStatistics.jsx +++ b/src/components/users/UserStatistics.jsx @@ -34,7 +34,7 @@ const UserStatistics = ({ user }) => { <List sx={{color: 'secondary.main', p: 0}}> <ListItem disablePadding href={`#${user.url}repos`} sx={{cursor: 'pointer'}} onClick={onRepoStatsClick}> <ListItemIcon sx={{minWidth: 0, marginRight: '8px'}}> - <RepoIcon sx={{color: 'default.light', width: '20px', height: '20px'}} /> + <RepoIcon noTooltip sx={{color: 'default.light', width: '20px', height: '20px'}} /> </ListItemIcon> <ListItemText sx={{color: 'default.light', '.MuiListItemText-primary': {fontSize: '12px'}}} @@ -43,7 +43,7 @@ const UserStatistics = ({ user }) => { </ListItem> <ListItem disablePadding > <ListItemIcon sx={{minWidth: 0, marginRight: '8px'}}> - <OrgIcon strict noLink sx={{color: 'default.light', width: '20px', height: '20px'}} /> + <OrgIcon noTooltip strict noLink sx={{color: 'default.light', width: '20px', height: '20px'}} /> </ListItemIcon> <ListItemText sx={{color: 'default.light', '.MuiListItemText-primary': {fontSize: '12px'}}} diff --git a/src/components/users/UserTooltip.jsx b/src/components/users/UserTooltip.jsx index e2ee76c7..23a84200 100644 --- a/src/components/users/UserTooltip.jsx +++ b/src/components/users/UserTooltip.jsx @@ -35,7 +35,7 @@ const TooltipTitle = ({ user }) => { } -const UserTooltip = ({ user, children }) => { +const UserTooltip = ({ user, children, spanStyle }) => { return ( <HTMLTooltip title={ @@ -44,7 +44,7 @@ const UserTooltip = ({ user, children }) => { </React.Fragment> } > - <span> + <span style={{display: 'flex', ...spanStyle}}> {children} </span> </HTMLTooltip>