Skip to content

Commit

Permalink
tidied up the layout a bit more for #5 - wish I knew the CSS/html5 ma…
Browse files Browse the repository at this point in the history
…gic to get the header/value/button to take up the whole space ;) I got close at least...
  • Loading branch information
jstrachan committed Apr 24, 2013
1 parent 977bb59 commit 9bd3fae
Showing 1 changed file with 44 additions and 31 deletions.
75 changes: 44 additions & 31 deletions hawtio-web/src/main/webapp/app/camel/html/sendMessage.html
@@ -1,40 +1,53 @@
<form class="form-horizontal" ng-controller="Camel.SendMessageController">
<div class="control-group">
<button id="sendButton" type="submit" class="btn btn-info pull-left" ng-click="sendMessage()">Send Message</button>
<div class="row-fluid">
<div class="control-group">
<button id="sendButton" type="submit" class="btn btn-primary pull-left" ng-click="sendMessage()">Send Message
</button>

<button id="addHeaderButton" class="btn" ng-click="addHeader()" title="Add a new message header">Add Header</button>

<div class="pull-right">
<div class="controls">
<label class="control-label" for="sourceFormat" title="The text format to use for the message payload">message format</label>
<select ng-model="codeMirrorOptions.mode.name" id="sourceFormat">
<option value="javascript">JSON</option>
<option value="text">Plain Text</option>
<option value="properties">Properties</option>
<option value="xml">XML</option>
<option value="yaml">YAML</option>
</select>
<button id="addHeaderButton" class="btn pull-right" ng-click="addHeader()" title="Add a new message header">Add
Header
</button>
</div>
<div class="row-fluid">
<div class="control-group">
<table style="width: 100%">
<tr ng-repeat="header in headers">
<td style="width: 45%">
<input type="text" style="width: 100%" ng-model="header.name" placeholder="Name of the message header">
</td>
<td style="width: 55%">
<input type="text" style="width: 100%" ng-model="header.value" placeholder="Value of the message header">
</td>
<td style="width: 1px">
<button ng-click="removeHeader(header)" title="Removes this message header"><i class="icon-remove"></i></button>
</td>
</tr>
</table>
</div>
</div>
<div class="row-fluid">
<div class="pull-right">
<div class="controls">
<label class="control-label" for="sourceFormat" title="The text format to use for the message payload">body
format: </label>
<select ng-model="codeMirrorOptions.mode.name" id="sourceFormat">
<option value="javascript">JSON</option>
<option value="text">Plain Text</option>
<option value="properties">Properties</option>
<option value="xml">XML</option>
<option value="yaml">YAML</option>
</select>

<button class="btn" ng-click="autoFormat()" title="Automatically pretty prints the message so its easier to read">Auto Format</button>
<button class="btn" ng-click="autoFormat()"
title="Automatically pretty prints the message so its easier to read">Auto Format
</button>
</div>
</div>
</div>
</div>
<div class="control-group">
<table>
<tr ng-repeat="header in headers">
<td>
<input type="text" ng-model="header.name" placeholder="Name of the message header">
</td>
<td>
<input type="text" ng-model="header.value" placeholder="Value of the message header">
</td>
<td>
<button ng-click="removeHeader(header)" title="Removes this message header"><i class="icon-remove"></i></button>
</td>
</tr>
</table>
</div>
<div class="control-group">
<div class="row-fluid">
<div class="control-group">
<textarea ui-codemirror="codeMirrorOptions" ng-model="message"></textarea>
</div>
</div>
</form>

0 comments on commit 9bd3fae

Please sign in to comment.