From cdce69e677c811ba20072ce99e0644ba42273f41 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 10 Sep 2018 13:20:01 +0200 Subject: [PATCH] Improve messenger UI in apps --- .../src/less2/include/messenger.less | 61 +++++++++++++++++-- customize.dist/src/less2/include/toolbar.less | 3 +- www/common/toolbar3.js | 6 +- www/contacts/messenger-ui.js | 32 ++++++++-- 4 files changed, 89 insertions(+), 13 deletions(-) diff --git a/customize.dist/src/less2/include/messenger.less b/customize.dist/src/less2/include/messenger.less index a086f528b..1725edd7b 100644 --- a/customize.dist/src/less2/include/messenger.less +++ b/customize.dist/src/less2/include/messenger.less @@ -54,8 +54,7 @@ } #cp-app-contacts-friendlist { - width: 350px; - max-width: 30%; + width: 200px; 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%); diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 5a17cc291..5b000b77c 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/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; diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js index b5e16a27a..f04b74c41 100644 --- a/www/common/toolbar3.js +++ b/www/common/toolbar3.js @@ -414,8 +414,10 @@ Messenger, MessengerUI, Messages) { }; var initChat = function (toolbar) { - var $container = $('
', {id: 'cp-app-contacts-container'}) - .prependTo(toolbar.chatContent); + var $container = $('
', { + 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); diff --git a/www/contacts/messenger-ui.js b/www/contacts/messenger-ui.js index 517008c80..59207b589 100644 --- a/www/contacts/messenger-ui.js +++ b/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); });