Truncate account names in modals

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
renovate/major-react-monorepo^2
marcin mikołajczak 2023-01-07 12:24:18 +01:00
rodzic 52278ce519
commit b43ff634e7
6 zmienionych plików z 33 dodań i 19 usunięć

Wyświetl plik

@ -28,6 +28,7 @@ const BirthdaysModal = ({ onClose }: IBirthdaysModal) => {
<ScrollableList
scrollKey='birthdays'
emptyMessage={emptyMessage}
className='max-w-full'
itemClassName='pb-3'
>
{accountIds.map(id =>

Wyświetl plik

@ -2,7 +2,8 @@ import React, { useEffect } from 'react';
import { FormattedMessage } from 'react-intl';
import { fetchEventParticipations } from 'soapbox/actions/events';
import { Modal, Spinner, Stack } from 'soapbox/components/ui';
import ScrollableList from 'soapbox/components/scrollable-list';
import { Modal, Spinner } from 'soapbox/components/ui';
import AccountContainer from 'soapbox/containers/account-container';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
@ -33,16 +34,19 @@ const EventParticipantsModal: React.FC<IEventParticipantsModal> = ({ onClose, st
if (!accountIds) {
body = <Spinner />;
} else {
const emptyMessage = <FormattedMessage id='empty_column.event_participants' defaultMessage='No one joined this event yet. When someone does, they will show up here.' />;
body = (
<Stack space={3}>
{accountIds.size > 0 ? (
accountIds.map((id) =>
<AccountContainer key={id} id={id} />,
)
) : (
<FormattedMessage id='empty_column.event_participants' defaultMessage='No one joined this event yet. When someone does, they will show up here.' />
<ScrollableList
scrollKey='event_participations'
emptyMessage={emptyMessage}
className='max-w-full'
itemClassName='pb-3'
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} />,
)}
</Stack>
</ScrollableList>
);
}

Wyświetl plik

@ -2,7 +2,8 @@ import React, { useEffect } from 'react';
import { FormattedMessage } from 'react-intl';
import { fetchFavourites } from 'soapbox/actions/interactions';
import { Modal, Spinner, Stack } from 'soapbox/components/ui';
import ScrollableList from 'soapbox/components/scrollable-list';
import { Modal, Spinner } from 'soapbox/components/ui';
import AccountContainer from 'soapbox/containers/account-container';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
@ -33,16 +34,19 @@ const FavouritesModal: React.FC<IFavouritesModal> = ({ onClose, statusId }) => {
if (!accountIds) {
body = <Spinner />;
} else {
const emptyMessage = <FormattedMessage id='empty_column.favourites' defaultMessage='No one has liked this post yet. When someone does, they will show up here.' />;
body = (
<Stack space={3}>
{accountIds.size > 0 ? (
accountIds.map((id) =>
<AccountContainer key={id} id={id} />,
)
) : (
<FormattedMessage id='empty_column.favourites' defaultMessage='No one has liked this post yet. When someone does, they will show up here.' />
<ScrollableList
scrollKey='favourites'
emptyMessage={emptyMessage}
className='max-w-full'
itemClassName='pb-3'
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} />,
)}
</Stack>
</ScrollableList>
);
}

Wyświetl plik

@ -41,6 +41,7 @@ const MentionsModal: React.FC<IMentionsModal> = ({ onClose, statusId }) => {
body = (
<ScrollableList
scrollKey='mentions'
className='max-w-full'
itemClassName='pb-3'
>
{accountIds.map(id =>

Wyświetl plik

@ -1,3 +1,4 @@
import classNames from 'clsx';
import { List as ImmutableList } from 'immutable';
import React, { useEffect, useState } from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@ -84,7 +85,9 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
<ScrollableList
scrollKey='reactions'
emptyMessage={emptyMessage}
className='mt-4'
className={classNames('max-w-full', {
'mt-4': reactions.size > 0,
})}
itemClassName='pb-3'
>
{accounts.map((account) =>

Wyświetl plik

@ -41,6 +41,7 @@ const ReblogsModal: React.FC<IReblogsModal> = ({ onClose, statusId }) => {
<ScrollableList
scrollKey='reblogs'
emptyMessage={emptyMessage}
className='max-w-full'
itemClassName='pb-3'
>
{accountIds.map((id) =>