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

Add tooltip to 'auto-delete' info

Browse source
This commit is contained in:
Chewbacca 2022-11-07 11:53:40 -05:00
parent 1ae9775e07
commit 715eeee540
2 changed files with 29 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
View file

@ -5,7 +5,7 @@ import { Link, useHistory, useParams } from 'react-router-dom';
import { blockAccount, unblockAccount } from 'soapbox/actions/accounts';
import { openModal } from 'soapbox/actions/modals';
import List, { ListItem } from 'soapbox/components/list';
import { Avatar, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Stack, Text } from 'soapbox/components/ui';
import { Avatar, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Stack, Text, Tooltip } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification_badge';
import { useChatContext } from 'soapbox/contexts/chat-context';
import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
@ -37,6 +37,7 @@ const messages = defineMessages({
autoDelete30Days: { id: 'chat_settings.auto_delete.30days', defaultMessage: '30 days' },
autoDelete90Days: { id: 'chat_settings.auto_delete.90days', defaultMessage: '90 days' },
autoDeleteMessage: { id: 'chat_window.auto_delete_label', defaultMessage: 'Auto-delete after {day} days' },
autoDeleteMessageTooltip: { id: 'chat_window.auto_delete_tooltip', defaultMessage: 'Chat messages are set to auto-delete after {day} days days upon sending.' },
});
const ChatPageMain = () => {
@ -129,16 +130,20 @@ const ChatPageMain = () => {
</div>
{chat.message_expiration && (
<Text
align='left'
size='sm'
weight='medium'
theme='primary'
truncate
className='w-full'
<Tooltip
text={intl.formatMessage(messages.autoDeleteMessageTooltip, { day: secondsToDays(chat.message_expiration) })}
>
{intl.formatMessage(messages.autoDeleteMessage, { day: secondsToDays(chat.message_expiration) })}
</Text>
<Text
align='left'
size='sm'
weight='medium'
theme='primary'
truncate
className='w-full cursor-help'
>
{intl.formatMessage(messages.autoDeleteMessage, { day: secondsToDays(chat.message_expiration) })}
</Text>
</Tooltip>
)}
</Stack>
</HStack>

22
app/soapbox/features/chats/components/chat-widget/chat-window.tsx
View file

@ -2,7 +2,7 @@ import React, { useRef } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
import { Avatar, HStack, Icon, Stack, Text, Tooltip } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification_badge';
import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
import { secondsToDays } from 'soapbox/utils/numbers';
@ -14,6 +14,7 @@ import ChatSettings from './chat-settings';
const messages = defineMessages({
autoDeleteMessage: { id: 'chat_window.auto_delete_label', defaultMessage: 'Auto-delete after {day} days' },
autoDeleteMessageTooltip: { id: 'chat_window.auto_delete_tooltip', defaultMessage: 'Chat messages are set to auto-delete after {day} days days upon sending.' },
});
const LinkWrapper = ({ enabled, to, children }: { enabled: boolean, to: string, children: React.ReactNode }): JSX.Element => {
@ -84,19 +85,24 @@ const ChatWindow = () => {
</Link>
)}
<LinkWrapper enabled={isOpen} to={`/@${chat.account.acct}`}>
<Stack alignItems='start'>
<Stack alignItems='start'>
<LinkWrapper enabled={isOpen} to={`/@${chat.account.acct}`}>
<div className='flex items-center space-x-1 flex-grow'>
<Text size='sm' weight='bold' truncate>{chat.account.display_name || `@${chat.account.acct}`}</Text>
{chat.account.verified && <VerificationBadge />}
</div>
{chat.message_expiration && (
<Text size='sm' weight='medium' theme='primary' truncate>
</LinkWrapper>
{chat.message_expiration && (
<Tooltip
text={intl.formatMessage(messages.autoDeleteMessageTooltip, { day: secondsToDays(chat.message_expiration) })}
>
<Text size='sm' weight='medium' theme='primary' truncate className='cursor-help'>
{intl.formatMessage(messages.autoDeleteMessage, { day: secondsToDays(chat.message_expiration) })}
</Text>
)}
</Stack>
</LinkWrapper>
</Tooltip>
)}
</Stack>
</HStack>
</HStack>
}