Merge pull request #63 from beatriceo/revert-62-revert-61-chat-css
Revert "Revert "Chat css""
This commit is contained in:
Beatrice Olivera
GitHub
commit
cb0a4371d2
|
|
@ -2,7 +2,7 @@
|
|||
position: absolute;
|
||||
bottom: 20px;
|
||||
z-index: 10000000000;
|
||||
left: 48%;
|
||||
left: 10%;
|
||||
font-size: 26px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
@import "home";
|
||||
@import "contacts";
|
||||
@import "settings";
|
||||
@import "messages";
|
||||
|
||||
.accept-call-button {
|
||||
border-style: none;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
.messages-container-container {
|
||||
background-color: $light-gray;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
.chat {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
#messages-container {
|
||||
overflow: scroll;
|
||||
height: 95%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
select:not([multiple]) {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-position: right 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
|
||||
padding: .5em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
|
@ -50,7 +50,9 @@ class PagesController < ApplicationController
|
|||
chat_message: {
|
||||
message: 'test',
|
||||
user_info: user_info,
|
||||
time_stamp: Time.now }
|
||||
time_stamp: Time.now,
|
||||
photo_url: photo_url
|
||||
}
|
||||
})
|
||||
head :ok
|
||||
end
|
||||
|
|
@ -80,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
|
||||
|
||||
|
|
@ -90,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
|
||||
|
|
@ -102,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
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import ActionCable from 'actioncable'
|
||||
|
||||
// import { scrollLastMessageIntoView } from './chatrooms'
|
||||
// create App object with key cable == new cosumer
|
||||
(function() {
|
||||
window.App || (window.App = {});
|
||||
|
|
@ -24,14 +24,35 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
|
|||
const chatMessage = data["chat_message"]
|
||||
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")
|
||||
|
||||
// Text Settings
|
||||
const messageElement = document.createElement("p")
|
||||
messageElement.classList.add("message")
|
||||
messageElement.classList.add("no-margin")
|
||||
messageElement.innerText = message
|
||||
messagesContainer.appendChild(messageElement)
|
||||
}
|
||||
else if (data["chat_message"] && data["chat_message"]["userId"] != userId) {
|
||||
|
||||
// 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` , {
|
||||
|
|
@ -39,21 +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 message = document.createElement("p")
|
||||
message.innerText = data["translated_message"]
|
||||
messagesContainer.appendChild(message)
|
||||
|
||||
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"]
|
||||
|
||||
messageDiv.appendChild(photo)
|
||||
messageDiv.appendChild(messageElement)
|
||||
|
||||
messagesContainer.appendChild(messageDiv)
|
||||
} else {
|
||||
// console.log(data)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
function scrollLastMessageIntoView() {
|
||||
const messages = document.querySelectorAll('.message');
|
||||
const lastMessage = messages[messages.length - 1];
|
||||
|
||||
if (lastMessage !== undefined) {
|
||||
lastMessage.scrollIntoView();
|
||||
}
|
||||
}
|
||||
|
||||
export { scrollLastMessageIntoView }
|
||||
|
|
@ -4,36 +4,45 @@
|
|||
|
||||
<div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>
|
||||
|
||||
<div class="call-container">
|
||||
<div id="remote-video-container">
|
||||
<div id="video_overlays">
|
||||
<video id="local-video" autoplay muted></video>
|
||||
|
||||
<div class="row">
|
||||
<div class="call-container">
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4">
|
||||
<div id="remote-video-container">
|
||||
<div id="video_overlays">
|
||||
<video id="local-video" autoplay muted></video>
|
||||
</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>
|
||||
<video id="remote-video" autoplay></video>
|
||||
<i class="far fa-hand-paper hand"></i>
|
||||
</div>
|
||||
|
||||
<div class="translate-container">
|
||||
|
||||
</div>
|
||||
<div class="messages-container-container">
|
||||
<div id="messages-container" style="color: white;">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<select id="language-1" class="input-field-text-black input-dropdown form-control">
|
||||
<% @languages.each do |language| %>
|
||||
<option value="<%= language.code %>"><%= language.name %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
<input type="text" class="form-control" name="chat-input" id="chat-input" value="" aria-describedby="basic-addon2">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary" id="send-btn" type="submit" remote: true>Send</button>
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 no-padding">
|
||||
<div class="messages-container-container">
|
||||
<div id="messages-container">
|
||||
</div>
|
||||
<div class="chat">
|
||||
<div class="input-group">
|
||||
<select id="language-1" class="form-control no-radius">
|
||||
<% @languages.each do |language| %>
|
||||
<option value="<%= language.code %>"><%= language.name %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
<span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
|
||||
<input type="text" class="form-control" name="chat-input" id="chat-input" value="">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-primary form-control" id="send-btn" type="submit" remote: true>Send</button>
|
||||
<!-- <i class="far fa-paper-plane"></i> -->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div><span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span></div>
|
||||
|
||||
<%= javascript_pack_tag 'chatrooms' %>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"type": "service_account",
|
||||
"project_id": "booming-banner-212315",
|
||||
"private_key_id": "9c2ce218223666d974da8f33e8329e5c6d40a471",
|
||||
"private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQC4jSV/s2mp2nri\nJkD4W62aSithmFgd0dNZbPBuDNkhscGXfI4HAYzbWGBHw9gAuN59ezIVFZ3W3IsB\na3scJHup58ZV6zIaeEY5uFhgIlwdohi0iMKvY0eClTBiabu5Drn4OE8IlFX99Ab1\nwhV7WRjGG8YEQ2d1pUHHvS98QeQvb1Km6M9E/4GFib3xcBU0VFO2Evk3AJzK9K1z\nT+DsduloNxAaZfcygWvzhDez2sxftR9PXE1Ek/KQSuATACn11rPUyr/CuHfGSUh6\nypKMUnaYb8EnjrNW/bea/GKjGMzvHubjN/lPEEovXTYANfCXvVMy7ThdQLjS6YIW\nEPvEhS2jAgMBAAECggEAEbiT8jgzHDk7dX3A3VhISjl3Au8S/wIH7l1UlOys6Nxd\nv4MZTDjs4p8Q17NJiYA29QugWn/x4RDaVC+S6bfjHASCefuUmxAThjVaXxjNiZbo\nEmXTc+3vju1ucPTALtvoJZqalDNSMol9JZoWX/rFMzi1gfFK/PP6ZgiXh7H4DEnV\nDtwI8uXs6xGpC5Kr2u2N64RDqk9DbZ6lPLqk1zB1XM1FvApkmsUbSEXZj7CiDemx\nTz23f6VR+eZzgWuaWJQwLwmkWwVgCfUr9KL3Uw92+U/9uvcmNdsC7cwM14RfTx1R\njYkwqjz2RRsiAsuD5ebHxoNDqEIkArf6K+dFJImnOQKBgQD7zFVW22nYg/54JZR1\n3Hyv8ncy6ocPB0+jlESE/m8kPo0RtzGUJxKDTwEZP+y8y2NchI6C1atC/RxE6But\nOUAJLxqD027z4rXo/yNaiDaerZXr/y56pRbhR3wbjuR7vcEFZ3B7bHCrKhgdDYPA\nMTgVxX/2Z3AXwCDpaG2W7LxbpwKBgQC7oYnrF6jzNPCu/FHH4Hhff/2aV0IJO7BQ\nEeY8VADVBHTiYwlnBlG9LkpWFM/YjsGpsfzorztIKDd1N911h2XcL7kgh6+URP75\ntYtQV3iNUbERxdp/rnm97QdZr/W3r9s60q61mX7vMsZK8mPPmwLKvP7YSu0NvFa8\nucidRihtpQKBgAJW/sAE3/HsIBQ7vSpvNxVnemYVudWQ6tOJUC2wM5Yxopv0iNho\nmIpx1H/IkUmb1juI284pcCL6OSYGxiMQ8iBjuKpa76ACjlAw9sIjm+ZTlJ4Ry/vF\nxvWm9WdIJ6ViuQV01Z2//zgH9xtmAcBqdKv3Ht5KTcdauLOSjdomLwXnAoGAfQ7J\nHxFxAVEaznbMh108veJQBKv+Dqti86tKepE+0Lwcr7t0y98xYddVopRSiDN2LwW7\n3NbWu1xawl0O1UP+h0ijqmPlifyGuabgCReT+RUm4QKvhISlDgrK6GNYcirbAxTj\nb5S0PvfnpJJ0Ji5aKQjZDw65e3s5kKZ/aRwW3CUCgYAvWeze0qlg332pZiEtsEnF\nx8CUq7i1phdB3G6cIVdvAee5ce6tvpNiFhECjaUZiykV6zyQY8s8LIyjKTuFXbI9\n2uAvPl7y4PHV5rKJOtuQJOLqaUNgAlklKdUBL2I6vwp/1epxQHUYNeaQv5lC0QT+\nxHrzaiPUQ0ADBUNvUVMIOg==\n-----END PRIVATE KEY-----\n",
|
||||
"client_email": "starting-account-c76g3v5fh5js@booming-banner-212315.iam.gserviceaccount.com",
|
||||
"client_id": "105634639063680583591",
|
||||
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
|
||||
"token_uri": "https://oauth2.googleapis.com/token",
|
||||
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
|
||||
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/starting-account-c76g3v5fh5js%40booming-banner-212315.iam.gserviceaccount.com"
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue