tykayn
/
mastodon
mirror of https://framagit.org/tykayn/mastodon.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
app/javascript/mastodon/features/ui/components/messaging/contacts-list.js
View File

@ -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 >

67
app/javascript/mastodon/features/ui/components/messaging/conversation-item.js Normal file
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;
}
}

2
app/javascript/mastodon/features/ui/components/messaging/conversation-stream.js
View File

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

3
app/javascript/mastodon/features/ui/components/messaging/messaging.js
View File

@ -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 >
);
}

7
app/javascript/styles/bliss/messaging.scss
View File

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