[Glitch] Port polls creation UI from upstream
parent
3e5a0bc825
commit
8fe86cebaa
|
@ -55,6 +55,13 @@ export const COMPOSE_UPLOAD_CHANGE_FAIL = 'COMPOSE_UPLOAD_UPDATE_FAIL';
|
||||||
|
|
||||||
export const COMPOSE_DOODLE_SET = 'COMPOSE_DOODLE_SET';
|
export const COMPOSE_DOODLE_SET = 'COMPOSE_DOODLE_SET';
|
||||||
|
|
||||||
|
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({
|
const messages = defineMessages({
|
||||||
uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
|
uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
|
||||||
});
|
});
|
||||||
|
@ -144,6 +151,7 @@ export function submitCompose(routerHistory) {
|
||||||
sensitive: getState().getIn(['compose', 'sensitive']) || (spoilerText.length > 0 && media.size !== 0),
|
sensitive: getState().getIn(['compose', 'sensitive']) || (spoilerText.length > 0 && media.size !== 0),
|
||||||
spoiler_text: spoilerText,
|
spoiler_text: spoilerText,
|
||||||
visibility: getState().getIn(['compose', 'privacy']),
|
visibility: getState().getIn(['compose', 'privacy']),
|
||||||
|
poll: getState().getIn(['compose', 'poll'], null),
|
||||||
}, {
|
}, {
|
||||||
headers: {
|
headers: {
|
||||||
'Idempotency-Key': getState().getIn(['compose', 'idempotencyKey']),
|
'Idempotency-Key': getState().getIn(['compose', 'idempotencyKey']),
|
||||||
|
@ -504,3 +512,45 @@ export function insertEmojiCompose(position, emoji) {
|
||||||
emoji,
|
emoji,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
|
@ -80,7 +80,11 @@ export function redraft(status) {
|
||||||
|
|
||||||
export function deleteStatus(id, router, withRedraft = false) {
|
export function deleteStatus(id, router, withRedraft = false) {
|
||||||
return (dispatch, getState) => {
|
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));
|
dispatch(deleteStatusRequest(id));
|
||||||
|
|
||||||
|
|
|
@ -31,6 +31,7 @@ import {
|
||||||
openModal,
|
openModal,
|
||||||
} from 'flavours/glitch/actions/modal';
|
} from 'flavours/glitch/actions/modal';
|
||||||
import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
|
import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
|
||||||
|
import { addPoll, removePoll } from 'flavours/glitch/actions/compose';
|
||||||
|
|
||||||
// Components.
|
// Components.
|
||||||
import ComposerOptions from './options';
|
import ComposerOptions from './options';
|
||||||
|
@ -39,6 +40,7 @@ import ComposerReply from './reply';
|
||||||
import ComposerSpoiler from './spoiler';
|
import ComposerSpoiler from './spoiler';
|
||||||
import ComposerTextarea from './textarea';
|
import ComposerTextarea from './textarea';
|
||||||
import ComposerUploadForm from './upload_form';
|
import ComposerUploadForm from './upload_form';
|
||||||
|
import ComposerPollForm from './poll_form';
|
||||||
import ComposerWarning from './warning';
|
import ComposerWarning from './warning';
|
||||||
import ComposerHashtagWarning from './hashtag_warning';
|
import ComposerHashtagWarning from './hashtag_warning';
|
||||||
import ComposerDirectWarning from './direct_warning';
|
import ComposerDirectWarning from './direct_warning';
|
||||||
|
@ -102,6 +104,7 @@ function mapStateToProps (state) {
|
||||||
suggestions: state.getIn(['compose', 'suggestions']),
|
suggestions: state.getIn(['compose', 'suggestions']),
|
||||||
text: state.getIn(['compose', 'text']),
|
text: state.getIn(['compose', 'text']),
|
||||||
anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
|
anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
|
||||||
|
poll: state.getIn(['compose', 'poll']),
|
||||||
spoilersAlwaysOn: spoilersAlwaysOn,
|
spoilersAlwaysOn: spoilersAlwaysOn,
|
||||||
mediaDescriptionConfirmation: state.getIn(['local_settings', 'confirm_missing_media_description']),
|
mediaDescriptionConfirmation: state.getIn(['local_settings', 'confirm_missing_media_description']),
|
||||||
preselectOnReply: state.getIn(['local_settings', 'preselect_on_reply']),
|
preselectOnReply: state.getIn(['local_settings', 'preselect_on_reply']),
|
||||||
|
@ -134,6 +137,15 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
||||||
onChangeVisibility(value) {
|
onChangeVisibility(value) {
|
||||||
dispatch(changeComposeVisibility(value));
|
dispatch(changeComposeVisibility(value));
|
||||||
},
|
},
|
||||||
|
onTogglePoll() {
|
||||||
|
dispatch((_, getState) => {
|
||||||
|
if (getState().getIn(['compose', 'poll'])) {
|
||||||
|
dispatch(removePoll());
|
||||||
|
} else {
|
||||||
|
dispatch(addPoll());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
onClearSuggestions() {
|
onClearSuggestions() {
|
||||||
dispatch(clearComposeSuggestions());
|
dispatch(clearComposeSuggestions());
|
||||||
},
|
},
|
||||||
|
@ -394,6 +406,7 @@ class Composer extends React.Component {
|
||||||
isUploading,
|
isUploading,
|
||||||
layout,
|
layout,
|
||||||
media,
|
media,
|
||||||
|
poll,
|
||||||
onCancelReply,
|
onCancelReply,
|
||||||
onChangeAdvancedOption,
|
onChangeAdvancedOption,
|
||||||
onChangeDescription,
|
onChangeDescription,
|
||||||
|
@ -401,6 +414,7 @@ class Composer extends React.Component {
|
||||||
onChangeSpoilerness,
|
onChangeSpoilerness,
|
||||||
onChangeText,
|
onChangeText,
|
||||||
onChangeVisibility,
|
onChangeVisibility,
|
||||||
|
onTogglePoll,
|
||||||
onClearSuggestions,
|
onClearSuggestions,
|
||||||
onCloseModal,
|
onCloseModal,
|
||||||
onFetchSuggestions,
|
onFetchSuggestions,
|
||||||
|
@ -463,30 +477,38 @@ class Composer extends React.Component {
|
||||||
suggestions={suggestions}
|
suggestions={suggestions}
|
||||||
value={text}
|
value={text}
|
||||||
/>
|
/>
|
||||||
{isUploading || media && media.size ? (
|
<div className='compose-form__modifiers'>
|
||||||
<ComposerUploadForm
|
{isUploading || media && media.size ? (
|
||||||
intl={intl}
|
<ComposerUploadForm
|
||||||
media={media}
|
intl={intl}
|
||||||
onChangeDescription={onChangeDescription}
|
media={media}
|
||||||
onOpenFocalPointModal={onOpenFocalPointModal}
|
onChangeDescription={onChangeDescription}
|
||||||
onRemove={onUndoUpload}
|
onOpenFocalPointModal={onOpenFocalPointModal}
|
||||||
progress={progress}
|
onRemove={onUndoUpload}
|
||||||
uploading={isUploading}
|
progress={progress}
|
||||||
handleRef={handleRefUploadForm}
|
uploading={isUploading}
|
||||||
/>
|
handleRef={handleRefUploadForm}
|
||||||
) : null}
|
/>
|
||||||
|
) : null}
|
||||||
|
{!!poll && (
|
||||||
|
<ComposerPollForm />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
<ComposerOptions
|
<ComposerOptions
|
||||||
acceptContentTypes={acceptContentTypes}
|
acceptContentTypes={acceptContentTypes}
|
||||||
advancedOptions={advancedOptions}
|
advancedOptions={advancedOptions}
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
full={media ? media.size >= 4 || media.some(
|
allowMedia={!poll && (media ? media.size < 4 && !media.some(
|
||||||
item => item.get('type') === 'video'
|
item => item.get('type') === 'video'
|
||||||
) : false}
|
) : true)}
|
||||||
hasMedia={media && !!media.size}
|
hasMedia={media && !!media.size}
|
||||||
|
allowPoll={!(media && !!media.size)}
|
||||||
|
hasPoll={!!poll}
|
||||||
intl={intl}
|
intl={intl}
|
||||||
onChangeAdvancedOption={onChangeAdvancedOption}
|
onChangeAdvancedOption={onChangeAdvancedOption}
|
||||||
onChangeSensitivity={onChangeSensitivity}
|
onChangeSensitivity={onChangeSensitivity}
|
||||||
onChangeVisibility={onChangeVisibility}
|
onChangeVisibility={onChangeVisibility}
|
||||||
|
onTogglePoll={onTogglePoll}
|
||||||
onDoodleOpen={onOpenDoodleModal}
|
onDoodleOpen={onOpenDoodleModal}
|
||||||
onModalClose={onCloseModal}
|
onModalClose={onCloseModal}
|
||||||
onModalOpen={onOpenActionsModal}
|
onModalOpen={onOpenActionsModal}
|
||||||
|
|
|
@ -98,6 +98,14 @@ const messages = defineMessages({
|
||||||
defaultMessage: 'Upload a file',
|
defaultMessage: 'Upload a file',
|
||||||
id: 'compose.attach.upload',
|
id: 'compose.attach.upload',
|
||||||
},
|
},
|
||||||
|
add_poll: {
|
||||||
|
defaultMessage: 'Add a poll',
|
||||||
|
id: 'poll_button.add_poll',
|
||||||
|
},
|
||||||
|
remove_poll: {
|
||||||
|
defaultMessage: 'Remove poll',
|
||||||
|
id: 'poll_button.remove_poll',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Handlers.
|
// Handlers.
|
||||||
|
@ -160,12 +168,15 @@ export default class ComposerOptions extends React.PureComponent {
|
||||||
acceptContentTypes,
|
acceptContentTypes,
|
||||||
advancedOptions,
|
advancedOptions,
|
||||||
disabled,
|
disabled,
|
||||||
full,
|
allowMedia,
|
||||||
hasMedia,
|
hasMedia,
|
||||||
|
allowPoll,
|
||||||
|
hasPoll,
|
||||||
intl,
|
intl,
|
||||||
onChangeAdvancedOption,
|
onChangeAdvancedOption,
|
||||||
onChangeSensitivity,
|
onChangeSensitivity,
|
||||||
onChangeVisibility,
|
onChangeVisibility,
|
||||||
|
onTogglePoll,
|
||||||
onModalClose,
|
onModalClose,
|
||||||
onModalOpen,
|
onModalOpen,
|
||||||
onToggleSpoiler,
|
onToggleSpoiler,
|
||||||
|
@ -209,7 +220,7 @@ export default class ComposerOptions extends React.PureComponent {
|
||||||
<div className='composer--options'>
|
<div className='composer--options'>
|
||||||
<input
|
<input
|
||||||
accept={acceptContentTypes}
|
accept={acceptContentTypes}
|
||||||
disabled={disabled || full}
|
disabled={disabled || !allowMedia}
|
||||||
key={resetFileKey}
|
key={resetFileKey}
|
||||||
onChange={handleChangeFiles}
|
onChange={handleChangeFiles}
|
||||||
ref={handleRefFileElement}
|
ref={handleRefFileElement}
|
||||||
|
@ -218,7 +229,7 @@ export default class ComposerOptions extends React.PureComponent {
|
||||||
{...hiddenComponent}
|
{...hiddenComponent}
|
||||||
/>
|
/>
|
||||||
<Dropdown
|
<Dropdown
|
||||||
disabled={disabled || full}
|
disabled={disabled || !allowMedia}
|
||||||
icon='paperclip'
|
icon='paperclip'
|
||||||
items={[
|
items={[
|
||||||
{
|
{
|
||||||
|
@ -237,6 +248,19 @@ export default class ComposerOptions extends React.PureComponent {
|
||||||
onModalOpen={onModalOpen}
|
onModalOpen={onModalOpen}
|
||||||
title={intl.formatMessage(messages.attach)}
|
title={intl.formatMessage(messages.attach)}
|
||||||
/>
|
/>
|
||||||
|
<IconButton
|
||||||
|
active={hasPoll}
|
||||||
|
disabled={disabled || !allowPoll}
|
||||||
|
icon='tasks'
|
||||||
|
inverted
|
||||||
|
onClick={onTogglePoll}
|
||||||
|
size={18}
|
||||||
|
style={{
|
||||||
|
height: null,
|
||||||
|
lineHeight: null,
|
||||||
|
}}
|
||||||
|
title={intl.formatMessage(hasPoll ? messages.remove_poll : messages.add_poll)}
|
||||||
|
/>
|
||||||
<Motion
|
<Motion
|
||||||
defaultStyle={{ scale: 0.87 }}
|
defaultStyle={{ scale: 0.87 }}
|
||||||
style={{
|
style={{
|
||||||
|
@ -329,12 +353,15 @@ ComposerOptions.propTypes = {
|
||||||
acceptContentTypes: PropTypes.string,
|
acceptContentTypes: PropTypes.string,
|
||||||
advancedOptions: ImmutablePropTypes.map,
|
advancedOptions: ImmutablePropTypes.map,
|
||||||
disabled: PropTypes.bool,
|
disabled: PropTypes.bool,
|
||||||
full: PropTypes.bool,
|
allowMedia: PropTypes.bool,
|
||||||
hasMedia: PropTypes.bool,
|
hasMedia: PropTypes.bool,
|
||||||
|
allowPoll: PropTypes.bool,
|
||||||
|
hasPoll: PropTypes.bool,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
onChangeAdvancedOption: PropTypes.func,
|
onChangeAdvancedOption: PropTypes.func,
|
||||||
onChangeSensitivity: PropTypes.func,
|
onChangeSensitivity: PropTypes.func,
|
||||||
onChangeVisibility: PropTypes.func,
|
onChangeVisibility: PropTypes.func,
|
||||||
|
onTogglePoll: PropTypes.func,
|
||||||
onDoodleOpen: PropTypes.func,
|
onDoodleOpen: PropTypes.func,
|
||||||
onModalClose: PropTypes.func,
|
onModalClose: PropTypes.func,
|
||||||
onModalOpen: PropTypes.func,
|
onModalOpen: PropTypes.func,
|
||||||
|
|
|
@ -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 'flavours/glitch/components/icon_button';
|
||||||
|
import Icon from 'flavours/glitch/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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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);
|
|
@ -31,6 +31,12 @@ import {
|
||||||
COMPOSE_UPLOAD_CHANGE_FAIL,
|
COMPOSE_UPLOAD_CHANGE_FAIL,
|
||||||
COMPOSE_DOODLE_SET,
|
COMPOSE_DOODLE_SET,
|
||||||
COMPOSE_RESET,
|
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 'flavours/glitch/actions/compose';
|
} from 'flavours/glitch/actions/compose';
|
||||||
import { TIMELINE_DELETE } from 'flavours/glitch/actions/timelines';
|
import { TIMELINE_DELETE } from 'flavours/glitch/actions/timelines';
|
||||||
import { STORE_HYDRATE } from 'flavours/glitch/actions/store';
|
import { STORE_HYDRATE } from 'flavours/glitch/actions/store';
|
||||||
|
@ -70,6 +76,7 @@ const initialState = ImmutableMap({
|
||||||
is_changing_upload: false,
|
is_changing_upload: false,
|
||||||
progress: 0,
|
progress: 0,
|
||||||
media_attachments: ImmutableList(),
|
media_attachments: ImmutableList(),
|
||||||
|
poll: null,
|
||||||
suggestion_token: null,
|
suggestion_token: null,
|
||||||
suggestions: ImmutableList(),
|
suggestions: ImmutableList(),
|
||||||
default_advanced_options: ImmutableMap({
|
default_advanced_options: ImmutableMap({
|
||||||
|
@ -94,6 +101,12 @@ const initialState = ImmutableMap({
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const initialPoll = ImmutableMap({
|
||||||
|
options: ImmutableList(['', '']),
|
||||||
|
expires_in: 24 * 3600,
|
||||||
|
multiple: false,
|
||||||
|
});
|
||||||
|
|
||||||
function statusToTextMentions(state, status) {
|
function statusToTextMentions(state, status) {
|
||||||
let set = ImmutableOrderedSet([]);
|
let set = ImmutableOrderedSet([]);
|
||||||
|
|
||||||
|
@ -140,6 +153,7 @@ function clearAll(state) {
|
||||||
map.set('privacy', state.get('default_privacy'));
|
map.set('privacy', state.get('default_privacy'));
|
||||||
map.set('sensitive', false);
|
map.set('sensitive', false);
|
||||||
map.update('media_attachments', list => list.clear());
|
map.update('media_attachments', list => list.clear());
|
||||||
|
map.set('poll', null);
|
||||||
map.set('idempotencyKey', uuid());
|
map.set('idempotencyKey', uuid());
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -336,6 +350,7 @@ export default function compose(state = initialState, action) {
|
||||||
map.set('spoiler', false);
|
map.set('spoiler', false);
|
||||||
map.set('spoiler_text', '');
|
map.set('spoiler_text', '');
|
||||||
map.set('privacy', state.get('default_privacy'));
|
map.set('privacy', state.get('default_privacy'));
|
||||||
|
map.set('poll', null);
|
||||||
map.update(
|
map.update(
|
||||||
'advanced_options',
|
'advanced_options',
|
||||||
map => map.mergeWith(overwrite, state.get('default_advanced_options'))
|
map => map.mergeWith(overwrite, state.get('default_advanced_options'))
|
||||||
|
@ -424,7 +439,27 @@ export default function compose(state = initialState, action) {
|
||||||
map.set('spoiler', false);
|
map.set('spoiler', false);
|
||||||
map.set('spoiler_text', '');
|
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:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
|
@ -368,6 +368,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.compose-form__modifiers {
|
||||||
|
color: $inverted-text-color;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 14px;
|
||||||
|
background: $simple-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
.composer--options {
|
.composer--options {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: darken($simple-background-color, 8%);
|
background: darken($simple-background-color, 8%);
|
||||||
|
|
|
@ -37,9 +37,34 @@
|
||||||
display: none;
|
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 {
|
&.selectable {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.editable {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__input {
|
&__input {
|
||||||
|
@ -49,6 +74,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
flex: 0 0 auto;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
@ -102,3 +128,65 @@
|
||||||
font-size: 14px;
|
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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue