diff --git a/customize.dist/src/less2/include/messenger.less b/customize.dist/src/less2/include/messenger.less index 0883d45df..98ee8c7ad 100644 --- a/customize.dist/src/less2/include/messenger.less +++ b/customize.dist/src/less2/include/messenger.less @@ -266,6 +266,8 @@ flex: 1; overflow-x: auto; .cp-app-contacts-message { + display: flex; + flex-wrap: wrap; & > div { padding: 0 10px; } @@ -275,6 +277,8 @@ &> * { margin: 0; } + flex: 1; + min-width: 70%; } .cp-app-contacts-date { display: none; @@ -284,6 +288,20 @@ margin-top: 10px; font-weight: bold; background-color: rgba(0,0,0,0.1); + display: flex; + justify-content: space-between; + width: 100%; + } + .cp-app-contacts-time { + display: none; + font-size: 0.8em; + align-items: center; + color: @color; + } + &:hover { + .cp-app-contacts-time { + display: flex; + } } } } diff --git a/www/contacts/messenger-ui.js b/www/contacts/messenger-ui.js index 5cf793f52..c924aeeac 100644 --- a/www/contacts/messenger-ui.js +++ b/www/contacts/messenger-ui.js @@ -154,12 +154,20 @@ define([ markup.message = function (msg) { var curvePublic = msg.author; var name = msg.name || contactsData[msg.author].displayName; + var d = msg.time ? new Date(msg.time) : undefined; + var day = d ? d.toLocaleDateString() : ''; + var hour = d ? d.toLocaleTimeString() : ''; return h('div.cp-app-contacts-message', { - title: msg.time? new Date(msg.time).toLocaleString(): '?', + //title: time || '?', 'data-user': curvePublic, + 'data-day': day }, [ - name? h('div.cp-app-contacts-sender', name): undefined, + name? h('div.cp-app-contacts-sender', [ + h('span.cp-app-contacts-sender-name', name), + h('span.cp-app-contacts-sender-time', day) + ]): undefined, m(msg.text), + h('div.cp-app-contacts-time', hour) ]); }; @@ -170,7 +178,8 @@ define([ var normalizeLabels = function ($messagebox) { $messagebox.find('div.cp-app-contacts-message').toArray().reduce(function (a, b) { var $b = $(b); - if ($(a).data('user') === $b.data('user')) { + if ($(a).data('user') === $b.data('user') && + $(a).data('day') === $b.data('day')) { $b.find('.cp-app-contacts-sender').hide(); return a; } @@ -567,6 +576,7 @@ define([ // update label in friend list $userlist.find(userQuery(curvePublic)).find('.cp-app-contacts-name').text(name); + $userlist.find(userQuery(curvePublic)).attr('title', name); // update title bar and messages $messages.find(userQuery(curvePublic) + ' .cp-app-contacts-header ' + @@ -680,6 +690,25 @@ define([ } }); + common.getMetadataMgr().onTitleChange(function () { + var padChat = common.getPadChat(); + var md = common.getMetadataMgr().getMetadata(); + var name = md.title || md.defaultTitle(); + $userlist.find(dataQuery(padChat)).find('.cp-app-contacts-name').text(name); + $userlist.find(dataQuery(padChat)).attr('title', name); + $messages.find(dataQuery(padChat) + ' .cp-app-contacts-header .cp-app-contacts-name') + .text(name); + + var $mAvatar = $messages.find(dataQuery(padChat) +' .cp-app-contacts-header .cp-avatar'); + var $lAvatar = $userlist.find(dataQuery(padChat)); + $lAvatar.find('.cp-avatar-default, media-tag').remove(); + + var $div = $('
'); + common.displayAvatar($div, null, name, function ($img) { + $mAvatar.html($div.html()); + $lAvatar.find('.cp-app-contacts-right-col').before($div.html()); + }); + }); // TODO room // messenger.on('joinroom', function (chanid)) @@ -715,7 +744,9 @@ define([ return void console.error('Invalid pad chat'); } var room = rooms[0]; - room.name = 'XXX Pad chat'; // XXX + var md = common.getMetadataMgr().getMetadata(); + var name = md.title || md.defaultTitle(); + room.name = name; rooms.forEach(initializeRoom); });