@@ -136,11 +157,10 @@ class GettingStarted extends ImmutablePureComponent {
);
@@ -98,8 +98,8 @@ FrameInteractions.propTypes = {
onNext: PropTypes.func.isRequired,
};
-@connect(state => ({ domain: state.getIn(['meta', 'domain']) }))
-export default class Introduction extends React.PureComponent {
+export default @connect(state => ({ domain: state.getIn(['meta', 'domain']) }))
+class Introduction extends React.PureComponent {
static propTypes = {
domain: PropTypes.string.isRequired,
diff --git a/app/javascript/mastodon/features/list_adder/components/list.js b/app/javascript/mastodon/features/list_adder/components/list.js
index cb8eb7d7a..60c8958a7 100644
--- a/app/javascript/mastodon/features/list_adder/components/list.js
+++ b/app/javascript/mastodon/features/list_adder/components/list.js
@@ -6,6 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import IconButton from '../../../components/icon_button';
import { defineMessages, injectIntl } from 'react-intl';
import { removeFromListAdder, addToListAdder } from '../../../actions/lists';
+import Icon from 'mastodon/components/icon';
const messages = defineMessages({
remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
@@ -53,7 +54,7 @@ class List extends ImmutablePureComponent {
-
+
{list.get('title')}
diff --git a/app/javascript/mastodon/features/list_editor/components/edit_list_form.js b/app/javascript/mastodon/features/list_editor/components/edit_list_form.js
new file mode 100644
index 000000000..3dc59c12e
--- /dev/null
+++ b/app/javascript/mastodon/features/list_editor/components/edit_list_form.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
+import IconButton from '../../../components/icon_button';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+ title: { id: 'lists.edit.submit', defaultMessage: 'Change title' },
+});
+
+const mapStateToProps = state => ({
+ value: state.getIn(['listEditor', 'title']),
+ disabled: !state.getIn(['listEditor', 'isChanged']),
+});
+
+const mapDispatchToProps = dispatch => ({
+ onChange: value => dispatch(changeListEditorTitle(value)),
+ onSubmit: () => dispatch(submitListEditor(false)),
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ListForm extends React.PureComponent {
+
+ static propTypes = {
+ value: PropTypes.string.isRequired,
+ disabled: PropTypes.bool,
+ intl: PropTypes.object.isRequired,
+ onChange: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ };
+
+ handleChange = e => {
+ this.props.onChange(e.target.value);
+ }
+
+ handleSubmit = e => {
+ e.preventDefault();
+ this.props.onSubmit();
+ }
+
+ handleClick = () => {
+ this.props.onSubmit();
+ }
+
+ render () {
+ const { value, disabled, intl } = this.props;
+
+ const title = intl.formatMessage(messages.title);
+
+ return (
+
+ );
+ }
+
+}
diff --git a/app/javascript/mastodon/features/list_editor/components/search.js b/app/javascript/mastodon/features/list_editor/components/search.js
index f7617fe58..e3f069bb8 100644
--- a/app/javascript/mastodon/features/list_editor/components/search.js
+++ b/app/javascript/mastodon/features/list_editor/components/search.js
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
import { defineMessages, injectIntl } from 'react-intl';
import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists';
import classNames from 'classnames';
+import Icon from 'mastodon/components/icon';
const messages = defineMessages({
search: { id: 'lists.search', defaultMessage: 'Search among people you follow' },
@@ -65,8 +66,8 @@ class Search extends React.PureComponent {
-
-
+
+
);
diff --git a/app/javascript/mastodon/features/list_editor/index.js b/app/javascript/mastodon/features/list_editor/index.js
index aab0cdd0c..48466604a 100644
--- a/app/javascript/mastodon/features/list_editor/index.js
+++ b/app/javascript/mastodon/features/list_editor/index.js
@@ -7,11 +7,11 @@ import { injectIntl } from 'react-intl';
import { setupListEditor, clearListSuggestions, resetListEditor } from '../../actions/lists';
import Account from './components/account';
import Search from './components/search';
+import EditListForm from './components/edit_list_form';
import Motion from '../ui/util/optional_motion';
import spring from 'react-motion/lib/spring';
const mapStateToProps = state => ({
- title: state.getIn(['listEditor', 'title']),
accountIds: state.getIn(['listEditor', 'accounts', 'items']),
searchAccountIds: state.getIn(['listEditor', 'suggestions', 'items']),
});
@@ -33,7 +33,6 @@ class ListEditor extends ImmutablePureComponent {
onInitialize: PropTypes.func.isRequired,
onClear: PropTypes.func.isRequired,
onReset: PropTypes.func.isRequired,
- title: PropTypes.string.isRequired,
accountIds: ImmutablePropTypes.list.isRequired,
searchAccountIds: ImmutablePropTypes.list.isRequired,
};
@@ -49,12 +48,12 @@ class ListEditor extends ImmutablePureComponent {
}
render () {
- const { title, accountIds, searchAccountIds, onClear } = this.props;
+ const { accountIds, searchAccountIds, onClear } = this.props;
const showSearch = searchAccountIds.size > 0;
return (
-
{title}
+
diff --git a/app/javascript/mastodon/features/list_timeline/index.js b/app/javascript/mastodon/features/list_timeline/index.js
index 5b047ace4..b6722e91a 100644
--- a/app/javascript/mastodon/features/list_timeline/index.js
+++ b/app/javascript/mastodon/features/list_timeline/index.js
@@ -14,6 +14,7 @@ import { fetchList, deleteList } from '../../actions/lists';
import { openModal } from '../../actions/modal';
import MissingIndicator from '../../components/missing_indicator';
import LoadingIndicator from '../../components/loading_indicator';
+import Icon from 'mastodon/components/icon';
const messages = defineMessages({
deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
@@ -150,11 +151,11 @@ class ListTimeline extends React.PureComponent {
>
diff --git a/app/javascript/mastodon/features/mutes/index.js b/app/javascript/mastodon/features/mutes/index.js
index f979ef72f..4ed29a1ce 100644
--- a/app/javascript/mastodon/features/mutes/index.js
+++ b/app/javascript/mastodon/features/mutes/index.js
@@ -18,6 +18,7 @@ const messages = defineMessages({
const mapStateToProps = state => ({
accountIds: state.getIn(['user_lists', 'mutes', 'items']),
+ hasMore: !!state.getIn(['user_lists', 'mutes', 'next']),
});
export default @connect(mapStateToProps)
@@ -28,6 +29,7 @@ class Mutes extends ImmutablePureComponent {
params: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
shouldUpdateScroll: PropTypes.func,
+ hasMore: PropTypes.bool,
accountIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
};
@@ -41,7 +43,7 @@ class Mutes extends ImmutablePureComponent {
}, 300, { leading: true });
render () {
- const { intl, shouldUpdateScroll, accountIds } = this.props;
+ const { intl, shouldUpdateScroll, hasMore, accountIds } = this.props;
if (!accountIds) {
return (
@@ -59,6 +61,7 @@ class Mutes extends ImmutablePureComponent {
diff --git a/app/javascript/mastodon/features/notifications/components/clear_column_button.js b/app/javascript/mastodon/features/notifications/components/clear_column_button.js
index e0bf4c82d..b82fd092f 100644
--- a/app/javascript/mastodon/features/notifications/components/clear_column_button.js
+++ b/app/javascript/mastodon/features/notifications/components/clear_column_button.js
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
+import Icon from 'mastodon/components/icon';
export default class ClearColumnButton extends React.PureComponent {
@@ -10,7 +11,7 @@ export default class ClearColumnButton extends React.PureComponent {
render () {
return (
-
+
);
}
diff --git a/app/javascript/mastodon/features/notifications/components/filter_bar.js b/app/javascript/mastodon/features/notifications/components/filter_bar.js
index f95a2c9de..6ae8b7491 100644
--- a/app/javascript/mastodon/features/notifications/components/filter_bar.js
+++ b/app/javascript/mastodon/features/notifications/components/filter_bar.js
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import Icon from 'mastodon/components/icon';
const tooltips = defineMessages({
mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
@@ -62,28 +63,28 @@ class FilterBar extends React.PureComponent {
onClick={this.onClick('mention')}
title={intl.formatMessage(tooltips.mentions)}
>
-
+
);
diff --git a/app/javascript/mastodon/features/notifications/components/notification.js b/app/javascript/mastodon/features/notifications/components/notification.js
index e79bd1a3c..9669b6e7d 100644
--- a/app/javascript/mastodon/features/notifications/components/notification.js
+++ b/app/javascript/mastodon/features/notifications/components/notification.js
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import StatusContainer from '../../../containers/status_container';
import AccountContainer from '../../../containers/account_container';
-import RelativeTimestamp from '../../../components/relative_timestamp';
import { injectIntl, FormattedMessage } from 'react-intl';
import Permalink from '../../../components/permalink';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { HotKeys } from 'react-hotkeys';
+import Icon from 'mastodon/components/icon';
const notificationForScreenReader = (intl, message, timestamp) => {
const output = [message];
@@ -30,7 +30,15 @@ class Notification extends ImmutablePureComponent {
onMoveUp: PropTypes.func.isRequired,
onMoveDown: PropTypes.func.isRequired,
onMention: PropTypes.func.isRequired,
+ onFavourite: PropTypes.func.isRequired,
+ onReblog: PropTypes.func.isRequired,
+ onToggleHidden: PropTypes.func.isRequired,
+ status: PropTypes.option,
intl: PropTypes.object.isRequired,
+ getScrollPosition: PropTypes.func,
+ updateScrollBottom: PropTypes.func,
+ cacheMediaWidth: PropTypes.func,
+ cachedMediaWidth: PropTypes.number,
};
handleMoveUp = () => {
@@ -65,14 +73,32 @@ class Notification extends ImmutablePureComponent {
onMention(notification.get('account'), this.context.router.history);
}
+ handleHotkeyFavourite = () => {
+ const { status } = this.props;
+ if (status) this.props.onFavourite(status);
+ }
+
+ handleHotkeyBoost = e => {
+ const { status } = this.props;
+ if (status) this.props.onReblog(status, e);
+ }
+
+ handleHotkeyToggleHidden = () => {
+ const { status } = this.props;
+ if (status) this.props.onToggleHidden(status);
+ }
+
getHandlers () {
return {
- moveUp: this.handleMoveUp,
- moveDown: this.handleMoveDown,
+ reply: this.handleMention,
+ favourite: this.handleHotkeyFavourite,
+ boost: this.handleHotkeyBoost,
+ mention: this.handleMention,
open: this.handleOpen,
openProfile: this.handleOpenProfile,
- mention: this.handleMention,
- reply: this.handleMention,
+ moveUp: this.handleMoveUp,
+ moveDown: this.handleMoveDown,
+ toggleHidden: this.handleHotkeyToggleHidden,
};
}
@@ -84,15 +110,14 @@ class Notification extends ImmutablePureComponent {
@@ -108,6 +133,10 @@ class Notification extends ImmutablePureComponent {
onMoveDown={this.handleMoveDown}
onMoveUp={this.handleMoveUp}
contextType='notifications'
+ getScrollPosition={this.props.getScrollPosition}
+ updateScrollBottom={this.props.updateScrollBottom}
+ cachedMediaWidth={this.props.cachedMediaWidth}
+ cacheMediaWidth={this.props.cacheMediaWidth}
/>
);
}
@@ -120,15 +149,25 @@ class Notification extends ImmutablePureComponent {
);
@@ -142,15 +181,25 @@ class Notification extends ImmutablePureComponent {
);
diff --git a/app/javascript/mastodon/features/notifications/containers/notification_container.js b/app/javascript/mastodon/features/notifications/containers/notification_container.js
index 921aa460f..78576c760 100644
--- a/app/javascript/mastodon/features/notifications/containers/notification_container.js
+++ b/app/javascript/mastodon/features/notifications/containers/notification_container.js
@@ -1,14 +1,31 @@
import { connect } from 'react-redux';
-import { makeGetNotification } from '../../../selectors';
+import { makeGetNotification, makeGetStatus } from '../../../selectors';
import Notification from '../components/notification';
+import { openModal } from '../../../actions/modal';
import { mentionCompose } from '../../../actions/compose';
+import {
+ reblog,
+ favourite,
+ unreblog,
+ unfavourite,
+} from '../../../actions/interactions';
+import {
+ hideStatus,
+ revealStatus,
+} from '../../../actions/statuses';
+import { boostModal } from '../../../initial_state';
const makeMapStateToProps = () => {
const getNotification = makeGetNotification();
+ const getStatus = makeGetStatus();
- const mapStateToProps = (state, props) => ({
- notification: getNotification(state, props.notification, props.accountId),
- });
+ const mapStateToProps = (state, props) => {
+ const notification = getNotification(state, props.notification, props.accountId);
+ return {
+ notification: notification,
+ status: notification.get('status') ? getStatus(state, { id: notification.get('status') }) : null,
+ };
+ };
return mapStateToProps;
};
@@ -17,6 +34,38 @@ const mapDispatchToProps = dispatch => ({
onMention: (account, router) => {
dispatch(mentionCompose(account, router));
},
+
+ onModalReblog (status) {
+ dispatch(reblog(status));
+ },
+
+ onReblog (status, e) {
+ if (status.get('reblogged')) {
+ dispatch(unreblog(status));
+ } else {
+ if (e.shiftKey || !boostModal) {
+ this.onModalReblog(status);
+ } else {
+ dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
+ }
+ }
+ },
+
+ onFavourite (status) {
+ if (status.get('favourited')) {
+ dispatch(unfavourite(status));
+ } else {
+ dispatch(favourite(status));
+ }
+ },
+
+ onToggleHidden (status) {
+ if (status.get('hidden')) {
+ dispatch(revealStatus(status.get('id')));
+ } else {
+ dispatch(hideStatus(status.get('id')));
+ }
+ },
});
export default connect(makeMapStateToProps, mapDispatchToProps)(Notification);
diff --git a/app/javascript/mastodon/features/public_timeline/index.js b/app/javascript/mastodon/features/public_timeline/index.js
index d640033eb..2b7d9c56f 100644
--- a/app/javascript/mastodon/features/public_timeline/index.js
+++ b/app/javascript/mastodon/features/public_timeline/index.js
@@ -124,7 +124,7 @@ class PublicTimeline extends React.PureComponent {
onLoadMore={this.handleLoadMore}
trackScroll={!pinned}
scrollKey={`public_timeline-${columnId}`}
- emptyMessage={
}
+ emptyMessage={
}
shouldUpdateScroll={shouldUpdateScroll}
/>
diff --git a/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js b/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js
index 759922638..333726f94 100644
--- a/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js
+++ b/app/javascript/mastodon/features/standalone/hashtag_timeline/index.js
@@ -1,28 +1,32 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
-import StatusListContainer from '../../ui/containers/status_list_container';
+import ImmutablePropTypes from 'react-immutable-proptypes';
import { expandHashtagTimeline } from '../../../actions/timelines';
-import Column from '../../../components/column';
-import ColumnHeader from '../../../components/column_header';
import { connectHashtagStream } from '../../../actions/streaming';
+import Masonry from 'react-masonry-infinite';
+import { List as ImmutableList } from 'immutable';
+import DetailedStatusContainer from '../../status/containers/detailed_status_container';
+import { debounce } from 'lodash';
+import LoadingIndicator from '../../../components/loading_indicator';
-export default @connect()
+const mapStateToProps = (state, { hashtag }) => ({
+ statusIds: state.getIn(['timelines', `hashtag:${hashtag}`, 'items'], ImmutableList()),
+ isLoading: state.getIn(['timelines', `hashtag:${hashtag}`, 'isLoading'], false),
+ hasMore: state.getIn(['timelines', `hashtag:${hashtag}`, 'hasMore'], false),
+});
+
+export default @connect(mapStateToProps)
class HashtagTimeline extends React.PureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
+ statusIds: ImmutablePropTypes.list.isRequired,
+ isLoading: PropTypes.bool.isRequired,
+ hasMore: PropTypes.bool.isRequired,
hashtag: PropTypes.string.isRequired,
};
- handleHeaderClick = () => {
- this.column.scrollTop();
- }
-
- setRef = c => {
- this.column = c;
- }
-
componentDidMount () {
const { dispatch, hashtag } = this.props;
@@ -37,28 +41,52 @@ class HashtagTimeline extends React.PureComponent {
}
}
- handleLoadMore = maxId => {
- this.props.dispatch(expandHashtagTimeline(this.props.hashtag, { maxId }));
+ handleLoadMore = () => {
+ const maxId = this.props.statusIds.last();
+
+ if (maxId) {
+ this.props.dispatch(expandHashtagTimeline(this.props.hashtag, { maxId }));
+ }
}
+ setRef = c => {
+ this.masonry = c;
+ }
+
+ handleHeightChange = debounce(() => {
+ if (!this.masonry) {
+ return;
+ }
+
+ this.masonry.forcePack();
+ }, 50)
+
render () {
- const { hashtag } = this.props;
+ const { statusIds, hasMore, isLoading } = this.props;
+
+ const sizes = [
+ { columns: 1, gutter: 0 },
+ { mq: '415px', columns: 1, gutter: 10 },
+ { mq: '640px', columns: 2, gutter: 10 },
+ { mq: '960px', columns: 3, gutter: 10 },
+ { mq: '1255px', columns: 3, gutter: 10 },
+ ];
+
+ const loader = (isLoading && statusIds.isEmpty()) ?
: undefined;
return (
-
-
-
-
-
+
+ {statusIds.map(statusId => (
+
+
+
+ )).toArray()}
+
);
}
diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js
index 565009be2..73be1fc5f 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.js
+++ b/app/javascript/mastodon/features/status/components/action_bar.js
@@ -4,7 +4,7 @@ import IconButton from '../../../components/icon_button';
import ImmutablePropTypes from 'react-immutable-proptypes';
import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
import { defineMessages, injectIntl } from 'react-intl';
-import { me } from '../../../initial_state';
+import { me, isStaff } from '../../../initial_state';
const messages = defineMessages({
delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -26,6 +26,9 @@ const messages = defineMessages({
pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
embed: { id: 'status.embed', defaultMessage: 'Embed' },
+ admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
+ admin_status: { id: 'status.admin_status', defaultMessage: 'Open this status in the moderation interface' },
+ copy: { id: 'status.copy', defaultMessage: 'Copy link to status' },
});
export default @injectIntl
@@ -111,6 +114,25 @@ class ActionBar extends React.PureComponent {
this.props.onEmbed(this.props.status);
}
+ handleCopy = () => {
+ const url = this.props.status.get('url');
+ const textarea = document.createElement('textarea');
+
+ textarea.textContent = url;
+ textarea.style.position = 'fixed';
+
+ document.body.appendChild(textarea);
+
+ try {
+ textarea.select();
+ document.execCommand('copy');
+ } catch (e) {
+
+ } finally {
+ document.body.removeChild(textarea);
+ }
+ }
+
render () {
const { status, intl } = this.props;
@@ -120,6 +142,7 @@ class ActionBar extends React.PureComponent {
let menu = [];
if (publicStatus) {
+ menu.push({ text: intl.formatMessage(messages.copy), action: this.handleCopy });
menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed });
menu.push(null);
}
@@ -145,12 +168,24 @@ class ActionBar extends React.PureComponent {
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport });
+ if (isStaff) {
+ menu.push(null);
+ menu.push({ text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }), href: `/admin/accounts/${status.getIn(['account', 'id'])}` });
+ menu.push({ text: intl.formatMessage(messages.admin_status), href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}` });
+ }
}
const shareButton = ('share' in navigator) && status.get('visibility') === 'public' && (
);
+ let replyIcon;
+ if (status.get('in_reply_to_id', null) === null) {
+ replyIcon = 'reply';
+ } else {
+ replyIcon = 'reply-all';
+ }
+
let reblogIcon = 'retweet';
if (status.get('visibility') === 'direct') reblogIcon = 'envelope';
else if (status.get('visibility') === 'private') reblogIcon = 'lock';
@@ -159,7 +194,7 @@ class ActionBar extends React.PureComponent {
return (
-
+
{shareButton}
diff --git a/app/javascript/mastodon/features/status/components/card.js b/app/javascript/mastodon/features/status/components/card.js
index 235d209b8..0eff54411 100644
--- a/app/javascript/mastodon/features/status/components/card.js
+++ b/app/javascript/mastodon/features/status/components/card.js
@@ -4,6 +4,7 @@ import Immutable from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import punycode from 'punycode';
import classnames from 'classnames';
+import Icon from 'mastodon/components/icon';
const IDNA_PREFIX = 'xn--';
@@ -60,6 +61,8 @@ export default class Card extends React.PureComponent {
maxDescription: PropTypes.number,
onOpenMedia: PropTypes.func.isRequired,
compact: PropTypes.bool,
+ defaultWidth: PropTypes.number,
+ cacheWidth: PropTypes.func,
};
static defaultProps = {
@@ -68,7 +71,7 @@ export default class Card extends React.PureComponent {
};
state = {
- width: 280,
+ width: this.props.defaultWidth || 280,
embedded: false,
};
@@ -111,6 +114,7 @@ export default class Card extends React.PureComponent {
setRef = c => {
if (c) {
+ if (this.props.cacheWidth) this.props.cacheWidth(c.offsetWidth);
this.setState({ width: c.offsetWidth });
}
}
@@ -175,8 +179,8 @@ export default class Card extends React.PureComponent {
-
- {horizontal &&
}
+
+ {horizontal &&
}
@@ -195,6 +199,12 @@ export default class Card extends React.PureComponent {
{thumbnail}
+ );
}
return (
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index 16be65315..5f14be406 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -11,6 +11,10 @@ import { FormattedDate, FormattedNumber } from 'react-intl';
import Card from './card';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Video from '../../video';
+import scheduleIdleTask from '../../ui/util/schedule_idle_task';
+import classNames from 'classnames';
+import Icon from 'mastodon/components/icon';
+import PollContainer from 'mastodon/containers/poll_container';
export default class DetailedStatus extends ImmutablePureComponent {
@@ -25,10 +29,18 @@ export default class DetailedStatus extends ImmutablePureComponent {
onOpenMedia: PropTypes.func.isRequired,
onOpenVideo: PropTypes.func.isRequired,
onToggleHidden: PropTypes.func.isRequired,
+ measureHeight: PropTypes.bool,
+ onHeightChange: PropTypes.func,
+ domain: PropTypes.string.isRequired,
+ compact: PropTypes.bool,
+ };
+
+ state = {
+ height: null,
};
handleAccountClick = (e) => {
- if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+ if (e.button === 0 && !(e.ctrlKey || e.metaKey) && this.context.router) {
e.preventDefault();
this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
}
@@ -44,15 +56,61 @@ export default class DetailedStatus extends ImmutablePureComponent {
this.props.onToggleHidden(this.props.status);
}
+ _measureHeight (heightJustChanged) {
+ if (this.props.measureHeight && this.node) {
+ scheduleIdleTask(() => this.node && this.setState({ height: Math.ceil(this.node.scrollHeight) + 1 }));
+
+ if (this.props.onHeightChange && heightJustChanged) {
+ this.props.onHeightChange();
+ }
+ }
+ }
+
+ setRef = c => {
+ this.node = c;
+ this._measureHeight();
+ }
+
+ componentDidUpdate (prevProps, prevState) {
+ this._measureHeight(prevState.height !== this.state.height);
+ }
+
+ handleModalLink = e => {
+ e.preventDefault();
+
+ let href;
+
+ if (e.target.nodeName !== 'A') {
+ href = e.target.parentNode.href;
+ } else {
+ href = e.target.href;
+ }
+
+ window.open(href, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
+ }
+
render () {
- const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
+ const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status;
+ const outerStyle = { boxSizing: 'border-box' };
+ const { compact } = this.props;
+
+ if (!status) {
+ return null;
+ }
let media = '';
let applicationLink = '';
let reblogLink = '';
let reblogIcon = 'retweet';
+ let favouriteLink = '';
- if (status.get('media_attachments').size > 0) {
+ if (this.props.measureHeight) {
+ outerStyle.height = `${this.state.height}px`;
+ }
+
+ if (status.get('poll')) {
+ media =
;
+ } else if (status.get('media_attachments').size > 0) {
if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
media =
;
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
@@ -96,36 +154,64 @@ export default class DetailedStatus extends ImmutablePureComponent {
}
if (status.get('visibility') === 'private') {
- reblogLink =
+ );
+ }
+
+ if (this.context.router) {
+ favouriteLink = (
+
-
-
-
-
+
+
+
+
+
+
-
+
- {media}
+ {media}
-
-
-
- {applicationLink} · {reblogLink} ·
-
-
-
-
-
+
+
+
+ {applicationLink} · {reblogLink} · {favouriteLink}
+
);
diff --git a/app/javascript/mastodon/features/status/containers/detailed_status_container.js b/app/javascript/mastodon/features/status/containers/detailed_status_container.js
new file mode 100644
index 000000000..2c0db0a6b
--- /dev/null
+++ b/app/javascript/mastodon/features/status/containers/detailed_status_container.js
@@ -0,0 +1,172 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import DetailedStatus from '../components/detailed_status';
+import { makeGetStatus } from '../../../selectors';
+import {
+ replyCompose,
+ mentionCompose,
+ directCompose,
+} from '../../../actions/compose';
+import {
+ reblog,
+ favourite,
+ unreblog,
+ unfavourite,
+ pin,
+ unpin,
+} from '../../../actions/interactions';
+import { blockAccount } from '../../../actions/accounts';
+import {
+ muteStatus,
+ unmuteStatus,
+ deleteStatus,
+ hideStatus,
+ revealStatus,
+} from '../../../actions/statuses';
+import { initMuteModal } from '../../../actions/mutes';
+import { initReport } from '../../../actions/reports';
+import { openModal } from '../../../actions/modal';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { boostModal, deleteModal } from '../../../initial_state';
+import { showAlertForError } from '../../../actions/alerts';
+
+const messages = defineMessages({
+ deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
+ deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
+ redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
+ redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favourites and boosts will be lost, and replies to the original post will be orphaned.' },
+ blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
+ replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
+ replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
+});
+
+const makeMapStateToProps = () => {
+ const getStatus = makeGetStatus();
+
+ const mapStateToProps = (state, props) => ({
+ status: getStatus(state, props),
+ domain: state.getIn(['meta', 'domain']),
+ });
+
+ return mapStateToProps;
+};
+
+const mapDispatchToProps = (dispatch, { intl }) => ({
+
+ onReply (status, router) {
+ dispatch((_, getState) => {
+ let state = getState();
+ if (state.getIn(['compose', 'text']).trim().length !== 0) {
+ dispatch(openModal('CONFIRM', {
+ message: intl.formatMessage(messages.replyMessage),
+ confirm: intl.formatMessage(messages.replyConfirm),
+ onConfirm: () => dispatch(replyCompose(status, router)),
+ }));
+ } else {
+ dispatch(replyCompose(status, router));
+ }
+ });
+ },
+
+ onModalReblog (status) {
+ dispatch(reblog(status));
+ },
+
+ onReblog (status, e) {
+ if (status.get('reblogged')) {
+ dispatch(unreblog(status));
+ } else {
+ if (e.shiftKey || !boostModal) {
+ this.onModalReblog(status);
+ } else {
+ dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
+ }
+ }
+ },
+
+ onFavourite (status) {
+ if (status.get('favourited')) {
+ dispatch(unfavourite(status));
+ } else {
+ dispatch(favourite(status));
+ }
+ },
+
+ onPin (status) {
+ if (status.get('pinned')) {
+ dispatch(unpin(status));
+ } else {
+ dispatch(pin(status));
+ }
+ },
+
+ onEmbed (status) {
+ dispatch(openModal('EMBED', {
+ url: status.get('url'),
+ onError: error => dispatch(showAlertForError(error)),
+ }));
+ },
+
+ onDelete (status, history, withRedraft = false) {
+ if (!deleteModal) {
+ dispatch(deleteStatus(status.get('id'), history, withRedraft));
+ } else {
+ dispatch(openModal('CONFIRM', {
+ message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
+ confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
+ onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
+ }));
+ }
+ },
+
+ onDirect (account, router) {
+ dispatch(directCompose(account, router));
+ },
+
+ onMention (account, router) {
+ dispatch(mentionCompose(account, router));
+ },
+
+ onOpenMedia (media, index) {
+ dispatch(openModal('MEDIA', { media, index }));
+ },
+
+ onOpenVideo (media, time) {
+ dispatch(openModal('VIDEO', { media, time }));
+ },
+
+ onBlock (account) {
+ dispatch(openModal('CONFIRM', {
+ message:
@{account.get('acct')} }} />,
+ confirm: intl.formatMessage(messages.blockConfirm),
+ onConfirm: () => dispatch(blockAccount(account.get('id'))),
+ }));
+ },
+
+ onReport (status) {
+ dispatch(initReport(status.get('account'), status));
+ },
+
+ onMute (account) {
+ dispatch(initMuteModal(account));
+ },
+
+ onMuteConversation (status) {
+ if (status.get('muted')) {
+ dispatch(unmuteStatus(status.get('id')));
+ } else {
+ dispatch(muteStatus(status.get('id')));
+ }
+ },
+
+ onToggleHidden (status) {
+ if (status.get('hidden')) {
+ dispatch(revealStatus(status.get('id')));
+ } else {
+ dispatch(hideStatus(status.get('id')));
+ }
+ },
+
+});
+
+export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(DetailedStatus));
diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
index a092f7bb1..3b5febcac 100644
--- a/app/javascript/mastodon/features/status/index.js
+++ b/app/javascript/mastodon/features/status/index.js
@@ -44,6 +44,7 @@ import { HotKeys } from 'react-hotkeys';
import { boostModal, deleteModal } from '../../initial_state';
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
import { textForScreenReader } from '../../components/status';
+import Icon from 'mastodon/components/icon';
const messages = defineMessages({
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -101,6 +102,7 @@ const makeMapStateToProps = () => {
ancestorsIds,
descendantsIds,
askReplyConfirmation: state.getIn(['compose', 'text']).trim().length !== 0,
+ domain: state.getIn(['meta', 'domain']),
};
};
@@ -123,6 +125,7 @@ class Status extends ImmutablePureComponent {
descendantsIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
askReplyConfirmation: PropTypes.bool,
+ domain: PropTypes.string.isRequired,
};
state = {
@@ -387,7 +390,7 @@ class Status extends ImmutablePureComponent {
render () {
let ancestors, descendants;
- const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl } = this.props;
+ const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl, domain } = this.props;
const { fullscreen } = this.state;
if (status === null) {
@@ -423,7 +426,7 @@ class Status extends ImmutablePureComponent {
+
)}
/>
@@ -438,6 +441,7 @@ class Status extends ImmutablePureComponent {
onOpenVideo={this.handleOpenVideo}
onOpenMedia={this.handleOpenMedia}
onToggleHidden={this.handleToggleHidden}
+ domain={domain}
/>
-
Shift + }} />
+
Shift + }} />
diff --git a/app/javascript/mastodon/features/ui/components/column_header.js b/app/javascript/mastodon/features/ui/components/column_header.js
index e8bdd8054..b1a36e173 100644
--- a/app/javascript/mastodon/features/ui/components/column_header.js
+++ b/app/javascript/mastodon/features/ui/components/column_header.js
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
+import Icon from 'mastodon/components/icon';
export default class ColumnHeader extends React.PureComponent {
@@ -21,7 +22,7 @@ export default class ColumnHeader extends React.PureComponent {
let iconElement = '';
if (icon) {
- iconElement =
;
+ iconElement =
;
}
return (
diff --git a/app/javascript/mastodon/features/ui/components/column_link.js b/app/javascript/mastodon/features/ui/components/column_link.js
index 25c2d1cf8..0a25f1ea2 100644
--- a/app/javascript/mastodon/features/ui/components/column_link.js
+++ b/app/javascript/mastodon/features/ui/components/column_link.js
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
+import Icon from 'mastodon/components/icon';
const ColumnLink = ({ icon, text, to, href, method, badge }) => {
const badgeElement = typeof badge !== 'undefined' ?
{badge} : null;
@@ -8,7 +9,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => {
if (href) {
return (
-
+
{text}
{badgeElement}
@@ -16,7 +17,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => {
} else {
return (
-
+
{text}
{badgeElement}
diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js
index ed338c2eb..63feeac45 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area.js
+++ b/app/javascript/mastodon/features/ui/components/columns_area.js
@@ -13,6 +13,7 @@ import ColumnLoading from './column_loading';
import DrawerLoading from './drawer_loading';
import BundleColumnError from './bundle_column_error';
import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses, ListTimeline } from '../../ui/util/async-components';
+import Icon from 'mastodon/components/icon';
import detectPassiveEvents from 'detect-passive-events';
import { scrollRight } from '../../../scroll';
@@ -33,7 +34,7 @@ const messages = defineMessages({
publish: { id: 'compose_form.publish', defaultMessage: 'Toot' },
});
-const shouldHideFAB = path => path.match(/^\/statuses\//);
+const shouldHideFAB = path => path.match(/^\/statuses\/|^\/search|^\/getting-started/);
export default @(component => injectIntl(component, { withRef: true }))
class ColumnsArea extends ImmutablePureComponent {
@@ -160,7 +161,7 @@ class ColumnsArea extends ImmutablePureComponent {
this.pendingIndex = null;
if (singleColumn) {
- const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null :
;
+ const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null :
;
return columnIndex !== -1 ? [
diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js
index d29a4a6a7..2120746da 100644
--- a/app/javascript/mastodon/features/ui/components/media_modal.js
+++ b/app/javascript/mastodon/features/ui/components/media_modal.js
@@ -9,6 +9,7 @@ import { defineMessages, injectIntl } from 'react-intl';
import IconButton from '../../../components/icon_button';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ImageLoader from './image_loader';
+import Icon from 'mastodon/components/icon';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -108,8 +109,8 @@ class MediaModal extends ImmutablePureComponent {
const index = this.getIndex();
let pagination = [];
- const leftNav = media.size > 1 && ;
- const rightNav = media.size > 1 && ;
+ const leftNav = media.size > 1 && ;
+ const rightNav = media.size > 1 && ;
if (media.size > 1) {
pagination = media.map((item, i) => {
diff --git a/app/javascript/mastodon/features/ui/components/report_modal.js b/app/javascript/mastodon/features/ui/components/report_modal.js
index bc6b18664..2e41f784d 100644
--- a/app/javascript/mastodon/features/ui/components/report_modal.js
+++ b/app/javascript/mastodon/features/ui/components/report_modal.js
@@ -97,7 +97,7 @@ class ReportModal extends ImmutablePureComponent {