Display a 'Set Topic' button if there is no topic or it's a 0-len string.

3 files changed, 30 insertions, 11 deletions

diff --git a/webclient/app.css b/webclient/app.css

index 9667f3fd22..0160b4deef 100755
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -280,7 +280,6 @@ a:active  { color: #000; }
     color: #888;
     font-size: 12px;
     padding-right: 5px;
-    float: right;
     width: 15em;
     overflow: hidden;
     white-space: nowrap;
@@ -301,6 +300,15 @@ a:active  { color: #000; }
     width: 100%;
 }
 
+.roomTopicSection {
+    float: right;
+    width: 100%;
+}
+
+.roomTopicSetNew {
+    float: right;
+}
+
 .roomHeaderInfo {
     float: right;
     margin-top: 15px;
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js

index 10ff12a96b..68845df7d1 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -51,7 +51,14 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
                 console.log("Warning: Already editing topic.");
                 return;
             }
-            $scope.topic.newTopicText = $rootScope.events.rooms[$scope.room_id]['m.room.topic'].content.topic;
+            var topicEvent = $rootScope.events.rooms[$scope.room_id]['m.room.topic'];
+            if (topicEvent) {
+                $scope.topic.newTopicText = topicEvent.content.topic;
+            }
+            else {
+                $scope.topic.newTopicText = "";
+            }
+            
             $scope.topic.isEditing = true;
         },
         updateTopic: function() {
diff --git a/webclient/room/room.html b/webclient/room/room.html

index 0fe45499e0..01f0c4ee33 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -6,16 +6,20 @@
             <div id="roomName">
                 {{ room_id  | mRoomName }}
             </div>
-            <div id="roomTopic" ng-show="events.rooms[room_id]['m.room.topic'].content.topic">
-                <div ng-hide="topic.isEditing" ng-dblclick="topic.editTopic()">
-                    {{ events.rooms[room_id]['m.room.topic'].content.topic | limitTo: 200}}
+            <div class="roomTopicSection">
+                <button ng-hide="events.rooms[room_id]['m.room.topic'].content.topic || topic.isEditing"
+                    ng-click="topic.editTopic()" class="roomTopicSetNew">
+                    Set Topic
+                </button>
+                <div ng-show="events.rooms[room_id]['m.room.topic'].content.topic || topic.isEditing">
+                    <div ng-hide="topic.isEditing" ng-dblclick="topic.editTopic()" id="roomTopic">
+                        {{ events.rooms[room_id]['m.room.topic'].content.topic | limitTo: 200}}
+                    </div>
+                    <form ng-submit="topic.updateTopic()" ng-show="topic.isEditing" class="roomTopicForm">
+                        <input ng-model="topic.newTopicText" ng-blur="topic.cancelEdit()" class="roomTopicInput" 
+                        autofocus />
+                    </form>
                 </div>
-                
-                <form ng-submit="topic.updateTopic()" ng-show="topic.isEditing" class="roomTopicForm">
-                    <input ng-model="topic.newTopicText" ng-blur="topic.cancelEdit()" class="roomTopicInput" 
-                    autofocus />
-                </form>
-                
             </div>
         </div>
     </div>