Web UI improvements

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

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,6 +73,7 @@ func Index() string {
</div> </div>
<div class="messages"> <div class="messages">
<div id="messages-container">
<table class="table"> <table class="table">
<tr> <tr>
<th>From</th> <th>From</th>
@ -82,17 +104,38 @@ func Index() string {
</tr> </tr>
</tbody> </tbody>
</table> </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">
<tbody ng-if="!previewAllHeaders">
<tr>
<th>From</th>
<td>{{ preview.Content.Headers["From"][0] }}</td>
</tr>
<tr>
<th>Subject</th>
<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"> <tr ng-repeat="(header, value) in preview.Content.Headers">
<th> <th>
{{ header }} {{ header }}
</th> </th>
<td> <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> <div ng-repeat="v in value">{{ v }}</div>
</td> </td>
</tr> </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>

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;