sforkowany z mirror/soapbox
Chats: add empty chats message
rodzic
44f7ad5e1c
commit
14eec701cb
|
@ -10,7 +10,7 @@ import { makeGetChat } from 'soapbox/selectors';
|
|||
const mapStateToProps = state => {
|
||||
const getChat = makeGetChat();
|
||||
return {
|
||||
chats: state.get('chats').map(chat => getChat(state, chat.toJS())),
|
||||
chats: state.get('chats').map(chat => getChat(state, chat.toJS())).toList(),
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -22,6 +22,7 @@ class ChatList extends ImmutablePureComponent {
|
|||
dispatch: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
onClickChat: PropTypes.func,
|
||||
emptyMessage: PropTypes.node,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
|
@ -29,12 +30,15 @@ class ChatList extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { chats } = this.props;
|
||||
const { chats, emptyMessage } = this.props;
|
||||
|
||||
return (
|
||||
<div className='chat-list'>
|
||||
<div className='chat-list__content'>
|
||||
{chats.toList().map(chat => (
|
||||
{chats.count() === 0 &&
|
||||
<div className='empty-column-indicator'>{emptyMessage}</div>
|
||||
}
|
||||
{chats.map(chat => (
|
||||
<div key={chat.get('id')} className='chat-list-item'>
|
||||
<ChatListAccount
|
||||
chat={chat}
|
||||
|
|
|
@ -54,18 +54,25 @@ class ChatPanes extends ImmutablePureComponent {
|
|||
const panes = panesData.get('panes');
|
||||
const mainWindow = panesData.get('mainWindow');
|
||||
|
||||
const mainWindowPane = (
|
||||
<div className={`pane pane--main pane--${mainWindow}`}>
|
||||
<div className='pane__header'>
|
||||
<button className='pane__title' onClick={this.handleMainWindowToggle}>
|
||||
<FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
|
||||
</button>
|
||||
</div>
|
||||
<div className='pane__content'>
|
||||
<ChatList
|
||||
onClickChat={this.handleClickChat}
|
||||
emptyMessage={<FormattedMessage id='chat_panels.main_window.empty' defaultMessage="No chats found. To start a chat, visit a user's profile." />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='chat-panes'>
|
||||
<div className={`pane pane--main pane--${mainWindow}`}>
|
||||
<div className='pane__header'>
|
||||
<button className='pane__title' onClick={this.handleMainWindowToggle}>
|
||||
<FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
|
||||
</button>
|
||||
</div>
|
||||
<div className='pane__content'>
|
||||
<ChatList onClickChat={this.handleClickChat} />
|
||||
</div>
|
||||
</div>
|
||||
{mainWindowPane}
|
||||
{panes.map((pane, i) =>
|
||||
<ChatWindow idx={i} pane={pane} key={pane.get('chat_id')} />
|
||||
)}
|
||||
|
|
|
@ -130,4 +130,16 @@
|
|||
|
||||
.chat-list {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
|
||||
&__content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.empty-column-indicator {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -678,7 +678,6 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 160px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
|
||||
@supports(display: grid) { // hack to fix Chrome <57
|
||||
contain: strict;
|
||||
|
|
Ładowanie…
Reference in New Issue