split conversation example

This commit is contained in:
Baptiste Lemoine 2019-12-22 18:48:13 +01:00
parent 0b5c3dba2a
commit 8661eb28a4
5 changed files with 93 additions and 61 deletions

View File

@ -14,7 +14,8 @@ export default class ContactsList extends React.PureComponent {
// liste de contacts // liste de contacts
// </div > // </div >
// ); // );
const contactlist = null; const contactlist = ['machin', 'bidule', 'chuck norris'];
const conversationList = ['machin', 'bidule', 'chuck norris'];
return ( return (
<div className='messaging-container'> <div className='messaging-container'>
@ -32,71 +33,29 @@ export default class ContactsList extends React.PureComponent {
} }
</div > </div >
<div className='user-list column-header'> <div className='user-list column-header'>
<h2 className='title'>User list</h2 > <h2 className='title'>la liste de contacts</h2 >
<ul > <ul className='contact-list'>
{contactlist && {contactlist.forEach(elem => {
<p > return (
la liste de contacts <li className='contact-item'>
</p > {elem}
} </li >
);
})}
</ul > </ul >
</div > </div >
</div > </div >
<div className='conversations_list'> <div className='conversations_list'>
<ul > <ul >
<li className='conversations_item has-new-message'> {conversationList.forEach(elem => {
<div className='title'> return (
<i <div className='conversation'>
role='img' {elem}
className='fa fa-envelope column-header__icon fa-fw'
/>
Un Gens
<span className='new-message-counter'>
(3)</span >
<button className='btn-small'>
<i
role='img'
className='fa fa-caret-down column-header__icon fa-fw'
/>
</button >
</div >
<div className='conversation_stream'>
<div className='message theirs'>
<p >oh hello there! 😋 </p >
<div className='arrow-down' />
</div > </div >
<div className='message mine'> );
<p >General Emoji</p > })}
<div className='arrow-down' />
</div >
<div className='message theirs'>
<p >we just achieved comedy</p >
<div className='arrow-down' />
</div >
</div >
<div className='conversation_input'>
<form
action='#'
onSubmit={this.submitCompose()}
>
<textarea
name='messager'
id=''
cols='15'
rows='3'
className='messager-textarea'
placeholder='allez dis nous tout'
/>
<input
type='submit'
name='submit'
value='Send'
/>
</form >
</div >
</li >
</ul > </ul >
</div > </div >
</div > </div >

View File

@ -0,0 +1,67 @@
import React from 'react';
export default class ConversationItem extends React.PureComponent {
following = [];
render() {
const list = (
<li className='conversations_item has-new-message'>
<div className='title'>
<i
role='img'
className='fa fa-envelope column-header__icon fa-fw'
/>
Un Gens
<span className='new-message-counter'>
(3)</span >
<button className='btn-small'>
<i
role='img'
className='fa fa-caret-down column-header__icon fa-fw'
/>
</button >
</div >
<div className='conversation_stream'>
<div className='message theirs'>
<p >oh hello there! 😋 </p >
<div className='arrow-down' />
</div >
<div className='message mine'>
<p >General Emoji</p >
<div className='arrow-down' />
</div >
<div className='message theirs'>
<p >we just achieved comedy</p >
<div className='arrow-down' />
</div >
</div >
<div className='conversation_input'>
<form
action='#'
onSubmit={this.submitCompose()}
>
<textarea
name='messager'
id=''
cols='15'
rows='3'
className='messager-textarea'
placeholder='allez dis nous tout'
/>
<input
type='submit'
name='submit'
value='Send'
/>
</form >
</div >
</li >
);
return list;
}
}

View File

@ -4,7 +4,7 @@ export default class ConversationStream extends React.PureComponent {
render() { render() {
return ( return (
<div > <div class='conversation-stream'>
ConversationStream todo ConversationStream todo
</div > </div >

View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import ContactsList from './contacts-list'; import ContactsList from './contacts-list';
import Conversation from './conversations';
export default class Messaging extends React.PureComponent { export default class Messaging extends React.PureComponent {
@ -52,8 +53,8 @@ export default class Messaging extends React.PureComponent {
<div > <div >
messagerie todo messagerie todo
{/*<Conversation />*/}
<ContactsList /> <ContactsList />
<Conversation />
</div > </div >
); );
} }

View File

@ -21,7 +21,12 @@ $messagingBoxHeight: 20em;
} }
.conversations_list { .conversations_list {
right: 1em;
position: absolute;
bottom: 0;
width: 100%;
padding: 0.5em;
background: gray;
} }