Skip to content

Commit ed9d46c

Browse files
GargronGargron
committed
Change conversations UI
Fix #11414, fix #9860, fix #10434
1 parent 3ed94dc commit ed9d46c

6 files changed

Lines changed: 280 additions & 69 deletions

File tree

‎app/javascript/mastodon/actions/conversations.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export const CONVERSATIONS_UPDATE = 'CONVERSATIONS_UPDATE';
1515

1616
export const CONVERSATIONS_READ = 'CONVERSATIONS_READ';
1717

18+
export const CONVERSATIONS_DELETE_REQUEST = 'CONVERSATIONS_DELETE_REQUEST';
19+
export const CONVERSATIONS_DELETE_SUCCESS = 'CONVERSATIONS_DELETE_SUCCESS';
20+
export const CONVERSATIONS_DELETE_FAIL = 'CONVERSATIONS_DELETE_FAIL';
21+
1822
export const mountConversations = () => ({
1923
type: CONVERSATIONS_MOUNT,
2024
});
@@ -82,3 +86,27 @@ export const updateConversations = conversation => dispatch => {
8286
conversation,
8387
});
8488
};
89+
90+
export const deleteConversation = conversationId => (dispatch, getState) => {
91+
dispatch(deleteConversationRequest(conversationId));
92+
93+
api(getState).delete(`/api/v1/conversations/${conversationId}`)
94+
.then(() => dispatch(deleteConversationSuccess(conversationId)))
95+
.catch(error => dispatch(deleteConversationFail(conversationId, error)));
96+
};
97+
98+
export const deleteConversationRequest = id => ({
99+
type: CONVERSATIONS_DELETE_REQUEST,
100+
id,
101+
});
102+
103+
export const deleteConversationSuccess = id => ({
104+
type: CONVERSATIONS_DELETE_SUCCESS,
105+
id,
106+
});
107+
108+
export const deleteConversationFail = (id, error) => ({
109+
type: CONVERSATIONS_DELETE_FAIL,
110+
id,
111+
error,
112+
});

‎app/javascript/mastodon/components/avatar_composite.js‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,35 +35,35 @@ export default class AvatarComposite extends React.PureComponent {
3535

3636
if (size === 2) {
3737
if (index === 0) {
38-
right = '2px';
38+
right = '1px';
3939
} else {
40-
left = '2px';
40+
left = '1px';
4141
}
4242
} else if (size === 3) {
4343
if (index === 0) {
44-
right = '2px';
44+
right = '1px';
4545
} else if (index > 0) {
46-
left = '2px';
46+
left = '1px';
4747
}
4848

4949
if (index === 1) {
50-
bottom = '2px';
50+
bottom = '1px';
5151
} else if (index > 1) {
52-
top = '2px';
52+
top = '1px';
5353
}
5454
} else if (size === 4) {
5555
if (index === 0 || index === 2) {
56-
right = '2px';
56+
right = '1px';
5757
}
5858

5959
if (index === 1 || index === 3) {
60-
left = '2px';
60+
left = '1px';
6161
}
6262

6363
if (index < 2) {
64-
bottom = '2px';
64+
bottom = '1px';
6565
} else {
66-
top = '2px';
66+
top = '1px';
6767
}
6868
}
6969

@@ -88,7 +88,13 @@ export default class AvatarComposite extends React.PureComponent {
8888

8989
return (
9090
<div className='account__avatar-composite' style={{ width: `${size}px`, height: `${size}px` }}>
91-
{accounts.take(4).map((account, i) => this.renderItem(account, accounts.size, i))}
91+
{accounts.take(4).map((account, i) => this.renderItem(account, Math.min(accounts.size, 4), i))}
92+
93+
{accounts.size > 4 && (
94+
<span className='account__avatar-composite__label'>
95+
+{accounts.size - 4}
96+
</span>
97+
)}
9298
</div>
9399
);
94100
}

‎app/javascript/mastodon/containers/status_container.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
5656
onReply (status, router) {
5757
dispatch((_, getState) => {
5858
let state = getState();
59+
5960
if (state.getIn(['compose', 'text']).trim().length !== 0) {
6061
dispatch(openModal('CONFIRM', {
6162
message: intl.formatMessage(messages.replyMessage),

‎app/javascript/mastodon/features/direct_timeline/components/conversation.js‎

Lines changed: 113 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,28 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import ImmutablePropTypes from 'react-immutable-proptypes';
44
import ImmutablePureComponent from 'react-immutable-pure-component';
5-
import StatusContainer from '../../../containers/status_container';
5+
import StatusContent from 'mastodon/components/status_content';
6+
import AttachmentList from 'mastodon/components/attachment_list';
7+
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
8+
import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
9+
import AvatarComposite from 'mastodon/components/avatar_composite';
10+
import Permalink from 'mastodon/components/permalink';
11+
import IconButton from 'mastodon/components/icon_button';
12+
import RelativeTimestamp from 'mastodon/components/relative_timestamp';
13+
import { HotKeys } from 'react-hotkeys';
614

7-
export default class Conversation extends ImmutablePureComponent {
15+
const messages = defineMessages({
16+
more: { id: 'status.more', defaultMessage: 'More' },
17+
open: { id: 'conversation.open', defaultMessage: 'View conversation' },
18+
reply: { id: 'status.reply', defaultMessage: 'Reply' },
19+
markAsRead: { id: 'conversation.mark_as_read', defaultMessage: 'Mark as read' },
20+
delete: { id: 'conversation.delete', defaultMessage: 'Delete conversation' },
21+
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
22+
unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
23+
});
24+
25+
export default @injectIntl
26+
class Conversation extends ImmutablePureComponent {
827

928
static contextTypes = {
1029
router: PropTypes.object,
@@ -13,25 +32,38 @@ export default class Conversation extends ImmutablePureComponent {
1332
static propTypes = {
1433
conversationId: PropTypes.string.isRequired,
1534
accounts: ImmutablePropTypes.list.isRequired,
16-
lastStatusId: PropTypes.string,
35+
lastStatus: ImmutablePropTypes.map,
1736
unread:PropTypes.bool.isRequired,
1837
onMoveUp: PropTypes.func,
1938
onMoveDown: PropTypes.func,
2039
markRead: PropTypes.func.isRequired,
40+
intl: PropTypes.object.isRequired,
2141
};
2242

2343
handleClick = () => {
2444
if (!this.context.router) {
2545
return;
2646
}
2747

28-
const { lastStatusId, unread, markRead } = this.props;
48+
const { lastStatus, unread, markRead } = this.props;
2949

3050
if (unread) {
3151
markRead();
3252
}
3353

34-
this.context.router.history.push(`/statuses/${lastStatusId}`);
54+
this.context.router.history.push(`/statuses/${lastStatus.get('id')}`);
55+
}
56+
57+
handleMarkAsRead = () => {
58+
this.props.markRead();
59+
}
60+
61+
handleReply = () => {
62+
this.props.reply(this.props.lastStatus, this.context.router.history);
63+
}
64+
65+
handleDelete = () => {
66+
this.props.delete();
3567
}
3668

3769
handleHotkeyMoveUp = () => {
@@ -42,22 +74,88 @@ export default class Conversation extends ImmutablePureComponent {
4274
this.props.onMoveDown(this.props.conversationId);
4375
}
4476

77+
handleConversationMute = () => {
78+
this.props.onMute(this.props.lastStatus);
79+
}
80+
81+
handleShowMore = () => {
82+
this.props.onToggleHidden(this.props.lastStatus);
83+
}
84+
4585
render () {
46-
const { accounts, lastStatusId, unread } = this.props;
86+
const { accounts, lastStatus, unread, intl } = this.props;
4787

48-
if (lastStatusId === null) {
88+
if (lastStatus === null) {
4989
return null;
5090
}
5191

92+
const menu = [
93+
{ text: intl.formatMessage(messages.open), action: this.handleClick },
94+
null,
95+
];
96+
97+
menu.push({ text: intl.formatMessage(lastStatus.get('muted') ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMute });
98+
99+
if (unread) {
100+
menu.push({ text: intl.formatMessage(messages.markAsRead), action: this.handleMarkAsRead });
101+
menu.push(null);
102+
}
103+
104+
menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDelete });
105+
106+
const names = accounts.map(a => <Permalink to={`/accounts/${a.get('id')}`} href={a.get('url')} key={a.get('id')} title={a.get('acct')}><bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi></Permalink>).reduce((prev, cur) => [prev, ', ', cur]);
107+
108+
const handlers = {
109+
reply: this.handleReply,
110+
open: this.handleClick,
111+
moveUp: this.handleHotkeyMoveUp,
112+
moveDown: this.handleHotkeyMoveDown,
113+
toggleHidden: this.handleShowMore,
114+
};
115+
52116
return (
53-
<StatusContainer
54-
id={lastStatusId}
55-
unread={unread}
56-
otherAccounts={accounts}
57-
onMoveUp={this.handleHotkeyMoveUp}
58-
onMoveDown={this.handleHotkeyMoveDown}
59-
onClick={this.handleClick}
60-
/>
117+
<HotKeys handlers={handlers}>
118+
<div className='conversation focusable muted' tabIndex='0'>
119+
<div className='conversation__avatar'>
120+
<AvatarComposite accounts={accounts} size={48} />
121+
</div>
122+
123+
<div className='conversation__content'>
124+
<div className='conversation__content__info'>
125+
<div className='conversation__content__relative-time'>
126+
<RelativeTimestamp timestamp={lastStatus.get('created_at')} />
127+
</div>
128+
129+
<div className='conversation__content__names'>
130+
<FormattedMessage id='conversation.with' defaultMessage='With {names}' values={{ names: <span>{names}</span> }} />
131+
</div>
132+
</div>
133+
134+
<StatusContent
135+
status={lastStatus}
136+
onClick={this.handleClick}
137+
expanded={!lastStatus.get('hidden')}
138+
onExpandedToggle={this.handleShowMore}
139+
collapsable
140+
/>
141+
142+
{lastStatus.get('media_attachments').size > 0 && (
143+
<AttachmentList
144+
compact
145+
media={lastStatus.get('media_attachments')}
146+
/>
147+
)}
148+
149+
<div className='status__action-bar'>
150+
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='reply' onClick={this.handleReply} />
151+
152+
<div className='status__action-bar-dropdown'>
153+
<DropdownMenuContainer status={lastStatus} items={menu} icon='ellipsis-h' size={18} direction='right' title={intl.formatMessage(messages.more)} />
154+
</div>
155+
</div>
156+
</div>
157+
</div>
158+
</HotKeys>
61159
);
62160
}
63161

‎app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js‎

Lines changed: 65 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,74 @@
11
import { connect } from 'react-redux';
22
import Conversation from '../components/conversation';
3-
import { markConversationRead } from '../../../actions/conversations';
3+
import { markConversationRead, deleteConversation } from 'mastodon/actions/conversations';
4+
import { makeGetStatus } from 'mastodon/selectors';
5+
import { replyCompose } from 'mastodon/actions/compose';
6+
import { openModal } from 'mastodon/actions/modal';
7+
import { muteStatus, unmuteStatus, hideStatus, revealStatus } from 'mastodon/actions/statuses';
8+
import { defineMessages, injectIntl } from 'react-intl';
49

5-
const mapStateToProps = (state, { conversationId }) => {
6-
const conversation = state.getIn(['conversations', 'items']).find(x => x.get('id') === conversationId);
10+
const messages = defineMessages({
11+
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
12+
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
13+
});
14+
15+
const mapStateToProps = () => {
16+
const getStatus = makeGetStatus();
17+
18+
return (state, { conversationId }) => {
19+
const conversation = state.getIn(['conversations', 'items']).find(x => x.get('id') === conversationId);
20+
const lastStatusId = conversation.get('last_status', null);
721

8-
return {
9-
accounts: conversation.get('accounts').map(accountId => state.getIn(['accounts', accountId], null)),
10-
unread: conversation.get('unread'),
11-
lastStatusId: conversation.get('last_status', null),
22+
return {
23+
accounts: conversation.get('accounts').map(accountId => state.getIn(['accounts', accountId], null)),
24+
unread: conversation.get('unread'),
25+
lastStatus: lastStatusId && getStatus(state, { id: lastStatusId }),
26+
};
1227
};
1328
};
1429

15-
const mapDispatchToProps = (dispatch, { conversationId }) => ({
16-
markRead: () => dispatch(markConversationRead(conversationId)),
30+
const mapDispatchToProps = (dispatch, { intl, conversationId }) => ({
31+
32+
markRead () {
33+
dispatch(markConversationRead(conversationId));
34+
},
35+
36+
reply (status, router) {
37+
dispatch((_, getState) => {
38+
let state = getState();
39+
40+
if (state.getIn(['compose', 'text']).trim().length !== 0) {
41+
dispatch(openModal('CONFIRM', {
42+
message: intl.formatMessage(messages.replyMessage),
43+
confirm: intl.formatMessage(messages.replyConfirm),
44+
onConfirm: () => dispatch(replyCompose(status, router)),
45+
}));
46+
} else {
47+
dispatch(replyCompose(status, router));
48+
}
49+
});
50+
},
51+
52+
delete () {
53+
dispatch(deleteConversation(conversationId));
54+
},
55+
56+
onMute (status) {
57+
if (status.get('muted')) {
58+
dispatch(unmuteStatus(status.get('id')));
59+
} else {
60+
dispatch(muteStatus(status.get('id')));
61+
}
62+
},
63+
64+
onToggleHidden (status) {
65+
if (status.get('hidden')) {
66+
dispatch(revealStatus(status.get('id')));
67+
} else {
68+
dispatch(hideStatus(status.get('id')));
69+
}
70+
},
71+
1772
});
1873

19-
export default connect(mapStateToProps, mapDispatchToProps)(Conversation);
74+
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Conversation));

0 commit comments

Comments
 (0)
⚡