Skip to content

Commit

Permalink
first spike of using a transition between a table view and the detail…
Browse files Browse the repository at this point in the history 
…ed view
  • Loading branch information
@jstrachan
jstrachan committed Apr 30, 2013
1 parent e4ce12a commit 6b5b075
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 42 deletions.
91 changes: 49 additions & 42 deletions hawtio-web/src/main/webapp/app/activemq/html/browseQueue.html
View file
Expand Up @@ -22,51 +22,56 @@
</div>

<div class="row-fluid">
<div class="gridStyle" ng-grid="gridOptions"></div>
<!--
<div class="gridStyle" hawtio-datatable="gridOptions"></div>
-->
</div>

<div modal="messageDialog.show" close="messageDialog.close()" options="messageDialog.options">
<form class="form-horizontal no-bottom-margin" ng-submit="messageDialog.close()">
<div class="modal-header"><h4>Message {{row.JMSMessageID}}</h4></div>
<div class="modal-body">
<div class="expandable closed">
<div title="Headers" class="title">
<i class="expandable-indicator"></i> Headers
</div>
<div class="expandable-body well">
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>Header</th>
<th>Value</th>
</tr>
</thead>
<tbody ng-bind-html-unsafe="row.headerHtml">
</tbody>
<!--
<tr ng-repeat="(key, value) in row.headers">
<td class="property-name">{{key}}</td>
<td class="property-value">{{value}}</td>
</tr>
-->
</table>
<div ng-switch="messageDialog.show" class="slide-frame" ng-animate="'wave'">
<div ng-switch-when="false">
<div class="gridStyle" ng-grid="gridOptions"></div>
<!--
<div class="gridStyle" hawtio-datatable="gridOptions"></div>
-->
</div>
<div ng-switch-when="true">
<form class="form-horizontal no-bottom-margin" ng-submit="messageDialog.close()">
<h4>Message {{row.JMSMessageID}}</h4>
<div class="pull-right">
<input class="btn" type="submit" ng-click="messageDialog.close()" value="Close">
</div>
</div>
<div class="modal-body">
<div class="expandable closed">
<div title="Headers" class="title">
<i class="expandable-indicator"></i> Headers
</div>
<div class="expandable-body well">
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>Header</th>
<th>Value</th>
</tr>
</thead>
<tbody ng-bind-html-unsafe="row.headerHtml">
</tbody>
<!--
<tr ng-repeat="(key, value) in row.headers">
<td class="property-name">{{key}}</td>
<td class="property-value">{{value}}</td>
</tr>
-->
</table>
</div>
</div>

<div ng-controller="Core.EditorController">
<textarea readonly class="messageDetail" class="input-xlarge" codeMirror="true" rows="{{lineCount(row.Text)}}"
ng-model="row.Text"></textarea>
</div>
</div>
<div class="modal-footer">
<input class="btn btn-primary" type="submit" ng-click="messageDialog.close()" value="Close">
<div ng-controller="Core.EditorController">
<textarea readonly class="messageDetail" class="input-xlarge" codeMirror="true"
rows="{{lineCount(row.Text)}}"
ng-model="row.Text"></textarea>
</div>
</div>
</form>
</div>
</form>
</div>
</div>


<div modal="deleteDialog.show" close="deleteDialog.close()" options="deleteDialog.options">
<form class="form-horizontal no-bottom-margin" ng-submit="deleteDialog.close()">
<div class="modal-header"><h4>Are you sure?</h4></div>
Expand Down Expand Up @@ -101,8 +106,10 @@ <h4>Move
typeahead="title for title in queueNames() | filter:$viewValue" typeahead-editable='false'></p>
<p>
You cannot undo this operation.
Though after the move you can always move the <ng-pluralize count="selectedItems.length"
when="{'1': 'a message', 'other': 'messages'}"></ng-pluralize> back again.
Though after the move you can always move the
<ng-pluralize count="selectedItems.length"
when="{'1': 'a message', 'other': 'messages'}"></ng-pluralize>
back again.
</p>
</div>
<div class="modal-footer">
Expand Down
36 changes: 36 additions & 0 deletions hawtio-web/src/main/webapp/css/site-base.css
View file
Expand Up @@ -1065,3 +1065,39 @@ li.stacktrace {
.wikiGridStyle {
height: 200px;
}


/** Animations */
.slide-enter-setup, .slide-leave-setup {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.slide-enter-setup, .slide-leave-setup {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.wave-enter-setup, .wave-leave-setup {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.wave-enter-setup {
position:absolute;
left:-100%;
}
.wave-enter-start {
left:0;
}
.wave-leave-setup {
position:absolute;
left:0;
}
.wave-leave-start {
left:100%;
}

0 comments on commit 6b5b075

Please sign in to comment.