fileupload message box action

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -132,6 +132,7 @@
   "Add_agent": "Add agent",
   "Add_custom_oauth": "Add custom oauth",
   "Add_Domain": "Add Domain",
+  "Add_files_from": "Add files from",
   "Add_manager": "Add manager",
   "Add_Role": "Add Role",
   "Add_user": "Add user",
@@ -220,6 +221,7 @@
   "AtlassianCrowd": "Atlassian Crowd",
   "Attachment_File_Uploaded": "File Uploaded",
   "Attribute_handling": "Attribute handling",
+  "Audio_message": "Audio message",
   "Auth_Token": "Auth Token",
   "Author": "Author",
   "Authorization_URL": "Authorization URL",
@@ -1067,6 +1069,7 @@
   "Mute_user": "Mute user",
   "Muted": "Muted",
   "My_Account": "My Account",
+  "My_location": "My location",
   "n_messages": "%s messages",
   "N_new_messages": "%s new messages",
   "Name": "Name",
@@ -1846,6 +1849,7 @@
   "Version": "Version",
   "Video_Chat_Window": "Video Chat",
   "Video_Conference": "Video Conference",
+  "Video_message": "Video message",
   "Videocall_declined": "Videocall declined.",
   "Videocall_enabled": "Videocall enabled",
   "View_All": "View All",

packages/rocketchat-lib/lib/messageBox.js

@@ -7,15 +7,15 @@ RocketChat.messageBox.actions = new class {
 
 	/* Add a action to messagebox
 	@param group
-	@param action name
+	@param label
 	@param config
 	icon: icon class
 	action: action function
 	condition: condition to display the action
 	*/
 
-	add(group, actionName, config) {
-		if (!group && !actionName && !config) {
+	add(group, label, config) {
+		if (!group && !label && !config) {
 			return;
 		}
 
@@ -24,14 +24,14 @@ RocketChat.messageBox.actions = new class {
 		}
 
 		const actionExists = this.actions[group].find((action) => {
-			return action.actionName === actionName;
+			return action.label === label;
 		});
 
 		if (actionExists) {
 			return;
 		}
 
-		this.actions[group].push({...config, actionName});
+		this.actions[group].push({...config, label});
 	}
 
 	get(group) {

packages/rocketchat-lib/lib/startup/messageBoxActions.js

@@ -1,173 +1,53 @@
-RocketChat.messageBox.actions.add('Share', 'location', {
-	icon: 'map-pin',
-	condition: () => RocketChat.Geolocation.get() !== false,
-	action({rid}) {
-		const position = RocketChat.Geolocation.get();
-		const latitude = position.coords.latitude;
-		const longitude = position.coords.longitude;
-		const text = `<div class="location-preview"><img style="height: 250px; width: 250px;" src="https://maps.googleapis.com/maps/api/staticmap?zoom=14&size=250x250&markers=color:gray%7Clabel:%7C${ latitude },${ longitude }&key=${ RocketChat.settings.get('MapView_GMapsAPIKey') }" /></div>`;
-		return swal({
-			title: t('Share_Location_Title'),
-			text,
-			showCancelButton: true,
-			closeOnConfirm: true,
-			closeOnCancel: true,
-			html: true
-		}, function(isConfirm) {
-			if (isConfirm !== true) {
-				return;
-			}
-			return Meteor.call('sendMessage', {
-				_id: Random.id(),
-				rid,
-				msg: '',
-				location: {
-					type: 'Point',
-					coordinates: [longitude, latitude]
-				}
-			});
-		});
-	}
-});
+/* globals fileUpload */
 
-RocketChat.messageBox.actions.add('Share2', 'location', {
-	icon: 'map-pin',
-	condition: () => RocketChat.Geolocation.get() !== false,
-	action({rid}) {
-		const position = RocketChat.Geolocation.get();
-		const latitude = position.coords.latitude;
-		const longitude = position.coords.longitude;
-		const text = `<div class="location-preview"><img style="height: 250px; width: 250px;" src="https://maps.googleapis.com/maps/api/staticmap?zoom=14&size=250x250&markers=color:gray%7Clabel:%7C${ latitude },${ longitude }&key=${ RocketChat.settings.get('MapView_GMapsAPIKey') }" /></div>`;
-		return swal({
-			title: t('Share_Location_Title'),
-			text,
-			showCancelButton: true,
-			closeOnConfirm: true,
-			closeOnCancel: true,
-			html: true
-		}, function(isConfirm) {
-			if (isConfirm !== true) {
-				return;
-			}
-			return Meteor.call('sendMessage', {
-				_id: Random.id(),
-				rid,
-				msg: '',
-				location: {
-					type: 'Point',
-					coordinates: [longitude, latitude]
-				}
-			});
-		});
-	}
-});
-RocketChat.messageBox.actions.add('Share3', 'hello', {
-	icon: 'map-pin',
+import mime from 'mime-type/with-db';
+
+RocketChat.messageBox.actions.add('Create_new', 'Video_message', {
+	icon: 'video',
 	condition: () => true,
-	action({rid, event}) {
-		event.preventDefault();
-		event.stopPropagation();
-		Meteor.call('sendMessage', {
-			_id: Random.id(),
-			rid,
-			msg: 'hello'
-		});
+	action() {
+		return;
 	}
 });
-RocketChat.messageBox.actions.add('Share', 'location3', {
-	icon: 'map-pin',
-	condition: () => RocketChat.Geolocation.get() !== false,
-	action({rid}) {
-		const position = RocketChat.Geolocation.get();
-		const latitude = position.coords.latitude;
-		const longitude = position.coords.longitude;
-		const text = `<div class="location-preview"><img style="height: 250px; width: 250px;" src="https://maps.googleapis.com/maps/api/staticmap?zoom=14&size=250x250&markers=color:gray%7Clabel:%7C${ latitude },${ longitude }&key=${ RocketChat.settings.get('MapView_GMapsAPIKey') }" /></div>`;
-		return swal({
-			title: t('Share_Location_Title'),
-			text,
-			showCancelButton: true,
-			closeOnConfirm: true,
-			closeOnCancel: true,
-			html: true
-		}, function(isConfirm) {
-			if (isConfirm !== true) {
-				return;
-			}
-			return Meteor.call('sendMessage', {
-				_id: Random.id(),
-				rid,
-				msg: '',
-				location: {
-					type: 'Point',
-					coordinates: [longitude, latitude]
-				}
-			});
-		});
-	}
-});
-RocketChat.messageBox.actions.add('Share', 'location4', {
-	icon: 'map-pin',
-	condition: () => RocketChat.Geolocation.get() !== false,
-	action({rid}) {
-		const position = RocketChat.Geolocation.get();
-		const latitude = position.coords.latitude;
-		const longitude = position.coords.longitude;
-		const text = `<div class="location-preview"><img style="height: 250px; width: 250px;" src="https://maps.googleapis.com/maps/api/staticmap?zoom=14&size=250x250&markers=color:gray%7Clabel:%7C${ latitude },${ longitude }&key=${ RocketChat.settings.get('MapView_GMapsAPIKey') }" /></div>`;
-		return swal({
-			title: t('Share_Location_Title'),
-			text,
-			showCancelButton: true,
-			closeOnConfirm: true,
-			closeOnCancel: true,
-			html: true
-		}, function(isConfirm) {
-			if (isConfirm !== true) {
-				return;
-			}
-			return Meteor.call('sendMessage', {
-				_id: Random.id(),
-				rid,
-				msg: '',
-				location: {
-					type: 'Point',
-					coordinates: [longitude, latitude]
-				}
-			});
-		});
+
+RocketChat.messageBox.actions.add('Create_new', 'Audio_message', {
+	icon: 'audio',
+	condition: () => true,
+	action() {
+		return;
 	}
 });
-RocketChat.messageBox.actions.add('Share', 'location5', {
-	icon: 'map-pin',
-	condition: () => RocketChat.Geolocation.get() !== false,
-	action({rid}) {
-		const position = RocketChat.Geolocation.get();
-		const latitude = position.coords.latitude;
-		const longitude = position.coords.longitude;
-		const text = `<div class="location-preview"><img style="height: 250px; width: 250px;" src="https://maps.googleapis.com/maps/api/staticmap?zoom=14&size=250x250&markers=color:gray%7Clabel:%7C${ latitude },${ longitude }&key=${ RocketChat.settings.get('MapView_GMapsAPIKey') }" /></div>`;
-		return swal({
-			title: t('Share_Location_Title'),
-			text,
-			showCancelButton: true,
-			closeOnConfirm: true,
-			closeOnCancel: true,
-			html: true
-		}, function(isConfirm) {
-			if (isConfirm !== true) {
-				return;
-			}
-			return Meteor.call('sendMessage', {
-				_id: Random.id(),
-				rid,
-				msg: '',
-				location: {
-					type: 'Point',
-					coordinates: [longitude, latitude]
-				}
+
+RocketChat.messageBox.actions.add('Add_files_from', 'Computer', {
+	icon: 'computer',
+	condition: () => RocketChat.settings.get('FileUpload_Enabled'),
+	action() {
+		const input = document.createElement('input');
+		input.style.display = 'none';
+		input.type = 'file';
+		input.setAttribute('multiple', 'multiple');
+		document.body.appendChild(input);
+
+		input.click();
+
+		input.addEventListener('change', function(e) {
+			const filesToUpload = [...e.target.files].map(file => {
+				Object.defineProperty(file, 'type', {
+					value: mime.lookup(file.name)
+				});
+				return {
+					file,
+					name: file.name
+				};
 			});
-		});
+			return fileUpload(filesToUpload);
+		}, {once: true});
+
+		input.remove();
 	}
 });
-RocketChat.messageBox.actions.add('Share', 'location6', {
+
+RocketChat.messageBox.actions.add('Share', 'My_location', {
 	icon: 'map-pin',
 	condition: () => RocketChat.Geolocation.get() !== false,
 	action({rid}) {

packages/rocketchat-theme/client/imports/components/popover.css

@@ -28,7 +28,6 @@
 	z-index: 9999;
 
 	&__content {
-		width: 100%;
 		display: flex;
 		padding: 1rem;
 		border-radius: 2px;
@@ -44,8 +43,16 @@
 	&__column {
 		display: flex;
 		flex-direction: column;
-		width: 100%;
 		min-width: 130px;
+		flex: 1 0 auto;
+
+		&:not(:first-child) {
+			padding-left: 1rem;
+		}
+
+		&-wrapper:not(:first-child) {
+			margin-top: 1rem;
+		}
 	}
 
 	&__title {
@@ -94,6 +101,26 @@
 			width: 14px;
 			height: 14px;
 		}
+
+		&--video {
+			width: 17px;
+			height: 13px;
+		}
+
+		&--audio {
+			width: 16px;
+			height: 14px;
+		}
+
+		&--computer {
+			width: 16px;
+			height: 14px;
+		}
+
+		&--map-pin {
+			width: 12px;
+			height: 16px;
+		}
 	}
 
 	&__item-text {

packages/rocketchat-theme/client/imports/general/base_old.css

@@ -92,7 +92,7 @@
 	}
 }
 
-.rc-old .upload-preview {
+.upload-preview {
 	padding: 1rem;
 
 	& .upload-preview-file {
@@ -103,7 +103,7 @@
 	}
 }
 
-.rc-old .upload-preview-title {
+.upload-preview-title {
 	padding: 3px;
 	border-radius: 0 0 5px 5px;
 }
@@ -4833,7 +4833,7 @@ body:not(.is-cordova) {
 }
 
 @media (height <= 400px) {
-	.rc-old .upload-preview .upload-preview-file {
+	.upload-preview .upload-preview-file {
 		height: 100px;
 	}
 }

packages/rocketchat-theme/client/imports/general/forms.css

@@ -314,10 +314,6 @@
 				color: #9ea2a8;
 				text-transform: none;
 			}
-
-			&__item {
-				padding: 1px 0;
-			}
 		}
 	}
 }

packages/rocketchat-ui-master/public/icons.svg

@@ -20,4 +20,7 @@
     <symbol id="icon-user-rounded" viewBox="0 0 18 18"><g stroke-width="1.5" fill="none" fill-rule="evenodd"><rect x=".75" y=".75" width="16.5" height="16.5" rx="2"/><path d="M3.002 17c0-3.75 4.499-3 4.499-4.5 0 0 .086-.996-.41-1.5-.618-.625-1.09-1.376-1.09-2.625C6.001 6.511 7.344 5 9 5c1.656 0 2.999 1.511 2.999 3.375 0 1.232-.46 2-1.105 2.625-.471.491-.395 1.5-.395 1.5 0 1.5 4.499.75 4.499 4.5"/></g></symbol>
     <symbol id="icon-warning" viewBox="0 0 20 20"><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M10 3l8 14H2z"/><path d="M10 9v5" stroke-linecap="square"/></g></symbol>
     <symbol id="icon-smile" viewBox="0 0 16 16"><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><circle fill="none" cx="9" cy="5" r="0.5"/><circle fill="none" cx="5" cy="5" r="0.5"/><circle fill="none" stroke-width="1.5" cx="7" cy="7" r="7"/><path d="M4.172 9.328a4 4 0 0 0 5.656 0" fill="none" stroke-width="1.5"/></g></symbol>
-</svg>
+    <symbol id="icon-computer" viewBox="0 0 16 14"><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M1 1h14v9H1z"/><path d="M5.5 13h5" stroke-linecap="square"/></g></symbol>
+    <symbol id="icon-audio" viewBox="0 0 16 14"><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M1 3.345h1.967S4.027 1 7 1v12c-2.874 0-4.033-2.345-4.033-2.345H1v-7.31zM11.106 10.426A6.968 6.968 0 0 0 12 7a6.968 6.968 0 0 0-.894-3.426M13.595 12.383A10.95 10.95 0 0 0 15 7c0-1.956-.51-3.792-1.405-5.383"/></g></symbol>
+    <symbol id="icon-video" viewBox="0 0 17 13"><g stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M1 4h10v8H1zM11 6.376l4.048-1.314c.526-.171.952.137.952.69v4.494c0 .552-.426.862-.952.69L11 9.624V6.376z"/><path d="M3.5 1h5" stroke-linecap="square"/></g></symbol>
+</svg>

packages/rocketchat-ui-message/client/messageBox.html

@@ -33,24 +33,25 @@
 						<div class="rc-popover__content">
 							{{# each column in columns }}
 								<div class="rc-popover__column">
-									{{# each group in column }}
-									<div class="rc-popover__column__wrapper">
-										<h3 class="rc-popover__title">{{group.name}}</h3>
-										<ul class="rc-popover__list">
-											{{# each group.actions }}
-											<li class="rc-popover__item" data-action="open" data-open="account">
-												<span class="rc-popover__icon">
-													<svg class="rc-popover__icon-element rc-popover__icon-element--user">
-														<use href="#icon-user"></use>
-													</svg>
-												</span>
-												<span class="rc-popover__item-text">{{_ actionName}}</span>
-											</li>
-											{{/each}}
-										</ul>
-									</div>
+									{{#each group in column }}
+										<div class="rc-popover__column-wrapper">
+											<h3 class="rc-popover__title">{{_ group.name}}</h3>
+											<ul class="rc-popover__list">
+												{{# each group.actions }}
+												<li class="rc-popover__item" data-action="open" data-open="account">
+													<span class="rc-popover__icon">
+														{{#if icon}}
+															<svg class="rc-popover__icon-element rc-popover__icon-element--{{icon}}">
+																<use href="#icon-{{icon}}"></use>
+															</svg>
+														{{/if}}
+													</span>
+													<span class="rc-popover__item-text">{{_ label}}</span>
+												</li>
+												{{/each}}
+											</ul>
+										</div>
 									{{/each}}
-
 								</div>
 							{{/each}}
 						</div>

packages/rocketchat-ui-message/client/messageBox.js

@@ -82,11 +82,14 @@ const markdownButtons = [
 ];
 
 Template.messageBox.helpers({
-	toString(obj) { return JSON.stringify(obj); },
+	toString(obj) {
+		return JSON.stringify(obj);
+	},
 	columns() {
 		const groups = RocketChat.messageBox.actions.get();
 		const sorted = Object.keys(groups).sort((a, b) => groups[b].length - groups[a].length);
-		const totalColumn = sorted.reduce((total, key) => total + groups[key].length, 0) / 2;
+		const totalColumn = sorted.reduce((total, key) => total + groups[key].length, 0);
+		const totalPerColumn = Math.ceil(totalColumn / 2);
 		const columns = [];
 
 		let counter = 0;
@@ -97,7 +100,7 @@ Template.messageBox.helpers({
 			counter += actions.length;
 			columns[index].push({name: key, actions});
 
-			if (counter > totalColumn) {
+			if (counter > totalPerColumn) {
 				counter = 0;
 				index++;
 			}