glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

position the chat box, and remove the old junto panel

Browse source
This commit is contained in:
Connor Turland 2015-10-29 18:34:05 -07:00
parent b958c6ff89
commit 2929547736
6 changed files with 45 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
app/assets/javascripts/src/Metamaps.js.erb
View file

@ -1937,6 +1937,13 @@ Metamaps.Realtime = {
});
$('body').click(self.close);
$(document).on(Metamaps.Views.chatView.events.openTray, function () {
$('.main').addClass('compressed');
});
$(document).on(Metamaps.Views.chatView.events.closeTray, function () {
$('.main').removeClass('compressed');
});
var railsEnv = $('body').data('env');
var whichToConnect = railsEnv === 'development' ? self.stringForLocalhost : self.stringForHeroku;
self.socket = new SocketIoConnection({ url: whichToConnect });
@ -1977,8 +1984,8 @@ Metamaps.Realtime = {
self.room = new Metamaps.Views.room({
webrtc: self.webrtc,
socket: self.socket,
username: 'dude',//getUsername(opts.user, provider),
image: 'https://pbs.twimg.com/profile_images/436050101539065856/QMGlzCUn_400x400.jpeg', //getImage(opts.user, provider),
username: Metamaps.Active.Mapper.get('name'),
image: Metamaps.Active.Mapper.get('image'),
room: 'global',
$video: self.localVideo.$video,
myVideoView: self.localVideo.view,
@ -2231,7 +2238,7 @@ Metamaps.Realtime = {
createChat: function() {
var self = Metamaps.Realtime;
$('#wrapper').append(self.room.chat.$container);
$('body').prepend(self.room.chat.$container);
//self.room.chat.open();
},
sendRealtimeOn: function () {
@ -2269,6 +2276,7 @@ Metamaps.Realtime = {
self.mappersOnMap[data.userid] = {
name: data.username,
username: data.username,
image: data.userimage,
color: Metamaps.Util.getPastelColor(),
realtime: data.userrealtime,
@ -2291,8 +2299,8 @@ Metamaps.Realtime = {
mapperListItem += '</li>';
if (data.userid !== Metamaps.Active.Mapper.id) {
$('#mapper' + data.userid).remove();
$('.realtimeMapperList ul').append(mapperListItem);
//$('#mapper' + data.userid).remove();
self.room.chat.addParticipant(self.mappersOnMap[data.userid]);
// create a div for the collaborators compass
self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status);
@ -2309,6 +2317,7 @@ Metamaps.Realtime = {
self.mappersOnMap[data.userid] = {
name: data.username,
username: data.username,
image: data.userimage,
color: Metamaps.Util.getPastelColor(),
realtime: true,
@ -2326,8 +2335,8 @@ Metamaps.Realtime = {
mapperListItem += data.username;
mapperListItem += '<div class="littleJuntoIcon"></div>';
mapperListItem += '</li>';
$('#mapper' + data.userid).remove();
$('.realtimeMapperList ul').append(mapperListItem);
//$('#mapper' + data.userid).remove();
self.room.chat.addParticipant(self.mappersOnMap[data.userid]);
// create a div for the collaborators compass
self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status);
@ -2373,8 +2382,9 @@ Metamaps.Realtime = {
delete self.mappersOnMap[data.userid];
$('#mapper' + data.userid).remove();
//$('#mapper' + data.userid).remove();
$('#compass' + data.userid).remove();
self.room.chat.removeParticipant(data.username);
Metamaps.GlobalUI.notifyUser(data.username + ' just left the map');
},
@ -2387,7 +2397,7 @@ Metamaps.Realtime = {
self.mappersOnMap[data.userid].realtime = true;
$('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn');
//$('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn');
$('#compass' + data.userid).show();
Metamaps.GlobalUI.notifyUser(data.username + ' just turned on realtime');
@ -2401,7 +2411,7 @@ Metamaps.Realtime = {
self.mappersOnMap[data.userid].realtime = false;
$('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff');
//$('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff');
$('#compass' + data.userid).hide();
Metamaps.GlobalUI.notifyUser(data.username + ' just turned off realtime');

7
app/assets/javascripts/src/views/chatView.js
View file

@ -203,6 +203,9 @@ Metamaps.Views.chatView = (function () {
Private.addEventListeners.call(this);
Private.initialMessages.call(this);
Private.initializeSounds.call(this);
this.$container.css({
right: '-300px'
});
};
chatView.prototype.addParticipant = function (participant) {
@ -229,6 +232,7 @@ Metamaps.Views.chatView = (function () {
this.unreadMessages = 0;
this.$unread.hide();
this.scrollMessages(0);
$(document).trigger(chatView.events.openTray);
}
chatView.prototype.scrollMessages = function(duration) {
@ -249,6 +253,7 @@ Metamaps.Views.chatView = (function () {
});
this.$messageInput.blur();
this.isOpen = false;
$(document).trigger(chatView.events.closeTray);
}
chatView.prototype.remove = function () {
@ -262,6 +267,8 @@ Metamaps.Views.chatView = (function () {
*/
chatView.events = {
message: 'ChatView:message',
openTray: 'ChatView:openTray',
closeTray: 'ChatView:closeTray',
inputFocus: 'ChatView:inputFocus',
inputBlur: 'ChatView:inputBlur'
};

82
app/assets/stylesheets/application.css.erb
View file

@ -628,8 +628,12 @@ label {
margin: 0 0 0 1.3em;
}
.main {
position: relative;
/*overflow:hidden; */
}
.main.compressed {
width: calc(100% - 300px);
}
#infovis-canvas {
-webkit-touch-callout: none;
-webkit-user-select: none;
@ -1077,84 +1081,6 @@ h3.filterBox {
}
/* end filter by metacode */
/* collaborate */
.sidebarCollaborate {
width: 32px;
height: 32px;
}
.sidebarCollaborateBox {
display: none;
height: auto;
padding: 16px;
width: 238px;
}
h3.realtimeBoxTitle {
margin-bottom: 10px;
text-align: left;
float: left;
font-size:18px;
line-height:18px;
}
.sidebarCollaborateBox .realtimeOnOff {
float: right;
padding: 4px;
border-radius: 2px;
margin-left: 12px;
cursor: pointer;
text-align: center;
font-size:12px;
}
.sidebarCollaborateBox .realtimeOnOff:hover, .sidebarCollaborateBox .realtimeOnOff.active {
color: #00bcd4;
}
.sidebarCollaborateBox .rtOff {
}
.sidebarCollaborateBox .rtOn {
}
.realtimeMapperList .rtMapper {
list-style-type: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 10px 34px;
display: block;
height: 14px;
font-family: 'din-regular', helvetica, sans-serif;
font-size: 14px;
line-height: 14px;
position: relative;
}
.rtMapperSelf img {
border: 2px solid #424242;
}
.rtUserImage {
position: absolute;
top: 4px;
left: 0;
border-radius: 14px;
}
.littleJuntoIcon {
width: 24px;
height:24px;
position: absolute;
top: 4px;
right: 0;
background-image: url(<%= asset_data_uri('junto24_sprite.png') %>);
}
.realtimeMapperList .littleRtOff .littleJuntoIcon {
background-position: 0 0;
}
.realtimeMapperList .littleRtOn .littleJuntoIcon {
background-position: -24px 0;
}
/* end collaborate */
.nodemargin {
padding-top: 120px;
}

46
app/assets/stylesheets/clean.css.erb
View file

@ -116,7 +116,7 @@
/* upperLeftUI */
.upperLeftUI {
position: fixed;
position: absolute;
top: 10px;
left: 24px;
z-index:3;
@ -155,7 +155,7 @@
/* upperRightUI */
.upperRightUI {
position: fixed;
position: absolute;
top: 10px;
right: 24px;
z-index:4;
@ -166,9 +166,9 @@
}
.upperRightBox {
position: fixed;
top:52px;
right:24px;
position: absolute;
top:42px;
right:0;
background-color: #E0E0E0;
border-radius: 2px;
box-shadow: 0 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
@ -187,17 +187,12 @@
}
.upperRightMapButtons {
position: relative;
top: -42px; /* puts it just offscreen */
}
.mapPage .upperRightMapButtons, .topicPage .upperRightMapButtons {
top: 0;
}
.topicPage .sidebarCollaborate {
display: none;
}
.upperRightIcon {
width: 32px;
height: 32px;
@ -205,20 +200,6 @@
background-repeat: no-repeat;
cursor: pointer;
}
.sidebarCollaborateIcon {
background-position: 0 0;
display: none;
}
.sidebarCollaborateIcon.blue {
background-position: -32px 0;
}
.sidebarCollaborateIcon.blue:hover {
background-position: -32px -32px;
}
/* only show the collaborate icon on commons */
.commonsMap .sidebarCollaborateIcon {
display: block;
}
.sidebarFilterIcon {
background-position: -64px 0;
}
@ -384,7 +365,7 @@
}
.infoAndHelp {
position: fixed;
position: absolute;
bottom: 20px;
right: 20px;
z-index: 3;
@ -424,7 +405,7 @@
/* mapControls */
.mapControls {
position: fixed;
position: absolute;
bottom: 24px;
right:-32px; /* puts it just offscreen */
width:32px;
@ -474,8 +455,7 @@
background-position: -32px 0;
}
.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarCollaborateIcon:hover .tooltipsUnder,
.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 {
display: block;
}
@ -532,10 +512,6 @@
font-style: normal;
}
.sidebarCollaborateIcon .tooltipsUnder {
margin-left: -3px;
}
.sidebarFilterIcon .tooltipsUnder {
margin-left: -4px;
}
@ -582,11 +558,7 @@
border-bottom: 5px solid transparent;
}
.sidebarCollaborateIcon div:after, .sidebarFilterIcon div:after, .sidebarAccountIcon .tooltipsUnder:after {
left: 38%;
}
.sidebarCollaborateIcon div:after, .sidebarFilterIcon div:after, .sidebarForkIcon div:after, .addMap div:after, .sidebarAccountIcon .tooltipsUnder:after {
.sidebarFilterIcon div:after, .sidebarForkIcon div:after, .addMap div:after, .sidebarAccountIcon .tooltipsUnder:after {
content: '';
position: absolute;
top: 129%;

7
app/assets/stylesheets/junto.css
View file

@ -68,10 +68,10 @@
top: 50px;
}
.chat-box {
position: absolute;
position: relative;
z-index: 1;
right: -300px;
width: 300px;
float: right;
height: 100%;
background: #424242;
box-shadow: 0px 0px 16px 8px rgba(0, 0, 0, 0.23), -2px 10px 10px rgba(0, 0, 0, 0.19);
@ -83,6 +83,7 @@
width: 36px;
height: 49px;
background: url(junto.png) no-repeat 2px 9px, url(tray_tab.png) no-repeat;
cursor: pointer;
}
.chat-box .chat-button .chat-unread {
display: none;
@ -262,4 +263,4 @@
float: right;
font-size: 10px;
color: #757575;
}
}

24
app/views/layouts/_upperelements.html.erb
View file

@ -20,28 +20,6 @@
<div class="upperRightUI">
<div class="supportUs upperRightEl openLightbox" data-open="donate">SUPPORT US!</div>
<div class="mapElement upperRightEl upperRightMapButtons">
<% if authenticated? %>
<!-- Realtime -->
<div class="sidebarCollaborate upperRightEl">
<div class="sidebarCollaborateIcon upperRightIcon blue"><div class="tooltipsUnder">Junto</div></div>
<div class="sidebarCollaborateBox upperRightBox">
<h3 class="realtimeBoxTitle">REALTIME</h3>
<span class="realtimeOnOff rtOff">OFF</span>
<span class="realtimeOnOff rtOn">ON</span>
<div class="clearfloat"></div>
<div class="realtimeMapperList">
<ul>
<li class="rtMapper littleRtOn rtMapperSelf">
<%= image_tag user.image.url(:thirtytwo), :size => "24x24", :class => "rtUserImage" %>
<%= user.name %> (me)
<div class="littleJuntoIcon"></div>
</li>
</ul>
</div>
</div>
</div> <!-- end sidebarCollaborate a.k.a realtime -->
<% end %>
<!-- filtering -->
<div class="sidebarFilter upperRightEl">
<div class="sidebarFilterIcon upperRightIcon"><div class="tooltipsUnder">Filter</div></div>
@ -83,4 +61,4 @@
</div><!-- end sidebarAccount -->
<% end %>
<div class="clearfloat"></div>
</div><!-- end upperRightUI -->
</div><!-- end upperRightUI -->