ric/MailHog
1
0
Fork 0
mirror of https://gitlab.com/ric_harvey/MailHog.git synced 2025-02-20 01:35:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Web UI improvements

Browse source
This commit is contained in:
Ian Kent 2014-04-23 23:01:48 +01:00
parent 54b4c4c681
commit 5ee0d32b80
2 changed files with 90 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
mailhog/templates/index.go
View file

@ -4,12 +4,14 @@ func Index() string {
return ` return `
<style> <style>
.messages { .messages {
padding-top: 51px;
height: 30%; height: 30%;
overflow-y: scroll; min-height: 280px;
border-bottom: 1px solid #CCCCCC;
} }
.preview { #messages-container {
height: 70%; height: 100%;
border-top: 1px solid #CCCCCC; overflow-y: scroll;
} }
.preview #headers { .preview #headers {
border-bottom: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD;
@ -17,14 +19,15 @@ func Index() string {
.selected { .selected {
background: #DADAFA; background: #DADAFA;
} }
table tbody {
overflow: scroll;
}
table td, table th { table td, table th {
padding: 2px 4px 2px 4px !important; padding: 2px 4px 2px 4px !important;
} }
table thead {
background: #eee;
}
table#headers { table#headers {
margin-bottom: 2px; margin-bottom: 2px;
background: #eee;
} }
#content .nav>li>a { #content .nav>li>a {
padding: 5px 8px; padding: 5px 8px;
@ -32,6 +35,24 @@ func Index() string {
#content { #content {
padding: 0px 2px; padding: 0px 2px;
} }
.preview #headers tbody td {
width: 100%;
}
.preview #headers tbody th {
white-space: nowrap;
padding-right: 10px !important;
padding-left: 10px !important;
text-align: right;
color: #666;
font-weight: normal;
}
#preview-plain, #preview-source {
white-space: pre;
font-family: Courier New, Courier, System, fixed-width;
}
.tab-content {
padding: 3px;
}
</style> </style>
<div class="modal fade" id="confirm-delete-all"> <div class="modal fade" id="confirm-delete-all">
<div class="modal-dialog"> <div class="modal-dialog">
@ -52,47 +73,69 @@ func Index() string {
</div> </div>
<div class="messages"> <div class="messages">
<table class="table"> <div id="messages-container">
<tr> <table class="table">
<th>From</th> <tr>
<th>To</th> <th>From</th>
<th>Subject</th> <th>To</th>
<th>Received</th> <th>Subject</th>
<th>Actions</th> <th>Received</th>
</tr> <th>Actions</th>
<tbody>
<tr ng-repeat="message in messages" ng-click="selectMessage(message)" ng-class="{ selected: message.Id == preview.Id }">
<td>
{{ message.From.Mailbox }}@{{ message.From.Domain }}
</td>
<td>
<span ng-repeat="to in message.To">
{{ to.Mailbox }}@{{ to.Domain }}
</span>
</td>
<td>
{{ message.Content.Headers.Subject.0 }}
</td>
<td>
{{ date(message.Created) }}
</td>
<td>
<button class="btn btn-xs btn-default" title="Delete" ng-click="deleteOne(message)"><span class="glyphicon glyphicon-remove"></span></button>
</td>
</tr> </tr>
</tbody> <tbody>
</table> <tr ng-repeat="message in messages" ng-click="selectMessage(message)" ng-class="{ selected: message.Id == preview.Id }">
<td>
{{ message.From.Mailbox }}@{{ message.From.Domain }}
</td>
<td>
<span ng-repeat="to in message.To">
{{ to.Mailbox }}@{{ to.Domain }}
</span>
</td>
<td>
{{ message.Content.Headers.Subject.0 }}
</td>
<td>
{{ date(message.Created) }}
</td>
<td>
<button class="btn btn-xs btn-default" title="Delete" ng-click="deleteOne(message)"><span class="glyphicon glyphicon-remove"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
<div class="preview" ng-if="preview"> <div class="preview" ng-if="preview">
<table class="table" id="headers"> <table class="table" id="headers">
<tr ng-repeat="(header, value) in preview.Content.Headers"> <tbody ng-if="!previewAllHeaders">
<th> <tr>
{{ header }} <th>From</th>
</th> <td>{{ preview.Content.Headers["From"][0] }}</td>
<td> </tr>
<div ng-repeat="v in value">{{ v }}</div> <tr>
</td> <th>Subject</th>
</tr> <td><strong>{{ preview.Content.Headers["Subject"][0] }}</strong></td>
</tr>
<tr>
<th>To</th>
<td>
<button ng-click="$parent.previewAllHeaders = true" type="button" class="btn btn-default pull-right btn-xs">Show headers</button>
{{ preview.Content.Headers["To"].join(', ') }}
</td>
</tr>
</tbody>
<tbody ng-if="previewAllHeaders">
<tr ng-repeat="(header, value) in preview.Content.Headers">
<th>
{{ 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</button>
<div ng-repeat="v in value">{{ v }}</div>
</td>
</tr>
</tbody>
</table> </table>
<div id="content"> <div id="content">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
@ -102,8 +145,8 @@ func Index() string {
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane active" id="preview-html" ng-bind-html="preview.previewHTML"></div> <div class="tab-pane active" id="preview-html" ng-bind-html="preview.previewHTML"></div>
<div class="tab-pane" id="preview-plain"><pre>{{ getMessagePlain(preview) }}</pre></div> <div class="tab-pane" id="preview-plain">{{ getMessagePlain(preview) }}</div>
<div class="tab-pane" id="preview-source"><pre>{{ getSource(preview) }}</pre></div> <div class="tab-pane" id="preview-source">{{ getSource(preview) }}</div>
</div> </div>
</div> </div>
</div> </div>

5
mailhog/templates/layout.go
View file

@ -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="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.js"></script>
<script src="/js/controllers.js"></script> <script src="/js/controllers.js"></script>
<style> <style>
body, html { height: 100%; overflow: none; } body, html { height: 100%; }
.navbar { .navbar {
margin-bottom: 0; margin-bottom: 0;
position: absolute; position: absolute;
@ -25,9 +25,6 @@ func Layout(content string) string {
right: 0; right: 0;
width: 100%; width: 100%;
} }
.messages {
padding-top: 50px;
}
.navbar-header img { .navbar-header img {
height: 35px; height: 35px;
margin: 8px 0 0 5px; margin: 8px 0 0 5px;