Merge pull request #9149 from RocketChat/hotfix/unread-line

Fix: Unread line
RocketChat · Dec 15, 2017 · 1ba24fe · 1ba24fe
2 parents bcc4e02 + 607f668
commit 1ba24fe
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 29 deletions.
diff --git a/packages/rocketchat-theme/client/imports/general/base.css b/packages/rocketchat-theme/client/imports/general/base.css
@@ -121,7 +121,7 @@ button {
 	&::before {
 		position: absolute;
 		z-index: 1;
-		top: -10px;
+		top: 0;
 		left: 0;
 
 		width: 100%;
@@ -137,21 +137,24 @@ button {
 	&::after {
 		position: absolute;
 		z-index: 2;
-		top: -20px;
+		top: -6px;
 		right: 0;
 
-		padding: 0 1rem;
+		padding: 0 5px;
+		padding-bottom: 2px;
 
 		content: attr(data-unread-text);
 		text-align: right;
-		text-transform: uppercase;
+		text-transform: lowercase;
 
 		color: var(--rc-color-error);
 		background: #ffffff;
 
 		font-size: 10px;
 
 		pointer-events: none;
+		line-height: 10px;
+		border-radius: 2px;
 	}
 }
 
@@ -166,7 +169,7 @@ button {
 		}
 
 		&::after {
-			top: -30px;
+			top: -26px;
 		}
 	}
 }
diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -2145,7 +2145,7 @@
 
 .rc-old .container-bars {
 	position: absolute;
-	z-index: 1;
+	z-index: 2;
 	top: 4px; /* --header-height */
 	right: 10px;
 	left: 10px;
@@ -2879,7 +2879,7 @@
 	}
 
 	&.new-day {
-		margin-top: 60px;
+		margin-top: 40px;
 
 		&::before {
 			position: absolute;
@@ -2897,6 +2897,8 @@
 
 			font-size: 12px;
 			font-weight: 600;
+
+			pointer-events: none;
 		}
 
 		&::after {
@@ -2911,6 +2913,8 @@
 			content: " ";
 
 			border-width: 1px 0 0;
+
+			pointer-events: none;
 		}
 	}
 
@@ -3096,10 +3100,6 @@
 
 	}
 
-	&.first-unread {
-		margin-top: 20px;
-	}
-
 	&.system .body {
 		font-style: italic;
 

diff --git a/packages/rocketchat-ui/client/views/app/modal.js b/packages/rocketchat-ui/client/views/app/modal.js
@@ -51,14 +51,15 @@ this.modal = {
 		errorEl.style.display = 'block';
 	},
 	onKeydown(e) {
-		e.preventDefault();
-		e.stopPropagation();
-
 		if (e.key === 'Enter') {
+			e.preventDefault();
+			e.stopPropagation();
+
 			modal.confirm(true);
-		}
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			e.stopPropagation();
 
-		if (e.key === 'Escape') {
 			modal.close();
 		}
 	}

diff --git a/packages/rocketchat-ui/client/views/app/room.js b/packages/rocketchat-ui/client/views/app/room.js
@@ -917,26 +917,36 @@ Template.room.onRendered(function() {
 
 	const rtl = $('html').hasClass('rtl');
 
-	const updateUnreadCount = _.throttle(function() {
-		let lastInvisibleMessageOnScreen;
+	const getElementFromPoint = function(topOffset = 0) {
 		const messageBoxOffset = messageBox.offset();
 
+		let element;
 		if (rtl) {
-			lastInvisibleMessageOnScreen = document.elementFromPoint((messageBoxOffset.left + messageBox.width()) - 1, messageBoxOffset.top + 1);
+			element = document.elementFromPoint((messageBoxOffset.left + messageBox.width()) - 1, messageBoxOffset.top + topOffset + 1);
 		} else {
-			lastInvisibleMessageOnScreen = document.elementFromPoint(messageBoxOffset.left + 1, messageBoxOffset.top + 1);
+			element = document.elementFromPoint(messageBoxOffset.left + 1, messageBoxOffset.top + topOffset + 1);
 		}
 
-		if ((lastInvisibleMessageOnScreen != null ? lastInvisibleMessageOnScreen.id : undefined) != null) {
-			const lastMessage = ChatMessage.findOne(lastInvisibleMessageOnScreen.id);
-			if (lastMessage != null) {
-				const subscription = ChatSubscription.findOne({ rid: template.data._id });
-				const count = ChatMessage.find({ rid: template.data._id, ts: { $lte: lastMessage.ts, $gt: (subscription != null ? subscription.ls : undefined) } }).count();
-				template.unreadCount.set(count);
-			} else {
-				template.unreadCount.set(0);
-			}
+		if (element && element.classList.contains('message')) {
+			return element;
 		}
+	};
+
+	const updateUnreadCount = _.throttle(function() {
+		const lastInvisibleMessageOnScreen = getElementFromPoint(0) || getElementFromPoint(20) || getElementFromPoint(40);
+
+		if (lastInvisibleMessageOnScreen == null || lastInvisibleMessageOnScreen.id == null) {
+			return template.unreadCount.set(0);
+		}
+
+		const lastMessage = ChatMessage.findOne(lastInvisibleMessageOnScreen.id);
+		if (lastMessage == null) {
+			return template.unreadCount.set(0);
+		}
+
+		const subscription = ChatSubscription.findOne({ rid: template.data._id }, {reactive: false});
+		const count = ChatMessage.find({ rid: template.data._id, ts: { $lte: lastMessage.ts, $gt: subscription && subscription.ls } }).count();
+		template.unreadCount.set(count);
 	}, 300);
 
 	readMessage.onRead(function(rid) {