[Glitch] Port polls creation UI from upstream

This commit is contained in:
Thibaut Girka 2019-03-06 12:30:11 +01:00 committed by ThibG
parent 3e5a0bc825
commit 8fe86cebaa
9 changed files with 403 additions and 20 deletions

View File

@ -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,
};
};

View File

@ -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));

View File

@ -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}

View File

@ -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,

View File

@ -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>
);
}
}

View File

@ -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);

View File

@ -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;
} }

View File

@ -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%);

View File

@ -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%);
}
}