Improve messenger UI in apps

customize.dist/src/less2/include/messenger.less

@@ -54,8 +54,7 @@
     }
 
     #cp-app-contacts-friendlist {
-        width: 350px;
+        width: 200px;
-        max-width: 30%;
         height: 100%;
         background-color: lighten(@bg-color, 10%);
         overflow-y: auto;
@@ -65,10 +64,16 @@
             margin: 10px;
             cursor: pointer;
             position: relative;
+            height: 48px;
             .cp-app-contacts-right-col {
                 margin-left: 5px;
                 display: flex;
                 flex-flow: column;
+                flex: 1;
+                min-width: 0;
+                .cp-app-contacts-name {
+                    white-space: nowrap;
+                }
             }
             &:hover {
                 background-color: rgba(0,0,0,0.3);
@@ -84,6 +89,54 @@
                 color: darken(@color, 20%);
             }
         }
+
+        .cp-app-contacts-category {
+            display: flex;
+            flex-flow: column;
+            .cp-app-contacts-category-title {
+                order: 1;
+                font-size: 18px;
+                margin: 0 5px;
+                text-align: center;
+                background: rgba(0,0,0,0.1);
+                font-weight: bold;
+                height: 22px;
+                line-height: 22px;
+            }
+            .cp-app-contacts-category-content {
+                order: 2;
+                &:empty {
+                    display: none;
+                    & ~ .cp-app-contacts-category-title {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+    #cp-app-contacts-container.cp-app-contacts-inapp {
+        #cp-app-contacts-friendlist {
+            transition: width 0.2s ease-in-out 0.2s;
+            width: 70px;
+            .cp-app-contacts-friend {
+                .cp-app-contacts-right-col {
+                    overflow: hidden;
+                }
+            }
+            .cp-app-contacts-category-title {
+                transition: font-size 0.2s ease-in-out 0.2s;
+                margin: 0 2px;
+                font-size: 16px;
+            }
+            &:hover {
+                transition-delay: 1.5s;
+                width: 200px;
+                .cp-app-contacts-category-title {
+                    transition-delay: 1.5s;
+                    font-size: 18px;
+                }
+            }
+        }
     }
 
     #cp-app-contacts-friendlist .cp-app-contacts-friend, #cp-app-contacts-messaging .cp-avatar {
@@ -227,7 +280,7 @@
                 margin: 5px 0;
                 padding: 5px 10px;
                 border: none;
-                height: 50px;
+                height: 54px; // 2 lines (22px height) + 2 margins (5px)
                 flex: 1;
                 background-color: darken(@bg-color, 10%);
                 color: @color;
@@ -239,7 +292,7 @@
                 }
             }
             button {
-                height: 50px;
+                height: 54px;
                 border-radius: 0;
                 border: none;
                 background-color: darken(@bg-color, 15%);

customize.dist/src/less2/include/toolbar.less

@@ -138,7 +138,8 @@
         background-color: @toolbar-bg-color;
         background-color: var(--toolbar-bg-color);
         font: @colortheme_app-font-size @colortheme_font;
-        width: 400px;
+        width: 30%;
+        min-width: 400px;
         display: block;
         overflow-y: auto;
         overflow-x: hidden;

www/common/toolbar3.js

@@ -414,8 +414,10 @@ Messenger, MessengerUI, Messages) {
     };
 
     var initChat = function (toolbar) {
-        var $container = $('<div>', {id: 'cp-app-contacts-container'})
+        var $container = $('<div>', {
-                            .prependTo(toolbar.chatContent);
+            id: 'cp-app-contacts-container',
+            'class': 'cp-app-contacts-inapp'
+        }).prependTo(toolbar.chatContent);
         var sframeChan = Common.getSframeChannel();
         var messenger = Messenger.create(sframeChan);
         MessengerUI.create(messenger, $container, Common);

www/contacts/messenger-ui.js

@@ -60,6 +60,17 @@ define([
 
         var friendList = h('div#cp-app-contacts-friendlist', [
             h('span.fa.fa-spinner.fa-pulse.fa-4x.fa-fw.cp-app-contacts-spinner'),
+            h('div.cp-app-contacts-padchat.cp-app-contacts-category', [
+                h('div.cp-app-contacts-category-content')
+            ]),
+            h('div.cp-app-contacts-friends.cp-app-contacts-category', [
+                h('div.cp-app-contacts-category-content'),
+                h('h2.cp-app-contacts-category-title', 'Friends'), // XXX
+            ]),
+            h('div.cp-app-contacts-rooms.cp-app-contacts-category', [
+                h('div.cp-app-contacts-category-content'),
+                h('h2.cp-app-contacts-category-title', 'Rooms'), // XXX
+            ]),
         ]);
 
         var $userlist = $(friendList).appendTo($container);
@@ -217,8 +228,6 @@ define([
             });
 
             $(removeHistory).click(function () {
-                // XXX
-                console.error("TODO: only display clear button if owned");
                 UI.confirm(Messages.contacts_confirmRemoveHistory, function (yes) {
                     if (!yes) { return; }
 
@@ -397,7 +406,8 @@ define([
         markup.room = function (id, room, userlist) {
             var roomEl = h('div.cp-app-contacts-friend.cp-avatar', {
                 'data-key': id,
-                'data-user': room.isFriendChat ? userlist[0].curvePublic : ''
+                'data-user': room.isFriendChat ? userlist[0].curvePublic : '',
+                title: room.name
             });
 
             var remove = h('span.cp-app-contacts-remove.fa.fa-user-times', {
@@ -410,7 +420,8 @@ define([
             var status = h('span.cp-app-contacts-status');
             var rightCol = h('span.cp-app-contacts-right-col', [
                 h('span.cp-app-contacts-name', [room.name]),
-                room.isFriendChat ? remove : leaveRoom,
+                room.isFriendChat ? remove :
+                    room.isPadChat ? undefined : leaveRoom,
             ]);
 
             var friendData = room.isFriendChat ? userlist[0] : {};
@@ -609,7 +620,16 @@ define([
                 normalizeLabels($messagebox);
 
                 var roomEl = markup.room(id, room, list);
-                $userlist.append(roomEl);
+
+                var $parentEl;
+                if (room.isFriendChat) {
+                    $parentEl = $userlist.find('.cp-app-contacts-friends');
+                } else if (room.isPadChat) {
+                    $parentEl = $userlist.find('.cp-app-contacts-padchat');
+                } else {
+                    $parentEl = $userlist.find('.cp-app-contacts-rooms');
+                }
+                $parentEl.find('.cp-app-contacts-category-content').append(roomEl);
 
                 updateStatus(id);
             });
@@ -668,7 +688,7 @@ define([
                     return void console.error('Invalid pad chat');
                 }
                 var room = rooms[0];
-                room.name = 'XXX Pad chat';
+                room.name = 'XXX Pad chat'; // XXX
                 rooms.forEach(initializeRoom);
             });