Annotations: User Avatar: Fix broken image and set border to its parent instead of applying to the image itself

Change-Id: I04bbf704c981d80b04f2e003905129b857b28316
Reviewed-on: https://gerrit.libreoffice.org/85376
Reviewed-by: Pedro Pinto da Silva <pedro.silva@collabora.com>
Tested-by: Pedro Pinto da Silva <pedro.silva@collabora.com>

2 files changed, 23 insertions, 2 deletions

diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index fc2c817b7..626ec32c6 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -487,6 +487,23 @@ body {
 .loleaflet-annotation-img {
 	max-width: 32px;
 	display: inline-block;
+	border: solid 2px;
+	border-radius: 50%;
+	height: 32px;
+	width: 32px;
+}
+.loleaflet-annotation-img .avatar-img{
+	border: none;
+	padding-top: 3px;
+}
+.loleaflet-annotation-img > .avatar-img{
+	display: block;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	width: 32px; /* Width of new image */
+	height: 32px; /* Height of new image */
+	padding-left: 32px; /* Equal to width of new image */
+	background: url(images/user.png) center 3px no-repeat;
 }
 
 .leaflet-container .leaflet-pane.leaflet-calc-background-pane {
diff --git a/loleaflet/src/layer/marker/Annotation.js b/loleaflet/src/layer/marker/Annotation.js
index ed12b0003..4c57b09e4 100644
--- a/loleaflet/src/layer/marker/Annotation.js
+++ b/loleaflet/src/layer/marker/Annotation.js
@@ -203,10 +203,11 @@ L.Annotation = L.Layer.extend({
 		var tdImg = L.DomUtil.create(tagTd, 'loleaflet-annotation-img', tr);
 		var tdAuthor = L.DomUtil.create(tagTd, 'loleaflet-annotation-author', tr);
 		var imgAuthor = L.DomUtil.create('img', 'avatar-img', tdImg);
-		imgAuthor.setAttribute('src', L.Icon.Default.imagePath + '/user.png');
+		imgAuthor.setAttribute('src', 'images/user.png');
 		imgAuthor.setAttribute('width', this.options.imgSize.x);
 		imgAuthor.setAttribute('height', this.options.imgSize.y);
 		this._authorAvatarImg = imgAuthor;
+		this._authorAvatartdImg = tdImg;
 		this._contentAuthor = L.DomUtil.create(tagDiv, 'loleaflet-annotation-content-author', tdAuthor);
 		this._contentDate = L.DomUtil.create(tagDiv, 'loleaflet-annotation-date', tdAuthor);
 
@@ -381,10 +382,13 @@ L.Annotation = L.Layer.extend({
 
 		this._updateResolvedField(this._data.resolved);
 		$(this._authorAvatarImg).attr('src', this._data.avatar);
+		if (!this._data.avatar) {
+			$(this._authorAvatarImg).css('padding-top', '4px');
+		}
 		var user = this._map.getViewId(this._data.author);
 		if (user >= 0) {
 			var color = L.LOUtil.rgbToHex(this._map.getViewColor(user));
-			$(this._authorAvatarImg).css('border-color', color);
+			$(this._authorAvatartdImg).css('border-color', color);
 		}
 
 		var d = new Date(this._data.dateTime.replace(/,.*/, 'Z'));