Display the room topic in the room, underneath the name of the room.

webclient/app.css

@@ -220,12 +220,6 @@ a:active  { color: #000; }
     height: 100%;
 }
 
-#roomName {
-    float: right;
-    font-size: 16px;
-    margin-top: 15px;
-}
-
 #roomHeader {
     margin: auto;
     padding-left: 20px;
@@ -282,6 +276,21 @@ a:active  { color: #000; }
     float: right;
 }
 
+#roomName {
+    font-size: 16px;
+    text-align: right;
+}
+
+#roomTopic {
+    text-align: right;
+    font-size: 13px;
+}
+
+.roomHeaderInfo {
+    float: right;
+    margin-top: 15px;
+}
+
 /*** Participant list ***/
 
 #usersTableWrapper {

webclient/components/matrix/event-handler-service.js

@@ -149,6 +149,14 @@ angular.module('eventHandlerService', [])
         $rootScope.$broadcast(NAME_EVENT, event, isLiveEvent);
     };
     
+    var handleRoomTopic = function(event, isLiveEvent) {
+        console.log("handleRoomTopic " + isLiveEvent);
+
+        initRoom(event.room_id);
+
+        $rootScope.events.rooms[event.room_id][event.type] = event;
+    };
+
     var handleCallEvent = function(event, isLiveEvent) {
         $rootScope.$broadcast(CALL_EVENT, event, isLiveEvent);
     };
@@ -204,6 +212,9 @@ angular.module('eventHandlerService', [])
                     case 'm.room.name':
                         handleRoomName(event, isLiveEvent);
                         break;
+                    case 'm.room.topic':
+                        handleRoomTopic(event, isLiveEvent);
+                        break;
                     default:
                         console.log("Unable to handle event type " + event.type);
                         console.log(JSON.stringify(event, undefined, 4));

webclient/room/room.html

@@ -2,9 +2,14 @@
 
     <div id="roomHeader">
         <a href ng-click="goToPage('/')"><img src="img/logo-small.png" width="100" height="43" alt="[matrix]"/></a>
+        <div class="roomHeaderInfo">
             <div id="roomName">
                 {{ room_id  | mRoomName }}
             </div>
+            <div id="roomTopic" ng-show="events.rooms[room_id]['m.room.topic'].content.topic">
+                {{ events.rooms[room_id]['m.room.topic'].content.topic }}
+            </div>
+        </div>
     </div>
 
     <div id="roomPage">