pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Made chat room reuse sane.

pull/16/head
Simon Eisenmann 12 years ago
parent
765f9d6278
commit
31467b90ce
2 changed files with 91 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 87
      src/styles/components/_chat.scss
  2. 64
      static/js/directives/chat.js

87
src/styles/components/_chat.scss
Unescape View File

@ -50,13 +50,13 @@ bottom:0px;
right:0px; right:0px;
width:260px; width:260px;
transition: left 200ms ease-in-out; transition: left 200ms ease-in-out;
-webkit-transition: 0.2s; -webkit-transition: 0.3s;
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transition: 0.2s; -moz-transition: 0.3s;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
-o-transition: 0.2s; -o-transition: 0.3s;
-o-transform-style: preserve-3d; -o-transform-style: preserve-3d;
transition: 0.2s; transition: 0.3s;
transform-style: preserve-3d; transform-style: preserve-3d;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden; -moz-backface-visibility: hidden;
@ -90,7 +90,7 @@ position:absolute;
bottom:0px; bottom:0px;
left:0px; left:0px;
right:0px; right:0px;
top: 30px; top: 36px;
border-right:1px solid $bordercolor; border-right:1px solid $bordercolor;
} }
.chat.active .chatbody { .chat.active .chatbody {
@ -101,13 +101,12 @@ left:0px;
right:0px; right:0px;
top:0px; top:0px;
background: $componentbg; background: $componentbg;
padding:8px 4px 0px 8px; padding:0px 4px 0px 8px;
border-top: 1px solid $bordercolor; border-top: 1px solid $bordercolor;
border-bottom: 1px solid $bordercolor; border-bottom: 1px solid $bordercolor;
border-right: 1px solid $bordercolor; border-right: 1px solid $bordercolor;
font-size:0.8em; height:36px;
font-weight:bold; line-height:36px;
height:30px;
} }
.chat.active .chatheader { .chat.active .chatheader {
} }
@ -115,21 +114,21 @@ height:30px;
position:absolute; position:absolute;
left:0px; left:0px;
top:0px; top:0px;
font-size:2.1em; font-size:1.4em;
line-height:30px; width:36px;
width:30px; height:36px;
height:30px;
display:block; display:block;
text-align:center; text-align:center;
} }
.chat .chatheader .chatheadertitle { .chat .chatheader .chatheadertitle {
padding-left:20px; padding-left:26px;
display:inline; display:inline;
} }
.chat .chatheader .ctrl { .chat .chatheader .ctrl {
position:absolute; position:absolute;
top:4px; top:0px;
right:1px; right:1px;
color:rgba(0,0,0,0.3);
} }
.chat .chatheader span { .chat .chatheader span {
display: inline-block; display: inline-block;
@ -149,7 +148,7 @@ position:absolute;
left:0px; left:0px;
right:0px; right:0px;
top:0px; top:0px;
bottom:74px; bottom:80px;
} }
.chat .output { .chat .output {
overflow-x: hidden; overflow-x: hidden;
@ -351,17 +350,16 @@ text-overflow:ellipsis;
left:0px; left:0px;
bottom:0px; bottom:0px;
right:0px; right:0px;
height:90px;
margin:0 auto; margin:0 auto;
} }
.chat .typinghint { .chat .typinghint {
padding:6px; padding:2px 6px 0 6px;
white-space: no-wrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
font-size:.8em; font-size:.8em;
color: #aaa; color: #aaa;
height:22px; height:14px;
} }
.chat .inputbox { .chat .inputbox {
position:relative; position:relative;
@ -369,11 +367,12 @@ position:relative;
.chat .inputbox .btn { .chat .inputbox .btn {
position:absolute; position:absolute;
right:6px; right:6px;
top:0px; top:1px;
padding: 0.5em 1em; padding: 0.5em 1em;
display:none;
} }
.chat .inputbox > div { .chat .inputbox > div {
margin: 4px 54px 0px 4px; border-top:1px solid $bordercolor;
} }
.chat .input { .chat .input {
display:block; display:block;
@ -381,22 +380,32 @@ resize: none;
width:100%; width:100%;
height:54px; height:54px;
max-height:54px; /* FF hack */ max-height:54px; /* FF hack */
margin-bottom: 4px; margin:0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border-color:transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.chat .input.active, .chat .input:active, .chat .input:focus {
border-color:#66afe9;
} }
@keyframes newmessage { @keyframes newmessage {
0% {color: rgba(132,184,25,1.0);} 0% {background-color: rgba(132,184,25,1.0);}
50% {color: $componentbg;} 50% {background-color: $componentbg;}
100% {color: rgba(132,184,25,1.0);} 100% {background-color: rgba(132,184,25,1.0);}
} }
@-webkit-keyframes newmessage { @-webkit-keyframes newmessage {
0% {color: rgba(132,184,25,1.0);} 0% {background-color: rgba(132,184,25,1.0);}
50% {color: $componentbg;} 50% {background-color: $componentbg;}
100% {color: rgba(132,184,25,1.0);} 100% {background-color: rgba(132,184,25,1.0);}
} }
.chat.newmessage .chatstatusicon, .chatstatusicon.newmessage { .chat.newmessage .chatheader {
animation: newmessage 1s ease -0.3s infinite; animation: newmessage 1s ease -0.3s infinite;
-webkit-animation: newmessage 1s ease -0.3s infinite; -webkit-animation: newmessage 1s ease -0.3s infinite;
} }
@ -404,12 +413,11 @@ animation: newmessage 1s ease -0.3s infinite;
.chat.newmessage .chatheader span:after { .chat.newmessage .chatheader span:after {
content: "***"; content: "***";
position:absolute; position:absolute;
top:0px; top:2px;
line-height:32px;
right:70px; right:70px;
} }
@media all and (max-height: 150px) { @media all and (max-height: 210px) {
.chat .inputbox { .chat .inputbox {
height: auto; height: auto;
} }
@ -419,4 +427,17 @@ right:70px;
.chat .outputbox { .chat .outputbox {
bottom:45px; bottom:45px;
} }
.chat .chatbodybottom {
height: auto;
}
.chat .typinghint {
display: none;
}
.chat .chatheader {
display: none;
}
.chat .chatbody {
border-top: 1px solid $bordercolor;
top: 0px;
}
} }

64
static/js/directives/chat.js
Unescape View File

@ -30,33 +30,44 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
$scope.layout.chat = false; $scope.layout.chat = false;
$scope.layout.chatMaximized = false; $scope.layout.chatMaximized = false;
var rooms = {}; var ctrl = this;
var visibleRooms = []; var rooms = ctrl.rooms = {};
ctrl.visibleRooms = [];
ctrl.group = group_chat_id;
ctrl.get = function(id) {
return ctrl.rooms[id];
}
mediaStream.api.e.on("received.chat", function(event, id, from, data, p2p) { mediaStream.api.e.on("received.chat", function(event, id, from, data, p2p) {
//console.log("received", data, id, from); //console.log("received", data, id, from);
var with_message = !!data.Message; var roomid = id;
if (roomid === mediaStream.api.id) {
if (!with_message && !rooms[from] && !rooms[id]) { roomid = from;
// Ignore empty messages for non existing rooms. } else {
return; if (roomid !== ctrl.group && from !== mediaStream.api.id) {
console.log("Received chat message for invalid room", roomid, id, from);
return;
}
} }
var room = rooms[id]; var with_message = !!data.Message;
var room = rooms[roomid];
if (!room) { if (!room) {
if (!with_message) {
return;
}
// No room with this id, get one with the from id // No room with this id, get one with the from id
$scope.$emit("startchat", from, {restore: with_message}); $scope.$emit("startchat", from, {restore: with_message});
room = rooms[from]; room = rooms[from];
} }
if (with_message && from !== $scope.$parent.id) { if (with_message && from !== mediaStream.api.id) {
room.newmessage = true; room.newmessage = true;
room.peerIsTyping = "no"; room.peerIsTyping = "no";
room.p2p(!!p2p); room.p2p(!!p2p);
} }
//console.log("room", room);
room.$broadcast("received", from, data); room.$broadcast("received", from, data);
safeApply(room); safeApply(room);
@ -100,17 +111,6 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
}); });
// Shared data;
return {
rooms: rooms,
visibleRooms: visibleRooms,
group: group_chat_id,
get: function(id) {
return rooms[id];
}
}
}]; }];
var compile = function(tElement, tAttrs) { var compile = function(tElement, tAttrs) {
@ -127,7 +127,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
var subscope = controller.rooms[id]; var subscope = controller.rooms[id];
var index = controller.visibleRooms.length; var index = controller.visibleRooms.length;
if (!subscope) { if (!subscope) {
console.log("Create new chatroom", id); console.log("Create new chatroom", [id]);
controller.visibleRooms.push(id); controller.visibleRooms.push(id);
subscope = controller.rooms[id] = scope.$new(); subscope = controller.rooms[id] = scope.$new();
translation.inject(subscope); translation.inject(subscope);
@ -287,16 +287,16 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
} }
if (!options.noactivate) {
scope.activateRoom(subscope.id, true);
}
if (options.restore && !options.noenable) { if (options.restore && !options.noenable) {
if (!scope.layout.chat) { if (!scope.layout.chat) {
scope.layout.chat = true; scope.layout.chat = true;
} }
} }
if (!options.noactivate) {
scope.activateRoom(subscope.id, true);
}
safeApply(subscope); safeApply(subscope);
return subscope; return subscope;
}; };
@ -341,21 +341,31 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
scope.layout.chatMaximized = !scope.layout.chatMaximized; scope.layout.chatMaximized = !scope.layout.chatMaximized;
}; };
scope.activateRoom = function(id, active) { scope.activateRoom = function(id, active) {
var visible = !!scope.layout.chat;
var flip = false;
var subscope = controller.rooms[id]; var subscope = controller.rooms[id];
//console.log("toggleActive", active, id, scope.currentRoom, scope.currentRoom == subscope, subscope.active); //console.log("toggleActive", active, id, scope.currentRoom, scope.currentRoom == subscope, subscope.active);
if (scope.currentRoom == subscope) { if (scope.currentRoom == subscope) {
subscope.active = active; subscope.active = active;
if (visible) {
flip = true;
}
} else { } else {
if (scope.currentRoom) { if (scope.currentRoom) {
scope.currentRoom.active = false; scope.currentRoom.active = false;
scope.currentRoom.hide(); scope.currentRoom.hide();
if (visible) {
flip = true;
}
} }
if (active) { if (active) {
scope.currentRoom = subscope; scope.currentRoom = subscope;
iElement.toggleClass("flip");
} }
subscope.active = active; subscope.active = active;
} }
if (flip) {
iElement.toggleClass("flip");
}
}; };
scope.$on("room", function(event, room) { scope.$on("room", function(event, room) {

Write Preview
Loading…
Cancel
Save