bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Account: rip out calculations on display name, truncate with CSS

Browse source
This commit is contained in:
Alex Gleason 2023-02-07 12:03:12 -06:00
parent 0631657278
commit f68ce9c47b
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 4 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/soapbox/components/account.tsx
View file

@ -1,11 +1,11 @@
import React, { useLayoutEffect, useRef, useState } from 'react'; import React, { useRef } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Link, useHistory } from 'react-router-dom'; import { Link, useHistory } from 'react-router-dom';
import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper'; import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
import VerificationBadge from 'soapbox/components/verification-badge'; import VerificationBadge from 'soapbox/components/verification-badge';
import ActionButton from 'soapbox/features/ui/components/action-button'; import ActionButton from 'soapbox/features/ui/components/action-button';
import { useAppSelector, useOnScreen } from 'soapbox/hooks'; import { useAppSelector } from 'soapbox/hooks';
import { getAcct } from 'soapbox/utils/accounts'; import { getAcct } from 'soapbox/utils/accounts';
import { displayFqn } from 'soapbox/utils/state'; import { displayFqn } from 'soapbox/utils/state';
@ -119,9 +119,6 @@ const Account = ({
}: IAccount) => { }: IAccount) => {
const overflowRef = useRef<HTMLDivElement>(null); const overflowRef = useRef<HTMLDivElement>(null);
const actionRef = useRef<HTMLDivElement>(null); const actionRef = useRef<HTMLDivElement>(null);
const isOnScreen = useOnScreen(overflowRef);
const [style, setStyle] = useState<React.CSSProperties>({ visibility: 'hidden' });
const me = useAppSelector((state) => state.me); const me = useAppSelector((state) => state.me);
const username = useAppSelector((state) => account ? getAcct(account, displayFqn(state)) : null); const username = useAppSelector((state) => account ? getAcct(account, displayFqn(state)) : null);
@ -160,21 +157,6 @@ const Account = ({
const intl = useIntl(); const intl = useIntl();
useLayoutEffect(() => {
const style: React.CSSProperties = {};
const actionWidth = actionRef.current?.clientWidth || 0;
if (overflowRef.current) {
if (action && withRelationship && typeof overflowRef.current.style.maxWidth !== 'number') {
style.maxWidth = Math.max(0, overflowRef.current.clientWidth - 30 - avatarSize - actionWidth);
}
} else {
style.visibility = 'hidden';
}
setStyle(style);
}, [isOnScreen, overflowRef, actionRef]);
if (!account) { if (!account) {
return null; return null;
} }
@ -225,7 +207,7 @@ const Account = ({
title={account.acct} title={account.acct}
onClick={(event: React.MouseEvent) => event.stopPropagation()} onClick={(event: React.MouseEvent) => event.stopPropagation()}
> >
<HStack space={1} alignItems='center' grow style={style}> <HStack space={1} alignItems='center' grow>
<Text <Text
size='sm' size='sm'
weight='semibold' weight='semibold'
@ -241,7 +223,7 @@ const Account = ({
</ProfilePopper> </ProfilePopper>
<Stack space={withAccountNote || note ? 1 : 0}> <Stack space={withAccountNote || note ? 1 : 0}>
<HStack alignItems='center' space={1} style={style}> <HStack alignItems='center' space={1}>
<Text theme='muted' size='sm' direction='ltr' truncate>@{username}</Text> <Text theme='muted' size='sm' direction='ltr' truncate>@{username}</Text>
{account.favicon && ( {account.favicon && (