diff --git a/app/soapbox/features/chats/components/chat_list.js b/app/soapbox/features/chats/components/chat_list.js index daac2a07c..34808fa80 100644 --- a/app/soapbox/features/chats/components/chat_list.js +++ b/app/soapbox/features/chats/components/chat_list.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import { injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { fetchChats } from 'soapbox/actions/chats'; -import Account from 'soapbox/components/account'; +import ChatListAccount from './chat_list_account'; const mapStateToProps = state => ({ chats: state.get('chats'), @@ -23,6 +23,10 @@ class ChatList extends ImmutablePureComponent { this.props.dispatch(fetchChats()); } + handleClickChat = () => { + // TODO: Open or focus chat panel + } + render() { const { chats } = this.props; @@ -34,7 +38,10 @@ class ChatList extends ImmutablePureComponent {
{chats.toList().map(chat => (
- +
))}
diff --git a/app/soapbox/features/chats/components/chat_list_account.js b/app/soapbox/features/chats/components/chat_list_account.js new file mode 100644 index 000000000..9864e854e --- /dev/null +++ b/app/soapbox/features/chats/components/chat_list_account.js @@ -0,0 +1,38 @@ +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import PropTypes from 'prop-types'; +import Avatar from '../../../components/avatar'; +import DisplayName from '../../../components/display_name'; +import ImmutablePureComponent from 'react-immutable-pure-component'; + +export default class ChatListAccount extends ImmutablePureComponent { + + static propTypes = { + account: ImmutablePropTypes.map.isRequired, + onClick: PropTypes.func, + }; + + handleClick = () => { + this.props.onClick(this.props.account); + } + + render() { + const { account } = this.props; + if (!account) return null; + + return ( +
+
+ ); + } + +} diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss index 4b0980850..d9bbe2283 100644 --- a/app/styles/accounts.scss +++ b/app/styles/accounts.scss @@ -327,9 +327,10 @@ .account { padding: 10px; + position: relative; &:not(:last-of-type) { - border-bottom: 1px solid var(--brand-color--med); + border-bottom: 1px solid var(--brand-color--med); } &.compact { diff --git a/app/styles/basics.scss b/app/styles/basics.scss index 53119ffc4..88dad067e 100644 --- a/app/styles/basics.scss +++ b/app/styles/basics.scss @@ -228,4 +228,8 @@ noscript { left: 0; position: absolute; z-index: 9999; + background: transparent; + border: 0; + margin: 0; + padding: 0; } diff --git a/app/styles/chats.scss b/app/styles/chats.scss index 7cd165b17..ae95038a4 100644 --- a/app/styles/chats.scss +++ b/app/styles/chats.scss @@ -16,7 +16,6 @@ &__content { background: var(--foreground-color); - padding: 10px; } &__actions {