added profile images and colors to the chat messages

This commit is contained in:
Beatrice Olivera 2018-09-06 01:52:00 +01:00
parent 9ddbd38bce
commit bb2a8ad1b9
6 changed files with 87 additions and 22 deletions

View File

@ -2,7 +2,7 @@
position: absolute;
bottom: 20px;
z-index: 10000000000;
left: 48%;
left: 10%;
font-size: 26px;
cursor: pointer;
}

View File

@ -6,6 +6,14 @@ video {
#remote-video-container {
float: left;
i {
text-align: center;
background-color: $primary;
border-radius: 50%;
padding: 15px;
z-index: 999999;
color: white;
}
}
#local-video {

View File

@ -1,5 +1,5 @@
.messages-container-container {
background-color: $card-background;
background-color: $light-gray;
width: 100%;
height: 100vh;
position: relative;
@ -13,9 +13,6 @@
overflow: scroll;
height: 95%;
padding: 10px;
.message {
color: white;
}
}
select:not([multiple]) {
@ -31,3 +28,38 @@ select:not([multiple]) {
#language-1 {
border-radius: 0;
}
.avatar-sm {
width: 35px;
height: 35px;
}
.messageDiv {
display: flex;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
p {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 8px;
padding-right: 8px;
background-color: #d4d5d6;
color: $navbar-background;
border-radius: 2px;
}
&.right {
flex-direction: row-reverse;
p {
background-color: $primary;
color: white !important;
}
}
}
.margin-left {
margin-left: 10px;
}

View File

@ -39,7 +39,6 @@ class PagesController < ApplicationController
chatroom = 'chat_room_' + params[:chat_room_id]
puts params
user_info = {}
photo_url = current_user.photo.url || "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
if current_user.first_name.nil? || current_user.last_name.nil?
user_info[:name] = current_user.email
@ -83,7 +82,8 @@ class PagesController < ApplicationController
ActionCable.server.broadcast "chat_room_#{params[:chat_room_id]}", {
translated_message: translated_message,
userId: userId
userId: userId,
photo_url: params[:photo_url]
}
end
@ -93,6 +93,7 @@ class PagesController < ApplicationController
chatroom = 'chat_room_' + params[:chat_room_id]
puts params
user_info = {}
photo_url = current_user.photo.url || "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
if current_user.first_name.nil? || current_user.last_name.nil?
user_info[:name] = current_user.email
@ -105,7 +106,8 @@ class PagesController < ApplicationController
message: params[:message],
user_info: user_info,
time_stamp: Time.now.strftime("%H:%M"),
userId: current_user.id
userId: current_user.id,
photo_url: photo_url
}
})
head :ok

View File

@ -25,22 +25,34 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
const message = `${chatMessage["message"]}`
const messagesContainer = document.getElementById('messages-container')
// Div Settings
const messageDiv = document.createElement("div")
messageDiv.classList.add("messageDiv")
messageDiv.classList.add("right")
// Photo Settings
const photo = document.createElement("img")
photo.src = chatMessage["photo_url"]
photo.classList.add("img-circle")
photo.classList.add("avatar-sm")
photo.classList.add("margin-left")
// messageDiv.appendChild(photo)
// Text Settings
const messageElement = document.createElement("p")
messageElement.classList.add("message")
messageElement.classList.add("no-margin")
messageElement.innerText = message
messagesContainer.appendChild(messageElement)
// Add message and photo to div
messageDiv.appendChild(photo)
messageDiv.appendChild(messageElement)
// Add message to container
messagesContainer.appendChild(messageDiv)
} else if (data["chat_message"] && data["chat_message"]["userId"] != userId) {
const chatMessage = data["chat_message"]
const target = document.getElementById('language-1').value
const message = `${chatMessage["message"]}`
fetch(`/chat_rooms/${chatroomId}/translate_message` , {
@ -48,23 +60,33 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
body: JSON.stringify({
message: message,
target: target,
userId: userId
userId: userId,
photo_url: chatMessage["photo_url"]
}),
headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
})
} else if (data["translation"] && data["userId"] == userId) {
if (data["input"] == 1) {
document.getElementById('language-2-input').value = data["translation"].text
} else {
document.getElementById('language-1-input').value = data["translation"].text
}
} else if (data["translated_message"] && data["userId"] == userId) {
const messagesContainer = document.getElementById('messages-container')
const messageDiv = document.createElement("div")
messageDiv.classList.add("messageDiv")
const photo = document.createElement("img")
photo.src = data["photo_url"]
photo.classList.add("img-circle")
photo.classList.add("avatar-sm")
photo.classList.add("margin-right")
const messageElement = document.createElement("p")
messageElement.classList.add("message")
messageElement.classList.add("message")
messageElement.classList.add("no-margin")
messageElement.innerText = data["translated_message"]
messagesContainer.appendChild(messageElement)
scrollLastMessageIntoView();
messageDiv.appendChild(photo)
messageDiv.appendChild(messageElement)
messagesContainer.appendChild(messageDiv)
} else {
// console.log(data)
}

View File

@ -14,6 +14,7 @@
</div>
<video id="remote-video" autoplay></video>
<i class="far fa-hand-paper hand"></i>
<!-- <i class="far fa-phone-slash hand"></i> -->
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 no-padding">