mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

use LinkButton in UserCardBox

Browse source
This commit is contained in:
David Stensland 2024-02-24 12:11:20 -08:00 • committed by Bill Thornton
parent b27b559d21
commit 6eb6d75797
1 changed files with 10 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/dashboard/users/UserCardBox.tsx
View file

@ -4,19 +4,10 @@ import { formatDistanceToNow } from 'date-fns';
import { getLocaleWithSuffix } from '../../../utils/dateFnsLocale'; import { getLocaleWithSuffix } from '../../../utils/dateFnsLocale';
import globalize from '../../../lib/globalize'; import globalize from '../../../lib/globalize';
import IconButtonElement from '../../../elements/IconButtonElement'; import IconButtonElement from '../../../elements/IconButtonElement';
import LinkButton from '../../../elements/emby-button/LinkButton';
import escapeHTML from 'escape-html'; import escapeHTML from 'escape-html';
import { getDefaultBackgroundClass } from '../../cardbuilder/cardBuilderUtils'; import { getDefaultBackgroundClass } from '../../cardbuilder/cardBuilderUtils';
const createLinkElement = ({ user, renderImgUrl }: { user: UserDto, renderImgUrl: string }) => ({
__html: `<a
is="emby-linkbutton"
class="cardContent"
href="#/dashboard/users/profile?userId=${user.Id}"
>
${renderImgUrl}
</a>`
});
type IProps = { type IProps = {
user?: UserDto; user?: UserDto;
}; };
@ -55,22 +46,21 @@ const UserCardBox: FunctionComponent<IProps> = ({ user = {} }: IProps) => {
const lastSeen = getLastSeenText(user.LastActivityDate); const lastSeen = getLastSeenText(user.LastActivityDate);
const renderImgUrl = imgUrl ? const renderImgUrl = imgUrl ?
`<div class='${imageClass}' style='background-image:url(${imgUrl})'></div>` : <div className={imageClass} style={{ backgroundImage: `url(${imgUrl})` }} /> :
`<div class='${imageClass} ${getDefaultBackgroundClass(user.Name)} flex align-items-center justify-content-center'> <div className={`${imageClass} ${getDefaultBackgroundClass(user.Name)} flex align-items-center justify-content-center`}>
<span class='material-icons cardImageIcon person' aria-hidden='true'></span> <span className='material-icons cardImageIcon person' aria-hidden='true'></span>
</div>`; </div>;
return ( return (
<div data-userid={user.Id} data-username={user.Name} className={cssClass}> <div data-userid={user.Id} data-username={user.Name} className={cssClass}>
<div className='cardBox visualCardBox'> <div className='cardBox visualCardBox'>
<div className='cardScalable visualCardBox-cardScalable'> <div className='cardScalable visualCardBox-cardScalable'>
<div className='cardPadder cardPadder-square'></div> <div className='cardPadder cardPadder-square'></div>
<div <LinkButton
dangerouslySetInnerHTML={createLinkElement({ className='cardContent'
user: user, href={`#/dashboard/users/profile?userId=${user.Id}`}>
renderImgUrl: renderImgUrl {renderImgUrl}
})} </LinkButton>
/>
</div> </div>
<div className='cardFooter visualCardBox-cardFooter'> <div className='cardFooter visualCardBox-cardFooter'>
<div <div