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%;