From bb2a8ad1b97a0d03b12e67df906dc971adf00ca5 Mon Sep 17 00:00:00 2001 From: Beatrice Olivera Date: Thu, 6 Sep 2018 01:52:00 +0100 Subject: [PATCH] added profile images and colors to the chat messages --- app/assets/stylesheets/components/_hand.scss | 2 +- app/assets/stylesheets/pages/_home.scss | 8 ++++ app/assets/stylesheets/pages/_messages.scss | 40 ++++++++++++++-- app/controllers/pages_controller.rb | 8 ++-- app/javascript/packs/chatrooms.js | 50 ++++++++++++++------ app/views/chat_rooms/show.html.erb | 1 + 6 files changed, 87 insertions(+), 22 deletions(-) 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 @@ +