Add friend app and fix avatar size

customize.dist/pages.js

@@ -489,6 +489,10 @@ define([
         return loadingScreen();
     };
 
+    Pages['/friends/'] = Pages['/friends/index.html'] = function () {
+        return loadingScreen();
+    };
+
     Pages['/pad/'] = Pages['/pad/index.html'] = function () {
         return loadingScreen();
     };

customize.dist/src/less/toolbar.less

@@ -21,6 +21,7 @@
 .slideColor { color: @toolbar-slide-bg; }
 .pollColor { color: @toolbar-poll-bg; }
 .fileColor { color: @toolbar-file-bg; }
+.friendsColor { color: @toolbar-friends-bg; }
 .whiteboardColor { color: @toolbar-whiteboard-bg; }
 .driveColor { color: @toolbar-drive-bg; }
 .defaultColor { color: @toolbar-default-bg; }
@@ -165,7 +166,6 @@ body .userlist-drawer {
                     min-height: 100%;
                     max-width: none;
                     max-height: none; // To override 'media-tag img' in slide.less
-                    flex-shrink: 0;
                 }
             }
         }
@@ -310,6 +310,11 @@ body {
         @color: @toolbar-file-color;
         .addToolbarColors(@color, @bgcolor);
     }
+    &.app-friends {
+        @bgcolor: @toolbar-friends-bg;
+        @color: @toolbar-friends-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
 
 }
 

customize.dist/src/less/variables.less

@@ -97,6 +97,8 @@
 @toolbar-drive-color: #fff;
 @toolbar-file-bg: #cd2532;
 @toolbar-file-color: #fff;
+@toolbar-friends-bg: #607B8D;
+@toolbar-friends-color: #fff;
 @toolbar-default-bg: #ddd;
 @toolbar-default-color: #000;
 

customize.dist/template.js

@@ -12,7 +12,7 @@ $(function () {
     var Messages = Cryptpad.Messages;
     var $body = $('body');
     var isMainApp = function () {
-        return /^\/(pad|code|slide|poll|whiteboard|file|media|drive)\/$/.test(location.pathname);
+        return /^\/(pad|code|slide|poll|whiteboard|file|media|friends|drive)\/$/.test(location.pathname);
     };
 
     var rightLink = function (ref, loc, txt) {
@@ -148,6 +148,9 @@ $(function () {
                 } else if (/file/.test(pathname)) {
                     $('body').append(h('body', Pages[pathname]()).innerHTML);
                     require([ '/file/main.js' ], ready);
+                } else if (/friends/.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    require([ '/friends/main.js' ], ready);
                 } else if (/pad/.test(pathname)) {
                     $('body').append(h('body', Pages[pathname]()).innerHTML);
                     require([ '/pad/main.js' ], ready);

www/common/common-messaging.js

@@ -1,10 +1,47 @@
 define([
+    'jquery',
     '/bower_components/chainpad-crypto/crypto.js',
-], function (Crypto) {
+], function ($, Crypto) {
     var Msg = {};
 
     var pending = {};
 
+    Msg.getFriendList = function (common) {
+        var proxy = common.getProxy();
+        return proxy.friends || {};
+    };
+
+    var avatars = {};
+    Msg.getFriendListUI = function (common) {
+        var proxy = common.getProxy();
+        var $block = $('<div>');
+        var friends = proxy.friends || {};
+        Object.keys(friends).forEach(function (f) {
+            var data = friends[f];
+            var $friend = $('<div>', {'class': 'friend'}).appendTo($block);
+            $friend.data('key', f);
+            var $rightCol = $('<span>', {'class': 'right-col'});
+            $('<span>', {'class': 'name'}).text(data.displayName).appendTo($rightCol);
+            $friend.dblclick(function () {
+                window.open('/profile/#' + data.profile);
+            });
+            $friend.click(function () {
+                // TODO
+            });
+            if (data.avatar && avatars[data.avatar]) {
+                $friend.append(avatars[data.avatar]);
+                $friend.append($rightCol);
+            } else {
+                common.displayAvatar($friend, data.avatar, data.displayName, function ($img) {
+                    if (data.avatar && $img) {
+                        avatars[data.avatar] = $img[0].outerHTML;
+                    }
+                    $friend.append($rightCol);
+                });
+            }
+        });
+    };
+
     Msg.createOwnedChannel = function (common, channelId, validateKey, owners, cb) {
         var network = common.getNetwork();
         network.join(channelId).then(function (wc) {
@@ -56,7 +93,8 @@ define([
             displayName: proxy[common.displayNameKey],
             profile: proxy.profile.view,
             edPublic: proxy.edPublic,
-            curvePublic: proxy.curvePublic
+            curvePublic: proxy.curvePublic,
+            avatar: proxy.profile.avatar
         };
     };
 
@@ -68,7 +106,6 @@ define([
     Msg.addDirectMessageHandler = function (common) {
         var network = common.getNetwork();
         if (!network) { return void console.error('Network not ready'); }
-        var proxy = common.getProxy();
         network.on('message', function (message, sender) {
             var msg;
             if (sender === network.historyKeeper) { return; }
@@ -85,7 +122,6 @@ define([
                 msg = JSON.parse(decryptMsg);
                 if (msg[1] !== parsed.hashData.channel) { return; }
                 var msgData = msg[2];
-                var msg;
                 var msgStr;
                 if (msg[0] === "FRIEND_REQ") {
                     msg = ["FRIEND_REQ_NOK", chan];

www/common/cryptpad-common.js

@@ -1307,29 +1307,34 @@ define([
                             }
                             var $image = $img.find('img');
                             var onLoad = function () {
-                                var w = $image.width();
+                                var img = new Image();
-                                var h = $image.height();
+                                img.src = $image.attr('src');
+                                img.onload = function () {
+                                    var w = img.width;
+                                    var h = img.height;
+                                    console.log(w,h);
                                     if (w>h) {
                                         $image.css('max-height', '100%');
-                                    $img.css('flex-direction', 'row');
+                                        $img.css('flex-direction', 'column');
                                         if (cb) { cb($img); }
                                         return;
                                     }
                                     $image.css('max-width', '100%');
-                                $img.css('flex-direction', 'column');
+                                    $img.css('flex-direction', 'row');
                                     if (cb) { cb($img); }
                                 };
+                            };
                             if ($image[0].complete) { onLoad(); }
                             $image.on('load', onLoad);
                         }
                     });
+                });
                 observer.observe($img[0], {
                     attributes: false,
                     childList: true,
                     characterData: false
                 });
             });
-            });
         }
     };
 

www/common/toolbar2.js

@@ -676,7 +676,7 @@ define([
         $('<span>', {'class': 'bar3'}).appendTo($container);
         $('<span>', {'class': 'bar4'}).appendTo($container);
         $('<span>', {'class': 'disconnected fa fa-exclamation-circle'}).appendTo($a);
-        if (config.realtime) {
+        if (config.network) {
             checkLag(toolbar, config, $a);
             setInterval(function () {
                 if (!toolbar.connected) { return; }

www/friends/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="cp pad">
+<head>
+    <title>CryptPad</title>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.1.15"></script>
+    <style>
+        html, body {
+            margin: 0px;
+            padding: 0px;
+        }
+        #pad-iframe {
+            position:fixed;
+            top:0px;
+            left:0px;
+            bottom:0px;
+            right:0px;
+            width:100%;
+            height:100%;
+            border:none;
+            margin:0;
+            padding:0;
+            overflow:hidden;
+        }
+    </style>
+</head>
+<body>
+    <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
+

www/friends/inner.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
+    <script async data-bootload="/friends/inner.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.1.15"></script>
+    <style>.loading-hidden, .loading-hidden * {display: none !important;}</style>
+</head>
+<body class="loading-hidden">
+    <div id="toolbar" class="toolbar-container"></div>
+    <div id="app">
+        <div id="friendList"></div>
+        <div id="messaging"></div>
+    </div>
+</body>
+</html>
+

www/friends/inner.js

@@ -0,0 +1,13 @@
+define([
+    'jquery',
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'less!/friends/main.less',
+    'less!/customize/src/less/toolbar.less',
+], function ($) {
+    $('.loading-hidden').removeClass('loading-hidden');
+    // dirty hack to get rid the flash of the lock background
+    setTimeout(function () {
+        $('#app').addClass('ready');
+    }, 100);
+});

www/friends/main.js

@@ -0,0 +1,50 @@
+define([
+    'jquery',
+    '/bower_components/chainpad-crypto/crypto.js',
+    '/common/toolbar2.js',
+    '/common/cryptpad-common.js',
+
+    '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 APP = {
+        Cryptpad: Cryptpad
+    };
+
+    $(function () {
+
+    var andThen = function () {
+        Cryptpad.addLoadingScreen();
+
+        var ifrw = $('#pad-iframe')[0].contentWindow;
+        var $iframe = $('#pad-iframe').contents();
+        var $appContainer = $iframe.find('#app');
+        var $list = $iframe.find('#friendList');
+        var $messages = $iframe.find('#messaging');
+        var $bar = $iframe.find('.toolbar-container');
+
+        var displayed = ['useradmin', 'newpad', 'limit', 'lag', 'spinner'];
+
+        var configTb = {
+            displayed: displayed,
+            ifrw: ifrw,
+            common: Cryptpad,
+            $container: $bar,
+            network: Cryptpad.getNetwork()
+        };
+        var toolbar = APP.toolbar = Toolbar.create(configTb);
+        toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
+        
+
+        Cryptpad.removeLoadingScreen();
+    };
+
+    Cryptpad.ready(function () {
+        andThen();
+        Cryptpad.reportAppUsage();
+    });
+
+    });
+});

www/friends/main.less

@@ -0,0 +1,47 @@
+@import "/customize/src/less/variables.less";
+@import "/customize/src/less/mixins.less";
+
+@button-border: 2px;
+@bg-color: @toolbar-friends-bg;
+
+html, body {
+    margin: 0px;
+    height: 100%;
+}
+
+#toolbar {
+    display: flex; // We need this to remove a 3px border at the bottom of the toolbar
+}
+
+body {
+    display: flex;
+    flex-flow: column;
+}
+#app {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#app.ready {
+    //background: url('/customize/bg3.jpg') no-repeat center center;
+    background-size: cover;
+    background-position: center;
+}
+.cryptpad-toolbar {
+    padding: 0px;
+    display: inline-block;
+}
+
+#friendList {
+    width: 350px;
+    height: 100%;
+    background-color: lighten(@bg-color, 10%);
+}
+
+#messaging {
+    flex: 1;
+    height: 100%;
+    background-color: lighten(@bg-color, 20%);
+}

www/profile/main.less

@@ -57,7 +57,7 @@
                 min-height: 100%;
                 max-width: none;
                 max-height: none;
-                flex-shrink: 0;
+                flex: 1;
             }
         }
         button {