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 { blockAccount, unblockAccount } from 'soapbox/actions/accounts';
import { openModal } from 'soapbox/actions/modals'; import { openModal } from 'soapbox/actions/modals';
import List, { ListItem } from 'soapbox/components/list'; 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 VerificationBadge from 'soapbox/components/verification_badge';
import { useChatContext } from 'soapbox/contexts/chat-context'; import { useChatContext } from 'soapbox/contexts/chat-context';
import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks'; import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
@ -37,6 +37,7 @@ const messages = defineMessages({
autoDelete30Days: { id: 'chat_settings.auto_delete.30days', defaultMessage: '30 days' }, autoDelete30Days: { id: 'chat_settings.auto_delete.30days', defaultMessage: '30 days' },
autoDelete90Days: { id: 'chat_settings.auto_delete.90days', defaultMessage: '90 days' }, autoDelete90Days: { id: 'chat_settings.auto_delete.90days', defaultMessage: '90 days' },
autoDeleteMessage: { id: 'chat_window.auto_delete_label', defaultMessage: 'Auto-delete after {day} 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 = () => { const ChatPageMain = () => {
@ -129,16 +130,20 @@ const ChatPageMain = () => {
</div> </div>
{chat.message_expiration && ( {chat.message_expiration && (
<Text <Tooltip
align='left' text={intl.formatMessage(messages.autoDeleteMessageTooltip, { day: secondsToDays(chat.message_expiration) })}
size='sm'
weight='medium'
theme='primary'
truncate
className='w-full'
> >
{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> </Stack>
</HStack> </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 { defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom'; 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 VerificationBadge from 'soapbox/components/verification_badge';
import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context'; import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
import { secondsToDays } from 'soapbox/utils/numbers'; import { secondsToDays } from 'soapbox/utils/numbers';
@ -14,6 +14,7 @@ import ChatSettings from './chat-settings';
const messages = defineMessages({ const messages = defineMessages({
autoDeleteMessage: { id: 'chat_window.auto_delete_label', defaultMessage: 'Auto-delete after {day} 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 LinkWrapper = ({ enabled, to, children }: { enabled: boolean, to: string, children: React.ReactNode }): JSX.Element => { const LinkWrapper = ({ enabled, to, children }: { enabled: boolean, to: string, children: React.ReactNode }): JSX.Element => {
@ -84,19 +85,24 @@ const ChatWindow = () => {
</Link> </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'> <div className='flex items-center space-x-1 flex-grow'>
<Text size='sm' weight='bold' truncate>{chat.account.display_name || `@${chat.account.acct}`}</Text> <Text size='sm' weight='bold' truncate>{chat.account.display_name || `@${chat.account.acct}`}</Text>
{chat.account.verified && <VerificationBadge />} {chat.account.verified && <VerificationBadge />}
</div> </div>
{chat.message_expiration && ( </LinkWrapper>
<Text size='sm' weight='medium' theme='primary' truncate>
{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) })} {intl.formatMessage(messages.autoDeleteMessage, { day: secondsToDays(chat.message_expiration) })}
</Text> </Text>
)} </Tooltip>
</Stack> )}
</LinkWrapper> </Stack>
</HStack> </HStack>
</HStack> </HStack>
} }