sforkowany z mirror/soapbox
Chats: Style the chat boxes
rodzic
6e0bac3d43
commit
0d7a926fa5
|
@ -4,11 +4,13 @@ import PropTypes from 'prop-types';
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { injectIntl } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
// import { getSettings } from 'soapbox/actions/settings';
|
||||
import ChatList from './chat_list';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { makeGetChat } from 'soapbox/selectors';
|
||||
// import { fromJS } from 'immutable';
|
||||
import { fromJS } from 'immutable';
|
||||
import Avatar from 'soapbox/components/avatar';
|
||||
import { acctFull } from 'soapbox/utils/accounts';
|
||||
|
||||
const addChatsToPanes = (state, panesData) => {
|
||||
const getChat = makeGetChat();
|
||||
|
@ -22,13 +24,15 @@ const addChatsToPanes = (state, panesData) => {
|
|||
};
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const panesData = getSettings(state).get('chats');
|
||||
// const panesData = getSettings(state).get('chats');
|
||||
|
||||
// const panesData = fromJS({
|
||||
// panes: [
|
||||
// { chat_id: '9ySohyWw0Gecd3WHKK', state: 'open' },
|
||||
// ],
|
||||
// });
|
||||
const panesData = fromJS({
|
||||
panes: [
|
||||
{ chat_id: '9ySoi8J7eTY0x78OBc', state: 'open' },
|
||||
{ chat_id: '9ySoi8J7eTY0x78OBc', state: 'open' },
|
||||
{ chat_id: '9ySoi8J7eTY0x78OBc', state: 'open' },
|
||||
],
|
||||
});
|
||||
|
||||
return {
|
||||
panesData: addChatsToPanes(state, panesData),
|
||||
|
@ -47,17 +51,21 @@ class ChatPanes extends ImmutablePureComponent {
|
|||
|
||||
renderChatPane = (pane, i) => {
|
||||
const chat = pane.get('chat');
|
||||
if (!chat) return null;
|
||||
const account = pane.getIn(['chat', 'account']);
|
||||
if (!chat || !account) return null;
|
||||
|
||||
const right = (285 * (i + 1)) + 20;
|
||||
|
||||
return (
|
||||
<div key={i} className='pane'>
|
||||
<div key={i} className='pane' style={{ right: `${right}px` }}>
|
||||
<div className='pane__header'>
|
||||
{chat.getIn(['account', 'acct'])}
|
||||
<Avatar account={account} size={18} />
|
||||
<div className='display-name__account'>@{acctFull(account)}</div>
|
||||
</div>
|
||||
<div className='pane__content'>
|
||||
// TODO: Show the chat messages
|
||||
<div style={{ padding: '10px' }}>TODO: Show the chat messages</div>
|
||||
<div className='pane__actions'>
|
||||
<input type='text' />
|
||||
<input type='text' placeholder='Send a message...' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,24 +1,61 @@
|
|||
.pane {
|
||||
@include standard-panel-shadow;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 20px;
|
||||
width: 265px;
|
||||
height: 265px;
|
||||
max-height: calc(100vh - 70px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 99999;
|
||||
|
||||
&--main {
|
||||
height: calc(100vh - 70px);
|
||||
}
|
||||
|
||||
&__header {
|
||||
background: var(--brand-color);
|
||||
color: #fff;
|
||||
padding: 6px 10px;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border-radius: 6px 6px 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.account__avatar {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.display-name__account {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
height: 100%;
|
||||
background: var(--foreground-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
background: var(--foreground-color);
|
||||
margin-top: auto;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 6px;
|
||||
background: var(--background-color);
|
||||
border: 6px solid var(--foreground-color);
|
||||
border-radius: 10px;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue