split conversation example

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

@@ -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 >
+            <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 >
           </div >
 
         </div >
         <div className='conversations_list'>
           <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 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 >

app/javascript/mastodon/features/ui/components/messaging/conversation-item.js

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

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

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

app/javascript/mastodon/features/ui/components/messaging/messaging.js

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

app/javascript/styles/bliss/messaging.scss

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