-
+
-
diff --git a/app/javascript/mastodon/components/column_back_button.js b/app/javascript/mastodon/components/column_back_button.js
index 8a60c4192..f41045787 100644
--- a/app/javascript/mastodon/components/column_back_button.js
+++ b/app/javascript/mastodon/components/column_back_button.js
@@ -1,6 +1,7 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
+import Icon from 'mastodon/components/icon';
export default class ColumnBackButton extends React.PureComponent {
@@ -19,7 +20,7 @@ export default class ColumnBackButton extends React.PureComponent {
render () {
return (
);
diff --git a/app/javascript/mastodon/components/column_back_button_slim.js b/app/javascript/mastodon/components/column_back_button_slim.js
index 964c100be..cc8bfb151 100644
--- a/app/javascript/mastodon/components/column_back_button_slim.js
+++ b/app/javascript/mastodon/components/column_back_button_slim.js
@@ -1,6 +1,7 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import ColumnBackButton from './column_back_button';
+import Icon from 'mastodon/components/icon';
export default class ColumnBackButtonSlim extends ColumnBackButton {
@@ -8,7 +9,7 @@ export default class ColumnBackButtonSlim extends ColumnBackButton {
return (
-
+ {showResults && (
+
+ {({ width }) => + + } + + )} + + +
+ );
+ }
+
+ render () {
+ const { poll, intl } = this.props;
+
+ if (!poll) {
+ return null;
+ }
+
+ const timeRemaining = poll.get('expired') ? intl.formatMessage(messages.closed) :
-
+
-
-
+
+
);
} else if (multiColumn) {
- pinButton = ;
+ pinButton = ;
}
if (!pinned && (multiColumn || showBackButton)) {
backButton = (
);
@@ -140,7 +141,7 @@ class ColumnHeader extends React.PureComponent {
}
if (children || multiColumn) {
- collapseButton = ;
+ collapseButton = ;
}
const hasTitle = icon && title;
@@ -150,7 +151,7 @@ class ColumnHeader extends React.PureComponent {
{hasTitle && (
)}
diff --git a/app/javascript/mastodon/components/display_name.js b/app/javascript/mastodon/components/display_name.js
index 32809778a..6b9dd6f81 100644
--- a/app/javascript/mastodon/components/display_name.js
+++ b/app/javascript/mastodon/components/display_name.js
@@ -22,7 +22,7 @@ export default class DisplayName extends React.PureComponent {
suffix = `+${others.size - 2}`;
}
} else {
- if (others) {
+ if (others && others.size > 0) {
account = others.first();
} else {
account = this.props.account;
diff --git a/app/javascript/mastodon/components/error_boundary.js b/app/javascript/mastodon/components/error_boundary.js
new file mode 100644
index 000000000..d1ca5bf75
--- /dev/null
+++ b/app/javascript/mastodon/components/error_boundary.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import illustration from '../../images/elephant_ui_disappointed.svg';
+
+export default class ErrorBoundary extends React.PureComponent {
+
+ static propTypes = {
+ children: PropTypes.node,
+ };
+
+ state = {
+ hasError: false,
+ stackTrace: undefined,
+ componentStack: undefined,
+ }
+
+ componentDidCatch(error, info) {
+ this.setState({
+ hasError: true,
+ stackTrace: error.stack,
+ componentStack: info && info.componentStack,
+ });
+ }
+
+ render() {
+ const { hasError } = this.state;
+
+ if (!hasError) {
+ return this.props.children;
+ }
+
+ return (
+
+ 
+
+ );
+ }
+
+}
diff --git a/app/javascript/mastodon/components/icon.js b/app/javascript/mastodon/components/icon.js
new file mode 100644
index 000000000..d8a17722f
--- /dev/null
+++ b/app/javascript/mastodon/components/icon.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export default class Icon extends React.PureComponent {
+
+ static propTypes = {
+ id: PropTypes.string.isRequired,
+ className: PropTypes.string,
+ fixedWidth: PropTypes.bool,
+ };
+
+ render () {
+ const { id, className, fixedWidth, ...other } = this.props;
+
+ return (
+
+ );
+ }
+
+}
diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js
index b96e48fd0..9d8a8d06b 100644
--- a/app/javascript/mastodon/components/icon_button.js
+++ b/app/javascript/mastodon/components/icon_button.js
@@ -3,6 +3,7 @@ import Motion from '../features/ui/util/optional_motion';
import spring from 'react-motion/lib/spring';
import PropTypes from 'prop-types';
import classNames from 'classnames';
+import Icon from 'mastodon/components/icon';
export default class IconButton extends React.PureComponent {
@@ -85,8 +86,9 @@ export default class IconButton extends React.PureComponent {
onClick={this.handleClick}
style={style}
tabIndex={tabIndex}
+ disabled={disabled}
>
-
+
);
}
@@ -103,8 +105,9 @@ export default class IconButton extends React.PureComponent {
onClick={this.handleClick}
style={style}
tabIndex={tabIndex}
+ disabled={disabled}
>
-
+
)}
diff --git a/app/javascript/mastodon/components/load_gap.js b/app/javascript/mastodon/components/load_gap.js
index ed4d445d0..a44d55d09 100644
--- a/app/javascript/mastodon/components/load_gap.js
+++ b/app/javascript/mastodon/components/load_gap.js
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, defineMessages } from 'react-intl';
+import Icon from 'mastodon/components/icon';
const messages = defineMessages({
load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
@@ -25,7 +26,7 @@ class LoadGap extends React.PureComponent {
return (
);
}
diff --git a/app/javascript/mastodon/components/poll.js b/app/javascript/mastodon/components/poll.js
new file mode 100644
index 000000000..690f9ae5a
--- /dev/null
+++ b/app/javascript/mastodon/components/poll.js
@@ -0,0 +1,140 @@
+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 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';
+import RelativeTimestamp from './relative_timestamp';
+
+const messages = defineMessages({
+ closed: { id: 'poll.closed', defaultMessage: 'Closed' },
+});
+
+const makeEmojiMap = record => record.get('emojis').reduce((obj, emoji) => {
+ obj[`:${emoji.get('shortcode')}:`] = emoji.toJS();
+ return obj;
+}, {});
+
+export default @injectIntl
+class Poll extends ImmutablePureComponent {
+
+ static propTypes = {
+ poll: ImmutablePropTypes.map,
+ intl: PropTypes.object.isRequired,
+ dispatch: PropTypes.func,
+ disabled: PropTypes.bool,
+ };
+
+ state = {
+ selected: {},
+ };
+
+ handleOptionChange = e => {
+ const { target: { value } } = e;
+
+ if (this.props.poll.get('multiple')) {
+ const tmp = { ...this.state.selected };
+ if (tmp[value]) {
+ delete tmp[value];
+ } else {
+ tmp[value] = true;
+ }
+ this.setState({ selected: tmp });
+ } else {
+ const tmp = {};
+ tmp[value] = true;
+ this.setState({ selected: tmp });
+ }
+ };
+
+ handleVote = () => {
+ if (this.props.disabled) {
+ return;
+ }
+
+ this.props.dispatch(vote(this.props.poll.get('id'), Object.keys(this.state.selected)));
+ };
+
+ handleRefresh = () => {
+ if (this.props.disabled) {
+ return;
+ }
+
+ this.props.dispatch(fetchPoll(this.props.poll.get('id')));
+ };
+
+ renderOption (option, optionIndex) {
+ const { poll, disabled } = this.props;
+ const percent = poll.get('votes_count') === 0 ? 0 : (option.get('votes_count') / poll.get('votes_count')) * 100;
+ const leading = poll.get('options').filterNot(other => other.get('title') === option.get('title')).every(other => option.get('votes_count') > other.get('votes_count'));
+ const active = !!this.state.selected[`${optionIndex}`];
+ const showResults = poll.get('voted') || poll.get('expired');
+
+ let titleEmojified = option.get('title_emojified');
+ if (!titleEmojified) {
+ const emojiMap = makeEmojiMap(poll);
+ titleEmojified = emojify(escapeTextContentForBrowser(option.get('title')), emojiMap);
+ }
+
+ return (
+
+
+ );
+ }
+
+}
diff --git a/app/javascript/mastodon/components/relative_timestamp.js b/app/javascript/mastodon/components/relative_timestamp.js
index 57d99dd19..aa4b73cfe 100644
--- a/app/javascript/mastodon/components/relative_timestamp.js
+++ b/app/javascript/mastodon/components/relative_timestamp.js
@@ -8,6 +8,11 @@ const messages = defineMessages({
minutes: { id: 'relative_time.minutes', defaultMessage: '{number}m' },
hours: { id: 'relative_time.hours', defaultMessage: '{number}h' },
days: { id: 'relative_time.days', defaultMessage: '{number}d' },
+ moments_remaining: { id: 'time_remaining.moments', defaultMessage: 'Moments remaining' },
+ seconds_remaining: { id: 'time_remaining.seconds', defaultMessage: '{number, plural, one {# second} other {# seconds}} left' },
+ minutes_remaining: { id: 'time_remaining.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}} left' },
+ hours_remaining: { id: 'time_remaining.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}} left' },
+ days_remaining: { id: 'time_remaining.days', defaultMessage: '{number, plural, one {# day} other {# days}} left' },
});
const dateFormatOptions = {
@@ -86,6 +91,26 @@ export const timeAgoString = (intl, date, now, year) => {
return relativeTime;
};
+const timeRemainingString = (intl, date, now) => {
+ const delta = date.getTime() - now;
+
+ let relativeTime;
+
+ if (delta < 10 * SECOND) {
+ relativeTime = intl.formatMessage(messages.moments_remaining);
+ } else if (delta < MINUTE) {
+ relativeTime = intl.formatMessage(messages.seconds_remaining, { number: Math.floor(delta / SECOND) });
+ } else if (delta < HOUR) {
+ relativeTime = intl.formatMessage(messages.minutes_remaining, { number: Math.floor(delta / MINUTE) });
+ } else if (delta < DAY) {
+ relativeTime = intl.formatMessage(messages.hours_remaining, { number: Math.floor(delta / HOUR) });
+ } else {
+ relativeTime = intl.formatMessage(messages.days_remaining, { number: Math.floor(delta / DAY) });
+ }
+
+ return relativeTime;
+};
+
export default @injectIntl
class RelativeTimestamp extends React.Component {
@@ -93,6 +118,7 @@ class RelativeTimestamp extends React.Component {
intl: PropTypes.object.isRequired,
timestamp: PropTypes.string.isRequired,
year: PropTypes.number.isRequired,
+ futureDate: PropTypes.bool,
};
state = {
@@ -145,10 +171,10 @@ class RelativeTimestamp extends React.Component {
}
render () {
- const { timestamp, intl, year } = this.props;
+ const { timestamp, intl, year, futureDate } = this.props;
const date = new Date(timestamp);
- const relativeTime = timeAgoString(intl, date, this.state.now, year);
+ const relativeTime = futureDate ? timeRemainingString(intl, date, this.state.now) : timeAgoString(intl, date, this.state.now, year);
return (
-
+ {poll.get('options').map((option, i) => this.renderOption(option, i))}
+
+ {!showResults && }
+ {showResults && !this.props.disabled && · }
+
+