Messaging app

www/friends/main.js

@@ -7,9 +7,9 @@ define([
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
     'less!/customize/src/less/cryptpad.less',
 ], function ($, Crypto, Toolbar, Cryptpad) {
-    var Messages = Cryptpad.Messages;
+    //var Messages = Cryptpad.Messages;
 
-    var APP = {
+    var APP = window.APP = {
         Cryptpad: Cryptpad
     };
 
@@ -20,7 +20,7 @@ define([
 
         var ifrw = $('#pad-iframe')[0].contentWindow;
         var $iframe = $('#pad-iframe').contents();
-        var $appContainer = $iframe.find('#app');
+        //var $appContainer = $iframe.find('#app');
         var $list = $iframe.find('#friendList');
         var $messages = $iframe.find('#messaging');
         var $bar = $iframe.find('.toolbar-container');
@@ -37,7 +37,7 @@ define([
         var toolbar = APP.toolbar = Toolbar.create(configTb);
         toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
 
-        Cryptpad.getFriendListUI(Cryptpad).appendTo($list);
+        Cryptpad.initMessaging(Cryptpad, $list, $messages);
 
         Cryptpad.removeLoadingScreen();
     };

www/friends/main.less

@@ -3,6 +3,7 @@
 
 @button-border: 2px;
 @bg-color: @toolbar-friends-bg;
+@color: @toolbar-friends-color;
 
 html, body {
     margin: 0px;
@@ -22,6 +23,7 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
+    min-height: 0;
 }
 
 #app.ready {
@@ -34,14 +36,143 @@ body {
     display: inline-block;
 }
 
+
+@keyframes example {
+    0% {
+        background: rgba(0,0,0,0.1);
+    }
+    50% {
+        background: rgba(0,0,0,0.3);
+    }
+    100% {
+        background: rgba(0,0,0,0.1);
+    }
+}
 #friendList {
     width: 350px;
     height: 100%;
     background-color: lighten(@bg-color, 10%);
+    .friend {
+        background: rgba(0,0,0,0.1);
+        padding: 5px;
+        margin: 10px;
+        cursor: pointer;
+        &:hover {
+            background-color: rgba(0,0,0,0.3);
+        }
+        &.notify {
+            animation: example 2s ease-in-out infinite;
+        }
+    }
+}
+
+#friendList .friend, #messaging .header {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        color: @color;
+        .default, media-tag {
+            display: inline-flex;
+            width: 50px;
+            height: 50px;
+            justify-content: center;
+            align-items: center;
+            margin-right: 5px;
+            border-radius: 10px / 6px;
+            overflow: hidden;
+            border: 1px solid black;
+            box-sizing: content-box;
+        }
+        .default {
+            .unselectable();
+            background: white;
+            color: black;
+            font-size: 40px;
+        }
+        .right-col {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: flex;
+            flex-flow: column;
+            .name {
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            .friend {
+                padding: 0;
+            }
+        }
+        media-tag {
+            min-height: 50px;
+            min-width: 50px;
+            max-height: 50px;
+            max-width: 50px;
+            img {
+                color: #000;
+                min-width: 100%;
+                min-height: 100%;
+                max-width: none;
+                max-height: none; // To override 'media-tag img' in slide.less
+            }
+        }
+
+
 }
 
 #messaging {
     flex: 1;
     height: 100%;
     background-color: lighten(@bg-color, 20%);
+    min-width: 0;
+    .header {
+        background-color: lighten(@bg-color, 15%);
+        padding: 10px;
+    }
+    .chat {
+        height: 100%;
+        display: flex;
+        flex-flow: column;
+        .messages {
+            padding: 0 20px;
+            margin: 10px 0;
+            flex: 1;
+            overflow-x: auto;
+            .message {
+                & > div {
+                    padding: 0 10px;
+                }
+                .content {
+                    overflow: hidden;
+                    word-wrap: break-word;
+                }
+                .date {
+                    display: none;
+                    font-style: italic;
+                }
+                .sender {
+                    margin-top: 10px;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+    .input {
+        background-color: lighten(@bg-color, 15%);
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 75px;
+        input {
+            flex: 1;
+        }
+    }
 }
+