diff --git a/app/assets/stylesheets/components/_hand.scss b/app/assets/stylesheets/components/_hand.scss
index 49312e2..74a3a5f 100644
--- a/app/assets/stylesheets/components/_hand.scss
+++ b/app/assets/stylesheets/components/_hand.scss
@@ -2,7 +2,7 @@
position: absolute;
bottom: 20px;
z-index: 10000000000;
- left: 48%;
+ left: 10%;
font-size: 26px;
cursor: pointer;
}
diff --git a/app/assets/stylesheets/pages/_home.scss b/app/assets/stylesheets/pages/_home.scss
index a3fa38e..ee6d1a9 100755
--- a/app/assets/stylesheets/pages/_home.scss
+++ b/app/assets/stylesheets/pages/_home.scss
@@ -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 {
diff --git a/app/assets/stylesheets/pages/_messages.scss b/app/assets/stylesheets/pages/_messages.scss
index 9cd1d8b..8c2b0b7 100644
--- a/app/assets/stylesheets/pages/_messages.scss
+++ b/app/assets/stylesheets/pages/_messages.scss
@@ -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;
+}
diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb
index c1e8bcd..1ad249d 100644
--- a/app/controllers/pages_controller.rb
+++ b/app/controllers/pages_controller.rb
@@ -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
diff --git a/app/javascript/packs/chatrooms.js b/app/javascript/packs/chatrooms.js
index 3a1932a..8853946 100644
--- a/app/javascript/packs/chatrooms.js
+++ b/app/javascript/packs/chatrooms.js
@@ -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)
}
diff --git a/app/views/chat_rooms/show.html.erb b/app/views/chat_rooms/show.html.erb
index adcfc50..d75555e 100644
--- a/app/views/chat_rooms/show.html.erb
+++ b/app/views/chat_rooms/show.html.erb
@@ -14,6 +14,7 @@
+