Merge pull request #8883 from RocketChat/unread-message

[FIX] Change the unread messages style
RocketChat · Dec 4, 2017 · 4aac05b · 4aac05b
2 parents 4c4b4a0 + 2010ad8
commit 4aac05b
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 68 deletions.
diff --git a/packages/rocketchat-theme/client/imports/general/base.css b/packages/rocketchat-theme/client/imports/general/base.css
@@ -116,3 +116,53 @@ button {
 .ps-scrollbar-y {
 	width: 4px !important;
 }
+
+.first-unread .body {
+	&::before {
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		left: 0;
+
+		width: 100%;
+		height: 1px;
+
+		content: "";
+
+		background: var(--rc-color-error);
+	}
+
+	&::after {
+		position: absolute;
+		z-index: 2;
+		top: -10px;
+		right: 0;
+
+		padding: 0 1rem;
+
+		content: attr(data-unread-text);
+		text-align: right;
+		text-transform: uppercase;
+
+		color: var(--rc-color-error);
+		background: #ffffff;
+
+		font-size: 10px;
+	}
+}
+
+.message.new-day.first-unread {
+	&::after {
+		border-color: var(--rc-color-error);
+	}
+
+	& .body {
+		&::before {
+			display: none;
+		}
+
+		&::after {
+			top: -30px;
+		}
+	}
+}
diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -135,50 +135,6 @@
 	-moz-box-orient: vertical;
 }
 
-.rc-old .first-unread,
-.rc-old .cozy .first-unread,
-.rc-old .compact .first-unread {
-	&.message,
-	&.sequential.message {
-		padding-top: 20px;
-	}
-
-	& .body {
-		&::before {
-			position: absolute;
-			top: 0;
-			right: 0;
-			left: 0;
-
-			display: block;
-
-			height: 16px;
-
-			content: "";
-			transition: background-color, 0.5s, linear;
-		}
-
-		&::after {
-			position: absolute;
-			top: 0;
-			right: 0;
-			left: 0;
-
-			display: block;
-
-			padding: 0 5px;
-
-			content: attr(data-unread-text);
-			transition: color, 0.5s, linear;
-			text-align: center;
-			text-transform: uppercase;
-
-			font-size: 12px;
-			line-height: 16px;
-		}
-	}
-}
-
 .rc-old .text-center {
 	text-align: center;
 }

diff --git a/packages/rocketchat-theme/server/colors.less b/packages/rocketchat-theme/server/colors.less
@@ -561,25 +561,6 @@ input:-webkit-autofill {
 /** ----------------------------------------------------------------------------
  * Message content
  */
-.first-unread {
-	.body {
-		&::before {
-			background: @transparent-darker;
-		}
-
-		&::after {
-			color: @primary-font-color;
-		}
-	}
-}
-
-.first-unread-opaque {
-	.body {
-		&::before {
-			background: @transparent-dark;
-		}
-	}
-}
 
 .message {
 	&.new-day::before {

diff --git a/packages/rocketchat-ui/client/lib/readMessages.js b/packages/rocketchat-ui/client/lib/readMessages.js
@@ -125,9 +125,6 @@ const readMessage = new class {
 			return;
 		}
 
-		const $roomDom = $(room.dom);
-		$roomDom.find('.message.first-unread').addClass('first-unread-opaque');
-
 		if (!subscription.alert && (subscription.unread === 0)) {
 			room.unreadSince.set(undefined);
 			return;
@@ -137,7 +134,6 @@ const readMessage = new class {
 			return;
 		}
 
-		$roomDom.find('.message.first-unread').removeClass('first-unread').removeClass('first-unread-opaque');
 
 		let lastReadRecord = ChatMessage.findOne({
 			rid: subscription.rid,
@@ -184,7 +180,7 @@ const readMessage = new class {
 
 			if (firstUnreadRecord != null) {
 				room.unreadFirstId = firstUnreadRecord._id;
-				return $roomDom.find(`.message#${ firstUnreadRecord._id }`).addClass('first-unread');
+				$(room.dom).find(`.message#${ firstUnreadRecord._id }`).addClass('first-unread');
 			}
 		}
 	}