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; position: absolute;
bottom: 20px; bottom: 20px;
z-index: 10000000000; z-index: 10000000000;
left: 48%; left: 10%;
font-size: 26px; font-size: 26px;
cursor: pointer; cursor: pointer;
} }

View File

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

View File

@ -1,5 +1,5 @@
.messages-container-container { .messages-container-container {
background-color: $card-background; background-color: $light-gray;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
position: relative; position: relative;
@ -13,9 +13,6 @@
overflow: scroll; overflow: scroll;
height: 95%; height: 95%;
padding: 10px; padding: 10px;
.message {
color: white;
}
} }
select:not([multiple]) { select:not([multiple]) {
@ -31,3 +28,38 @@ select:not([multiple]) {
#language-1 { #language-1 {
border-radius: 0; 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] chatroom = 'chat_room_' + params[:chat_room_id]
puts params puts params
user_info = {} 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? if current_user.first_name.nil? || current_user.last_name.nil?
user_info[:name] = current_user.email user_info[:name] = current_user.email
@ -83,7 +82,8 @@ class PagesController < ApplicationController
ActionCable.server.broadcast "chat_room_#{params[:chat_room_id]}", { ActionCable.server.broadcast "chat_room_#{params[:chat_room_id]}", {
translated_message: translated_message, translated_message: translated_message,
userId: userId userId: userId,
photo_url: params[:photo_url]
} }
end end
@ -93,6 +93,7 @@ class PagesController < ApplicationController
chatroom = 'chat_room_' + params[:chat_room_id] chatroom = 'chat_room_' + params[:chat_room_id]
puts params puts params
user_info = {} 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? if current_user.first_name.nil? || current_user.last_name.nil?
user_info[:name] = current_user.email user_info[:name] = current_user.email
@ -105,7 +106,8 @@ class PagesController < ApplicationController
message: params[:message], message: params[:message],
user_info: user_info, user_info: user_info,
time_stamp: Time.now.strftime("%H:%M"), time_stamp: Time.now.strftime("%H:%M"),
userId: current_user.id userId: current_user.id,
photo_url: photo_url
} }
}) })
head :ok head :ok

View File

@ -25,22 +25,34 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
const message = `${chatMessage["message"]}` const message = `${chatMessage["message"]}`
const messagesContainer = document.getElementById('messages-container') const messagesContainer = document.getElementById('messages-container')
// Div Settings
const messageDiv = document.createElement("div") const messageDiv = document.createElement("div")
messageDiv.classList.add("messageDiv")
messageDiv.classList.add("right")
// Photo Settings
const photo = document.createElement("img") const photo = document.createElement("img")
photo.src = chatMessage["photo_url"] 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") const messageElement = document.createElement("p")
messageElement.classList.add("message") messageElement.classList.add("message")
messageElement.classList.add("no-margin")
messageElement.innerText = message 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) { } else if (data["chat_message"] && data["chat_message"]["userId"] != userId) {
const chatMessage = data["chat_message"] const chatMessage = data["chat_message"]
const target = document.getElementById('language-1').value const target = document.getElementById('language-1').value
const message = `${chatMessage["message"]}` const message = `${chatMessage["message"]}`
fetch(`/chat_rooms/${chatroomId}/translate_message` , { fetch(`/chat_rooms/${chatroomId}/translate_message` , {
@ -48,23 +60,33 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
body: JSON.stringify({ body: JSON.stringify({
message: message, message: message,
target: target, 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 } 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) { } else if (data["translated_message"] && data["userId"] == userId) {
const messagesContainer = document.getElementById('messages-container') 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") const messageElement = document.createElement("p")
messageElement.classList.add("message") messageElement.classList.add("message")
messageElement.classList.add("message")
messageElement.classList.add("no-margin")
messageElement.innerText = data["translated_message"] messageElement.innerText = data["translated_message"]
messagesContainer.appendChild(messageElement)
scrollLastMessageIntoView(); messageDiv.appendChild(photo)
messageDiv.appendChild(messageElement)
messagesContainer.appendChild(messageDiv)
} else { } else {
// console.log(data) // console.log(data)
} }

View File

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