diff --git a/app/assets/javascripts/src/Metamaps.js.erb b/app/assets/javascripts/src/Metamaps.js.erb index b523eeb0..9ce6af0f 100644 --- a/app/assets/javascripts/src/Metamaps.js.erb +++ b/app/assets/javascripts/src/Metamaps.js.erb @@ -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 += ''; 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 += '
'; mapperListItem += ''; - $('#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'); diff --git a/app/assets/javascripts/src/views/chatView.js b/app/assets/javascripts/src/views/chatView.js index 51e907f6..be4bd713 100644 --- a/app/assets/javascripts/src/views/chatView.js +++ b/app/assets/javascripts/src/views/chatView.js @@ -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' }; diff --git a/app/assets/stylesheets/application.css.erb b/app/assets/stylesheets/application.css.erb index 6c036de1..e3f97ec9 100644 --- a/app/assets/stylesheets/application.css.erb +++ b/app/assets/stylesheets/application.css.erb @@ -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; } diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb index 8c3bd7dd..d74536c9 100644 --- a/app/assets/stylesheets/clean.css.erb +++ b/app/assets/stylesheets/clean.css.erb @@ -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%; diff --git a/app/assets/stylesheets/junto.css b/app/assets/stylesheets/junto.css index 0c9a4e26..5aff8095 100644 --- a/app/assets/stylesheets/junto.css +++ b/app/assets/stylesheets/junto.css @@ -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; -} \ No newline at end of file +} diff --git a/app/views/layouts/_upperelements.html.erb b/app/views/layouts/_upperelements.html.erb index adb1a65e..4d5bf6e5 100644 --- a/app/views/layouts/_upperelements.html.erb +++ b/app/views/layouts/_upperelements.html.erb @@ -20,28 +20,6 @@
SUPPORT US!
- <% if authenticated? %> - -
-
Junto
-
-

REALTIME

- OFF - ON -
-
-
    -
  • - <%= image_tag user.image.url(:thirtytwo), :size => "24x24", :class => "rtUserImage" %> - <%= user.name %> (me) -
    -
    • -
-
-
-
- <% end %> -
Filter
@@ -83,4 +61,4 @@
<% end %>
-
\ No newline at end of file +