paoda/polyglot
1
0
Fork 0
mirror of https://github.com/beatriceo/polyglot.git synced 2025-10-25 10:42:11 +00:00
Code Issues Projects Releases Wiki Activity

Revert "Chat css"

Browse Source
This commit is contained in:
Beatrice Olivera
2018-09-06 01:58:34 +01:00
committed by GitHub
parent 7cf0cf7628
commit 9028db59cc
10 changed files with 44 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/components/_hand.scss
View File

@@ -2,7 +2,7 @@
position: absolute;
bottom: 20px;
z-index: 10000000000;
left: 10%;
left: 48%;
font-size: 26px;
cursor: pointer;
}

8
app/assets/stylesheets/pages/_home.scss
View File

@@ -6,14 +6,6 @@ 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 {

1
app/assets/stylesheets/pages/_index.scss
View File

@@ -2,7 +2,6 @@
@import "home";
@import "contacts";
@import "settings";
@import "messages";
.accept-call-button {
border-style: none;

65
app/assets/stylesheets/pages/_messages.scss
View File

@@ -1,65 +0,0 @@
.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;
}

11
app/controllers/pages_controller.rb
View File

@@ -50,9 +50,7 @@ class PagesController < ApplicationController
chat_message: {
message: 'test',
user_info: user_info,
time_stamp: Time.now,
photo_url: photo_url
}
time_stamp: Time.now }
})
head :ok
end
@@ -82,8 +80,7 @@ class PagesController < ApplicationController
ActionCable.server.broadcast "chat_room_#{params[:chat_room_id]}", {
translated_message: translated_message,
userId: userId,
photo_url: params[:photo_url]
userId: userId
}
end
@@ -93,7 +90,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
@@ -106,8 +102,7 @@ class PagesController < ApplicationController
message: params[:message],
user_info: user_info,
time_stamp: Time.now.strftime("%H:%M"),
userId: current_user.id,
photo_url: photo_url
userId: current_user.id
}
})
head :ok

63
app/javascript/packs/chatrooms.js
View File

@@ -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,35 +24,14 @@ 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
// 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) {
messagesContainer.appendChild(messageElement)
}
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` , {
@@ -60,33 +39,21 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
body: JSON.stringify({
message: message,
target: target,
userId: userId,
photo_url: chatMessage["photo_url"]
userId: userId
}),
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"]
messageDiv.appendChild(photo)
messageDiv.appendChild(messageElement)
messagesContainer.appendChild(messageDiv)
const message = document.createElement("p")
message.innerText = data["translated_message"]
messagesContainer.appendChild(message)
} else {
// console.log(data)
}

10
app/javascript/packs/scroll.js
View File

@@ -1,10 +0,0 @@
function scrollLastMessageIntoView() {
const messages = document.querySelectorAll('.message');
const lastMessage = messages[messages.length - 1];
if (lastMessage !== undefined) {
lastMessage.scrollIntoView();
}
}
export { scrollLastMessageIntoView }

57
app/views/chat_rooms/show.html.erb
View File

@@ -4,45 +4,36 @@
<div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>
<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 class="call-container">
<div id="remote-video-container">
<div id="video_overlays">
<video id="local-video" autoplay muted></video>
</div>
<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>
<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>
</div>
</div>
</div>
<div><span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span></div>
<%= javascript_pack_tag 'chatrooms' %>