Added edition of room name

webclient/app.css

@@ -296,20 +296,20 @@ a:active  { color: #000; }
 }
 
 #roomTopic {
-    text-align: right;
     font-size: 13px;
+    text-align: right;
 }
 
-.roomTopicInput {
+.roomNameInput, .roomTopicInput {
     width: 100%;
 }
 
-.roomTopicSection {
+.roomNameSection, .roomTopicSection {
     float: right;
     width: 100%;
 }
 
-.roomTopicSetNew {
+.roomNameSetNew, .roomTopicSetNew {
     float: right;
 }
 

webclient/components/matrix/matrix-service.js

@@ -236,6 +236,13 @@ angular.module('matrixService', [])
             return doRequest("GET", path, undefined, {});
         },
         
+        setName: function(room_id, name) {
+            var data = {
+                name: name
+            };
+            return this.sendStateEvent(room_id, "m.room.name", data);
+        },
+        
         setTopic: function(room_id, topic) {
             var data = {
                 topic: topic

webclient/room/room-controller.js

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
-.controller('RoomController', ['$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'eventHandlerService', 'mFileUpload', 'mPresence', 'matrixPhoneService', 'MatrixCall',
+.controller('RoomController', ['$filter', '$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'eventHandlerService', 'mFileUpload', 'mPresence', 'matrixPhoneService', 'MatrixCall',
-                               function($scope, $timeout, $routeParams, $location, $rootScope, matrixService, eventHandlerService, mFileUpload, mPresence, matrixPhoneService, MatrixCall) {
+                               function($filter, $scope, $timeout, $routeParams, $location, $rootScope, matrixService, eventHandlerService, mFileUpload, mPresence, matrixPhoneService, MatrixCall) {
    'use strict';
     var MESSAGES_PER_PAGINATION = 30;
     var THUMBNAIL_SIZE = 320;
@@ -42,6 +42,44 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
     $scope.imageURLToSend = "";
     $scope.userIDToInvite = "";
     
+
+    // vars and functions for updating the name
+    $scope.name = {
+        isEditing: false,
+        newNameText: "",
+        editName: function() {
+            if ($scope.name.isEditing) {
+                console.log("Warning: Already editing name.");
+                return;
+            };
+
+            // Use the filter applied in html to set the input value
+            $scope.name.newNameText = $filter('mRoomName')($scope.room_id);
+
+            // Force focus to the input
+            $timeout(function() {
+                angular.element('.roomNameInput').focus(); 
+            }, 0);
+
+            $scope.name.isEditing = true;
+        },
+        updateName: function() {
+            console.log("Updating name to "+$scope.name.newNameText);
+            matrixService.setName($scope.room_id, $scope.name.newNameText).then(
+                function() {
+                },
+                function(error) {
+                    $scope.feedback = "Request failed: " + error.data.error;
+                }
+            );
+
+            $scope.name.isEditing = false;
+        },
+        cancelEdit: function() {
+            $scope.name.isEditing = false;
+        }
+    };
+
     // vars and functions for updating the topic
     $scope.topic = {
         isEditing: false,
@@ -81,10 +119,7 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
         cancelEdit: function() {
             $scope.topic.isEditing = false;
         }
-    };
+    };  
-    
-    
-    
     
     var scrollToBottom = function(force) {
         console.log("Scrolling to bottom");

webclient/room/room.html

@@ -3,9 +3,16 @@
     <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 class="roomNameSection">
+                <div ng-hide="name.isEditing" ng-dblclick="name.editName()" id="roomName">
+                    {{ room_id | mRoomName }}
+                </div>
+                <form ng-submit="name.updateName()" ng-show="name.isEditing" class="roomNameForm">
+                    <input ng-model="name.newNameText" ng-blur="name.cancelEdit()" class="roomNameInput" />
+                </form>
             </div>
+
             <div class="roomTopicSection">
                 <button ng-hide="events.rooms[room_id]['m.room.topic'].content.topic || topic.isEditing"
                     ng-click="topic.editTopic()" class="roomTopicSetNew">