Implemented chat sessions view.

src/i18n/messages-de.po

@@ -8,8 +8,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Spreed Speak Freely\n"
 "Report-Msgid-Bugs-To: simon@struktur.de\n"
-"POT-Creation-Date: 2014-03-18 19:10+0100\n"
-"PO-Revision-Date: 2014-03-18 19:10+0100\n"
+"POT-Creation-Date: 2014-03-20 18:31+0100\n"
+"PO-Revision-Date: 2014-03-20 18:31+0100\n"
 "Last-Translator: Simon Eisenmann <simon@struktur.de>\n"
 "Language-Team: de <LL@li.org>\n"
 "Plural-Forms: nplurals=1; plural=0\n"
@@ -48,6 +48,12 @@ msgstr "Audio-Konferenz starten"
 msgid "No other users online"
 msgstr "Niemand sonst online"
 
+msgid "Chat sessions"
+msgstr "Chat-Sitzungen"
+
+msgid "Room chat"
+msgstr "Raum-Chat"
+
 msgid "Peer to peer"
 msgstr "Peer-to-peer"
 
@@ -388,9 +394,6 @@ msgstr "Chat mit"
 msgid "Message from "
 msgstr "Nachricht von "
 
-msgid "Room chat"
-msgstr "Raum-Chat"
-
 #, python-format
 msgid "You are now in room %s ..."
 msgstr "Sie sind nun im Raum %s ..."

src/i18n/messages.pot

@@ -9,7 +9,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Spreed Speak Freely 1.0\n"
 "Report-Msgid-Bugs-To: simon@struktur.de\n"
-"POT-Creation-Date: 2014-03-18 19:10+0100\n"
+"POT-Creation-Date: 2014-03-20 18:31+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -48,6 +48,12 @@ msgstr ""
 msgid "No other users online"
 msgstr ""
 
+msgid "Chat sessions"
+msgstr ""
+
+msgid "Room chat"
+msgstr ""
+
 msgid "Peer to peer"
 msgstr ""
 
@@ -382,9 +388,6 @@ msgstr ""
 msgid "Message from "
 msgstr ""
 
-msgid "Room chat"
-msgstr ""
-
 #, python-format
 msgid "You are now in room %s ..."
 msgstr ""

src/styles/components/_chat.scss

@@ -32,24 +32,67 @@ overflow:hidden;
 -o-perspective: 1000;
 perspective: 1000;
 }
-.withChat #chat .chatpane {
+.withChat #chat .chatcontainer {
 left:0px;
 }
 .withChat.withChatMaximized #chat {
 left:0px;
 width:auto;
-	.chatpane {
+	.chatcontainer {
 		width:auto;
 	}
 }
-.chatpane {
+.chatcontainer {
 position:absolute;
 top:0px;
 left:260px;
-bottom:0px;
 right:0px;
+bottom:0px;
 width:260px;
+-webkit-transition: left 200ms ease-in-out;
+-moz-transition: left 200ms ease-in-out;
+-ms-transition: left 200ms ease-in-out;
+-o-transition: left 200ms ease-in-out;
 transition: left 200ms ease-in-out;
+}
+.chatlist {
+position:absolute;
+top:0px;
+left:0px;
+bottom:0px;
+right:0px;
+background: #e7e7e7;
+	.list-group {
+		margin-top:-1px;
+		margin-bottom:-1px;
+		max-height:100%;
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+	.list-group-item {
+		border-right:none;
+		border-left:none;
+		-webkit-border-radius: 0px;
+        -moz-border-radius: 0px;
+        border-radius: 0px;
+	}
+	.list-group-item .fa-lg {
+		display:inline-block;
+		width:18px;
+		text-align:center;
+	}
+	.list-group-item .badge {
+		background: #84b819;
+		border: 1px solid white;
+		font-size:.8em;
+	}
+}
+.chatpane {
+position:absolute;
+top:0px;
+left:0px;
+bottom:0px;
+right:0px;
 -webkit-transition: 0.3s;
 -webkit-transform-style: preserve-3d;
 -moz-transition: 0.3s;
@@ -87,7 +130,7 @@ display:block;
 }
 .chat .chatbody {
 position:absolute;
-bottom:0px;
+bottom:-1px;
 left:0px;
 right:0px;
 top: 36px;
@@ -121,7 +164,7 @@ display:block;
 text-align:center;
 }
 .chat .chatheader .chatheadertitle {
-padding-left:26px;
+padding-left:28px;
 display:inline;
 }
 .chat .chatheader .ctrl {
@@ -348,7 +391,7 @@ text-overflow:ellipsis;
 	background: #e7e7e7;
 	position: absolute;
 	left:0px;
-	bottom:0px;
+	bottom:1px;
 	right:0px;
 	margin:0 auto;
 }
@@ -405,7 +448,7 @@ border-color:#66afe9;
 	100% {background-color: rgba(132,184,25,1.0);}
 }
 
-.chat.newmessage .chatheader {
+.chat.newmessage .chatheader, .chatlist .list-group-item.newmessage {
 animation: newmessage 1s ease -0.3s infinite;
 -webkit-animation: newmessage 1s ease -0.3s infinite;
 }

static/js/directives/chat.js

@@ -38,6 +38,23 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                 return ctrl.rooms[id];
             }
 
+            $scope.currentRoom = null;
+            $scope.currentRoomActive = false;
+            $scope.getVisibleRooms = function() {
+                var res = [];
+                for (var i=0; i<ctrl.visibleRooms.length; i++) {
+                    var r = rooms[ctrl.visibleRooms[i]];
+                    if (!r || r.id === ctrl.group) {
+                        continue;
+                    }
+                    res.push(r);
+                }
+                return res;
+            };
+            $scope.getGroupRoom = function() {
+                return rooms[ctrl.group];
+            };
+
             mediaStream.api.e.on("received.chat", function(event, id, from, data, p2p) {
 
                 //console.log("received", data, id, from);
@@ -117,11 +134,14 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
 
             var chat = $compile(templateChatroom);
             return function(scope, iElement, iAttrs, controller) {
+
+                var pane = iElement.find(".chatpane");
+
                 scope.showGroupRoom = function(settings, options) {
                     var stngs = $.extend({title: translation._("Room chat")}, settings);
                     return scope.showRoom(controller.group, stngs, options);
                 };
-                scope.currentRoom = null;
+
                 scope.showRoom = function(id, settings, options) {
                     var options = $.extend({}, options);
                     var subscope = controller.rooms[id];
@@ -142,6 +162,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                         subscope.firstmessage = true;
                         subscope.p2pstate = false;
                         subscope.active = false;
+                        subscope.pending = 0;
                         if (!subscope.isgroupchat) {
                             buddyData.push(id);
                         }
@@ -156,12 +177,16 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                             scope.killRoom(id);
                         };
                         subscope.seen = function() {
+                            subscope.pending = 0;
                             scope.$emit("chatseen", subscope.id);
                             if (subscope.newmessage) {
                                 subscope.newmessage = false;
                                 subscope.$broadcast("seen");
                             }
                         };
+                        subscope.deactivate =function() {
+                            scope.deactivateRoom();
+                        };
                         subscope.toggleMax = function() {
                             scope.toggleMax();
                         };
@@ -235,6 +260,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                         });
                         subscope.$on("incoming", function(event, message, from, userid) {
                             if (from !== userid) {
+                                subscope.pending++;
                                 scope.$emit("chatincoming", subscope.id);
                             }
                             if (subscope.firstmessage || !desktopNotify.windowHasFocus) {
@@ -250,7 +276,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                         });
                         chat(subscope, function(clonedElement, $scope) {
 
-                            iElement.append(clonedElement);
+                            pane.append(clonedElement);
                             $scope.element=clonedElement;
                             $scope.visible = true;
                             if (options.autofocus) {
@@ -303,6 +329,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                     safeApply(subscope);
                     return subscope;
                 };
+
                 scope.hideRoom = function(id) {
                     var subscope = controller.rooms[id];
                     if (!subscope) {
@@ -322,13 +349,15 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                     });
                     if (scope.currentRoom === subscope) {
                         scope.currentRoom = null;
+                        scope.currentRoomActive = false;
                     }
                     if (!controller.visibleRooms.length) {
-                        scope.showGroupRoom(null, {restore: true, noenable: true, activate: true});
+                        scope.showGroupRoom(null, {restore: true, noenable: true, noactivate: true});
                         // If last visible room was removed, hide chat.
                         scope.layout.chat = false;
                     }
                 };
+
                 scope.killRoom = function(id) {
                     scope.hideRoom(id);
                     var subscope = controller.rooms[id];
@@ -340,39 +369,50 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                         subscope.$destroy();
                     }, 0);
                 };
+
                 scope.toggleMax = function() {
                     scope.layout.chatMaximized = !scope.layout.chatMaximized;
                 };
+
                 scope.activateRoom = function(id, active) {
+                    var subscope = controller.rooms[id];
+                    if (!subscope) {
+                        return;
+                    }
                     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;
+                        scope.currentRoomActive = true;
                         if (visible) {
                             flip = true;
                         }
                     } else {
                         if (scope.currentRoom) {
                             scope.currentRoom.active = false;
-                            scope.currentRoom.hide();
+                            //scope.currentRoom.hide();
                             if (visible) {
                                 flip = true;
                             }
                         }
                         if (active) {
                             scope.currentRoom = subscope;
+                            scope.currentRoomActive = true;
                         }
                         subscope.active = active;
                     }
                     if (flip) {
-                        iElement.toggleClass("flip");
+                        pane.toggleClass("flip");
                     }
                 };
 
+                scope.deactivateRoom = function() {
+                    scope.currentRoomActive = false;
+                };
+
                 scope.$watch("layout.chat", function(chat) {
-                    iElement.removeClass("flip");
+                    pane.removeClass("flip");
                 });
 
                 scope.$on("room", function(event, room) {
@@ -381,7 +421,7 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
                     } else {
                         var subscope;
                         if (!controller.visibleRooms.length) {
-                            subscope = scope.showGroupRoom(null, {restore: true, noenable: true});
+                            subscope = scope.showGroupRoom(null, {restore: true, noenable: true, noactivate: true});
                         } else {
                             subscope = controller.get(controller.group);
                         }

static/partials/chat.html

@@ -1 +1,19 @@
-<div class="chatpane"></div>
+<div class="chatcontainer">
+	<div class="chatpane" ng-show="currentRoomActive"></div>
+	<div class="chatlist" ng-hide="currentRoomActive">
+		<div class="chat visible active">
+			<div class="chatheader"><div class="chatstatusicon" ng-click="activateRoom(currentRoom.id, true)"><i class="fa fa-angle-right"></i> <i class="fa fa fa-comments-o"></i></div><div class="chatheadertitle"><span>{{_("Chat sessions")}}</span></div></div>
+			<div class="chatbody">
+				<div class="list-group nicescroll">
+				  <a ng-if="roomstatus" ng-click="activateRoom('', true)" class="list-group-item">
+				  		<span class="badge" ng-show="getGroupRoom().pending">{{getGroupRoom().pending}}</span>
+				    <i class="fa fa-users fa-lg"></i> {{_("Room chat")}}
+				  </a>
+				  <a ng-repeat="room in getVisibleRooms()" ng-click="activateRoom(room.id, true)" class="list-group-item" ng-class="{newmessage: room.pending}">
+				  	<span class="badge" ng-show="room.pending">{{room.pending}}</span><i class="fa fa-user fa-lg"></i> {{room.id|displayName}}
+				  </a>
+				</div>
+			</div>
+		</div>
+	</div>
+</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, 'active': active}">
-    <div class="chatheader"><div class="chatstatusicon"><i class="fa fa fa-comments-o"></i></div><div class="chatheadertitle"><span ng-show="p2pstate" class="fa fa-exchange" title="{{_('Peer to peer')}}"/><span>{{settings.title}} {{id|displayName}}</span></div> <div class="ctrl"><i ng-hide="layout.chatMaximized" ng-click="toggleMax()" class="fa fa-expand"></i><i ng-show="layout.chatMaximized" ng-click="toggleMax()" class="fa fa-compress"></i><i title="{{_('Close chat')}}" ng-click="hide()" class="fa fa-times"></i></div></div>
+    <div class="chatheader"><div class="chatstatusicon" ng-click="deactivateRoom()"><i class="fa fa-angle-left"></i> <i class="fa fa fa-comments-o"></i></div><div class="chatheadertitle"><span ng-show="p2pstate" class="fa fa-exchange" title="{{_('Peer to peer')}}"/><span>{{settings.title}} {{id|displayName}}</span></div> <div class="ctrl"><i ng-hide="layout.chatMaximized" ng-click="toggleMax()" class="fa fa-expand"></i><i ng-show="layout.chatMaximized" ng-click="toggleMax()" class="fa fa-compress"></i><!--<i title="{{_('Close chat')}}" ng-click="hide()" class="fa fa-times"></i>--></div></div>
     <div class="chatbody">
         <div class="outputbox">
             <div class="output nicescroll"></div>