Merge pull request #7864 from RocketChat/vertical-menu

[NEW] Replace message cog for vertical menu

packages/rocketchat-autotranslate/client/lib/actionButton.js

@@ -4,7 +4,7 @@ Meteor.startup(function() {
 			RocketChat.MessageAction.addButton({
 				id: 'toggle-language',
 				icon: 'icon-language',
-				i18nLabel: 'Toggle_original_translated',
+				label: 'Toggle_original_translated',
 				context: [
 					'message',
 					'message-mobile'
@@ -23,11 +23,9 @@ Meteor.startup(function() {
 						RocketChat.models.Messages.update({ _id: message._id }, { $set: { autoTranslateShowInverse: true } });
 					}
 				},
-
-				validation(message) {
+				condition(message) {
 					return message && message.u && message.u._id !== Meteor.userId();
 				},
-
 				order: 90
 			});
 		} else {

packages/rocketchat-emoji/client/lib/EmojiPicker.js

@@ -71,14 +71,14 @@ RocketChat.EmojiPicker = {
 			const pickerWidth = $('.emoji-picker').width();
 
 			if (left + pickerWidth > windowSize) {
-				const emojiButtonSize = $('.reaction-message.message-action').outerWidth();
-				cssProperties.left = left - pickerWidth + emojiButtonSize;
+				cssProperties.left = left - pickerWidth;
 			}
 		}
 
 		return $('.emoji-picker').css(cssProperties);
 	},
 	open(source, callback) {
+		console.log('open', source);
 		if (!this.initiated) {
 			this.init();
 		}

packages/rocketchat-lib/client/MessageAction.js

@@ -1,16 +1,18 @@
-import moment from 'moment';
+/* globals popover chatMessages cordova */
 
+import moment from 'moment';
 import toastr from 'toastr';
 
 RocketChat.MessageAction = new class {
 	/*
   	config expects the following keys (only id is mandatory):
   		id (mandatory)
   		icon: string
-  		i18nLabel: string
+  		label: string
   		action: function(event, instance)
-  		validation: function(message)
-  		order: integer
+  		condition: function(message)
+			order: integer
+			group: string (message or menu)
    */
 
 	constructor() {
@@ -21,6 +23,11 @@ RocketChat.MessageAction = new class {
 		if (!config || !config.id) {
 			return false;
 		}
+
+		if (!config.group) {
+			config.group = 'menu';
+		}
+
 		return Tracker.nonreactive(() => {
 			const btns = this.buttons.get();
 			btns[config.id] = config;
@@ -51,13 +58,18 @@ RocketChat.MessageAction = new class {
 		return allButtons[id];
 	}
 
-	getButtons(message, context) {
+	getButtons(message, context, group) {
 		const allButtons = _.toArray(this.buttons.get());
 		let allowedButtons = allButtons;
+
+		if (group) {
+			allowedButtons = allowedButtons.filter(button => button.group === group);
+		}
+
 		if (message) {
-			allowedButtons = _.compact(_.map(allButtons, function(button) {
+			allowedButtons = _.compact(_.map(allowedButtons, function(button) {
 				if (button.context == null || button.context.includes(context)) {
-					if (button.validation == null || button.validation(message, context)) {
+					if (button.condition == null || button.condition(message, context)) {
 						return button;
 					}
 				}
@@ -81,23 +93,20 @@ RocketChat.MessageAction = new class {
 		return `${ Meteor.absoluteUrl().replace(/\/$/, '') + routePath }?msg=${ msgId }`;
 	}
 
+	closePopover() {
+		popover.close();
+	}
+
 	hideDropDown() {
-		return $('.message-dropdown:visible').hide();
+		$('.message-dropdown:visible').hide();
 	}
 };
 
 Meteor.startup(function() {
-	$(document).click((event) => {
-		const target = $(event.target);
-		if (!target.closest('.message-cog-container').length && !target.is('.message-cog-container')) {
-			return RocketChat.MessageAction.hideDropDown();
-		}
-	});
-
 	RocketChat.MessageAction.addButton({
 		id: 'reply-message',
-		icon: 'icon-reply',
-		i18nLabel: 'Reply',
+		icon: 'message',
+		label: 'Reply',
 		context: ['message', 'message-mobile'],
 		action() {
 			const message = this._arguments[1];
@@ -116,30 +125,30 @@ Meteor.startup(function() {
 			input.value += text;
 			input.focus();
 			$(input).trigger('change').trigger('input');
-			return RocketChat.MessageAction.hideDropDown();
+			RocketChat.MessageAction.closePopover();
 		},
-		validation(message) {
-			if (RocketChat.models.Subscriptions.findOne({
-				rid: message.rid
-			}) == null) {
+		condition(message) {
+			if (RocketChat.models.Subscriptions.findOne({rid: message.rid}) == null) {
 				return false;
 			}
+
 			return true;
 		},
-		order: 1
+		order: 1,
+		group: 'menu'
 	});
-	/* globals chatMessages*/
+
 	RocketChat.MessageAction.addButton({
 		id: 'edit-message',
-		icon: 'icon-pencil',
-		i18nLabel: 'Edit',
+		icon: 'edit',
+		label: 'Edit',
 		context: ['message', 'message-mobile'],
 		action(e) {
 			const message = $(e.currentTarget).closest('.message')[0];
 			chatMessages[Session.get('openedRoom')].edit(message);
-			RocketChat.MessageAction.hideDropDown();
+			RocketChat.MessageAction.closePopover();
 		},
-		validation(message) {
+		condition(message) {
 			if (RocketChat.models.Subscriptions.findOne({
 				rid: message.rid
 			}) == null) {
@@ -166,19 +175,21 @@ Meteor.startup(function() {
 				return true;
 			}
 		},
-		order: 2
+		order: 2,
+		group: 'menu'
 	});
+
 	RocketChat.MessageAction.addButton({
 		id: 'delete-message',
-		icon: 'icon-trash-alt',
-		i18nLabel: 'Delete',
+		icon: 'trash',
+		label: 'Delete',
 		context: ['message', 'message-mobile'],
 		action() {
 			const message = this._arguments[1];
-			RocketChat.MessageAction.hideDropDown();
-			return chatMessages[Session.get('openedRoom')].confirmDeleteMsg(message);
+			RocketChat.MessageAction.closePopover();
+			chatMessages[Session.get('openedRoom')].confirmDeleteMsg(message);
 		},
-		validation(message) {
+		condition(message) {
 			if (RocketChat.models.Subscriptions.findOne({rid: message.rid}) == null) {
 				return false;
 			}
@@ -207,66 +218,69 @@ Meteor.startup(function() {
 				return true;
 			}
 		},
-		order: 3
+		order: 3,
+		group: 'menu'
 	});
-	/* globals cordova*/
+
 	RocketChat.MessageAction.addButton({
 		id: 'permalink',
-		icon: 'icon-link',
-		i18nLabel: 'Permalink',
+		icon: 'permalink',
+		label: 'Permalink',
 		classes: 'clipboard',
 		context: ['message', 'message-mobile'],
 		action(event) {
 			const message = this._arguments[1];
 			const permalink = RocketChat.MessageAction.getPermaLink(message._id);
-			RocketChat.MessageAction.hideDropDown();
+			RocketChat.MessageAction.closePopover();
 			if (Meteor.isCordova) {
 				cordova.plugins.clipboard.copy(permalink);
 			} else {
 				$(event.currentTarget).attr('data-clipboard-text', permalink);
 			}
-			return toastr.success(TAPi18n.__('Copied'));
+			toastr.success(TAPi18n.__('Copied'));
 		},
-		validation(message) {
-			if (RocketChat.models.Subscriptions.findOne({
-				rid: message.rid
-			}) == null) {
+		condition(message) {
+			if (RocketChat.models.Subscriptions.findOne({rid: message.rid}) == null) {
 				return false;
 			}
+
 			return true;
 		},
-		order: 4
+		order: 4,
+		group: 'menu'
 	});
+
 	RocketChat.MessageAction.addButton({
 		id: 'copy',
-		icon: 'icon-paste',
-		i18nLabel: 'Copy',
+		icon: 'copy',
+		label: 'Copy',
 		classes: 'clipboard',
 		context: ['message', 'message-mobile'],
 		action(event) {
 			const message = this._arguments[1].msg;
-			RocketChat.MessageAction.hideDropDown();
+			RocketChat.MessageAction.closePopover();
 			if (Meteor.isCordova) {
 				cordova.plugins.clipboard.copy(message);
 			} else {
 				$(event.currentTarget).attr('data-clipboard-text', message);
 			}
-			return toastr.success(TAPi18n.__('Copied'));
+			toastr.success(TAPi18n.__('Copied'));
 		},
-		validation(message) {
-			if (RocketChat.models.Subscriptions.findOne({
-				rid: message.rid
-			}) == null) {
+		condition(message) {
+			if (RocketChat.models.Subscriptions.findOne({rid: message.rid}) == null) {
 				return false;
 			}
+
 			return true;
 		},
-		order: 5
+		order: 5,
+		group: 'menu'
 	});
-	return RocketChat.MessageAction.addButton({
+
+	RocketChat.MessageAction.addButton({
 		id: 'quote-message',
-		icon: 'icon-quote-left',
-		i18nLabel: 'Quote',
+		icon: 'quote',
+		label: 'Quote',
 		context: ['message', 'message-mobile'],
 		action() {
 			const message = this._arguments[1];
@@ -279,16 +293,16 @@ Meteor.startup(function() {
 			input.value += text;
 			input.focus();
 			$(input).trigger('change').trigger('input');
-			return RocketChat.MessageAction.hideDropDown();
+			RocketChat.MessageAction.closePopoverreaction-message();
 		},
-		validation(message) {
-			if (RocketChat.models.Subscriptions.findOne({
-				rid: message.rid
-			}) == null) {
+		condition(message) {
+			if (RocketChat.models.Subscriptions.findOne({rid: message.rid}) == null) {
 				return false;
 			}
+
 			return true;
 		},
-		order: 6
+		order: 6,
+		group: 'menu'
 	});
 });

packages/rocketchat-mentions-flextab/client/actionButton.js

@@ -1,20 +1,21 @@
 Meteor.startup(function() {
-	return RocketChat.MessageAction.addButton({
+	RocketChat.MessageAction.addButton({
 		id: 'jump-to-message',
-		icon: 'icon-right-hand',
-		i18nLabel: 'Jump_to_message',
+		icon: 'right-hand',
+		label: 'Jump_to_message',
 		context: ['mentions'],
 		action() {
 			const message = this._arguments[1];
 			RocketChat.MessageAction.hideDropDown();
 			if (window.matchMedia('(max-width: 500px)').matches) {
 				Template.instance().tabBar.close();
 			}
-			return RoomHistoryManager.getSurroundingMessages(message, 50);
+			RoomHistoryManager.getSurroundingMessages(message, 50);
 		},
-		validation(message) {
+		condition(message) {
 			return message.mentionedList === true;
 		},
-		order: 100
+		order: 100,
+		group: 'menu'
 	});
 });

packages/rocketchat-message-mark-as-unread/client/actionButton.js

@@ -1,8 +1,8 @@
 Meteor.startup(() => {
-	return RocketChat.MessageAction.addButton({
+	RocketChat.MessageAction.addButton({
 		id: 'mark-message-as-unread',
-		icon: 'icon-flag',
-		i18nLabel: 'Mark_as_unread',
+		icon: 'flag',
+		label: 'Mark_as_unread',
 		context: ['message', 'message-mobile'],
 		action() {
 			const message = this._arguments[1];
@@ -21,9 +21,10 @@ Meteor.startup(() => {
 				return FlowRouter.go('home');
 			});
 		},
-		validation(message) {
+		condition(message) {
 			return message.u._id !== Meteor.user()._id;
 		},
-		order: 22
+		order: 22,
+		group: 'menu'
 	});
 });