apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[NEW] Audio message UI- Add circle-cross, circle-check svg

Browse Source
pull/9726/head
Karan Bedi 8 years ago
parent 2f165e381a
commit 83eddba546
5 changed files with 125 additions and 111 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      packages/rocketchat-theme/client/imports/components/message-box.css
  2. 5
      packages/rocketchat-ui-message/client/messageBox.html
  3. 221
      packages/rocketchat-ui-message/client/messageBox.js
  4. 1
      public/images/circle-check.svg
  5. 1
      public/images/circle-cross.svg

8
packages/rocketchat-theme/client/imports/components/message-box.css
Unescape View File

@ -162,7 +162,13 @@
position: relative;
z-index: -1;
&.active{
z-index: 1;
z-index: 2;
}
}
&__audio-message{
&.hidden{
z-index: -1;
}
}

5
packages/rocketchat-ui-message/client/messageBox.html
Unescape View File

@ -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">

221
packages/rocketchat-ui-message/client/messageBox.js
Unescape View File

@ -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;
}
});

1
public/images/circle-check.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 889 B

1
public/images/circle-cross.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

Write Preview
Loading…
Cancel
Save