bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Add help text for selecting multiple

Browse source
This commit is contained in:
Justin 2022-06-21 07:35:19 -04:00
parent 2f4f2c02b1
commit 4ff54095fd
2 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/soapbox/components/polls/poll-option.tsx
View file

@ -11,7 +11,6 @@ import type {
} from 'soapbox/types/entities'; } from 'soapbox/types/entities';
const messages = defineMessages({ const messages = defineMessages({
closed: { id: 'poll.closed', defaultMessage: 'Closed' },
voted: { id: 'poll.voted', defaultMessage: 'You voted for this answer' }, voted: { id: 'poll.voted', defaultMessage: 'You voted for this answer' },
votes: { id: 'poll.votes', defaultMessage: '{votes, plural, one {# vote} other {# votes}}' }, votes: { id: 'poll.votes', defaultMessage: '{votes, plural, one {# vote} other {# votes}}' },
}); });

14
app/soapbox/components/polls/poll.tsx
View file

@ -1,11 +1,12 @@
import classNames from 'classnames'; import classNames from 'classnames';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { openModal } from 'soapbox/actions/modals'; import { openModal } from 'soapbox/actions/modals';
import { vote } from 'soapbox/actions/polls'; import { vote } from 'soapbox/actions/polls';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
import { Stack } from '../ui'; import { Stack, Text } from '../ui';
import PollFooter from './poll-footer'; import PollFooter from './poll-footer';
import PollOption from './poll-option'; import PollOption from './poll-option';
@ -17,8 +18,13 @@ interface IPoll {
status?: string, status?: string,
} }
const messages = defineMessages({
multiple: { id: 'poll.chooseMultiple', defaultMessage: 'Choose as many as you\'d like.' },
});
const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => { const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const intl = useIntl();
const isLoggedIn = useAppSelector((state) => state.me); const isLoggedIn = useAppSelector((state) => state.me);
const poll = useAppSelector((state) => state.polls.get(id)); const poll = useAppSelector((state) => state.polls.get(id));
@ -61,6 +67,12 @@ const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
return ( return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions // eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div onClick={e => e.stopPropagation()}> <div onClick={e => e.stopPropagation()}>
{poll.multiple && (
<Text theme='muted' size='sm'>
{intl.formatMessage(messages.multiple)}
</Text>
)}
<Stack space={4} className={classNames('mt-4')}> <Stack space={4} className={classNames('mt-4')}>
<Stack space={2}> <Stack space={2}>
{poll.options.map((option, i) => ( {poll.options.map((option, i) => (