Use CSS rules for username popup.

Signed-off-by: Gökay Şatır <gokaysatir@collabora.com>
Change-Id: I29baf471058b7142724dbff1ec06cf82488ed390

3 files changed, 34 insertions, 18 deletions

diff --git a/browser/css/cool.css b/browser/css/cool.css
index b4bc578627..a9b4053c20 100644
--- a/browser/css/cool.css
+++ b/browser/css/cool.css
@@ -1110,6 +1110,30 @@ nav.spreadsheet-color-indicator ~ #sidebar-dock-wrapper {
 	min-width: 100px;
 }
 
+.username-pop-up {
+	width: 110px;
+	height: 45px;
+	position: absolute;
+	text-align: center;
+	z-index: 11;
+}
+
+.username-pop-up p {
+	line-height: 45px;
+	padding: 0;
+	margin: auto;
+	color: white;
+}
+
+.username-pop-up .arrow-div {
+	width: 20px;
+	height: 20px;
+	transform: rotate(45deg);
+	display: inline-block;
+	position: relative;
+	top: -10px;
+}
+
 #hyperlink-pop-up-preview {
 	text-align: center;
 }
diff --git a/browser/src/canvas/sections/OtherViewCellCursorSection.ts b/browser/src/canvas/sections/OtherViewCellCursorSection.ts
index ba366bc56a..6d323ce619 100644
--- a/browser/src/canvas/sections/OtherViewCellCursorSection.ts
+++ b/browser/src/canvas/sections/OtherViewCellCursorSection.ts
@@ -57,7 +57,10 @@ class OtherViewCellCursorSection extends CanvasSectionObject {
         if (!this.showSection || !this.sectionProperties.popUpShown)
             return;
 
-        const pos = [this.myTopLeft[0] / app.dpiScale + this.size[0] * 0.5 / app.dpiScale - 55, (this.myTopLeft[1] / app.dpiScale) - 60];
+        const width = this.sectionProperties.popUpContainer.getBoundingClientRect().width;
+        const height = this.sectionProperties.popUpContainer.getBoundingClientRect().height;
+
+        const pos = [this.myTopLeft[0] / app.dpiScale + this.size[0] * 0.5 / app.dpiScale - (width * 0.5), (this.myTopLeft[1] / app.dpiScale) - (height + 15)];
         this.sectionProperties.popUpContainer.style.left = pos[0] + 'px';
         this.sectionProperties.popUpContainer.style.top = pos[1] + 'px';
     }
@@ -66,12 +69,7 @@ class OtherViewCellCursorSection extends CanvasSectionObject {
         if (this.sectionProperties.popUpContainer === null) {
             const popUpContainer = document.createElement('div');
 
-            popUpContainer.style.width = '110px';
-            popUpContainer.style.height = '45px';
-            popUpContainer.style.display = 'none';
-            popUpContainer.style.position = 'absolute';
-            popUpContainer.style.textAlign = 'center';
-            popUpContainer.style.zIndex = '11';
+            popUpContainer.className = 'username-pop-up';
 
             const nameContainer = document.createElement('div');
             popUpContainer.appendChild(nameContainer);
@@ -79,25 +77,19 @@ class OtherViewCellCursorSection extends CanvasSectionObject {
             const nameParagraph = document.createElement('p');
             nameContainer.appendChild(nameParagraph);
             nameParagraph.textContent = this.sectionProperties.username;
-            nameParagraph.style.padding = '0';
-            nameParagraph.style.lineHeight = '45px';
-            nameParagraph.style.margin = 'auto';
 
             const arrowDiv = document.createElement('div');
-            arrowDiv.style.width = arrowDiv.style.height = '20px';
-            arrowDiv.style.transform = 'rotate(45deg)';
-            arrowDiv.style.display = 'inline-block';
-            arrowDiv.style.position = 'relative';
-            arrowDiv.style.top = '-10px';
+            arrowDiv.className = 'arrow-div';
             popUpContainer.appendChild(arrowDiv);
 
             popUpContainer.style.backgroundColor = nameContainer.style.backgroundColor = this.sectionProperties.color;
             arrowDiv.style.backgroundColor = nameParagraph.style.backgroundColor = this.sectionProperties.color;
-            nameParagraph.style.color = 'white';
 
             document.getElementById('document-container').appendChild(popUpContainer);
 
             this.sectionProperties.popUpContainer = popUpContainer;
+
+            this.hideUsernamePopUp();
         }
     }
 
diff --git a/browser/src/layer/tile/CanvasTileLayer.js b/browser/src/layer/tile/CanvasTileLayer.js
index 4ccd01d764..7a9750cdea 100644
--- a/browser/src/layer/tile/CanvasTileLayer.js
+++ b/browser/src/layer/tile/CanvasTileLayer.js
@@ -2449,8 +2449,8 @@ L.CanvasTileLayer = L.Layer.extend({
 				this._map.setPart(viewCursorSection.sectionProperties.part);
 
 			if (!viewCursorSection.isVisible) {
-				const scrollX = viewCursorSection.position[0] - app.file.viewedRectangle.pWidth * 0;
-				const scrollY = viewCursorSection.position[1] - app.file.viewedRectangle.pHeight * 0;
+				const scrollX = viewCursorSection.position[0];
+				const scrollY = viewCursorSection.position[1];
 				this.scrollToPos(new app.definitions.simplePoint(scrollX * app.pixelsToTwips, scrollY * app.pixelsToTwips));
 			}