Made chat room reuse sane.

src/styles/components/_chat.scss

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

static/js/directives/chat.js

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