From 617dec72b9bede9b8034a38d1a254f655e0b5e0c Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Mon, 21 Mar 2016 13:08:34 -0700
Subject: [PATCH] hide sound option. green 'in call' dot. tooltip

---
 app/assets/javascripts/src/views/chatView.js.erb | 4 ++--
 app/assets/stylesheets/clean.css.erb             | 8 ++++++--
 app/assets/stylesheets/junto.css.erb             | 9 +++++++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/src/views/chatView.js.erb b/app/assets/javascripts/src/views/chatView.js.erb
index 0ba86ee6..605c15ed 100644
--- a/app/assets/javascripts/src/views/chatView.js.erb
+++ b/app/assets/javascripts/src/views/chatView.js.erb
@@ -17,7 +17,7 @@ Metamaps.Views.chatView = (function () {
                 "<div class='chat-participant-name'>{{ username }} {{ selfName }}</div>" +
                 "<button type='button' class='button chat-participant-invite-call' onclick='Metamaps.Realtime.inviteACall({{ id}});'></button>" +
                 "<button type='button' class='button chat-participant-invite-join' onclick='Metamaps.Realtime.inviteToJoin({{ id}});'></button>" +
-                "<span class='chat-participant-participating'>IN CALL</span>" +
+                "<span class='chat-participant-participating'><div class='green-dot'></div></span>" +
                 "<div class='clearfloat'></div>" +
               "</div>",
         templates: function() {
@@ -30,7 +30,7 @@ Metamaps.Views.chatView = (function () {
         },
         createElements: function() {
             this.$unread = $('<div class="chat-unread"></div>');
-            this.$button = $('<div class="chat-button"></div>');
+            this.$button = $('<div class="chat-button"><div class="tooltips">Chat</div></div>');
             this.$messageInput = $('<textarea placeholder="Send a message..." class="chat-input"></textarea>');
             this.$juntoHeader = $('<div class="junto-header">PARTICIPANTS</div>');
             this.$videoToggle = $('<div class="video-toggle"></div>');
diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb
index 09b5eba8..5665716a 100644
--- a/app/assets/stylesheets/clean.css.erb
+++ b/app/assets/stylesheets/clean.css.erb
@@ -456,7 +456,7 @@
 }
 
 .zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
- .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove {
+ .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips {
     display: block;
 }
 
@@ -536,6 +536,10 @@
     left: -11px;
 }
 
+.chat-button .tooltips {
+    top: 10px;
+}
+
 .openCheatsheet .tooltipsAbove {
     left: -4px;
 }
@@ -545,7 +549,7 @@
     margin-top: 40px;
 }
 
-.zoomExtents div::after, .zoomIn div::after, .zoomOut div::after, .takeScreenshot div:after {
+.zoomExtents div::after, .zoomIn div::after, .zoomOut div::after, .takeScreenshot div:after, .chat-button div.tooltips::after {
     content: '';
     position: absolute;
     top: 57%;
diff --git a/app/assets/stylesheets/junto.css.erb b/app/assets/stylesheets/junto.css.erb
index ed9b62b5..71741e16 100644
--- a/app/assets/stylesheets/junto.css.erb
+++ b/app/assets/stylesheets/junto.css.erb
@@ -215,7 +215,6 @@
   width: 32px;
   height: 32px;
   border-radius: 18px;
-  cursor: pointer;
 }
 .chat-box .participants .participant .chat-participant-name {
   width: 53%;
@@ -254,6 +253,12 @@
   display: none;
   margin-top: 14px;
 }
+.chat-box .participants .participant .chat-participant-participating .green-dot {
+  background: #4fc059;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+}
 .chat-box .participants .participant.active .chat-participant-participating {
   display: block;
 }
@@ -268,6 +273,7 @@
   box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
 }
 .chat-box .chat-header .sound-toggle {
+  display: none;
   width: 24px;
   height: 24px;
   margin-right: 32px;
@@ -327,7 +333,6 @@
   width: 32px;
   height: 32px;
   border-radius: 18px;
-  cursor: pointer;
 }
 .chat-box .chat-messages .chat-message .chat-message-text {
   width: 73%;