Merge pull request #40 from beatriceo/front-end

Front end

app/assets/stylesheets/components/_navbar.scss

@@ -12,19 +12,23 @@
 
     font-size: 2em;
     font-weight: bold;
+    a:hover {
+      color: $primary;
+    }
   }
-
 
   .right-align {
     height: 100%;
     width: 16em;
-    margin-right: 5em;
+    margin-right: 4em;
     display: flex;
     align-items: center;
     justify-content: space-between;
+
     .links {
       display: flex;
       height: inherit;
+
       div {
         height: inherit;
         display: flex;
@@ -32,19 +36,26 @@
         border-bottom: 5px solid transparent;
 
         &:first-child {
-          margin-right: 1em;
+          margin-right: 2.5em;
         }
 
         &.active {
           border-bottom: 5px solid $primary;
           color: white;
+        }
 
+        &:hover {
+          color: white;
+        }
+
+        &.active, &:hover {
           a {
             color: white;
           }
         }
+
         a {
-          color: #C4C4C4;
+          color: $text-inactive;
           text-decoration: none;
         }
       }
@@ -53,7 +64,28 @@
 
   .profile {
     img {
-      width: 3.25em;
+      width: 3em;
+      padding: 0.2em;
+    }
+  }
+
+  .burger-menu {
+    margin-right: 20px;
+    color: $primary;
+  }
+
+  .polyglot-dropdown {
+    background-color: $navbar-background;
+
+    li {
+      a {
+        color: $text-inactive;
+
+        &:hover {
+          color: white;
+          background-color: $background;
+        }
+      }
     }
   }
 }

app/assets/stylesheets/config/_colors.scss

@@ -15,4 +15,5 @@ $background: #33333D;
 $card-background: #464650;
 $navbar-background: #1F1F29;
 $text-darker: #CDCDCD;
+$text-inactive: #C4C4C4;
 $icon: #EDECEC;

app/assets/stylesheets/config/_fonts.scss

@@ -1,9 +1,9 @@
 // Import Google fonts
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,100,300,700,500");
+@import url("https://fonts.googleapis.com/css?family=Assistant:400,700|Hind:400,700");
 
 // Define fonts for body and headers
-$body-font: "Open Sans", "Helvetica", "sans-serif";
-$headers-font: "Raleway", "Helvetica", "sans-serif";
+$body-font: "Hind", "Helvetica", "sans-serif";
+$headers-font: "Assistant", "Helvetica", "sans-serif";
 
 // To use a font file (.woff) uncomment following lines
 // @font-face {

app/assets/stylesheets/pages/_contacts.scss

@@ -11,6 +11,7 @@ a:hover {
 }
 
 .card {
+  min-width: 360px;
   display: flex;
   justify-content: space-between;
   background: $card-background;
@@ -72,7 +73,16 @@ a:hover {
 }
 
 .video-content {
-  height: 485px;
+  // height: 485px;
+
+  padding-left: 0.2vw;
+  display: flex;
+  justify-content: center;
+  .flex-video {
+    height: 100%;
+    width: 100%;
+    flex: 1 1 auto;
+  }
   // background-color: black;
 }
 
@@ -132,16 +142,19 @@ a:hover {
   align-items: center;
 }
 
-
-
-
-
 .contact {
   color: white;
 }
 
 .contacts {
-  height: 570px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.contacts-list{
+  height: 90vh;
   overflow: scroll;
 }
 
@@ -152,10 +165,3 @@ a:hover {
 
 
 
-
-
-
-
-
-
-

app/assets/stylesheets/pages/_home.scss

@@ -1,4 +1,3 @@
-// Specific CSS for your home-page
 video {
   transform: rotateY(180deg);
   -webkit-transform:rotateY(180deg); /* Safari and Chrome */

app/assets/stylesheets/pages/_index.scss

@@ -1,3 +1,4 @@
 // Import page-specific CSS files here.
 @import "home";
-@import "contacts"
+@import "contacts";
+@import "settings";

app/assets/stylesheets/pages/_settings.scss

@@ -0,0 +1,93 @@
+.card-form {
+  padding: 20px;
+}
+
+.card-form-no-hover {
+  &:hover {
+    box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.input-dropdown {
+  width: 196px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {display:none;}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: $primary;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px $primary;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.input-field-text-black {
+  color: black;
+}
+
+.settings {
+  color: white;
+}
+
+.no-padding {
+  padding: 0;
+}
+
+.no-margin {
+  margin: 0;
+}
+
+.font-weight-normal {
+  font-weight: normal;
+}
+
+.padding-right {
+  padding-right: 10px;
+}

app/javascript/components/modal.js

@@ -1,12 +1,15 @@
 const triggerModalEvent = () => {
-  const btn = document.getElementById("modalTrigger");
-  const modal = document.getElementById("myModal");
 
+  const buttons = document.querySelectorAll(".modalTrigger");
+
+  buttons.forEach(btn => {
     if (btn) {
       btn.addEventListener('click', function(event) {
-      $('#myModal').modal('show');
+        const btnId = btn.getAttribute('data-user-id')
+        $("#myModal"+`${btnId}`).modal('show');
       });
     }
+  })
 }
 
 export { triggerModalEvent }

app/javascript/packs/application.js

@@ -4,6 +4,35 @@ import { triggerModalEvent } from "../components/modal.js";
 
 triggerModalEvent();
 
-// import { profilePageAnimation } from '../users/lesson';
+const settingsPage = document.getElementById('settings-page');
+const contactsPage = document.getElementById('contacts-page');
+
+const getSiblings = (element) => {
+  const siblings = [];
+  let sibling = element.parentNode.firstChild;
+  const skipMe = element;
+  for ( ; sibling; sibling = sibling.nextSibling )
+    if ( sibling.nodeType == 1 && sibling != element )
+      siblings.push( sibling );
+  return siblings;
+}
+
+const removeActiveClass = (element) => {
+  const siblings = getSiblings(element);
+  siblings.forEach(sibling => {
+    sibling.classList.remove('active');
+  });
+}
+
+if (settingsPage) {
+  const settings = document.getElementById('settings')
+  settings.classList.add('active');
+  removeActiveClass(settings);
+}
+
+if (contactsPage) {
+  const contacts = document.getElementById('contacts')
+  contacts.classList.add('active');
+  removeActiveClass(contacts);
+}
 
-// profilePageAnimation();

app/javascript/packs/notifications.js

@@ -1,6 +1,6 @@
 import ActionCable from 'actioncable'
 
-// create App object with key cable == new cosumer
+// create App object with key cable == new consumer
 (function() {
   window.App || (window.App = {});
 
@@ -40,10 +40,9 @@ App.cable.subscriptions.create({
   }
 })
 
-
+// Receive information from index.html.erb
 const acceptButton = document.getElementById('accept-button')
 
 acceptButton.addEventListener('click', event => {
-  // event.preventDefault()
   document.getElementById('chat-room-id').value = chatRoomId
 })

app/javascript/packs/settings_video.js

@@ -0,0 +1,14 @@
+const contactsVideo = document.getElementById("settings-video")
+
+try {
+  const contactsStream = navigator.mediaDevices.getUserMedia({
+    audio: false,
+    video: true
+  }).then(stream => {
+    contactsVideo.srcObject = stream;
+    contactsVideo.muted = true;
+  })
+} catch(e) {
+  console.error(e);
+  contactsVideo.innerHTML = "Unable to getUserMedia()";
+}

app/views/layouts/application.html.erb

@@ -22,6 +22,5 @@
     <%= yield %>
     <%= javascript_include_tag 'application' %>
     <%= javascript_pack_tag 'application' %>
-
   </body>
 </html>

app/views/pages/_contact.html.erb

@@ -16,19 +16,19 @@
   </div>
   <div class="call" data-user-id="<%= contact.id %>">
     <!-- Calls establish_call in pages_controller -->
-    <%= link_to establish_call_path(contact.id), remote: true, id: "modalTrigger" do  %>
+    <%= link_to establish_call_path(contact.id), remote: true, class: "modalTrigger", data: {'user-id': contact.id } do  %>
       <i class="fas fa-phone"></i>
     <% end %>
   </div>
 </div>
 
 <!-- Modal -->
-<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+<div class="modal fade" id="myModal<%= contact.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="vertical-alignment-helper">
     <div class="modal-dialog vertical-align-center">
       <div class="modal-content modal-color">
         <div class="modal-header">
-          <%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal" do  %>
+          <%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal#{contact.id}" do  %>
             <i class="fas fa-times-circle"></i>
           <% end %>
           <div class="container">

app/views/pages/index.html.erb

@@ -1,26 +1,36 @@
+<div id="contacts-page"></div>
+
+<!-- CONTACTS PAGE -->
 <div class="container">
   <div class="contacts-container text-color">
-    <div class="contacts half">
+    <div class="row">
+      <div class="col-xs-12 col-md-6">
+        <div class="contacts">
           <div class="contacts-header">
             <h2>Contacts</h2>
-
             <%= link_to new_connection_path do %>
               <i class="fas fa-plus-square"></i>
             <% end %>
           </div>
+          <div class="contacts-list">
             <% current_user.contacts.each do |contact| %>
               <%= render "pages/contact", contact: contact %>
             <% end %>
-
           </div>
-    <div class="video-feed half">
+        </div>
+      </div>
+      <div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
+        <div class="video-feed">
           <div class="video-content">
-        <video id="contacts-video" autoplay=""></video>
+            <video id="contacts-video" class="flex-video" autoplay=""></video>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </div>
 
+<!-- INFORMATION TO BE PASSED TO NOTIFICATIONS.JS -->
 <div id="my-user-id" data-user-id="<%= current_user.id %>"></div>
 
 <form action="/accept_call" method="post">

app/views/shared/_navbar.html.erb

@@ -1,12 +1,10 @@
 <div class="polyglot-navbar">
-  <div class="logo">
-      Polyglot
-  </div>
+  <div class="logo"><%= link_to "Polyglot", contacts_path %></div>
 
-  <div class="right-align">
+  <div class="right-align hidden-xs hidden-sm">
     <div class="links">
-      <div class="active"><%= link_to "Dashboard", contacts_path %></div>
-      <div><%= link_to "Settings", setting_path %></div>
+      <div id="contacts"><%= link_to "Contacts", contacts_path %></div>
+      <div id="settings"><%= link_to "Settings", setting_path %></div>
     </div>
     <div class="profile">
       <% if current_user.nil? %>
@@ -20,8 +18,7 @@
               <%= cl_image_tag current_user.photo, class: "avatar dropdown-toggle img-circle"%>
             <% end %>
           </div>
-        <ul class="dropdown-menu dropdown-menu-right">
-          <!-- <li><a href="#">Profile</a></li> -->
+          <ul class="dropdown-menu dropdown-menu-right polyglot-dropdown">
             <li><%= link_to "Profile", user_path(current_user) %></li>
             <li><%= link_to "Logout", destroy_user_session_path %></li>
           </ul>
@@ -29,4 +26,20 @@
       <% end %>
     </div>
   </div>
+
+  <div class="burger-menu hidden-md hidden-lg">
+    <div class="dropdown">
+      <i class="fa fa-bars dropdown-toggle" data-toggle="dropdown"></i>
+      <ul class="dropdown-menu dropdown-menu-right polyglot-dropdown">
+        <li><%= link_to "Contacts", contacts_path %></li>
+        <li><%= link_to "Settings", setting_path %></li>
+          <% if current_user.nil? %>
+            <li><%= link_to "Login", new_user_session_path  %></li>
+          <% else %>
+            <li><%= link_to "Profile", user_path(current_user) %></li>
+            <li><%= link_to "Logout", destroy_user_session_path %></li>
+          <% end %>
+      </ul>
+    </div>
+  </div>
 </div>

app/views/users/setting.html.erb

@@ -1,158 +1,101 @@
-<div class="profile-container">
-  <%= simple_form_for(@user) do |t| %>
-    <div class="profile-form">
+<div id="settings-page"></div>
+
+<% languages = [
+  "Afrikaans (South Africa)", "Amharic (Ethiopia)", "Armenian (Armenia)",
+  "Azerbaijani (Azerbaijan)", "Indonesian (Indonesia)", "Malay (Malaysia)",
+  "Bengali (Bangladesh)", "Bengali (India)", "Catalan (Spain)",
+  "Czech (Czech Republic)", "Danish (Denmark)", "German (Germany)",
+  "English (Australia)", "English (Canada)", "English (Ghana)",
+  "English (United Kingdom)", "English (India)", "English (Ireland)",
+  "English (Kenya)", "English (New Zealand)", "English (Nigeria)",
+  "English (Philippines)", "English (South Africa)", "English (Tanzania)",
+  "English (United States)", "Spanish (Argentina)", "Spanish (Bolivia)",
+  "Spanish (Chile)", "Spanish (Colombia)", "Spanish (Costa Rica)",
+  "Spanish (Ecuador)", "Spanish (El Salvador)", "Spanish (Spain)",
+  "Spanish (United States)", "Spanish (Guatemala)", "Spanish (Honduras)",
+  "Spanish (Mexico)", "Spanish (Nicaragua)", "Spanish (Panama)",
+  "Spanish (Paraguay)", "Spanish (Peru)", "Spanish (Puerto Rico)",
+  "Spanish (Dominican Republic)", "Spanish (Uruguay)", "Spanish (Venezuela)",
+  "Basque (Spain)", "Filipino (Philippines)", "French (Canada)",
+  "French (France)", "Galician (Spain)", "Georgian (Georgia)",
+  "Gujarati (India)", "Croatian (Croatia)", "Zulu (South Africa)",
+  "Icelandic (Iceland)", "Italian (Italy)", "Javanese (Indonesia)",
+  "Kannada (India)", "Khmer (Cambodia)", "Lao (Laos)",
+  "Latvian (Latvia)", "Lithuanian (Lithuania)", "Hungarian (Hungary)",
+  "Malayalam (India)", "Marathi (India)", "Dutch (Netherlands)",
+  "Nepali (Nepal)", "Norwegian Bokmål (Norway)", "Polish (Poland)",
+  "Portuguese (Brazil)", "Portuguese (Portugal)", "Romanian (Romania)",
+  "Sinhala (Sri Lanka)", "Slovak (Slovakia)", "Slovenian (Slovenia)",
+  "Sundanese (Indonesia)", "Swahili (Tanzania)", "Swahili (Kenya)",
+  "Finnish (Finland)", "Swedish (Sweden)", "Tamil (India)",
+  "Tamil (Singapore)", "Tamil (Sri Lanka)", "Tamil (Malaysia)",
+  "Telugu (India)", "Vietnamese (Vietnam)", "Turkish (Turkey)",
+  "Urdu (Pakistan)", "Urdu (India)", "Greek (Greece)",
+  "Bulgarian (Bulgaria)", "Russian (Russia)", "Serbian (Serbia)",
+  "Ukrainian (Ukraine)", "Hebrew (Israel)", "Arabic (Israel)",
+  "Arabic (Jordan)", "Arabic (United Arab Emirates)", "Arabic (Bahrain)",
+  "Arabic (Algeria)", "Arabic (Saudi Arabia)", "Arabic (Iraq)",
+  "Arabic (Kuwait)", "Arabic (Morocco)", "Arabic (Tunisia)",
+  "Arabic (Oman)", "Arabic (Qatar)", "Arabic (Lebanon)",
+  "Arabic (Egypt)", "Persian (Iran)", "Hindi (India)",
+  "Thai (Thailand)", "Korean (South Korea)", "Chinese, Mandarin (Traditional, Taiwan)",
+  "Chinese, Cantonese (Traditional, Hong Kong)", "Japanese (Japan)",
+  "Chinese, Mandarin (Simplified, Hong Kong)",
+  "Chinese, Mandarin (Simplified, China)" ]%>
+
+<% fonts = [
+    "Arial",
+    "Times New Roman",
+    "Calibri"
+  ] %>
+
+<div class="container">
+  <div class="contacts-container">
+    <div class="row">
+      <div class="col-xs-12 col-md-6">
+        <div class="settings">
+          <h2>Settings</h2>
           <div>
-        <div class="lign">
-
-       <div class="card"><%= t.input :language, collection:
-[
-"Afrikaans (South Africa)",
-"Amharic (Ethiopia)",
-"Armenian (Armenia)",
-"Azerbaijani (Azerbaijan)",
-"Indonesian (Indonesia)",
-"Malay (Malaysia)",
-"Bengali (Bangladesh)",
-"Bengali (India)",
-"Catalan (Spain)",
-"Czech (Czech Republic)",
-"Danish (Denmark)",
-"German (Germany)",
-"English (Australia)",
-"English (Canada)",
-"English (Ghana)",
-"English (United Kingdom)",
-"English (India)",
-"English (Ireland)",
-"English (Kenya)",
-"English (New Zealand)",
-"English (Nigeria)",
-"English (Philippines)",
-"English (South Africa)",
-"English (Tanzania)",
-"English (United States)",
-"Spanish (Argentina)",
-"Spanish (Bolivia)",
-"Spanish (Chile)",
-"Spanish (Colombia)",
-"Spanish (Costa Rica)",
-"Spanish (Ecuador)",
-"Spanish (El Salvador)",
-"Spanish (Spain)",
-"Spanish (United States)",
-"Spanish (Guatemala)",
-"Spanish (Honduras)",
-"Spanish (Mexico)",
-"Spanish (Nicaragua)",
-"Spanish (Panama)",
-"Spanish (Paraguay)",
-"Spanish (Peru)",
-"Spanish (Puerto Rico)",
-"Spanish (Dominican Republic)",
-"Spanish (Uruguay)",
-"Spanish (Venezuela)",
-"Basque (Spain)",
-"Filipino (Philippines)",
-"French (Canada)",
-"French (France)",
-"Galician (Spain)",
-"Georgian (Georgia)",
-"Gujarati (India)",
-"Croatian (Croatia)",
-"Zulu (South Africa)",
-"Icelandic (Iceland)",
-"Italian (Italy)",
-"Javanese (Indonesia)",
-"Kannada (India)",
-"Khmer (Cambodia)",
-"Lao (Laos)",
-"Latvian (Latvia)",
-"Lithuanian (Lithuania)",
-"Hungarian (Hungary)",
-"Malayalam (India)",
-"Marathi (India)",
-"Dutch (Netherlands)",
-"Nepali (Nepal)",
-"Norwegian Bokmål (Norway)",
-"Polish (Poland)",
-"Portuguese (Brazil)",
-"Portuguese (Portugal)",
-"Romanian (Romania)",
-"Sinhala (Sri Lanka)",
-"Slovak (Slovakia)",
-"Slovenian (Slovenia)",
-"Sundanese (Indonesia)",
-"Swahili (Tanzania)",
-"Swahili (Kenya)",
-"Finnish (Finland)",
-"Swedish (Sweden)",
-"Tamil (India)",
-"Tamil (Singapore)",
-"Tamil (Sri Lanka)",
-"Tamil (Malaysia)",
-"Telugu (India)",
-"Vietnamese (Vietnam)",
-"Turkish (Turkey)",
-"Urdu (Pakistan)",
-"Urdu (India)",
-"Greek (Greece)",
-"Bulgarian (Bulgaria)",
-"Russian (Russia)",
-"Serbian (Serbia)",
-"Ukrainian (Ukraine)",
-"Hebrew (Israel)",
-"Arabic (Israel)",
-"Arabic (Jordan)",
-"Arabic (United Arab Emirates)",
-"Arabic (Bahrain)",
-"Arabic (Algeria)",
-"Arabic (Saudi Arabia)",
-"Arabic (Iraq)",
-"Arabic (Kuwait)",
-"Arabic (Morocco)",
-"Arabic (Tunisia)",
-"Arabic (Oman)",
-"Arabic (Qatar)",
-"Arabic (Lebanon)",
-"Arabic (Egypt)",
-"Persian (Iran)",
-"Hindi (India)",
-"Thai (Thailand)",
-"Korean (South Korea)",
-"Chinese, Mandarin (Traditional, Taiwan)",
-"Chinese, Cantonese (Traditional, Hong Kong)",
-"Japanese (Japan)",
-"Chinese, Mandarin (Simplified, Hong Kong)",
-"Chinese, Mandarin (Simplified, China)"] %>
-
+            <%= simple_form_for(@user) do |t| %>
+              <div>
+                <div class="card card-form card-form-no-hover">
+                  <%= t.label :language, class:'padding-right no-margin font-weight-normal' %>
+                  <%= t.input_field :language, collection: languages.sort, class:'input-field-text-black input-dropdown' %>
                 </div>
+                <div class="card card-form card-form-no-hover">
+                  <%= t.label :caption_font, class:'padding-right no-margin font-weight-normal' %>
+                  <%= t.input_field :caption_font, collection: fonts.sort, class:'input-field-text-black input-dropdown' %>
+                </div>
+                <div class="card card-form card-form-no-hover">
+                  <%= t.label :caption_font_size, class:'padding-right no-margin font-weight-normal' %>
+                  <%= t.input_field :caption_font_size, class:'input-field-text-black' %>
+                </div>
+                <div class="card card-form card-form-no-hover">
+                  <%= t.label :enable_transcript, class:'padding-right no-margin font-weight-normal' %>
+                  <label class="switch">
+                    <%= t.input_field :enable_transcript, class:'input-field-text-black' %>
+                    <span class="slider round"></span>
+                  </label>
                 </div>
-       <div class="card"><%= t.input :caption_font %></div>
-       <div class="card"><%= t.input :caption_font_size %></div>
-       <div class="card"><%= t.input :enable_transcript %></div>
 
                 <%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %>
                 <p></p>
               </div>
-
-
-
-      <div class="profile-pic">
-        <% if @user.photo.url.nil? %>
-          <%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"%>
-        <% else %>
-          <%= cl_image_tag current_user.photo%>
             <% end %>
-
-        <%#= t.input_field :photo, onchange: 'this.form.submit();' %>
-        <%#= t.input_field :photo, as: :hidden %>
-
           </div>
-
         </div>
-  <% end %>
+      </div>
+      <div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
+        <div class="video-feed">
+          <div class="video-content">
+            <video id="settings-video" class="flex-video" autoplay=""></video>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 
-
+<%= javascript_pack_tag 'settings_video' %>