chat css
This commit is contained in:
parent
adb3a18650
commit
a0ef7458aa
|
@ -2,6 +2,7 @@
|
||||||
@import "home";
|
@import "home";
|
||||||
@import "contacts";
|
@import "contacts";
|
||||||
@import "settings";
|
@import "settings";
|
||||||
|
@import "messages";
|
||||||
|
|
||||||
.accept-call-button {
|
.accept-call-button {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
.messages-container-container {
|
||||||
|
background-color: $card-background;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
.chat {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#messages-container {
|
||||||
|
overflow: scroll;
|
||||||
|
height: 80%;
|
||||||
|
padding: 10px;
|
||||||
|
.message {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
|
@ -39,6 +39,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
|
||||||
|
@ -50,7 +51,9 @@ class PagesController < ApplicationController
|
||||||
chat_message: {
|
chat_message: {
|
||||||
message: 'test',
|
message: 'test',
|
||||||
user_info: user_info,
|
user_info: user_info,
|
||||||
time_stamp: Time.now }
|
time_stamp: Time.now,
|
||||||
|
photo_url: photo_url
|
||||||
|
}
|
||||||
})
|
})
|
||||||
head :ok
|
head :ok
|
||||||
end
|
end
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import ActionCable from 'actioncable'
|
import ActionCable from 'actioncable'
|
||||||
|
// import { scrollLastMessageIntoView } from './chatrooms'
|
||||||
// create App object with key cable == new cosumer
|
// create App object with key cable == new cosumer
|
||||||
(function() {
|
(function() {
|
||||||
window.App || (window.App = {});
|
window.App || (window.App = {});
|
||||||
|
@ -24,11 +24,20 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
|
||||||
const chatMessage = data["chat_message"]
|
const chatMessage = data["chat_message"]
|
||||||
const message = `${chatMessage["message"]}`
|
const message = `${chatMessage["message"]}`
|
||||||
const messagesContainer = document.getElementById('messages-container')
|
const messagesContainer = document.getElementById('messages-container')
|
||||||
|
|
||||||
|
|
||||||
|
const messageDiv = document.createElement("div")
|
||||||
|
const photo = document.createElement("img")
|
||||||
|
photo.src = chatMessage["photo_url"]
|
||||||
|
|
||||||
|
// messageDiv.appendChild(photo)
|
||||||
|
|
||||||
const messageElement = document.createElement("p")
|
const messageElement = document.createElement("p")
|
||||||
|
messageElement.classList.add("message")
|
||||||
messageElement.innerText = message
|
messageElement.innerText = message
|
||||||
messagesContainer.appendChild(messageElement)
|
messagesContainer.appendChild(messageElement)
|
||||||
}
|
|
||||||
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
|
||||||
|
|
||||||
|
@ -51,9 +60,11 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
|
||||||
}
|
}
|
||||||
} 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 message = document.createElement("p")
|
const messageElement = document.createElement("p")
|
||||||
message.innerText = data["translated_message"]
|
messageElement.classList.add("message")
|
||||||
messagesContainer.appendChild(message)
|
messageElement.innerText = data["translated_message"]
|
||||||
|
messagesContainer.appendChild(messageElement)
|
||||||
|
scrollLastMessageIntoView();
|
||||||
} else {
|
} else {
|
||||||
// console.log(data)
|
// 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,6 +4,11 @@
|
||||||
|
|
||||||
<div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>
|
<div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <div class="row">
|
||||||
|
<div class="col-xs-12 col-sm-6 col-lg-4"></div>
|
||||||
|
<div class="col-xs-12 col-sm-6 col-lg-4"></div>
|
||||||
|
</div> -->
|
||||||
<div class="call-container">
|
<div class="call-container">
|
||||||
<div id="remote-video-container">
|
<div id="remote-video-container">
|
||||||
<div id="video_overlays">
|
<div id="video_overlays">
|
||||||
|
@ -13,23 +18,17 @@
|
||||||
<i class="far fa-hand-paper hand"></i>
|
<i class="far fa-hand-paper hand"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="translate-container">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="messages-container-container">
|
<div class="messages-container-container">
|
||||||
<div id="messages-container" style="color: white;">
|
<div id="messages-container">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="chat">
|
||||||
<div class="input-group mb-3">
|
|
||||||
<select id="language-1" class="input-field-text-black input-dropdown form-control">
|
<select id="language-1" class="input-field-text-black input-dropdown form-control">
|
||||||
<% @languages.each do |language| %>
|
<% @languages.each do |language| %>
|
||||||
<option value="<%= language.code %>"><%= language.name %></option>
|
<option value="<%= language.code %>"><%= language.name %></option>
|
||||||
<% end %>
|
<% end %>
|
||||||
</select>
|
</select>
|
||||||
<input type="text" class="form-control" name="chat-input" id="chat-input" value="" aria-describedby="basic-addon2">
|
<input type="text" class="form-control" name="chat-input" id="chat-input" value="">
|
||||||
<div class="input-group-append">
|
<button class="btn btn-primary" id="send-btn" type="submit" remote: true>Send</button>
|
||||||
<button class="btn btn-primary" id="send-btn" type="submit" remote: true>Send</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue