diff --git a/lib/editor-binding.js b/lib/editor-binding.js index 25a8872f..20106343 100644 --- a/lib/editor-binding.js +++ b/lib/editor-binding.js @@ -4,6 +4,7 @@ const path = require('path') const {Range, Emitter, Disposable, CompositeDisposable, TextBuffer} = require('atom') const {getEditorURI} = require('./uri-helpers') const {FollowState} = require('@atom/teletype-client') +const getAvatarURL = require('./get-avatar-url') module.exports = class EditorBinding { @@ -148,6 +149,15 @@ class EditorBinding { markerLayer = this.editor.addMarkerLayer() this.editor.decorateMarkerLayer(markerLayer, {type: 'cursor', class: cursorClassForSiteId(siteId, {blink: false})}) this.editor.decorateMarkerLayer(markerLayer, {type: 'highlight', class: 'selection'}) + + const {login} = this.portal.getSiteIdentity(siteId) + const overlayElement = document.createElement('div') + overlayElement.className = `avatar-below-cursor-site color--site-${siteId}` + const overlayImageElement = document.createElement('img') + overlayImageElement.src = getAvatarURL(login, 40) + overlayElement.appendChild(overlayImageElement) + this.editor.decorateMarkerLayer(markerLayer, {type: 'overlay', class: 'avatar-below-cursor', item: overlayElement}) + this.markerLayersBySiteId.set(siteId, markerLayer) } diff --git a/styles/teletype.less b/styles/teletype.less index 03ab387b..d81a400e 100644 --- a/styles/teletype.less +++ b/styles/teletype.less @@ -386,9 +386,26 @@ } } +.avatar-below-cursor { + pointer-events: none; + + img { + height: 44px; + border: 2px solid transparent; + border-radius: 50% + } + + .avatar-below-cursor-site { + border: solid 2px transparent; + border-radius: 50%; + position: relative; + left: -50%; + } +} // Site colors .cursor.ParticipantCursor, // cursor -.SitePositionsComponent-site.color { // avatar +.SitePositionsComponent-site.color, // avatar +.avatar-below-cursor-site.color { &--site-1 { border-color: @ui-site-color-1; } &--site-2 { border-color: @ui-site-color-2; } &--site-3 { border-color: @ui-site-color-3; }