From 83eddba546cab2acecc9dffda077b3c2bac88d49 Mon Sep 17 00:00:00 2001
From: Karan Bedi <karanbedi0304@gmail.com>
Date: Sun, 18 Feb 2018 02:20:22 +0530
Subject: [PATCH] [NEW] Audio message UI- Add circle-cross, circle-check svg

---
 .../client/imports/components/message-box.css |   8 +-
 .../client/messageBox.html                    |   5 +-
 .../client/messageBox.js                      | 221 +++++++++---------
 public/images/circle-check.svg                |   1 +
 public/images/circle-cross.svg                |   1 +
 5 files changed, 125 insertions(+), 111 deletions(-)
 create mode 100644 public/images/circle-check.svg
 create mode 100644 public/images/circle-cross.svg

diff --git a/packages/rocketchat-theme/client/imports/components/message-box.css b/packages/rocketchat-theme/client/imports/components/message-box.css
index 82180f828fb..56148ed3878 100644
--- a/packages/rocketchat-theme/client/imports/components/message-box.css
+++ b/packages/rocketchat-theme/client/imports/components/message-box.css
@@ -162,7 +162,13 @@
 		position: relative;
 		z-index: -1;
 		&.active{
-			z-index: 1;
+			z-index: 2;
+		}
+	}
+
+	&__audio-message{
+		&.hidden{
+			z-index: -1;
 		}
 	}
 
diff --git a/packages/rocketchat-ui-message/client/messageBox.html b/packages/rocketchat-ui-message/client/messageBox.html
index 7475c63892f..3c0a6349e99 100644
--- a/packages/rocketchat-ui-message/client/messageBox.html
+++ b/packages/rocketchat-ui-message/client/messageBox.html
@@ -94,9 +94,12 @@
 <template name="messageBox__audioMessage">
 	<div class="rc-message-box__audio-recording">
 		<div class="rc-message-box__icon cross js-audio-message-cross">
-			{{> icon block="rc-input__icon-svg" icon="cross"}}
+			<img src="/images/circle-cross.svg">
 		</div>
 		<div class="rc-message-box__timer">00:00</div>
+		<div class="rc-message-box__icon check js-audio-message-check">
+			<img src="/images/circle-check.svg">
+		</div>
 	</div>
 	<div class="rc-message-box__audio-message">
 		<div class="rc-message-box__icon">
diff --git a/packages/rocketchat-ui-message/client/messageBox.js b/packages/rocketchat-ui-message/client/messageBox.js
index 3dd05dafcd1..98468deacc2 100644
--- a/packages/rocketchat-ui-message/client/messageBox.js
+++ b/packages/rocketchat-ui-message/client/messageBox.js
@@ -478,112 +478,6 @@ Template.messageBox.events({
 		const timer = document.querySelector('.rc-message-box__timer');
 		const timer_box = document.querySelector('.rc-message-box__audio-recording');
 
-		if (chatMessages[RocketChat.openedRoom].recording) {
-			icon.style.color = '';
-			icon.classList.remove('pulse');
-			timer_box.classList.remove('active');
-
-			timer.innerHTML = '00:00';
-			if (audioMessageIntervalId) {
-				clearInterval(audioMessageIntervalId);
-			}
-
-			chatMessages[RocketChat.openedRoom].recording = false;
-			AudioRecorder.stop(function(blob) {
-				const roomId = Session.get('openedRoom');
-				const record = {
-					name: `${ TAPi18n.__('Audio record') }.mp3`,
-					size: blob.size,
-					type: 'audio/mp3',
-					rid: roomId,
-					description: ''
-				};
-				const upload = fileUploadHandler('Uploads', record, blob);
-				let uploading = Session.get('uploading') || [];
-				uploading.push({
-					id: upload.id,
-					name: upload.getFileName(),
-					percentage: 0
-				});
-				Session.set('uploading', uploading);
-				upload.onProgress = function(progress) {
-					uploading = Session.get('uploading');
-
-					const item = _.findWhere(uploading, {id: upload.id});
-					if (item != null) {
-						item.percentage = Math.round(progress * 100) || 0;
-						return Session.set('uploading', uploading);
-					}
-				};
-
-				upload.start(function(error, file, storage) {
-					if (error) {
-						let uploading = Session.get('uploading');
-						if (!Array.isArray(uploading)) {
-							uploading = [];
-						}
-
-						const item = _.findWhere(uploading, { id: upload.id });
-
-						if (_.isObject(item)) {
-							item.error = error.message;
-							item.percentage = 0;
-						} else {
-							uploading.push({
-								error: error.error,
-								percentage: 0
-							});
-						}
-
-						Session.set('uploading', uploading);
-						return;
-					}
-
-
-					if (file) {
-						Meteor.call('sendFileMessage', roomId, storage, file, () => {
-							Meteor.setTimeout(() => {
-								const uploading = Session.get('uploading');
-								if (uploading !== null) {
-									const item = _.findWhere(uploading, {
-										id: upload.id
-									});
-									return Session.set('uploading', _.without(uploading, item));
-								}
-							}, 2000);
-						});
-					}
-				});
-
-				Tracker.autorun(function(c) {
-					const cancel = Session.get(`uploading-cancel-${ upload.id }`);
-					if (cancel) {
-						let item;
-						upload.stop();
-						c.stop();
-
-						uploading = Session.get('uploading');
-						if (uploading != null) {
-							item = _.findWhere(uploading, {id: upload.id});
-							if (item != null) {
-								item.percentage = 0;
-							}
-							Session.set('uploading', uploading);
-						}
-
-						return Meteor.setTimeout(function() {
-							uploading = Session.get('uploading');
-							if (uploading != null) {
-								item = _.findWhere(uploading, {id: upload.id});
-								return Session.set('uploading', _.without(uploading, item));
-							}
-						}, 1000);
-					}
-				});
-			});
-			return false;
-		}
-
 		chatMessages[RocketChat.openedRoom].recording = true;
 		AudioRecorder.start(function() {
 			const startTime = new Date;
@@ -597,7 +491,8 @@ Template.messageBox.events({
 				if (seconds < 10) { seconds = `0${ seconds }`; }
 				timer.innerHTML = `${ minutes }:${ seconds }`;
 			}, 1000);
-			icon.style.color = 'green';
+
+			icon.classList.add('hidden');
 			timer_box.classList.add('active');
 		});
 	},
@@ -607,9 +502,8 @@ Template.messageBox.events({
 		const timer = document.querySelector('.rc-message-box__timer');
 		const timer_box = document.querySelector('.rc-message-box__audio-recording');
 
-
-		icon.style.color = '';
 		timer_box.classList.remove('active');
+		icon.classList.remove('hidden');
 		timer.innerHTML = '00:00';
 		if (audioMessageIntervalId) {
 			clearInterval(audioMessageIntervalId);
@@ -617,6 +511,115 @@ Template.messageBox.events({
 
 		AudioRecorder.stop();
 		chatMessages[RocketChat.openedRoom].recording = false;
+	},
+	'click .js-audio-message-check'(event) {
+		event.preventDefault();
+		const icon = document.querySelector('.rc-message-box__audio-message');
+		const timer = document.querySelector('.rc-message-box__timer');
+		const timer_box = document.querySelector('.rc-message-box__audio-recording');
+
+		icon.classList.remove('hidden');
+		timer_box.classList.remove('active');
+
+		timer.innerHTML = '00:00';
+		if (audioMessageIntervalId) {
+			clearInterval(audioMessageIntervalId);
+		}
+
+		chatMessages[RocketChat.openedRoom].recording = false;
+		AudioRecorder.stop(function(blob) {
+			const roomId = Session.get('openedRoom');
+			const record = {
+				name: `${ TAPi18n.__('Audio record') }.mp3`,
+				size: blob.size,
+				type: 'audio/mp3',
+				rid: roomId,
+				description: ''
+			};
+			const upload = fileUploadHandler('Uploads', record, blob);
+			let uploading = Session.get('uploading') || [];
+			uploading.push({
+				id: upload.id,
+				name: upload.getFileName(),
+				percentage: 0
+			});
+			Session.set('uploading', uploading);
+			upload.onProgress = function(progress) {
+				uploading = Session.get('uploading');
+
+				const item = _.findWhere(uploading, {id: upload.id});
+				if (item != null) {
+					item.percentage = Math.round(progress * 100) || 0;
+					return Session.set('uploading', uploading);
+				}
+			};
+
+			upload.start(function(error, file, storage) {
+				if (error) {
+					let uploading = Session.get('uploading');
+					if (!Array.isArray(uploading)) {
+						uploading = [];
+					}
+
+					const item = _.findWhere(uploading, { id: upload.id });
+
+					if (_.isObject(item)) {
+						item.error = error.message;
+						item.percentage = 0;
+					} else {
+						uploading.push({
+							error: error.error,
+							percentage: 0
+						});
+					}
+
+					Session.set('uploading', uploading);
+					return;
+				}
+
+
+				if (file) {
+					Meteor.call('sendFileMessage', roomId, storage, file, () => {
+						Meteor.setTimeout(() => {
+							const uploading = Session.get('uploading');
+							if (uploading !== null) {
+								const item = _.findWhere(uploading, {
+									id: upload.id
+								});
+								return Session.set('uploading', _.without(uploading, item));
+							}
+						}, 2000);
+					});
+				}
+			});
+
+			Tracker.autorun(function(c) {
+				const cancel = Session.get(`uploading-cancel-${ upload.id }`);
+				if (cancel) {
+					let item;
+					upload.stop();
+					c.stop();
+
+					uploading = Session.get('uploading');
+					if (uploading != null) {
+						item = _.findWhere(uploading, {id: upload.id});
+						if (item != null) {
+							item.percentage = 0;
+						}
+						Session.set('uploading', uploading);
+					}
+
+					return Meteor.setTimeout(function() {
+						uploading = Session.get('uploading');
+						if (uploading != null) {
+							item = _.findWhere(uploading, {id: upload.id});
+							return Session.set('uploading', _.without(uploading, item));
+						}
+					}, 1000);
+				}
+			});
+		});
+		return false;
 	}
 });
 
diff --git a/public/images/circle-check.svg b/public/images/circle-check.svg
new file mode 100644
index 00000000000..b5e092b5f6a
--- /dev/null
+++ b/public/images/circle-check.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 32 32" height="26px" id="id-circle-cross" version="1.1" viewBox="0 0 32 32" width="26px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="icon-circle-check"><path d="M16,0C7.163,0,0,7.163,0,16c0,8.837,7.163,16,16,16c8.836,0,16-7.164,16-16C32,7.163,24.836,0,16,0z M16,30   C8.268,30,2,23.732,2,16C2,8.268,8.268,2,16,2s14,6.268,14,14C30,23.732,23.732,30,16,30z" fill="#2db730"/><path d="M23.3,10.393L13.012,20.589l-4.281-4.196c-0.394-0.391-1.034-0.391-1.428,0   c-0.395,0.391-0.395,1.024,0,1.414l4.999,4.899c0.41,0.361,1.023,0.401,1.428,0l10.999-10.899c0.394-0.39,0.394-1.024,0-1.414   C24.334,10.003,23.695,10.003,23.3,10.393z" fill="#2db730"/></g><g/><g/><g/><g/><g/><g/></svg>
diff --git a/public/images/circle-cross.svg b/public/images/circle-cross.svg
new file mode 100644
index 00000000000..781bf5b4c2c
--- /dev/null
+++ b/public/images/circle-cross.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 256 256" height="26px" id="icon-circle-cross" version="1.1" viewBox="0 0 256 256" width="26px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M183.191,174.141c2.5,2.498,2.5,6.552,0,9.05c-1.249,1.25-2.889,1.875-4.525,1.875c-1.638,0-3.277-0.625-4.525-1.875  l-46.142-46.142L81.856,183.19c-1.249,1.25-2.888,1.875-4.525,1.875c-1.638,0-3.277-0.625-4.525-1.875c-2.5-2.498-2.5-6.552,0-9.05  l46.143-46.143L72.806,81.856c-2.5-2.499-2.5-6.552,0-9.05c2.497-2.5,6.553-2.5,9.05,0l46.142,46.142l46.142-46.142  c2.497-2.5,6.553-2.5,9.051,0c2.5,2.499,2.5,6.552,0,9.05l-46.143,46.142L183.191,174.141z M256,128C256,57.42,198.58,0,128,0  C57.42,0,0,57.42,0,128c0,70.58,57.42,128,128,128C198.58,256,256,198.58,256,128z M243.2,128c0,63.521-51.679,115.2-115.2,115.2  c-63.522,0-115.2-51.679-115.2-115.2C12.8,64.478,64.478,12.8,128,12.8C191.521,12.8,243.2,64.478,243.2,128z" fill="#ef0e0e"/></svg>