diff options
author | ThibG <thib@sitedethib.com> | 2019-03-06 12:20:17 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-03-06 12:20:17 +0100 |
commit | fefacb7b7a21fc4aa40cb18ac797ecb5c44627f6 (patch) | |
tree | 7c4dbacf4603fd834da1bf8645b894634da06d4f | |
parent | e80fabfd84c1e2d157ca1cd536f68f3c75f011c1 (diff) | |
parent | 94a0149ff3e455792050e790d397d1d4d2c2d851 (diff) |
Merge pull request #939 from ThibG/glitch-soc/merge-upstream
Merge upstream changes
34 files changed, 511 insertions, 44 deletions
diff --git a/Gemfile b/Gemfile index 8145b1906..5f40bd310 100644 --- a/Gemfile +++ b/Gemfile @@ -120,7 +120,7 @@ group :test do end group :development do - gem 'active_record_query_trace', '~> 1.5' + gem 'active_record_query_trace', '~> 1.6' gem 'annotate', '~> 2.7' gem 'better_errors', '~> 2.5' gem 'binding_of_caller', '~> 0.7' diff --git a/Gemfile.lock b/Gemfile.lock index bf733fb44..3335b8fbc 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -43,7 +43,7 @@ GEM activemodel (>= 4.1, < 6) case_transform (>= 0.2) jsonapi-renderer (>= 0.1.1.beta1, < 0.3) - active_record_query_trace (1.5.4) + active_record_query_trace (1.6) activejob (5.2.2) activesupport (= 5.2.2) globalid (>= 0.3.6) @@ -658,7 +658,7 @@ PLATFORMS DEPENDENCIES active_model_serializers (~> 0.10) - active_record_query_trace (~> 1.5) + active_record_query_trace (~> 1.6) addressable (~> 2.6) annotate (~> 2.7) aws-sdk-s3 (~> 1.30) diff --git a/app/javascript/flavours/glitch/actions/importer/index.js b/app/javascript/flavours/glitch/actions/importer/index.js index abadee817..f4372fb31 100644 --- a/app/javascript/flavours/glitch/actions/importer/index.js +++ b/app/javascript/flavours/glitch/actions/importer/index.js @@ -1,4 +1,4 @@ -import { normalizeAccount, normalizeStatus } from './normalizer'; +import { normalizeAccount, normalizeStatus, normalizePoll } from './normalizer'; export const ACCOUNT_IMPORT = 'ACCOUNT_IMPORT'; export const ACCOUNTS_IMPORT = 'ACCOUNTS_IMPORT'; @@ -71,7 +71,7 @@ export function importFetchedStatuses(statuses) { } if (status.poll && status.poll.id) { - pushUnique(polls, status.poll); + pushUnique(polls, normalizePoll(status.poll)); } } @@ -82,3 +82,9 @@ export function importFetchedStatuses(statuses) { dispatch(importStatuses(normalStatuses)); }; } + +export function importFetchedPoll(poll) { + return dispatch => { + dispatch(importPolls([normalizePoll(poll)])); + }; +} diff --git a/app/javascript/flavours/glitch/actions/importer/normalizer.js b/app/javascript/flavours/glitch/actions/importer/normalizer.js index f57fb70b4..ccd84364e 100644 --- a/app/javascript/flavours/glitch/actions/importer/normalizer.js +++ b/app/javascript/flavours/glitch/actions/importer/normalizer.js @@ -65,3 +65,14 @@ export function normalizeStatus(status, normalOldStatus) { return normalStatus; } + +export function normalizePoll(poll) { + const normalPoll = { ...poll }; + + normalPoll.options = poll.options.map(option => ({ + ...option, + title_emojified: emojify(escapeTextContentForBrowser(option.title)), + })); + + return normalPoll; +} diff --git a/app/javascript/flavours/glitch/actions/polls.js b/app/javascript/flavours/glitch/actions/polls.js index bee4c48a6..8e8b82df5 100644 --- a/app/javascript/flavours/glitch/actions/polls.js +++ b/app/javascript/flavours/glitch/actions/polls.js @@ -1,4 +1,5 @@ import api from '../api'; +import { importFetchedPoll } from './importer'; export const POLL_VOTE_REQUEST = 'POLL_VOTE_REQUEST'; export const POLL_VOTE_SUCCESS = 'POLL_VOTE_SUCCESS'; @@ -12,7 +13,10 @@ export const vote = (pollId, choices) => (dispatch, getState) => { dispatch(voteRequest()); api(getState).post(`/api/v1/polls/${pollId}/votes`, { choices }) - .then(({ data }) => dispatch(voteSuccess(data))) + .then(({ data }) => { + dispatch(importFetchedPoll(data)); + dispatch(voteSuccess(data)); + }) .catch(err => dispatch(voteFail(err))); }; @@ -20,7 +24,10 @@ export const fetchPoll = pollId => (dispatch, getState) => { dispatch(fetchPollRequest()); api(getState).get(`/api/v1/polls/${pollId}`) - .then(({ data }) => dispatch(fetchPollSuccess(data))) + .then(({ data }) => { + dispatch(importFetchedPoll(data)); + dispatch(fetchPollSuccess(data)); + }) .catch(err => dispatch(fetchPollFail(err))); }; diff --git a/app/javascript/flavours/glitch/components/poll.js b/app/javascript/flavours/glitch/components/poll.js index 182491af8..bfff7b601 100644 --- a/app/javascript/flavours/glitch/components/poll.js +++ b/app/javascript/flavours/glitch/components/poll.js @@ -7,6 +7,8 @@ import classNames from 'classnames'; import { vote, fetchPoll } from 'mastodon/actions/polls'; import Motion from 'mastodon/features/ui/util/optional_motion'; import spring from 'react-motion/lib/spring'; +import escapeTextContentForBrowser from 'escape-html'; +import emojify from 'mastodon/features/emoji/emoji'; const messages = defineMessages({ moments: { id: 'time_remaining.moments', defaultMessage: 'Moments remaining' }, @@ -120,7 +122,7 @@ class Poll extends ImmutablePureComponent { {!showResults && <span className={classNames('poll__input', { checkbox: poll.get('multiple'), active })} />} {showResults && <span className='poll__number'>{Math.round(percent)}%</span>} - {option.get('title')} + <span dangerouslySetInnerHTML={{ __html: option.get('title_emojified', emojify(escapeTextContentForBrowser(option.get('title')))) }} /> </label> </li> ); diff --git a/app/javascript/flavours/glitch/reducers/polls.js b/app/javascript/flavours/glitch/reducers/polls.js index 53d9b1d8c..9956cf83f 100644 --- a/app/javascript/flavours/glitch/reducers/polls.js +++ b/app/javascript/flavours/glitch/reducers/polls.js @@ -1,4 +1,3 @@ -import { POLL_VOTE_SUCCESS, POLL_FETCH_SUCCESS } from 'mastodon/actions/polls'; import { POLLS_IMPORT } from 'mastodon/actions/importer'; import { Map as ImmutableMap, fromJS } from 'immutable'; @@ -10,9 +9,6 @@ export default function polls(state = initialState, action) { switch(action.type) { case POLLS_IMPORT: return importPolls(state, action.polls); - case POLL_VOTE_SUCCESS: - case POLL_FETCH_SUCCESS: - return importPolls(state, [action.poll]); default: return state; } diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss index 7c6e61d63..ce324b36e 100644 --- a/app/javascript/flavours/glitch/styles/polls.scss +++ b/app/javascript/flavours/glitch/styles/polls.scss @@ -5,6 +5,7 @@ li { margin-bottom: 10px; position: relative; + height: 18px + 12px; } &__chart { @@ -27,6 +28,9 @@ padding: 6px 0; line-height: 18px; cursor: default; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; input[type=radio], input[type=checkbox] { diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index 0be2a5cd4..2d58a71fe 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -51,6 +51,13 @@ export const COMPOSE_UPLOAD_CHANGE_REQUEST = 'COMPOSE_UPLOAD_UPDATE_REQUEST' export const COMPOSE_UPLOAD_CHANGE_SUCCESS = 'COMPOSE_UPLOAD_UPDATE_SUCCESS'; export const COMPOSE_UPLOAD_CHANGE_FAIL = 'COMPOSE_UPLOAD_UPDATE_FAIL'; +export const COMPOSE_POLL_ADD = 'COMPOSE_POLL_ADD'; +export const COMPOSE_POLL_REMOVE = 'COMPOSE_POLL_REMOVE'; +export const COMPOSE_POLL_OPTION_ADD = 'COMPOSE_POLL_OPTION_ADD'; +export const COMPOSE_POLL_OPTION_CHANGE = 'COMPOSE_POLL_OPTION_CHANGE'; +export const COMPOSE_POLL_OPTION_REMOVE = 'COMPOSE_POLL_OPTION_REMOVE'; +export const COMPOSE_POLL_SETTINGS_CHANGE = 'COMPOSE_POLL_SETTINGS_CHANGE'; + const messages = defineMessages({ uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' }, }); @@ -131,6 +138,7 @@ export function submitCompose(routerHistory) { sensitive: getState().getIn(['compose', 'sensitive']), spoiler_text: getState().getIn(['compose', 'spoiler_text'], ''), visibility: getState().getIn(['compose', 'privacy']), + poll: getState().getIn(['compose', 'poll'], null), }, { headers: { 'Idempotency-Key': getState().getIn(['compose', 'idempotencyKey']), @@ -484,4 +492,46 @@ export function changeComposing(value) { type: COMPOSE_COMPOSING_CHANGE, value, }; -} +}; + +export function addPoll() { + return { + type: COMPOSE_POLL_ADD, + }; +}; + +export function removePoll() { + return { + type: COMPOSE_POLL_REMOVE, + }; +}; + +export function addPollOption(title) { + return { + type: COMPOSE_POLL_OPTION_ADD, + title, + }; +}; + +export function changePollOption(index, title) { + return { + type: COMPOSE_POLL_OPTION_CHANGE, + index, + title, + }; +}; + +export function removePollOption(index) { + return { + type: COMPOSE_POLL_OPTION_REMOVE, + index, + }; +}; + +export function changePollSettings(expiresIn, isMultiple) { + return { + type: COMPOSE_POLL_SETTINGS_CHANGE, + expiresIn, + isMultiple, + }; +}; diff --git a/app/javascript/mastodon/actions/importer/index.js b/app/javascript/mastodon/actions/importer/index.js index abadee817..f4372fb31 100644 --- a/app/javascript/mastodon/actions/importer/index.js +++ b/app/javascript/mastodon/actions/importer/index.js @@ -1,4 +1,4 @@ -import { normalizeAccount, normalizeStatus } from './normalizer'; +import { normalizeAccount, normalizeStatus, normalizePoll } from './normalizer'; export const ACCOUNT_IMPORT = 'ACCOUNT_IMPORT'; export const ACCOUNTS_IMPORT = 'ACCOUNTS_IMPORT'; @@ -71,7 +71,7 @@ export function importFetchedStatuses(statuses) { } if (status.poll && status.poll.id) { - pushUnique(polls, status.poll); + pushUnique(polls, normalizePoll(status.poll)); } } @@ -82,3 +82,9 @@ export function importFetchedStatuses(statuses) { dispatch(importStatuses(normalStatuses)); }; } + +export function importFetchedPoll(poll) { + return dispatch => { + dispatch(importPolls([normalizePoll(poll)])); + }; +} diff --git a/app/javascript/mastodon/actions/importer/normalizer.js b/app/javascript/mastodon/actions/importer/normalizer.js index 3085cd537..ea80c0efb 100644 --- a/app/javascript/mastodon/actions/importer/normalizer.js +++ b/app/javascript/mastodon/actions/importer/normalizer.js @@ -67,3 +67,14 @@ export function normalizeStatus(status, normalOldStatus) { return normalStatus; } + +export function normalizePoll(poll) { + const normalPoll = { ...poll }; + + normalPoll.options = poll.options.map(option => ({ + ...option, + title_emojified: emojify(escapeTextContentForBrowser(option.title)), + })); + + return normalPoll; +} diff --git a/app/javascript/mastodon/actions/polls.js b/app/javascript/mastodon/actions/polls.js index bee4c48a6..8e8b82df5 100644 --- a/app/javascript/mastodon/actions/polls.js +++ b/app/javascript/mastodon/actions/polls.js @@ -1,4 +1,5 @@ import api from '../api'; +import { importFetchedPoll } from './importer'; export const POLL_VOTE_REQUEST = 'POLL_VOTE_REQUEST'; export const POLL_VOTE_SUCCESS = 'POLL_VOTE_SUCCESS'; @@ -12,7 +13,10 @@ export const vote = (pollId, choices) => (dispatch, getState) => { dispatch(voteRequest()); api(getState).post(`/api/v1/polls/${pollId}/votes`, { choices }) - .then(({ data }) => dispatch(voteSuccess(data))) + .then(({ data }) => { + dispatch(importFetchedPoll(data)); + dispatch(voteSuccess(data)); + }) .catch(err => dispatch(voteFail(err))); }; @@ -20,7 +24,10 @@ export const fetchPoll = pollId => (dispatch, getState) => { dispatch(fetchPollRequest()); api(getState).get(`/api/v1/polls/${pollId}`) - .then(({ data }) => dispatch(fetchPollSuccess(data))) + .then(({ data }) => { + dispatch(importFetchedPoll(data)); + dispatch(fetchPollSuccess(data)); + }) .catch(err => dispatch(fetchPollFail(err))); }; diff --git a/app/javascript/mastodon/actions/statuses.js b/app/javascript/mastodon/actions/statuses.js index e7c89b4ba..1794538e2 100644 --- a/app/javascript/mastodon/actions/statuses.js +++ b/app/javascript/mastodon/actions/statuses.js @@ -140,7 +140,11 @@ export function redraft(status) { export function deleteStatus(id, router, withRedraft = false) { return (dispatch, getState) => { - const status = getState().getIn(['statuses', id]); + let status = getState().getIn(['statuses', id]); + + if (status.get('poll')) { + status = status.set('poll', getState().getIn(['polls', status.get('poll')])); + } dispatch(deleteStatusRequest(id)); diff --git a/app/javascript/mastodon/components/poll.js b/app/javascript/mastodon/components/poll.js index 182491af8..bfff7b601 100644 --- a/app/javascript/mastodon/components/poll.js +++ b/app/javascript/mastodon/components/poll.js @@ -7,6 +7,8 @@ import classNames from 'classnames'; import { vote, fetchPoll } from 'mastodon/actions/polls'; import Motion from 'mastodon/features/ui/util/optional_motion'; import spring from 'react-motion/lib/spring'; +import escapeTextContentForBrowser from 'escape-html'; +import emojify from 'mastodon/features/emoji/emoji'; const messages = defineMessages({ moments: { id: 'time_remaining.moments', defaultMessage: 'Moments remaining' }, @@ -120,7 +122,7 @@ class Poll extends ImmutablePureComponent { {!showResults && <span className={classNames('poll__input', { checkbox: poll.get('multiple'), active })} />} {showResults && <span className='poll__number'>{Math.round(percent)}%</span>} - {option.get('title')} + <span dangerouslySetInnerHTML={{ __html: option.get('title_emojified', emojify(escapeTextContentForBrowser(option.get('title')))) }} /> </label> </li> ); diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index 8909b39fd..d47b788ce 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -5,12 +5,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import ReplyIndicatorContainer from '../containers/reply_indicator_container'; import AutosuggestTextarea from '../../../components/autosuggest_textarea'; +import PollButtonContainer from '../containers/poll_button_container'; import UploadButtonContainer from '../containers/upload_button_container'; import { defineMessages, injectIntl } from 'react-intl'; import SpoilerButtonContainer from '../containers/spoiler_button_container'; import PrivacyDropdownContainer from '../containers/privacy_dropdown_container'; import SensitiveButtonContainer from '../containers/sensitive_button_container'; import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container'; +import PollFormContainer from '../containers/poll_form_container'; import UploadFormContainer from '../containers/upload_form_container'; import WarningContainer from '../containers/warning_container'; import { isMobile } from '../../../is_mobile'; @@ -206,11 +208,13 @@ class ComposeForm extends ImmutablePureComponent { <div className='compose-form__modifiers'> <UploadFormContainer /> + <PollFormContainer /> </div> <div className='compose-form__buttons-wrapper'> <div className='compose-form__buttons'> <UploadButtonContainer /> + <PollButtonContainer /> <PrivacyDropdownContainer /> <SensitiveButtonContainer /> <SpoilerButtonContainer /> diff --git a/app/javascript/mastodon/features/compose/components/poll_button.js b/app/javascript/mastodon/features/compose/components/poll_button.js new file mode 100644 index 000000000..76f96bfa4 --- /dev/null +++ b/app/javascript/mastodon/features/compose/components/poll_button.js @@ -0,0 +1,55 @@ +import React from 'react'; +import IconButton from '../../../components/icon_button'; +import PropTypes from 'prop-types'; +import { defineMessages, injectIntl } from 'react-intl'; + +const messages = defineMessages({ + add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' }, + remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' }, +}); + +const iconStyle = { + height: null, + lineHeight: '27px', +}; + +export default +@injectIntl +class PollButton extends React.PureComponent { + + static propTypes = { + disabled: PropTypes.bool, + unavailable: PropTypes.bool, + active: PropTypes.bool, + onClick: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + handleClick = () => { + this.props.onClick(); + } + + render () { + const { intl, active, unavailable, disabled } = this.props; + + if (unavailable) { + return null; + } + + return ( + <div className='compose-form__poll-button'> + <IconButton + icon='tasks' + title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)} + disabled={disabled} + onClick={this.handleClick} + className={`compose-form__poll-button-icon ${active ? 'active' : ''}`} + size={18} + inverted + style={iconStyle} + /> + </div> + ); + } + +} diff --git a/app/javascript/mastodon/features/compose/components/poll_form.js b/app/javascript/mastodon/features/compose/components/poll_form.js new file mode 100644 index 000000000..ff0062425 --- /dev/null +++ b/app/javascript/mastodon/features/compose/components/poll_form.js @@ -0,0 +1,121 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import IconButton from 'mastodon/components/icon_button'; +import Icon from 'mastodon/components/icon'; +import classNames from 'classnames'; + +const messages = defineMessages({ + option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' }, + add_option: { id: 'compose_form.poll.add_option', defaultMessage: 'Add a choice' }, + remove_option: { id: 'compose_form.poll.remove_option', defaultMessage: 'Remove this choice' }, + poll_duration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll duration' }, + minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' }, + hours: { id: 'intervals.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}}' }, + days: { id: 'intervals.full.days', defaultMessage: '{number, plural, one {# day} other {# days}}' }, +}); + +@injectIntl +class Option extends React.PureComponent { + + static propTypes = { + title: PropTypes.string.isRequired, + index: PropTypes.number.isRequired, + isPollMultiple: PropTypes.bool, + onChange: PropTypes.func.isRequired, + onRemove: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + handleOptionTitleChange = e => { + this.props.onChange(this.props.index, e.target.value); + }; + + handleOptionRemove = () => { + this.props.onRemove(this.props.index); + }; + + render () { + const { isPollMultiple, title, index, intl } = this.props; + + return ( + <li> + <label className='poll__text editable'> + <span className={classNames('poll__input', { checkbox: isPollMultiple })} /> + + <input + type='text' + placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })} + maxlength={25} + value={title} + onChange={this.handleOptionTitleChange} + /> + </label> + + <div className='poll__cancel'> + <IconButton disabled={index <= 1} title={intl.formatMessage(messages.remove_option)} icon='times' onClick={this.handleOptionRemove} /> + </div> + </li> + ); + } + +} + +export default +@injectIntl +class PollForm extends ImmutablePureComponent { + + static propTypes = { + options: ImmutablePropTypes.list, + expiresIn: PropTypes.number, + isMultiple: PropTypes.bool, + onChangeOption: PropTypes.func.isRequired, + onAddOption: PropTypes.func.isRequired, + onRemoveOption: PropTypes.func.isRequired, + onChangeSettings: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + handleAddOption = () => { + this.props.onAddOption(''); + }; + + handleSelectDuration = e => { + this.props.onChangeSettings(e.target.value, this.props.isMultiple); + }; + + render () { + const { options, expiresIn, isMultiple, onChangeOption, onRemoveOption, intl } = this.props; + + if (!options) { + return null; + } + + return ( + <div className='compose-form__poll-wrapper'> + <ul> + {options.map((title, i) => <Option title={title} key={i} index={i} onChange={onChangeOption} onRemove={onRemoveOption} isPollMultiple={isMultiple} />)} + </ul> + + <div className='poll__footer'> + {options.size < 4 && ( + <button className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button> + )} + + <select value={expiresIn} onChange={this.handleSelectDuration}> + <option value={300}>{intl.formatMessage(messages.minutes, { number: 5 })}</option> + <option value={1800}>{intl.formatMessage(messages.minutes, { number: 30 })}</option> + <option value={3600}>{intl.formatMessage(messages.hours, { number: 1 })}</option> + <option value={21600}>{intl.formatMessage(messages.hours, { number: 6 })}</option> + <option value={86400}>{intl.formatMessage(messages.days, { number: 1 })}</option> + <option value={259200}>{intl.formatMessage(messages.days, { number: 3 })}</option> + <option value={604800}>{intl.formatMessage(messages.days, { number: 7 })}</option> + </select> + </div> + </div> + ); + } + +} diff --git a/app/javascript/mastodon/features/compose/components/upload_button.js b/app/javascript/mastodon/features/compose/components/upload_button.js index db55ad70b..90e2769f3 100644 --- a/app/javascript/mastodon/features/compose/components/upload_button.js +++ b/app/javascript/mastodon/features/compose/components/upload_button.js @@ -29,6 +29,7 @@ class UploadButton extends ImmutablePureComponent { static propTypes = { disabled: PropTypes.bool, + unavailable: PropTypes.bool, onSelectFile: PropTypes.func.isRequired, style: PropTypes.object, resetFileKey: PropTypes.number, @@ -51,8 +52,11 @@ class UploadButton extends ImmutablePureComponent { } render () { + const { intl, resetFileKey, unavailable, disabled, acceptContentTypes } = this.props; - const { intl, resetFileKey, disabled, acceptContentTypes } = this.props; + if (unavailable) { + return null; + } return ( <div className='compose-form__upload-button'> diff --git a/app/javascript/mastodon/features/compose/containers/poll_button_container.js b/app/javascript/mastodon/features/compose/containers/poll_button_container.js new file mode 100644 index 000000000..8f1cb7c10 --- /dev/null +++ b/app/javascript/mastodon/features/compose/containers/poll_button_container.js @@ -0,0 +1,24 @@ +import { connect } from 'react-redux'; +import PollButton from '../components/poll_button'; +import { addPoll, removePoll } from '../../../actions/compose'; + +const mapStateToProps = state => ({ + unavailable: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 0), + active: state.getIn(['compose', 'poll']) !== null, +}); + +const mapDispatchToProps = dispatch => ({ + + onClick () { + dispatch((_, getState) => { + if (getState().getIn(['compose', 'poll'])) { + dispatch(removePoll()); + } else { + dispatch(addPoll()); + } + }); + }, + +}); + +export default connect(mapStateToProps, mapDispatchToProps)(PollButton); diff --git a/app/javascript/mastodon/features/compose/containers/poll_form_container.js b/app/javascript/mastodon/features/compose/containers/poll_form_container.js new file mode 100644 index 000000000..da795a291 --- /dev/null +++ b/app/javascript/mastodon/features/compose/containers/poll_form_container.js @@ -0,0 +1,29 @@ +import { connect } from 'react-redux'; +import PollForm from '../components/poll_form'; +import { addPollOption, removePollOption, changePollOption, changePollSettings } from '../../../actions/compose'; + +const mapStateToProps = state => ({ + options: state.getIn(['compose', 'poll', 'options']), + expiresIn: state.getIn(['compose', 'poll', 'expires_in']), + isMultiple: state.getIn(['compose', 'poll', 'multiple']), +}); + +const mapDispatchToProps = dispatch => ({ + onAddOption(title) { + dispatch(addPollOption(title)); + }, + + onRemoveOption(index) { + dispatch(removePollOption(index)); + }, + + onChangeOption(index, title) { + dispatch(changePollOption(index, title)); + }, + + onChangeSettings(expiresIn, isMultiple) { + dispatch(changePollSettings(expiresIn, isMultiple)); + }, +}); + +export default connect(mapStateToProps, mapDispatchToProps)(PollForm); diff --git a/app/javascript/mastodon/features/compose/containers/upload_button_container.js b/app/javascript/mastodon/features/compose/containers/upload_button_container.js index 1f1d915bc..d8b8c4b6e 100644 --- a/app/javascript/mastodon/features/compose/containers/upload_button_container.js +++ b/app/javascript/mastodon/features/compose/containers/upload_button_container.js @@ -4,6 +4,7 @@ import { uploadCompose } from '../../../actions/compose'; const mapStateToProps = state => ({ disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')), + unavailable: state.getIn(['compose', 'poll']) !== null, resetFileKey: state.getIn(['compose', 'resetFileKey']), }); diff --git a/app/javascript/mastodon/reducers/compose.js b/app/javascript/mastodon/reducers/compose.js index 1622871b8..b45def281 100644 --- a/app/javascript/mastodon/reducers/compose.js +++ b/app/javascript/mastodon/reducers/compose.js @@ -29,6 +29,12 @@ import { COMPOSE_UPLOAD_CHANGE_SUCCESS, COMPOSE_UPLOAD_CHANGE_FAIL, COMPOSE_RESET, + COMPOSE_POLL_ADD, + COMPOSE_POLL_REMOVE, + COMPOSE_POLL_OPTION_ADD, + COMPOSE_POLL_OPTION_CHANGE, + COMPOSE_POLL_OPTION_REMOVE, + COMPOSE_POLL_SETTINGS_CHANGE, } from '../actions/compose'; import { TIMELINE_DELETE } from '../actions/timelines'; import { STORE_HYDRATE } from '../actions/store'; @@ -55,6 +61,7 @@ const initialState = ImmutableMap({ is_uploading: false, progress: 0, media_attachments: ImmutableList(), + poll: null, suggestion_token: null, suggestions: ImmutableList(), default_privacy: 'public', @@ -64,6 +71,12 @@ const initialState = ImmutableMap({ tagHistory: ImmutableList(), }); +const initialPoll = ImmutableMap({ + options: ImmutableList(['', '']), + expires_in: 24 * 3600, + multiple: false, +}); + function statusToTextMentions(state, status) { let set = ImmutableOrderedSet([]); @@ -85,6 +98,7 @@ function clearAll(state) { map.set('privacy', state.get('default_privacy')); map.set('sensitive', false); map.update('media_attachments', list => list.clear()); + map.set('poll', null); map.set('idempotencyKey', uuid()); }); }; @@ -247,6 +261,7 @@ export default function compose(state = initialState, action) { map.set('spoiler', false); map.set('spoiler_text', ''); map.set('privacy', state.get('default_privacy')); + map.set('poll', null); map.set('idempotencyKey', uuid()); }); case COMPOSE_SUBMIT_REQUEST: @@ -329,7 +344,27 @@ export default function compose(state = initialState, action) { map.set('spoiler', false); map.set('spoiler_text', ''); } + + if (action.status.get('poll')) { + map.set('poll', ImmutableMap({ + options: action.status.getIn(['poll', 'options']).map(x => x.get('title')), + multiple: action.status.getIn(['poll', 'multiple']), + expires_in: 24 * 3600, + })); + } }); + case COMPOSE_POLL_ADD: + return state.set('poll', initialPoll); + case COMPOSE_POLL_REMOVE: + return state.set('poll', null); + case COMPOSE_POLL_OPTION_ADD: + return state.updateIn(['poll', 'options'], options => options.push(action.title)); + case COMPOSE_POLL_OPTION_CHANGE: + return state.setIn(['poll', 'options', action.index], action.title); + case COMPOSE_POLL_OPTION_REMOVE: + return state.updateIn(['poll', 'options'], options => options.delete(action.index)); + case COMPOSE_POLL_SETTINGS_CHANGE: + return state.update('poll', poll => poll.set('expires_in', action.expiresIn).set('multiple', action.isMultiple)); default: return state; } diff --git a/app/javascript/mastodon/reducers/polls.js b/app/javascript/mastodon/reducers/polls.js index 53d9b1d8c..9956cf83f 100644 --- a/app/javascript/mastodon/reducers/polls.js +++ b/app/javascript/mastodon/reducers/polls.js @@ -1,4 +1,3 @@ -import { POLL_VOTE_SUCCESS, POLL_FETCH_SUCCESS } from 'mastodon/actions/polls'; import { POLLS_IMPORT } from 'mastodon/actions/importer'; import { Map as ImmutableMap, fromJS } from 'immutable'; @@ -10,9 +9,6 @@ export default function polls(state = initialState, action) { switch(action.type) { case POLLS_IMPORT: return importPolls(state, action.polls); - case POLL_VOTE_SUCCESS: - case POLL_FETCH_SUCCESS: - return importPolls(state, [action.poll]); default: return state; } diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index 7c6e61d63..4f8c94d83 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -5,6 +5,7 @@ li { margin-bottom: 10px; position: relative; + height: 18px + 12px; } &__chart { @@ -27,15 +28,43 @@ padding: 6px 0; line-height: 18px; cursor: default; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; input[type=radio], input[type=checkbox] { display: none; } + input[type=text] { + display: block; + box-sizing: border-box; + flex: 1 1 auto; + width: 20px; + font-size: 14px; + color: $inverted-text-color; + display: block; + outline: 0; + font-family: inherit; + background: $simple-background-color; + border: 1px solid darken($simple-background-color, 14%); + border-radius: 4px; + padding: 6px 10px; + + &:focus { + border-color: $highlight-text-color; + } + } + &.selectable { cursor: pointer; } + + &.editable { + display: flex; + align-items: center; + } } &__input { @@ -45,6 +74,7 @@ box-sizing: border-box; width: 18px; height: 18px; + flex: 0 0 auto; margin-right: 10px; top: -1px; border-radius: 50%; @@ -98,3 +128,65 @@ font-size: 14px; } } + +.compose-form__poll-wrapper { + border-top: 1px solid darken($simple-background-color, 8%); + + ul { + padding: 10px; + } + + .poll__footer { + border-top: 1px solid darken($simple-background-color, 8%); + padding: 10px; + display: flex; + align-items: center; + + button, + select { + flex: 1 1 50%; + } + } + + .button.button-secondary { + font-size: 14px; + font-weight: 400; + padding: 6px 10px; + height: auto; + line-height: inherit; + color: $action-button-color; + border-color: $action-button-color; + margin-right: 5px; + } + + li { + display: flex; + align-items: center; + + .poll__text { + flex: 0 0 auto; + width: calc(100% - (23px + 6px)); + margin-right: 6px; + } + } + + select { + appearance: none; + box-sizing: border-box; + font-size: 14px; + color: $inverted-text-color; + display: inline-block; + width: auto; + outline: 0; + font-family: inherit; + background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px; + border: 1px solid darken($simple-background-color, 14%); + border-radius: 4px; + padding: 6px 10px; + padding-right: 30px; + } + + .icon-button.disabled { + color: darken($simple-background-color, 14%); + } +} diff --git a/app/validators/poll_validator.rb b/app/validators/poll_validator.rb index d4ae4c16a..fd497c8d0 100644 --- a/app/validators/poll_validator.rb +++ b/app/validators/poll_validator.rb @@ -13,7 +13,7 @@ class PollValidator < ActiveModel::Validator poll.errors.add(:options, I18n.t('polls.errors.too_many_options', max: MAX_OPTIONS)) if poll.options.size > MAX_OPTIONS poll.errors.add(:options, I18n.t('polls.errors.over_character_limit', max: MAX_OPTION_CHARS)) if poll.options.any? { |option| option.mb_chars.grapheme_length > MAX_OPTION_CHARS } poll.errors.add(:options, I18n.t('polls.errors.duplicate_options')) unless poll.options.uniq.size == poll.options.size - poll.errors.add(:expires_at, I18n.t('polls.errors.duration_too_long')) if poll.expires_at.nil? || poll.expires_at - current_time >= MAX_EXPIRATION - poll.errors.add(:expires_at, I18n.t('polls.errors.duration_too_short')) if poll.expires_at.present? && poll.expires_at - current_time <= MIN_EXPIRATION + poll.errors.add(:expires_at, I18n.t('polls.errors.duration_too_long')) if poll.expires_at.nil? || poll.expires_at - current_time > MAX_EXPIRATION + poll.errors.add(:expires_at, I18n.t('polls.errors.duration_too_short')) if poll.expires_at.present? && poll.expires_at - current_time < MIN_EXPIRATION end end diff --git a/config/locales/co.yml b/config/locales/co.yml index d30fc9e96..8fcb27598 100644 --- a/config/locales/co.yml +++ b/config/locales/co.yml @@ -741,9 +741,9 @@ co: duration_too_long: hè troppu luntanu indè u futuru duration_too_short: hè troppu prossimu expired: U scandagliu hè digià finitu - over_character_limit: ùn ponu micca esse più longhi chè %{MAX} caratteri + over_character_limit: ùn ponu micca esse più longhi chè %{max} caratteri too_few_options: deve avè più d'un'uzzione - too_many_options: ùn pò micca avè più di %{MAX} uzzione + too_many_options: ùn pò micca avè più di %{max} uzzione preferences: languages: Lingue other: Altre diff --git a/config/locales/cs.yml b/config/locales/cs.yml index e751b5266..fe83bd57a 100644 --- a/config/locales/cs.yml +++ b/config/locales/cs.yml @@ -752,9 +752,9 @@ cs: duration_too_long: je příliš daleko v budoucnosti duration_too_short: je příliš brzy expired: Anketa již skončila - over_character_limit: nesmí být každá delší než %{MAX} znaků + over_character_limit: nesmí být každá delší než %{max} znaků too_few_options: musí mít více než jednu položku - too_many_options: nesmí obsahovat více než %{MAX} položky + too_many_options: nesmí obsahovat více než %{max} položky preferences: languages: Jazyky other: Ostatní diff --git a/config/locales/el.yml b/config/locales/el.yml index ca821c4fc..35da50af7 100644 --- a/config/locales/el.yml +++ b/config/locales/el.yml @@ -740,9 +740,9 @@ el: duration_too_long: είναι πολύ μακριά στο μέλλον duration_too_short: είναι πολύ σύντομα expired: Η ψηφοφορία έχει ήδη λήξει - over_character_limit: δε μπορεί να υπερβαίνει τους %{MAX} χαρακτήρες έκαστη + over_character_limit: δε μπορεί να υπερβαίνει τους %{max} χαρακτήρες έκαστη too_few_options: πρέπει να έχει περισσότερες από μια επιλογές - too_many_options: δεν μπορεί να έχει περισσότερες από %{MAX} επιλογές + too_many_options: δεν μπορεί να έχει περισσότερες από %{max} επιλογές preferences: languages: Γλώσσες other: Άλλο diff --git a/config/locales/en.yml b/config/locales/en.yml index 05f6243df..b77387890 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -745,9 +745,9 @@ en: duration_too_long: is too far into the future duration_too_short: is too soon expired: The poll has already ended - over_character_limit: cannot be longer than %{MAX} characters each + over_character_limit: cannot be longer than %{max} characters each too_few_options: must have more than one item - too_many_options: can't contain more than %{MAX} items + too_many_options: can't contain more than %{max} items preferences: languages: Languages other: Other diff --git a/config/locales/fa.yml b/config/locales/fa.yml index 4cf8f415c..4214e793c 100644 --- a/config/locales/fa.yml +++ b/config/locales/fa.yml @@ -741,9 +741,9 @@ fa: duration_too_long: در آیندهٔ خیلی دور است duration_too_short: در آیندهٔ خیلی نزدیک است expired: این نظرسنجی به پایان رسیده است - over_character_limit: هر کدام نمیتواند از %{MAX} نویسه طولانیتر باشد + over_character_limit: هر کدام نمیتواند از %{max} نویسه طولانیتر باشد too_few_options: حتماً باید بیش از یک گزینه داشته باشد - too_many_options: نمیتواند بیشتر از %{MAX} گزینه داشته باشد + too_many_options: نمیتواند بیشتر از %{max} گزینه داشته باشد preferences: languages: تنظیمات زبان other: سایر تنظیمات diff --git a/config/locales/fr.yml b/config/locales/fr.yml index c84dc8063..b9d813e9e 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -741,9 +741,9 @@ fr: duration_too_long: est trop loin dans le futur duration_too_short: est trop tôt expired: Ce sondage est déjà terminé - over_character_limit: ne peuvent être plus long que %{MAX} caractères chacun + over_character_limit: ne peuvent être plus long que %{max} caractères chacun too_few_options: doit avoir plus qu'une proposition - too_many_options: ne peut contenir plus que %{MAX} propositions + too_many_options: ne peut contenir plus que %{max} propositions preferences: languages: Langues other: Autre diff --git a/config/locales/gl.yml b/config/locales/gl.yml index 3c58e04f5..2435137f9 100644 --- a/config/locales/gl.yml +++ b/config/locales/gl.yml @@ -741,9 +741,9 @@ gl: duration_too_long: está moi lonxe no futuro duration_too_short: é demasiado cedo expired: A sondaxe rematou - over_character_limit: non poden ter máis de %{MAX} caracteres cada unha + over_character_limit: non poden ter máis de %{max} caracteres cada unha too_few_options: debe ter máis de unha opción - too_many_options: non pode haber máis de %{MAX} opcións + too_many_options: non pode haber máis de %{max} opcións preferences: languages: Idiomas other: Outro diff --git a/config/locales/ko.yml b/config/locales/ko.yml index 6fa18b12a..fe347a703 100644 --- a/config/locales/ko.yml +++ b/config/locales/ko.yml @@ -743,9 +743,9 @@ ko: duration_too_long: 너무 먼 미래입니다 duration_too_short: 너무 가깝습니다 expired: 투표가 이미 끝났습니다 - over_character_limit: 각각 %{MAX} 글자를 넘을 수 없습니다 + over_character_limit: 각각 %{max} 글자를 넘을 수 없습니다 too_few_options: 한가지 이상의 항목을 포함해야 합니다 - too_many_options: 항목은 %{MAX}개를 넘을 수 없습니다 + too_many_options: 항목은 %{max}개를 넘을 수 없습니다 preferences: languages: 언어 other: 기타 diff --git a/config/locales/sk.yml b/config/locales/sk.yml index b29a7a934..0800b8f8c 100644 --- a/config/locales/sk.yml +++ b/config/locales/sk.yml @@ -752,9 +752,9 @@ sk: duration_too_long: je príliš ďaleko do budúcnosti duration_too_short: je príliš skoro expired: Anketa už skončila - over_character_limit: každá nemôže byť dlhšia ako %{MAX} znakov + over_character_limit: každá nemôže byť dlhšia ako %{max} znakov too_few_options: musí mať viac ako jednu položku - too_many_options: nemôže zahŕňať viac ako %{MAX} položiek + too_many_options: nemôže zahŕňať viac ako %{max} položiek preferences: languages: Jazyky other: Ostatné |