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 mapStateToProps = state => {
|
||||||
const getChat = makeGetChat();
|
const getChat = makeGetChat();
|
||||||
return {
|
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,
|
dispatch: PropTypes.func.isRequired,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
onClickChat: PropTypes.func,
|
onClickChat: PropTypes.func,
|
||||||
|
emptyMessage: PropTypes.node,
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -29,12 +30,15 @@ class ChatList extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { chats } = this.props;
|
const { chats, emptyMessage } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='chat-list'>
|
<div className='chat-list'>
|
||||||
<div className='chat-list__content'>
|
<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'>
|
<div key={chat.get('id')} className='chat-list-item'>
|
||||||
<ChatListAccount
|
<ChatListAccount
|
||||||
chat={chat}
|
chat={chat}
|
||||||
|
|
|
@ -54,18 +54,25 @@ class ChatPanes extends ImmutablePureComponent {
|
||||||
const panes = panesData.get('panes');
|
const panes = panesData.get('panes');
|
||||||
const mainWindow = panesData.get('mainWindow');
|
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 (
|
return (
|
||||||
<div className='chat-panes'>
|
<div className='chat-panes'>
|
||||||
<div className={`pane pane--main pane--${mainWindow}`}>
|
{mainWindowPane}
|
||||||
<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>
|
|
||||||
{panes.map((pane, i) =>
|
{panes.map((pane, i) =>
|
||||||
<ChatWindow idx={i} pane={pane} key={pane.get('chat_id')} />
|
<ChatWindow idx={i} pane={pane} key={pane.get('chat_id')} />
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -130,4 +130,16 @@
|
||||||
|
|
||||||
.chat-list {
|
.chat-list {
|
||||||
overflow-y: auto;
|
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;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-height: 160px;
|
min-height: 160px;
|
||||||
border-radius: 0 0 10px 10px;
|
|
||||||
|
|
||||||
@supports(display: grid) { // hack to fix Chrome <57
|
@supports(display: grid) { // hack to fix Chrome <57
|
||||||
contain: strict;
|
contain: strict;
|
||||||
|
|
Ładowanie…
Reference in New Issue