Update badges and mention links colors (#14071)

* Update color palette for badges and mention links

* Update MentionsParser

* Fix @ALL and @here click event

* Remove mention link ticks from thread quotes

* Patch reviewed issues

app/mentions/client/mentionLink.css

@@ -1,27 +1,37 @@
+.message .mention-link,
 .mention-link {
 	padding: 0 6px 2px;
 
-	transition: border-radius 0.3s;
+	transition: opacity 0.3s, background-color 0.3s, color 0.3s;
 
-	color: var(--mention-link-text-color) !important;
+	color: var(--mention-link-text-color);
 
 	border-radius: var(--mention-link-radius);
 
-	background-color: var(--mention-link-background) !important;
+	background-color: var(--mention-link-background);
 
 	font-weight: 700;
 
 	&:hover {
-		border-radius: var(--border-radius);
+		opacity: 0.6;
+		color: var(--mention-link-text-color);
 	}
 
 	&--me {
-		color: var(--mention-link-me-text-color) !important;
-		background-color: var(--mention-link-me-background) !important;
+		color: var(--mention-link-me-text-color);
+		background-color: var(--mention-link-me-background);
+
+		&:hover {
+			color: var(--mention-link-me-text-color);
+		}
 	}
 
 	&--group {
-		color: var(--mention-link-group-text-color) !important;
-		background-color: var(--mention-link-group-background) !important;
+		color: var(--mention-link-group-text-color);
+		background-color: var(--mention-link-group-background);
+
+		&:hover {
+			color: var(--mention-link-group-text-color);
+		}
 	}
 }

app/mentions/lib/MentionsParser.js

@@ -41,18 +41,25 @@ export class MentionsParser {
 
 	replaceUsers = (msg, { mentions, temp }, me) => msg
 		.replace(this.userMentionRegex, (match, prefix, mention) => {
-			const isGroupMention = ['all', 'here'].includes(mention);
-			const className = [
-				'mention-link',
-				'mention-link--user',
-				mention === 'all' && 'mention-link--all',
-				mention === 'here' && 'mention-link--here',
-				mention === me && 'mention-link--me',
-				isGroupMention && 'mention-link--group',
-			].filter(Boolean).join(' ');
-
-			if (isGroupMention) {
-				return `${ prefix }<a class="${ className }">${ mention }</a>`;
+			const classNames = ['mention-link'];
+
+			if (mention === 'all') {
+				classNames.push('mention-link--all');
+				classNames.push('mention-link--group');
+			} else if (mention === 'here') {
+				classNames.push('mention-link--here');
+				classNames.push('mention-link--group');
+			} else if (mention === me) {
+				classNames.push('mention-link--me');
+				classNames.push('mention-link--user');
+			} else {
+				classNames.push('mention-link--user');
+			}
+
+			const className = classNames.join(' ');
+
+			if (mention === 'all' || mention === 'here') {
+				return `${ prefix }<a class="${ className }" data-group="${ mention }">${ mention }</a>`;
 			}
 
 			const label = temp ?

app/mentions/tests/client.tests.js

@@ -215,7 +215,7 @@ describe('replace methods', function() {
 	describe('replaceUsers', () => {
 		it('should render for @all', () => {
 			const result = mentionsParser.replaceUsers('@all', message, 'me');
-			assert.equal('<a class="mention-link mention-link--user mention-link--all mention-link--group">all</a>', result);
+			assert.equal(result, '<a class="mention-link mention-link--all mention-link--group" data-group="all">all</a>');
 		});
 
 		const str2 = 'rocket.cat';
@@ -237,7 +237,7 @@ describe('replace methods', function() {
 
 		it('should render for me', () => {
 			const result = mentionsParser.replaceUsers('hello @me', message, 'me');
-			assert.equal(result, 'hello <a class="mention-link mention-link--user mention-link--me" data-username="me" title="me">me</a>');
+			assert.equal(result, 'hello <a class="mention-link mention-link--me mention-link--user" data-username="me" title="me">me</a>');
 		});
 	});
 
@@ -248,7 +248,7 @@ describe('replace methods', function() {
 
 		it('should render for @all', () => {
 			const result = mentionsParser.replaceUsers('@all', message, 'me');
-			assert.equal(result, '<a class="mention-link mention-link--user mention-link--all mention-link--group">all</a>');
+			assert.equal(result, '<a class="mention-link mention-link--all mention-link--group" data-group="all">all</a>');
 		});
 
 		const str2 = 'rocket.cat';
@@ -284,7 +284,7 @@ describe('replace methods', function() {
 
 		it('should render for me', () => {
 			const result = mentionsParser.replaceUsers('hello @me', message, 'me');
-			assert.equal(result, 'hello <a class="mention-link mention-link--user mention-link--me" data-username="me" title="me">Me</a>');
+			assert.equal(result, 'hello <a class="mention-link mention-link--me mention-link--user" data-username="me" title="me">Me</a>');
 		});
 	});
 

app/theme/client/imports/general/variables.css

@@ -1,4 +1,28 @@
 :root {
+	/*
+	 * Color palette
+	 */
+	--color-dark-100: #0c0d0f;
+	--color-dark-90: #1e232a;
+	--color-dark-80: #2e343e;
+	--color-dark-70: #53585f;
+	--color-dark-30: #9da2a9;
+	--color-dark-20: #caced1;
+	--color-dark-10: #e0e5e8;
+	--color-dark-05: #f1f2f4;
+	--color-dark-blue: #175cc4;
+	--color-blue: #1d74f5;
+	--color-light-blue: #4eb2f5;
+	--color-lighter-blue: #e8f2ff;
+	--color-purple: #861da8;
+	--color-red: #f5455c;
+	--color-dark-red: #e0364d;
+	--color-orange: #f59547;
+	--color-yellow: #ffd21f;
+	--color-dark-yellow: #f6c502;
+	--color-green: #2de0a5;
+	--color-dark-green: #26d198;
+
 	/*
 	* General Colors
 	*/
@@ -12,15 +36,15 @@
 	--color-gray-lightest: #f2f3f5;
 	--color-black: #000000;
 	--color-white: #ffffff;
-	--rc-color-error: #f5455c;
+	--rc-color-error: var(--color-red);
 	--rc-color-error-light: #e1364c;
-	--rc-color-alert: #ffd21f;
-	--rc-color-alert-light: #f6c502;
-	--rc-color-success: #2de0a5;
+	--rc-color-alert: var(--color-yellow);
+	--rc-color-alert-light: var(--color-dark-yellow);
+	--rc-color-success: var(--color-green);
 	--rc-color-success-light: #25d198;
-	--rc-color-button-primary: #1d74f5;
-	--rc-color-button-primary-light: #175cc4;
-	--rc-color-alert-message-primary: var(--rc-color-button-primary);
+	--rc-color-button-primary: var(--color-blue);
+	--rc-color-button-primary-light: var(--color-dark-blue);
+	--rc-color-alert-message-primary: var(--color-blue);
 	--rc-color-alert-message-primary-background: #f1f6ff;
 	--rc-color-alert-message-secondary: #7ca52b;
 	--rc-color-alert-message-secondary-background: #fafff1;
@@ -258,16 +282,16 @@
 	--badge-background: var(--rc-color-primary-dark);
 	--badge-unread-background: var(--rc-color-primary-dark);
 	--badge-dm-background: var(--rc-color-primary-dark);
-	--badge-user-mentions-background: var(--rc-color-button-primary);
+	--badge-user-mentions-background: var(--color-dark-blue);
 	--badge-group-mentions-background: var(--rc-color-primary-dark);
 
 	/*
 	* Mention link
 	*/
 	--mention-link-radius: 10px;
-	--mention-link-background: rgba(29, 116, 245, 0.2);
-	--mention-link-text-color: var(--rc-color-button-primary);
-	--mention-link-me-background: var(--rc-color-button-primary);
+	--mention-link-background: var(--color-lighter-blue);
+	--mention-link-text-color: var(--color-dark-blue);
+	--mention-link-me-background: var(--color-dark-blue);
 	--mention-link-me-text-color: var(--color-white);
 	--mention-link-group-background: var(--rc-color-primary-dark);
 	--mention-link-group-text-color: var(--color-white);

app/ui-flextab/client/tabs/membersList.html

@@ -13,9 +13,9 @@
 
 				</div>
 				<label class="rc-select">
-					<select id="status-type" class="rc-select__element js-type" name="status-type">
-						<option value="">{{_ 'online'}}</option>
-						<option value="">{{_ 'All_users'}}</option>
+					<select class="rc-select__element js-type" name="status-type">
+						<option value="online">{{_ 'online'}}</option>
+						<option value="all">{{_ 'All_users'}}</option>
 					</select>
 					{{> icon block="rc-select__arrow" icon="arrow-down" }}
 				</label>

app/ui-flextab/client/tabs/membersList.js

@@ -1,6 +1,5 @@
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
-import { Tracker } from 'meteor/tracker';
 import { Session } from 'meteor/session';
 import { Template } from 'meteor/templating';
 import { RoomManager, popover } from '../../../ui-utils';
@@ -171,8 +170,7 @@ Template.membersList.events({
 		instance.filter.set(e.target.value.trim());
 	},
 	'change .js-type'(e, instance) {
-		const seeAll = instance.showAllUsers.get();
-		instance.showAllUsers.set(!seeAll);
+		instance.showAllUsers.set(e.currentTarget.value === 'all');
 		instance.usersLimit.set(100);
 	},
 	'click .js-more'(e, instance) {
@@ -278,7 +276,7 @@ Template.membersList.onCreated(function() {
 
 	this.tabBar = Template.instance().tabBar;
 
-	Tracker.autorun(() => {
+	this.autorun(() => {
 		if (this.data.rid == null) { return; }
 		this.loading.set(true);
 		return Meteor.call('getUsersOfRoom', this.data.rid, this.showAllUsers.get(), { limit: 100, skip: 0 }, (error, users) => {
@@ -298,16 +296,29 @@ Template.membersList.onCreated(function() {
 		return setTimeout(() => this.clearRoomUserDetail(), 500);
 	};
 
-	this.showUserDetail = (username) => {
-		this.showDetail.set(username != null);
-		return this.userDetail.set(username);
+	this.showUserDetail = (username, group) => {
+		this.showDetail.set(!!username);
+		this.userDetail.set(username);
+		if (group) {
+			this.showAllUsers.set(group === 'all');
+		}
 	};
 
 	this.clearRoomUserDetail = this.data.clearUserDetail;
 
-	return this.autorun(() => {
-		const data = Template.currentData();
-		return this.showUserDetail(data.userDetail);
-	}
-	);
+	this.autorun(() => {
+		const { userDetail, groupDetail } = Template.currentData();
+
+		this.showUserDetail(userDetail, groupDetail);
+	});
+});
+
+Template.membersList.onRendered(function() {
+	this.autorun(() => {
+		const showAllUsers = this.showAllUsers.get();
+		const statusTypeSelect = this.find('.js-type');
+		if (statusTypeSelect) {
+			statusTypeSelect.value = showAllUsers ? 'all' : 'online';
+		}
+	});
 });

app/ui-utils/client/lib/RoomManager.js

@@ -15,6 +15,8 @@ import _ from 'underscore';
 import { upsertMessage, RoomHistoryManager } from './RoomHistoryManager';
 import { mainReady } from './mainReady';
 
+
+
 const maxRoomsOpen = parseInt(localStorage && localStorage.getItem('rc-maxRoomsOpen')) || 5 ;
 
 const onDeleteMessageStream = (msg) => {
@@ -235,7 +237,9 @@ export const RoomManager = new function() {
 			const scrollTop = $('> .wrapper', messagesBox).scrollTop() - 50;
 			const totalHeight = $(' > .wrapper > ul', messagesBox).height() + 40;
 
-			ticksBar.innerHTML = Array.from(messagesBox.querySelectorAll('.message .body .mention-link--me, .message .body .mention-link--group'))
+			// TODO: thread quotes should NOT have mention links at all
+			const mentionsSelector = '.message .body .mention-link--me, .message .body .mention-link--group';
+			ticksBar.innerHTML = Array.from(messagesBox.querySelectorAll(mentionsSelector))
 				.map((mentionLink) => {
 					const topOffset = $(mentionLink).offset().top + scrollTop;
 					const percent = (100 / totalHeight) * topOffset;

app/ui/client/views/app/room.js

@@ -41,20 +41,27 @@ const favoritesEnabled = () => settings.get('Favorite_Rooms');
 
 const userCanDrop = (_id) => !roomTypes.readOnly(_id, Users.findOne({ _id: Meteor.userId() }, { fields: { username: 1 } }));
 
-const openProfileTab = (e, instance, username) => {
-	const roomData = Session.get(`roomData${ RoomManager.openedRoom }`);
+const openMembersListTab = (instance, group) => {
+	instance.userDetail.set(null);
+	instance.groupDetail.set(group);
+	instance.tabBar.setTemplate('membersList');
+	instance.tabBar.open();
+};
 
+const openProfileTab = (e, instance, username) => {
 	if (Layout.isEmbedded()) {
 		fireGlobalEvent('click-user-card-message', { username });
 		e.preventDefault();
 		e.stopPropagation();
 		return;
 	}
 
+	const roomData = Session.get(`roomData${ RoomManager.openedRoom }`);
 	if (roomTypes.roomTypes[roomData.t].enableMembersListProfile()) {
-		instance.setUserDetail(username);
+		instance.userDetail.set(username);
 	}
 
+	instance.groupDetail.set(null);
 	instance.tabBar.setTemplate('membersList');
 	instance.tabBar.open();
 };
@@ -408,6 +415,7 @@ Template.room.helpers({
 			data: {
 				rid: this._id,
 				userDetail: Template.instance().userDetail.get(),
+				groupDetail: Template.instance().groupDetail.get(),
 				clearUserDetail: Template.instance().clearUserDetail,
 			},
 		};
@@ -746,17 +754,28 @@ Template.room.events({
 		if (!Meteor.userId()) {
 			return;
 		}
-		const channel = $(e.currentTarget).data('channel');
+
+		const { currentTarget: { dataset: { channel, group, username } } } = e;
+
 		if (channel) {
 			if (Layout.isEmbedded()) {
 				fireGlobalEvent('click-mention-link', { path: FlowRouter.path('channel', { name: channel }), channel });
 			}
 			FlowRouter.goToRoomById(channel);
 			return;
 		}
-		const username = $(e.currentTarget).data('username');
 
-		openProfileTabOrOpenDM(e, instance, username);
+		if (group) {
+			e.stopPropagation();
+			e.preventDefault();
+			openMembersListTab(instance, group);
+			return;
+		}
+
+		if (username) {
+			openProfileTabOrOpenDM(e, instance, username);
+			return;
+		}
 	},
 
 	'click .image-to-download'(event) {
@@ -938,6 +957,7 @@ Template.room.onCreated(function() {
 	this.flexTemplate = new ReactiveVar;
 
 	this.userDetail = new ReactiveVar(FlowRouter.getParam('username'));
+	this.groupDetail = new ReactiveVar();
 
 	this.tabBar = new RocketChatTabBar();
 	this.tabBar.showGroup(FlowRouter.current().route.name);