diff --git a/www/common/inner/common-mediatag.js b/www/common/inner/common-mediatag.js index db15d83d4..e061667ce 100644 --- a/www/common/inner/common-mediatag.js +++ b/www/common/inner/common-mediatag.js @@ -46,6 +46,7 @@ define([ var animal_avatars = {}; MT.getCursorAvatar = function (cursor) { var uid = cursor.uid; + // TODO it would be nice to have "{0} is editing" instead of just their name var html = ''; if (cursor.avatar && avatars[cursor.avatar]) { html += (cursor.avatar && avatars[cursor.avatar]) || ''; @@ -100,7 +101,7 @@ define([ return ANIMALS[seed % ANIMALS.length]; }; - var getPrettyInitials = function (name) { + var getPrettyInitials = MT.getPrettyInitials = function (name) { var parts = name.split(/\s+/); var text; if (parts.length > 1) { diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 69924ef77..098560548 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -159,6 +159,14 @@ margin-right: 5px; .tools_unselectable(); cursor: default; + &.cp-cursor.cp-tippy-html { + background-color: var(--red); + // XXX figure out how to inherit this from avatar.less + font-size: 11px; // 20px / 1.8 as per avatar.less.. + &.animal { + font-size: 14px; // 20px / 1.8 * (6/5)... + } + } } } .kanban-item { diff --git a/www/kanban/inner.js b/www/kanban/inner.js index 42b1e39fa..fe80b1007 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -59,7 +59,7 @@ define([ verbose = function () {}; // comment out to enable verbose logging var onRedraw = Util.mkEvent(); var onCursorUpdate = Util.mkEvent(); - var remoteCursors = {}; // XXX + var remoteCursors = {}; var setValueAndCursor = function (input, val, _cursor) { if (!input) { return; } @@ -95,18 +95,27 @@ define([ var getAvatar = function (cursor, noClear) { // Tippy - var html = MT.getCursorAvatar(cursor); // XXX + var html = MT.getCursorAvatar(cursor); - var l = Util.getFirstCharacter(cursor.name || Messages.anonymous); + var name = UI.getDisplayName(cursor.name); + + var l; + var animal = ''; + if (cursor.name === Messages.anonymous && typeof(cursor.uid) === 'string') { + l = MT.getPseudorandomAnimal(cursor.uid); + animal = '.animal'; + } else { + l = MT.getPrettyInitials(name); + } var text = ''; if (cursor.color) { - text = 'color:'+getTextColor(cursor.color)+';'; + text = 'background-color:' + cursor.color + '; color:'+getTextColor(cursor.color)+';'; } - var avatar = h('span.cp-cursor.cp-tippy-html', { // XXX - style: "background-color: " + (cursor.color || 'red') + ";"+text, + var avatar = h('span.cp-cursor.cp-tippy-html' + animal, { + style: text, 'data-cptippy-html': true, - title: html, // XXX "{0} is editing" + title: html, }, l); if (!noClear) { cursor.clear = function () { @@ -852,7 +861,7 @@ define([ getAvatar: getAvatar, openLink: openLink, getTags: getExistingTags, - cursors: remoteCursors, // XXX + cursors: remoteCursors, boards: boards, _boards: Util.clone(boards), }); @@ -1062,6 +1071,7 @@ define([ var kanban; var $container = $('#cp-app-kanban-content'); + var myData = framework._.cpNfInner.metadataMgr.getUserData(); var privateData = framework._.cpNfInner.metadataMgr.getPrivateData(); if (!privateData.isEmbed) { mkHelpMenu(framework); @@ -1101,7 +1111,7 @@ define([ $container.find('.kanban-edit-item').remove(); }); - var getCursor = function () { // XXX + var getCursor = function () { if (!kanban || !kanban.inEditMode) { return; } try { var id = kanban.inEditMode; @@ -1204,7 +1214,7 @@ define([ var remoteContent = newContent.content; if (Sortify(currentContent) !== Sortify(remoteContent)) { - var cursor = getCursor(); // XXX + var cursor = getCursor(); verbose("Content is different.. Applying content"); kanban.options.boards = remoteContent; updateBoards(framework, kanban, remoteContent); @@ -1261,11 +1271,13 @@ define([ }); var myCursor = {}; - onCursorUpdate.reg(function (data) { // XXX + onCursorUpdate.reg(function (data) { + console.log('onCursorUpdate', data); myCursor = data; + myCursor.uid = myData.uid; framework.updateCursor(); }); - framework.onCursorUpdate(function (data) { // XXX + framework.onCursorUpdate(function (data) { if (!data) { return; } if (data.reset) { Object.keys(remoteCursors).forEach(function (id) { @@ -1293,9 +1305,8 @@ define([ if (!cursor.item && !cursor.board) { return; } // Add new cursor - var avatar = getAvatar(cursor); // XXX + var avatar = getAvatar(cursor); var $item = $('.kanban-item[data-eid="'+cursor.item+'"]'); - var $board = $('.kanban-board[data-id="'+cursor.board+'"]'); if ($item.length) { remoteCursors[id] = cursor; $item.find('.cp-kanban-cursors').append(avatar);