SYWEB-12: More formatting.

webclient/app-directive.js

@@ -40,4 +40,19 @@ angular.module('matrixWebClient')
             }            
         }
     };
-}]);
+}])
+.directive('elastic', [ // http://stackoverflow.com/questions/17772260/textarea-auto-height
+    '$timeout',
+    function($timeout) {
+      return {
+        restrict: 'A',
+        link: function($scope, element) {
+          var resize = function() {
+            return element[0].style.height = "" + element[0].scrollHeight + "px";
+          };
+          element.on("blur keyup change", resize);
+          $timeout(resize, 10);
+        }
+      };
+    }
+]);;

webclient/app.css

@@ -443,6 +443,12 @@ textarea, input {
     font-family: monospace;
 }
 
+.room-info-textarea-content {
+    height: auto;
+    width: 100%;
+    resize: vertical;
+}
+
 /*** Participant list ***/
 
 #usersTableWrapper {

webclient/room/room-controller.js

@@ -1039,9 +1039,9 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
 .controller('RoomInfoController', function($scope, $modalInstance, $filter) {
     console.log("Displaying room info.");
 
-    $scope.submitState = function(eventType, content) {
-        console.log("Submitting " + eventType + " with " + content);
-    }
+    $scope.submit = function(event) {
+        console.error("submit >>> " + JSON.stringify(event));
+    };
 
     $scope.dismiss = $modalInstance.dismiss;
 

webclient/room/room.html

@@ -17,15 +17,19 @@
         <div class="modal-body">
             <table class="room-info">
             <tr ng-repeat="(key, event) in events.rooms[room_id] | stateEventsFilter" class="room-info-event">
-                <td class="room-info-event-meta">
+                <td class="room-info-event-meta" width="30%">
                     <span class="monospace">{{ key }}</span>
                     <br/>
                     {{ (event.origin_server_ts) | date:'MMM d HH:mm' }}
                     <br/>
                     Set by: <span class="monospace">{{ event.user_id }}</span>
+                    <br/>
+                    <button ng-click="submit(event)" type="button" class="btn btn-success">
+                        Submit
+                    </button>
                 </td>
-                <td class="room-info-event-content">
-                    <pre>{{ event.content | json }}</pre>
+                <td class="room-info-event-content" width="70%">
+                    <textarea class="room-info-textarea-content" elastic ng-model="event.content | json"></textarea> 
                 </td>
             </tr>
             </table>