Message preview UI fixes

mailhog/templates/index.go

@@ -26,15 +26,12 @@ func Index() string {
     background: #eee;
   }
   table#headers {
-    margin-bottom: 2px;
+    margin-bottom: 1px;
     background: #eee;
   }
   #content .nav>li>a {
     padding: 5px 8px;
   }
-  #content {
-    padding: 0px 2px;
-  }
   .preview #headers tbody td {
     width: 100%;
   }
@@ -50,10 +47,20 @@ func Index() string {
     white-space: pre;
     font-family: Courier New, Courier, System, fixed-width;
   }
-  .tab-content {
+  .preview .tab-content {
-    padding: 3px;
+    padding: 0;
+    overflow-y: scroll;
   }
 </style>
+<script>
+  var reflow = function() {
+    var remaining = $(window).height() - $('.preview .nav-tabs').offset().top
+    $('.preview .tab-content').height(remaining - 32)
+  }
+  $(function() {
+    reflow();
+  })
+</script>
 <div class="modal fade" id="confirm-delete-all">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -121,7 +128,7 @@ func Index() string {
       <tr>
         <th>To</th>
         <td>
-          <button ng-click="$parent.previewAllHeaders = true" type="button" class="btn btn-default pull-right btn-xs">Show headers <span class="glyphicon glyphicon-chevron-down"></span></button>
+          <button id="show-headers" ng-click="toggleHeaders(true)" type="button" class="btn btn-default pull-right btn-xs">Show headers <span class="glyphicon glyphicon-chevron-down"></span></button>
           {{ preview.Content.Headers["To"].join(', ') }}
         </td>
       </tr>
@@ -132,7 +139,7 @@ func Index() string {
           {{ header }}
         </th>
         <td>
-          <button ng-if="$last" ng-click="$parent.$parent.$parent.previewAllHeaders = false" type="button" class="btn btn-default pull-right btn-xs">Hide headers <span class="glyphicon glyphicon-chevron-up"></span></button>
+          <button id="hide-headers" ng-if="$last" ng-click="toggleHeaders(false)" type="button" class="btn btn-default pull-right btn-xs">Hide headers <span class="glyphicon glyphicon-chevron-up"></span></button>
           <div ng-repeat="v in value">{{ v }}</div>
         </td>
       </tr>

mailhog/templates/js/controllers.go

@@ -6,6 +6,7 @@ var mailhogApp = angular.module('mailhogApp', []);
 
 mailhogApp.controller('MailCtrl', function ($scope, $http, $sce) {
   $scope.cache = {};
+  $scope.previewAllHeaders = false;
 
   $scope.refresh = function() {
     $http.get('/api/v1/messages').success(function(data) {
@@ -17,6 +18,7 @@ mailhogApp.controller('MailCtrl', function ($scope, $http, $sce) {
   $scope.selectMessage = function(message) {
   	if($scope.cache[message.Id]) {
   		$scope.preview = $scope.cache[message.Id];
+      reflow();
   	} else {
   		$scope.preview = message;
 	  	$http.get('/api/v1/messages/' + message.Id).success(function(data) {
@@ -24,10 +26,28 @@ mailhogApp.controller('MailCtrl', function ($scope, $http, $sce) {
 	      data.previewHTML = $sce.trustAsHtml($scope.getMessageHTML(data));
   		  $scope.preview = data;
   		  preview = $scope.cache[message.Id];
+        reflow();
 	    });
 	}
   }
 
+  $scope.toggleHeaders = function(val) {
+    $scope.previewAllHeaders = val;
+    var t = window.setInterval(function() {
+      if(val) {
+        if($('#hide-headers').length) {
+          window.clearInterval(t);
+          reflow();
+        }
+      } else {
+        if($('#show-headers').length) {
+          window.clearInterval(t);
+          reflow();
+        }
+      }
+    }, 10);
+  }
+
   $scope.getMessagePlain = function(message) {
   	var part;
 

mailhog/templates/layout.go

@@ -17,7 +17,7 @@ func Layout(content string) string {
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.js"></script>
     <script src="/js/controllers.js"></script>
     <style>
-      body, html { height: 100%; }
+      body, html { height: 100%; overflow: hidden; }
       .navbar {
         margin-bottom: 0;
         position: absolute;