hide sound option. green 'in call' dot. tooltip

This commit is contained in:
Connor Turland 2016-03-21 13:08:34 -07:00
parent f055f4c7c5
commit 617dec72b9
3 changed files with 15 additions and 6 deletions

View file

@ -17,7 +17,7 @@ Metamaps.Views.chatView = (function () {
"<div class='chat-participant-name'>{{ username }} {{ selfName }}</div>" + "<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-call' onclick='Metamaps.Realtime.inviteACall({{ id}});'></button>" +
"<button type='button' class='button chat-participant-invite-join' onclick='Metamaps.Realtime.inviteToJoin({{ 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 class='clearfloat'></div>" +
"</div>", "</div>",
templates: function() { templates: function() {
@ -30,7 +30,7 @@ Metamaps.Views.chatView = (function () {
}, },
createElements: function() { createElements: function() {
this.$unread = $('<div class="chat-unread"></div>'); 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.$messageInput = $('<textarea placeholder="Send a message..." class="chat-input"></textarea>');
this.$juntoHeader = $('<div class="junto-header">PARTICIPANTS</div>'); this.$juntoHeader = $('<div class="junto-header">PARTICIPANTS</div>');
this.$videoToggle = $('<div class="video-toggle"></div>'); this.$videoToggle = $('<div class="video-toggle"></div>');

View file

@ -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, .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; display: block;
} }
@ -536,6 +536,10 @@
left: -11px; left: -11px;
} }
.chat-button .tooltips {
top: 10px;
}
.openCheatsheet .tooltipsAbove { .openCheatsheet .tooltipsAbove {
left: -4px; left: -4px;
} }
@ -545,7 +549,7 @@
margin-top: 40px; 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: ''; content: '';
position: absolute; position: absolute;
top: 57%; top: 57%;

View file

@ -215,7 +215,6 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 18px; border-radius: 18px;
cursor: pointer;
} }
.chat-box .participants .participant .chat-participant-name { .chat-box .participants .participant .chat-participant-name {
width: 53%; width: 53%;
@ -254,6 +253,12 @@
display: none; display: none;
margin-top: 14px; 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 { .chat-box .participants .participant.active .chat-participant-participating {
display: block; 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); 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 { .chat-box .chat-header .sound-toggle {
display: none;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 32px; margin-right: 32px;
@ -327,7 +333,6 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 18px; border-radius: 18px;
cursor: pointer;
} }
.chat-box .chat-messages .chat-message .chat-message-text { .chat-box .chat-messages .chat-message .chat-message-text {
width: 73%; width: 73%;