Make chat use new style layout object.

src/styles/components/_chat.scss

@@ -28,7 +28,10 @@ pointer-events: none;
 z-index:45;
 overflow:hidden;
 }
-#chat.maximized {
+.withChat #chat .chatpane {
+left:0px;
+}
+.withChat.withChatMaximized #chat {
 left:0px;
 width:auto;
 	.chatpane {
@@ -39,7 +42,7 @@ width:auto;
 height:100%;
 position:absolute;
 top:0px;
-left:0px;
+left:260px;
 bottom:0px;
 right:0px;
 width:260px;
@@ -49,9 +52,6 @@ width:260px;
 -o-transition: left 200ms ease-in-out;
 transition: left 200ms ease-in-out;
 }
-.chatpane.slideright {
-left:260px;
-}
 .chat {
 position:absolute;
 pointer-events: auto;
@@ -69,7 +69,7 @@ display:block;
 }
 .chat .chatheader {
 background: $componentbg;
-padding:6px 4px 4px 8px;
+padding:8px 4px 0px 8px;
 border-top: 1px solid $bordercolor;
 border-bottom: 1px solid $bordercolor;
 font-size:0.8em;

static/js/directives/chat.js

@@ -28,6 +28,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
         var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
 
             $scope.layout.chat = false;
+            $scope.layout.chatMaximized = false;
 
             var rooms = {};
 
@@ -115,7 +116,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                     if (!subscope) {
                         console.log("Create new chatroom", id);
                         controller.visibleRooms.push(id);
-                        subscope = controller.rooms[id] = scope.$new(true);
+                        subscope = controller.rooms[id] = scope.$new();
                         translation.inject(subscope);
                         subscope.id = id;
                         subscope.isgroupchat = id === group_chat_id ? true : false;
@@ -147,7 +148,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                                 subscope.$broadcast("seen");
                             }
                         };
-                        subscope.toggleMax = function() {
+                        subscope.toggle = function() {
                             scope.toggleMax();
                         };
                         subscope.sendChat = function(to, message, status, mid, noloop) {
@@ -306,6 +307,9 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                     }
                     if (!controller.visibleRooms.length) {
                         scope.showRoom(group_chat_id, {title: translation._("Group chat")}, {restore: true, noenable: true});
+                        if (id === group_chat_id) {
+                            scope.layout.chat = false;
+                        }
                     }
                 };
                 scope.killRoom = function(id) {
@@ -320,8 +324,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                     }, 0);
                 };
                 scope.toggleMax = function() {
-                    //TODO(longsleep): Angularize this.
-                    iElement.parent().toggleClass("maximized");
+                    scope.layout.chatMaximized = !scope.layout.chatMaximized;
                 };
 
                 scope.$on("room", function(event, room) {

static/partials/chat.html

@@ -1 +1 @@
-<div class="chatpane" ng-class="{slideright: !layout.chat}"></div>
+<div class="chatpane"></div>

static/partials/chatroom.html

@@ -1,5 +1,5 @@
 <div ng-controller="ChatroomController" class="chat room-{{index}}" ng-class="{'newmessage': newmessage, 'visible': visible, 'chat-p2p': 'p2pstate', 'with_pictures': isgroupchat}">
-    <div class="chatheader"><span ng-show="p2pstate" class="fa fa-exchange" title="{{_('Peer to peer')}}"/><span>{{settings.title}} {{id|displayName}}</span> <div class="ctrl"><i ng-click="toggleMax()" class="fa fa-expand"></i><i title="{{_('Close chat')}}" ng-show="id" ng-click="hide()" class="fa fa-times"></i></div></div>
+    <div class="chatheader"><span ng-show="p2pstate" class="fa fa-exchange" title="{{_('Peer to peer')}}"/><span>{{settings.title}} {{id|displayName}}</span> <div class="ctrl"><i ng-hide="layout.chatMaximized" ng-click="toggle()" class="fa fa-expand"></i><i ng-show="layout.chatMaximized" ng-click="toggle()" class="fa fa-compress"></i><i title="{{_('Close chat')}}" ng-click="hide()" class="fa fa-times"></i></div></div>
     <div class="outputbox">
         <div class="output nicescroll"></div>
     </div>