From eb1b9903a6f60d024d71bffd635e6fec7edc59a9 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 20 Oct 2018 02:23:58 +0200 Subject: [PATCH] Redesign direct messages column (#9022) --- .../mastodon/components/avatar_composite.js | 96 +++++++++++++++++++ .../mastodon/components/display_name.js | 19 ++-- app/javascript/mastodon/components/status.js | 23 +++-- .../components/conversation.js | 56 +++-------- .../containers/conversation_container.js | 4 +- .../styles/mastodon/components.scss | 62 +++--------- 6 files changed, 152 insertions(+), 108 deletions(-) create mode 100644 app/javascript/mastodon/components/avatar_composite.js diff --git a/app/javascript/mastodon/components/avatar_composite.js b/app/javascript/mastodon/components/avatar_composite.js new file mode 100644 index 0000000000..4a9a73c512 --- /dev/null +++ b/app/javascript/mastodon/components/avatar_composite.js @@ -0,0 +1,96 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { autoPlayGif } from '../initial_state'; + +export default class AvatarComposite extends React.PureComponent { + + static propTypes = { + accounts: ImmutablePropTypes.list.isRequired, + animate: PropTypes.bool, + size: PropTypes.number.isRequired, + }; + + static defaultProps = { + animate: autoPlayGif, + }; + + renderItem (account, size, index) { + const { animate } = this.props; + + let width = 50; + let height = 100; + let top = 'auto'; + let left = 'auto'; + let bottom = 'auto'; + let right = 'auto'; + + if (size === 1) { + width = 100; + } + + if (size === 4 || (size === 3 && index > 0)) { + height = 50; + } + + if (size === 2) { + if (index === 0) { + right = '2px'; + } else { + left = '2px'; + } + } else if (size === 3) { + if (index === 0) { + right = '2px'; + } else if (index > 0) { + left = '2px'; + } + + if (index === 1) { + bottom = '2px'; + } else if (index > 1) { + top = '2px'; + } + } else if (size === 4) { + if (index === 0 || index === 2) { + right = '2px'; + } + + if (index === 1 || index === 3) { + left = '2px'; + } + + if (index < 2) { + bottom = '2px'; + } else { + top = '2px'; + } + } + + const style = { + left: left, + top: top, + right: right, + bottom: bottom, + width: `${width}%`, + height: `${height}%`, + backgroundSize: 'cover', + backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`, + }; + + return ( +
+ ); + } + + render() { + const { accounts, size } = this.props; + + return ( +
+ {accounts.take(4).map((account, i) => this.renderItem(account, accounts.size, i))} +
+ ); + } + +} diff --git a/app/javascript/mastodon/components/display_name.js b/app/javascript/mastodon/components/display_name.js index c3a9ab9211..c2c40cb3f5 100644 --- a/app/javascript/mastodon/components/display_name.js +++ b/app/javascript/mastodon/components/display_name.js @@ -1,25 +1,28 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import PropTypes from 'prop-types'; export default class DisplayName extends React.PureComponent { static propTypes = { account: ImmutablePropTypes.map.isRequired, - withAcct: PropTypes.bool, - }; - - static defaultProps = { - withAcct: true, + others: ImmutablePropTypes.list, }; render () { - const { account, withAcct } = this.props; + const { account, others } = this.props; const displayNameHtml = { __html: account.get('display_name_html') }; + let suffix; + + if (others && others.size > 1) { + suffix = `+${others.size}`; + } else { + suffix = @{account.get('acct')}; + } + return ( - {withAcct && @{account.get('acct')}} + {suffix} ); } diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 90c689a75a..0b23e51f8a 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import Avatar from './avatar'; import AvatarOverlay from './avatar_overlay'; +import AvatarComposite from './avatar_composite'; import RelativeTimestamp from './relative_timestamp'; import DisplayName from './display_name'; import StatusContent from './status_content'; @@ -45,6 +46,8 @@ class Status extends ImmutablePureComponent { static propTypes = { status: ImmutablePropTypes.map, account: ImmutablePropTypes.map, + otherAccounts: ImmutablePropTypes.list, + onClick: PropTypes.func, onReply: PropTypes.func, onFavourite: PropTypes.func, onReblog: PropTypes.func, @@ -60,6 +63,7 @@ class Status extends ImmutablePureComponent { onToggleHidden: PropTypes.func, muted: PropTypes.bool, hidden: PropTypes.bool, + unread: PropTypes.bool, onMoveUp: PropTypes.func, onMoveDown: PropTypes.func, }; @@ -74,6 +78,11 @@ class Status extends ImmutablePureComponent { ] handleClick = () => { + if (this.props.onClick) { + this.props.onClick(); + return; + } + if (!this.context.router) { return; } @@ -158,7 +167,7 @@ class Status extends ImmutablePureComponent { let media = null; let statusAvatar, prepend, rebloggedByText; - const { intl, hidden, featured } = this.props; + const { intl, hidden, featured, otherAccounts, unread } = this.props; let { status, account, ...other } = this.props; @@ -249,9 +258,11 @@ class Status extends ImmutablePureComponent { } } - if (account === undefined || account === null) { + if (otherAccounts) { + statusAvatar = ; + } else if (account === undefined || account === null) { statusAvatar = ; - }else{ + } else { statusAvatar = ; } @@ -269,10 +280,10 @@ class Status extends ImmutablePureComponent { return ( -
+
{prepend} -
+
@@ -281,7 +292,7 @@ class Status extends ImmutablePureComponent { {statusAvatar}
- +
diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.js b/app/javascript/mastodon/features/direct_timeline/components/conversation.js index 52e33c3c85..7277b7f0fc 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversation.js +++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.js @@ -2,13 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import StatusContent from '../../../components/status_content'; -import RelativeTimestamp from '../../../components/relative_timestamp'; -import DisplayName from '../../../components/display_name'; -import Avatar from '../../../components/avatar'; -import AttachmentList from '../../../components/attachment_list'; -import { HotKeys } from 'react-hotkeys'; -import classNames from 'classnames'; +import StatusContainer from '../../../containers/status_container'; export default class Conversation extends ImmutablePureComponent { @@ -19,7 +13,7 @@ export default class Conversation extends ImmutablePureComponent { static propTypes = { conversationId: PropTypes.string.isRequired, accounts: ImmutablePropTypes.list.isRequired, - lastStatus: ImmutablePropTypes.map.isRequired, + lastStatusId: PropTypes.string, unread:PropTypes.bool.isRequired, onMoveUp: PropTypes.func, onMoveDown: PropTypes.func, @@ -31,13 +25,13 @@ export default class Conversation extends ImmutablePureComponent { return; } - const { lastStatus, unread, markRead } = this.props; + const { lastStatusId, unread, markRead } = this.props; if (unread) { markRead(); } - this.context.router.history.push(`/statuses/${lastStatus.get('id')}`); + this.context.router.history.push(`/statuses/${lastStatusId}`); } handleHotkeyMoveUp = () => { @@ -49,44 +43,20 @@ export default class Conversation extends ImmutablePureComponent { } render () { - const { accounts, lastStatus, lastAccount, unread } = this.props; + const { accounts, lastStatusId, unread } = this.props; - if (lastStatus === null) { + if (lastStatusId === null) { return null; } - const handlers = { - moveDown: this.handleHotkeyMoveDown, - moveUp: this.handleHotkeyMoveUp, - open: this.handleClick, - }; - - let media; - - if (lastStatus.get('media_attachments').size > 0) { - media = ; - } - return ( - -
-
-
-
{accounts.map(account => )}
-
- -
- -
- -
-
- - - - {media} -
- + ); } diff --git a/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js b/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js index e2e2e3afb5..bd6f6bfb01 100644 --- a/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js +++ b/app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js @@ -4,13 +4,11 @@ import { markConversationRead } from '../../../actions/conversations'; const mapStateToProps = (state, { conversationId }) => { const conversation = state.getIn(['conversations', 'items']).find(x => x.get('id') === conversationId); - const lastStatus = state.getIn(['statuses', conversation.get('last_status')], null); return { accounts: conversation.get('accounts').map(accountId => state.getIn(['accounts', accountId], null)), unread: conversation.get('unread'), - lastStatus, - lastAccount: lastStatus === null ? null : state.getIn(['accounts', lastStatus.get('account')], null), + lastStatusId: conversation.get('last_status', null), }; }; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 24b614a37f..f77dc405c5 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -801,7 +801,7 @@ padding: 8px 10px; padding-left: 68px; position: relative; - min-height: 48px; + min-height: 54px; border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: default; @@ -823,7 +823,7 @@ margin-top: 8px; } - &.status-direct { + &.status-direct:not(.read) { background: lighten($ui-base-color, 8%); border-bottom-color: lighten($ui-base-color, 12%); } @@ -1133,6 +1133,18 @@ vertical-align: middle; margin-right: 5px; } + + &-composite { + @include avatar-radius(); + overflow: hidden; + + & > div { + @include avatar-radius(); + float: left; + position: relative; + box-sizing: border-box; + } + } } a .account__avatar { @@ -5497,49 +5509,3 @@ noscript { } } } - -.conversation { - padding: 14px 10px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - cursor: pointer; - - &--unread { - background: lighten($ui-base-color, 8%); - border-bottom-color: lighten($ui-base-color, 12%); - } - - &__header { - display: flex; - margin-bottom: 15px; - } - - &__avatars { - overflow: hidden; - flex: 1 1 auto; - - & > div { - display: flex; - flex-wrap: none; - width: 900px; - } - - .account__avatar { - margin-right: 10px; - } - } - - &__time { - flex: 0 0 auto; - font-size: 14px; - color: $darker-text-color; - text-align: right; - - .display-name { - color: $secondary-text-color; - } - } - - .attachment-list.compact { - margin-top: 15px; - } -}