[FIX] Contextual bar redesign

packages/rocketchat-channel-settings-mail-messages/client/lib/startup.js

@@ -1,12 +1,15 @@
-import resetSelection from '../resetSelection';
+// import resetSelection from '../resetSelection';
 Meteor.startup(() => {
-	RocketChat.ChannelSettings.addOption({
-		group: ['room'],
+	RocketChat.TabBar.addButton({
+		groups: ['channel', 'group', 'direct'],
 		id: 'mail-messages',
-		template: 'channelSettingsMailMessages',
-		validation() {
-			return RocketChat.authz.hasAllPermission('mail-messages');
-		}
+		anonymous: true,
+		i18nTitle: 'Mail_Messages',
+		icon: 'mail',
+		template: 'mailMessagesInstructions',
+		order: 10,
+		condition: () => RocketChat.authz.hasAllPermission('mail-messages')
 	});
-	RocketChat.callbacks.add('roomExit', () => resetSelection(false), RocketChat.callbacks.priority.MEDIUM, 'room-exit-mail-messages');
+
+	// RocketChat.callbacks.add('roomExit', () => resetSelection(false), RocketChat.callbacks.priority.MEDIUM, 'room-exit-mail-messages');
 });

packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.html

@@ -1,4 +1,63 @@
 <template name="mailMessagesInstructions">
+	<main class="rc-user-info__scroll">
+	<div class="rc-input rc-input--usernames">
+		<label class="rc-input__label">
+			<div class="rc-input__title">{{_ "To_users"}}</div>
+			<div class="rc-input__wrapper">
+				<div class="rc-input__icon">
+					{{> icon block="rc-input__icon-svg" icon="at"}}
+				</div>
+				<div class="rc-tags">
+					{{#each user in selectedUsers}}
+						{{> tag user}}
+					{{/each}}
+					<input type="text" class="rc-tags__input" placeholder="{{_ "Username_Placeholder"}}" name="users" autocomplete="off"/>
+				</div>
+			</div>
+			{{#with config}}
+				{{#if autocomplete 'isShowing'}}
+					<div class="fadeInDown">
+						{{#if autocomplete 'isLoaded'}}
+							{{> popupList data=config items=items}}
+						{{/if}}
+					</div>
+				{{/if}}
+			{{/with}}
+		</label>
+	</div>
+	<div class="rc-input rc-input--emails">
+			<label class="rc-input__label">
+				<div class="rc-input__title">{{_ "To_additional_emails"}}</div>
+				<div class="rc-input__wrapper">
+					<div class="rc-input__icon">
+						{{> icon block="rc-input__icon-svg" icon="mail"}}
+					</div>
+					<div class="rc-tags">
+						{{#each selectedEmails}}
+							{{> tag .}}
+						{{/each}}
+						<input type="text" class="rc-tags__input" placeholder="{{_ "Email_Placeholder_any"}}" name="emails" autocomplete="off"/>
+					</div>
+				</div>
+			</label>
+		</div>
+		<div class="rc-input">
+			<label class="rc-input__label">
+				<div class="rc-input__title">{{_ "Subject"}}</div>
+				<div class="rc-input__wrapper">
+					<div class="rc-input__icon">
+						{{> icon block="rc-input__icon-svg" icon="edit"}}
+					</div>
+					<input type="text" class="rc-input__element" value="{{_ "Mail_Messages_Subject" roomName}}" name="subject" autocomplete="off"/>
+				</div>
+			</label>
+		</div>
+	</main>
+	<div class="rc-user-info__flex rc-user-info__row">
+		<button class="rc-button rc-button--outline js-cancel" title="{{_ 'Cancel'}}">{{_ 'Cancel'}}</button>
+		<button class="rc-button rc-button--primary js-send" title="{{_ 'Send'}}">{{_ 'Send'}}</button>
+	</div>
+	{{#if false}}
 	<div class="content">
 		<div class="list-view mail-message">
 			<p>{{_ "Mail_Messages_Instructions"}}</p>
@@ -49,4 +108,5 @@
 			</p>
 		</div>
 	</div>
+	{{/if}}
 </template>

packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.js

@@ -1,7 +1,38 @@
+/* global AutoComplete Deps */
+
 import _ from 'underscore';
 import toastr from 'toastr';
 import resetSelection from '../resetSelection';
 
+/*
+	* Code from https://github.com/dleitee/valid.js
+	* Checks for email
+	* @params email
+	* @return boolean
+	*/
+const isEmail = email => {
+	const sQtext = '[^\\x0d\\x22\\x5c]';
+	const sDtext = '[^\\x0d\\x5b-\\x5d]';
+	const sAtom = '[^\\x00-\\x20\\x22\\x28\\x29\\x2c\\x2e\\x3a-\\x3c\\x3e\\x40\\x5b-\\x5d]+';
+	const sQuotedPair = '\\x5c[\\x00-\\x7f]';
+	const sDomainLiteral = `\\x5b(${ sDtext }|${ sQuotedPair })*\\x5d`;
+	const sQuotedString = `\\x22(${ sQtext }|${ sQuotedPair })*\\x22`;
+	const sDomainRef = sAtom;
+	const sSubDomain = `(${ sDomainRef }|${ sDomainLiteral })`;
+	const sWord = `(${ sAtom }|${ sQuotedString })`;
+	const sDomain = `${ sSubDomain }(\\x2e${ sSubDomain })*`;
+	const sLocalPart = `${ sWord }(\\x2e${ sWord })*`;
+	const sAddrSpec = `${ sLocalPart }\\x40${ sDomain }`;
+	const sValidEmail = `^${ sAddrSpec }$`;
+	const reg = new RegExp(sValidEmail);
+	return reg.test(email);
+};
+
+const filterNames = (old) => {
+	const reg = new RegExp(`^${ RocketChat.settings.get('UTF8_Names_Validation') }$`);
+	return [...old.replace(' ', '').toLocaleLowerCase()].filter(f => reg.test(f)).join('');
+};
+
 Template.mailMessagesInstructions.helpers({
 	name() {
 		return Meteor.user().name;
@@ -44,14 +75,38 @@ Template.mailMessagesInstructions.helpers({
 	},
 	selectedUsers() {
 		return Template.instance().selectedUsers.get();
+	},
+	selectedEmails() {
+		return Template.instance().selectedEmails.get();
+	},
+	config() {
+		const filter = Template.instance().userFilter;
+		return {
+			filter: filter.get(),
+			noMatchTemplate: 'userSearchEmpty',
+			modifier(text) {
+				const f = filter.get();
+				return `@${ f.length === 0 ? text : text.replace(new RegExp(filter.get()), function(part) {
+					return `<strong>${ part }</strong>`;
+				}) }`;
+			}
+		};
+	},
+	autocomplete(key) {
+		const instance = Template.instance();
+		const param = instance.ac[key];
+		return typeof param === 'function' ? param.apply(instance.ac): param;
+	},
+	items() {
+		return Template.instance().ac.filteredList();
 	}
 });
 
 Template.mailMessagesInstructions.events({
-	'click .cancel'(e, t) {
-		return t.reset();
+	'click .js-cancel'(e, t) {
+		t.reset(true);
 	},
-	'click .send'(e, t) {
+	'click .js-send'(e, t) {
 		t.$('.error').hide();
 		const $btn = t.$('button.send');
 		const oldBtnValue = $btn.html();
@@ -128,22 +183,138 @@ Template.mailMessagesInstructions.events({
 		});
 		Template.instance().selectedUsers.set(users);
 		return $('#to_users').focus();
+	},
+	'click .rc-input--usernames .rc-tags__tag'({target}, t) {
+		const {username} = Blaze.getData(target);
+		t.selectedUsers.set(t.selectedUsers.get().filter(user => user.username !== username));
+	},
+	'click .rc-input--usernames .rc-tags__tag-icon'(e, t) {
+		const {username} = Blaze.getData(t.find('.rc-tags__tag-text'));
+		t.selectedUsers.set(t.selectedUsers.get().filter(user => user.username !== username));
+	},
+	'click .rc-input--emails .rc-tags__tag'({target}, t) {
+		const {text} = Blaze.getData(target);
+		t.selectedEmails.set(t.selectedEmails.get().filter(email => email.text !== text));
+	},
+	'click .rc-input--emails .rc-tags__tag-icon'(e, t) {
+		const {text} = Blaze.getData(t.find('.rc-tags__tag-text'));
+		t.selectedEmails.set(t.selectedEmails.get().filter(email => email.text !== text));
+	},
+	'click .rc-popup-list__item'(e, t) {
+		t.ac.onItemClick(this, e);
+	},
+	'input [name="users"]'(e, t) {
+		const input = e.target;
+		const position = input.selectionEnd || input.selectionStart;
+		const length = input.value.length;
+		const modified = filterNames(input.value);
+		input.value = modified;
+		document.activeElement === input && e && /input/i.test(e.type) && (input.selectionEnd = position + input.value.length - length);
+
+		t.userFilter.set(modified);
+	},
+	'keydown [name="emails"]'(e, t) {
+		const input = e.target;
+		if ([9, 13, 188].includes(e.keyCode) && isEmail(input.value)) {
+			e.preventDefault();
+			const emails = t.selectedEmails;
+			const emailsArr = emails.get();
+			emailsArr.push({text: input.value});
+			input.value = '';
+			return emails.set(emailsArr);
+		}
+
+		if ([8, 46].includes(e.keyCode) && input.value === '') {
+			const emails = t.selectedEmails;
+			const emailsArr = emails.get();
+			emailsArr.pop();
+			return emails.set(emailsArr);
+		}
+	},
+	'keydown [name="users"]'(e, t) {
+		if ([8, 46].includes(e.keyCode) && e.target.value === '') {
+			const users = t.selectedUsers;
+			const usersArr = users.get();
+			usersArr.pop();
+			return users.set(usersArr);
+		}
+
+		t.ac.onKeyDown(e);
+	},
+	'keyup [name="users"]'(e, t) {
+		t.ac.onKeyUp(e);
+	},
+	'focus [name="users"]'(e, t) {
+		t.ac.onFocus(e);
+	},
+	'blur [name="users"]'(e, t) {
+		t.ac.onBlur(e);
 	}
 });
 
+Template.mailMessagesInstructions.onRendered(function() {
+	const users = this.selectedUsers;
+
+	this.firstNode.querySelector('[name="users"]').focus();
+	this.ac.element = this.firstNode.querySelector('[name="users"]');
+	this.ac.$element = $(this.ac.element);
+	this.ac.$element.on('autocompleteselect', function(e, {item}) {
+		const usersArr = users.get();
+		usersArr.push(item);
+		users.set(usersArr);
+	});
+});
+
 Template.mailMessagesInstructions.onCreated(function() {
-	const currentData = Template.currentData();
-	this.autoCompleteCollection = new Mongo.Collection(null);
+	resetSelection(true);
+
 	this.selectedUsers = new ReactiveVar([]);
+	this.userFilter = new ReactiveVar('');
+
+	const filter = {exceptions :[Meteor.user().username].concat(this.selectedUsers.get().map(u => u.username))};
+	Deps.autorun(() => {
+		filter.exceptions = [Meteor.user().username].concat(this.selectedUsers.get().map(u => u.username));
+	});
+
+	this.ac = new AutoComplete(
+		{
+			selector:{
+				item: '.rc-popup-list__item',
+				container: '.rc-popup-list__list'
+			},
+
+			limit: 10,
+			inputDelay: 300,
+			rules: [
+				{
+					collection: 'UserAndRoom',
+					subscription: 'userAutocomplete',
+					field: 'username',
+					matchAll: true,
+					filter,
+					doNotChangeWidth: false,
+					selector(match) {
+						return { term: match };
+					},
+					sort: 'username'
+				}
+			]
+
+		});
+
+	this.ac.tmplInst = this;
+
+	this.selectedEmails = new ReactiveVar([]);
+
+	this.autoCompleteCollection = new Mongo.Collection(null);
 	this.erroredEmails = new ReactiveVar([]);
-	this.reset = () => {
+	this.reset = (bool) => {
 		this.selectedUsers.set([]);
-		currentData.tabBar.setTemplate('channelSettings');
-		resetSelection(false);
+		this.selectedEmails.set([]);
+		resetSelection(bool);
 	};
-	return this.autorun(() => {
-		if (Session.get('channelSettingsMailMessages') !== Session.get('openedRoom')) {
-			return this.reset();
-		}
-	});
+});
+
+Template.mailMessagesInstructions.onDestroyed(function() {
+	Template.instance().reset(false);
 });

packages/rocketchat-channel-settings-mail-messages/package.js

@@ -18,9 +18,6 @@ Package.onUse(function(api) {
 
 	api.addFiles([
 		'client/lib/startup.js',
-		'client/stylesheets/mail-messages.less',
-		'client/views/channelSettingsMailMessages.html',
-		'client/views/channelSettingsMailMessages.js',
 		'client/views/mailMessagesInstructions.html',
 		'client/views/mailMessagesInstructions.js'
 	], 'client');

packages/rocketchat-channel-settings/client/startup/tabBar.js

@@ -8,14 +8,4 @@ Meteor.startup(() => {
 		template: 'channelSettings',
 		order: 0
 	});
-
-	RocketChat.TabBar.addButton({
-		groups: ['channel', 'group', 'direct'],
-		id: 'mail-messages',
-		anonymous: true,
-		i18nTitle: 'Mail_Messages',
-		icon: 'mail',
-		template: 'mailMessagesInstructions',
-		order: 10
-	});
 });