mirror of
https://framagit.org/tykayn/mastodon.git
synced 2023-08-25 08:33:12 +02:00
split conversation example
This commit is contained in:
parent
0b5c3dba2a
commit
8661eb28a4
@ -14,7 +14,8 @@ export default class ContactsList extends React.PureComponent {
|
||||
// liste de contacts
|
||||
// </div >
|
||||
// );
|
||||
const contactlist = null;
|
||||
const contactlist = ['machin', 'bidule', 'chuck norris'];
|
||||
const conversationList = ['machin', 'bidule', 'chuck norris'];
|
||||
|
||||
return (
|
||||
<div className='messaging-container'>
|
||||
@ -32,71 +33,29 @@ export default class ContactsList extends React.PureComponent {
|
||||
}
|
||||
</div >
|
||||
<div className='user-list column-header'>
|
||||
<h2 className='title'>User list</h2 >
|
||||
<ul >
|
||||
{contactlist &&
|
||||
<p >
|
||||
la liste de contacts
|
||||
</p >
|
||||
}
|
||||
<h2 className='title'>la liste de contacts</h2 >
|
||||
<ul className='contact-list'>
|
||||
{contactlist.forEach(elem => {
|
||||
return (
|
||||
<li className='contact-item'>
|
||||
{elem}
|
||||
</li >
|
||||
);
|
||||
})}
|
||||
</ul >
|
||||
</div >
|
||||
|
||||
</div >
|
||||
<div className='conversations_list'>
|
||||
<ul >
|
||||
<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' />
|
||||
{conversationList.forEach(elem => {
|
||||
return (
|
||||
<div className='conversation'>
|
||||
{elem}
|
||||
</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 >
|
||||
</div >
|
||||
</div >
|
||||
|
@ -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;
|
||||
|
||||
}
|
||||
|
||||
}
|
@ -4,7 +4,7 @@ export default class ConversationStream extends React.PureComponent {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div >
|
||||
<div class='conversation-stream'>
|
||||
ConversationStream todo
|
||||
|
||||
</div >
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import ContactsList from './contacts-list';
|
||||
import Conversation from './conversations';
|
||||
|
||||
export default class Messaging extends React.PureComponent {
|
||||
|
||||
@ -52,8 +53,8 @@ export default class Messaging extends React.PureComponent {
|
||||
<div >
|
||||
messagerie todo
|
||||
|
||||
{/*<Conversation />*/}
|
||||
<ContactsList />
|
||||
<Conversation />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
@ -21,7 +21,12 @@ $messagingBoxHeight: 20em;
|
||||
}
|
||||
|
||||
.conversations_list {
|
||||
|
||||
right: 1em;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
background: gray;
|
||||
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user