Merge pull request #1226 from hometown-fork/1174-multiple-choice-poll-toggle

Add toggle for multiple choice polls
This commit is contained in:
Darius Kazemi 2022-12-01 21:27:52 -08:00 committed by GitHub
commit d271c40341
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 0 deletions

View File

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import Toggle from 'react-toggle';
import IconButton from 'mastodon/components/icon_button'; import IconButton from 'mastodon/components/icon_button';
import Icon from 'mastodon/components/icon'; import Icon from 'mastodon/components/icon';
import AutosuggestInput from 'mastodon/components/autosuggest_input'; import AutosuggestInput from 'mastodon/components/autosuggest_input';
@ -155,6 +156,12 @@ class PollForm extends ImmutablePureComponent {
<ul> <ul>
{options.map((title, i) => <Option title={title} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} onToggleMultiple={this.handleToggleMultiple} autoFocus={i === autoFocusIndex} {...other} />)} {options.map((title, i) => <Option title={title} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} onToggleMultiple={this.handleToggleMultiple} autoFocus={i === autoFocusIndex} {...other} />)}
</ul> </ul>
<div className='is-multiple-toggle'>
<Toggle className='is-multiple-checkbox' checked={isMultiple} onChange={this.handleToggleMultiple}/>
<span className='is-multiple-toggle__label'>
<FormattedMessage id='poll.is_multiple' defaultMessage='Multiple choice' />
</span>
</div>
<div className='poll__footer'> <div className='poll__footer'>
<button disabled={options.size >= 4} className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button> <button disabled={options.size >= 4} className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button>

View File

@ -374,6 +374,7 @@
"poll.vote": "Vote", "poll.vote": "Vote",
"poll.voted": "You voted for this answer", "poll.voted": "You voted for this answer",
"poll.votes": "{votes, plural, one {# vote} other {# votes}}", "poll.votes": "{votes, plural, one {# vote} other {# votes}}",
"poll.is_multiple": "Multiple choice",
"poll_button.add_poll": "Add a poll", "poll_button.add_poll": "Add a poll",
"poll_button.remove_poll": "Remove poll", "poll_button.remove_poll": "Remove poll",
"privacy.change": "Change post privacy", "privacy.change": "Change post privacy",

View File

@ -4116,6 +4116,21 @@ a.status-card.compact:hover {
} }
} }
// Hometown: Styling for toggle for multiple choice polls
.is-multiple-toggle {
display: block;
line-height: 24px;
padding-left: 10px;
}
.is-multiple-toggle__label {
color: $inverted-text-color;
display: inline-block;
margin-bottom: 14px;
margin-left: 8px;
vertical-align: middle;
}
.setting-toggle { .setting-toggle {
display: block; display: block;
line-height: 24px; line-height: 24px;