Move magic-search bar out of the table structure

This patch moves the magic-search bar to out of the table structure.
Also this patch allows much flexibility in layout.

Change-Id: I0312d79143515b0a82a2b17776fbb502a36b6b03
Closes-Bug: #1558772
This commit is contained in:
shu-mutou 2016-05-18 13:36:30 +09:00
parent 5b8f93deb3
commit 3bd93a817a
3 changed files with 265 additions and 285 deletions

View File

@ -1,144 +1,134 @@
<table ng-controller="containersBaymodelsTableController as table" <div>
hz-table ng-cloak <hz-magic-search-context ng-controller="containersBaymodelsTableController as table"
st-table="table.baymodels" filter-facets="table.baymodelFacets">
st-safe-src="table.baymodelsSrc" <hz-magic-search-bar></hz-magic-search-bar>
default-sort="name" <actions class="batch-action" allowed="table.baymodelResource.batchActions" type="batch"></actions>
default-sort-reverse="false" <table hz-table ng-cloak st-magic-search
class="table table-striped table-rsp table-detail"> st-table="table.baymodels"
st-safe-src="table.baymodelsSrc"
default-sort="name"
default-sort-reverse="false"
class="table table-striped table-rsp table-detail">
<thead> <thead>
<!--
Table-batch-actions:
This is where batch actions like searching, creating, and deleting.
-->
<tr>
<th colspan="100" class="search-header">
<hz-magic-search-bar group-classes="input-group-sm" icon-classes="fa-search"
filter-facets="table.baymodelFacets">
</hz-magic-search-bar>
</th>
</tr>
<tr class="action-row">
<th colspan="100">
<actions allowed="table.baymodelResource.batchActions" type="batch"></actions>
</th>
</tr>
<!--
Table-column-headers:
The headers for the table columns
-->
<tr>
<th class="multi_select_column">
<input type="checkbox" hz-select-all="table.baymodels">
</th>
<th class="expander"></th>
<th class="rsp-p1" st-sort="name" st-sort-default translate>
Name
</th>
<th class="rsp-p2" st-sort="id" translate>
ID
</th>
<th class="rsp-p1" st-sort="coe" translate>
COE
</th>
<th class="rsp-p2" st-sort="network-driver" translate>
Network Driver
</th>
<th class="actions_column" translate>
Actions
</th>
</tr>
</thead>
<tbody>
<!--
Table-rows:
This is where we declaratively define the table columns.
Include multi_select_column if you want to select all.
Include expander if you want to inline details.
Include actions_column if you want to perform actions.
rsp-p1 rsp-p2 are responsive priority as user resizes window.
-->
<tr ng-repeat-start="bm in table.baymodels track by bm.id">
<td class="multi_select_column">
<input type="checkbox"
ng-model="tCtrl.selections[bm.id].checked"
hz-select="bm">
</td>
<td class="expander">
<i class="fa fa-chevron-right"
hz-expand-detail
duration="200">
</i>
</td>
<td class="rsp-p1"><a ng-href="project/baymodels/{$ bm.id $}">{$ bm.name|noName $}</a></td>
<td class="rsp-p2">{$ bm.id $}</td>
<td class="rsp-p1">{$ bm.coe $}</td>
<td class="rsp-p2">{$ bm.network_driver $}</td>
<td class="actions_column">
<!-- <!--
Table-row-action-column: Table-column-headers:
Actions taken here applies to a single item/row. The headers for the table columns
--> -->
<actions allowed="table.baymodelResource.itemActions" type="row" item="bm"></actions> <tr>
</td> <th class="multi_select_column">
</tr> <input type="checkbox" hz-select-all="table.baymodels">
<tr ng-repeat-end class="detail-row"> </th>
<th class="expander"></th>
<th class="rsp-p1" st-sort="name" st-sort-default translate>
Name
</th>
<th class="rsp-p2" st-sort="id" translate>
ID
</th>
<th class="rsp-p1" st-sort="coe" translate>
COE
</th>
<th class="rsp-p2" st-sort="network-driver" translate>
Network Driver
</th>
<th class="actions_column" translate>
Actions
</th>
</tr>
</thead>
<tbody>
<!--
Table-rows:
This is where we declaratively define the table columns.
Include multi_select_column if you want to select all.
Include expander if you want to inline details.
Include actions_column if you want to perform actions.
rsp-p1 rsp-p2 are responsive priority as user resizes window.
-->
<tr ng-repeat-start="bm in table.baymodels track by bm.id">
<td class="multi_select_column">
<input type="checkbox"
ng-model="tCtrl.selections[bm.id].checked"
hz-select="bm">
</td>
<td class="expander">
<i class="fa fa-chevron-right"
hz-expand-detail
duration="200">
</i>
</td>
<td class="rsp-p1"><a ng-href="project/baymodels/{$ bm.id $}">{$ bm.name|noName $}</a></td>
<td class="rsp-p2">{$ bm.id $}</td>
<td class="rsp-p1">{$ bm.coe $}</td>
<td class="rsp-p2">{$ bm.network_driver $}</td>
<td class="actions_column">
<!--
Table-row-action-column:
Actions taken here applies to a single item/row.
-->
<actions allowed="table.baymodelResource.itemActions" type="row" item="bm"></actions>
</td>
</tr>
<tr ng-repeat-end class="detail-row">
<!--
Detail-row:
Contains detailed information on this item.
Can be toggled using the chevron button.
Ensure colspan is greater or equal to number of column-headers.
-->
<td class="detail" colspan="100">
<!--
The responsive columns that disappear typically should reappear here
with the same responsive priority that they disappear.
E.g. table header with rsp-p2 should be here with rsp-alt-p2
-->
<div class="row">
<span class="rsp-alt-p2">
<dl class="col-xs-5">
<dt translate>ID</dt>
<dd>{$ bm.id $}</dd>
</dl>
<dl class="col-xs-3">
<dt translate>Network Driver</dt>
<dd>{$ bm.network_driver $}</dd>
</dl>
</span>
</div>
<div class="row">
<dl class="col-xs-5">
<dt translate>Image ID</dt>
<dd>{$ bm.image_id $}</dd>
</dl>
<dl class="col-xs-3">
<dt translate>Registry Enabled</dt>
<dd>{$ bm.registry_enabled $}</dd>
</dl>
<dl class="col-xs-4">
<dt translate>Labels</dt>
<dd ng-repeat="lbl in b.labels">{$ lbl $}</dd>
</dl>
</div>
</td>
</tr>
<tr hz-no-items items="table.baymodels"></tr>
</tbody>
<!-- <!--
Detail-row: Table-footer:
Contains detailed information on this item. This is where we display number of items and pagination controls.
Can be toggled using the chevron button.
Ensure colspan is greater or equal to number of column-headers.
--> -->
<td class="detail" colspan="100"> <tfoot hz-table-footer items="table.baymodels"></tfoot>
<!-- </table>
The responsive columns that disappear typically should reappear here </hz-magic-search-context>
with the same responsive priority that they disappear. </div>
E.g. table header with rsp-p2 should be here with rsp-alt-p2
-->
<div class="row">
<span class="rsp-alt-p2">
<dl class="col-xs-5">
<dt translate>ID</dt>
<dd>{$ bm.id $}</dd>
</dl>
<dl class="col-xs-3">
<dt translate>Network Driver</dt>
<dd>{$ bm.network_driver $}</dd>
</dl>
</span>
</div>
<div class="row">
<dl class="col-xs-5">
<dt translate>Image ID</dt>
<dd>{$ bm.image_id $}</dd>
</dl>
<dl class="col-xs-3">
<dt translate>Registry Enabled</dt>
<dd>{$ bm.registry_enabled $}</dd>
</dl>
<dl class="col-xs-4">
<dt translate>Labels</dt>
<dd ng-repeat="lbl in b.labels">{$ lbl $}</dd>
</dl>
</div>
</td>
</tr>
<tr hz-no-items items="table.baymodels"></tr>
</tbody>
<!--
Table-footer:
This is where we display number of items and pagination controls.
-->
<tfoot hz-table-footer items="table.baymodels"></tfoot>
</table>

View File

@ -1,149 +1,139 @@
<table ng-controller="containersBaysTableController as table" <div>
hz-table ng-cloak <hz-magic-search-context ng-controller="containersBaysTableController as table"
st-table="table.bays" filter-facets="table.bayFacets">
st-safe-src="table.baysSrc" <hz-magic-search-bar></hz-magic-search-bar>
default-sort="name" <actions class="batch-action" allowed="table.bayResource.batchActions" type="batch"></actions>
default-sort-reverse="false" <table hz-table ng-cloak st-magic-search
class="table table-striped table-rsp table-detail"> st-table="table.bays"
st-safe-src="table.baysSrc"
default-sort="name"
default-sort-reverse="false"
class="table table-striped table-rsp table-detail">
<thead> <thead>
<!--
Table-batch-actions:
This is where batch actions like searching, creating, and deleting.
-->
<tr>
<th colspan="100" class="search-header">
<hz-magic-search-bar group-classes="input-group-sm" icon-classes="fa-search"
filter-facets="table.bayFacets">
</hz-magic-search-bar>
</th>
</tr>
<tr class="action-row">
<th colspan="100">
<actions allowed="table.bayResource.batchActions" type="batch"></actions>
</th>
</tr>
<!--
Table-column-headers:
The headers for the table columns
-->
<tr>
<th class="multi_select_column">
<input type="checkbox" hz-select-all="table.bays">
</th>
<th class="expander"></th>
<th class="rsp-p1" st-sort="name" st-sort-default translate>
Name
</th>
<th class="rsp-p2" st-sort="id" translate>
ID
</th>
<th class="rsp-p1" st-sort="status" translate>
Status
</th>
<th class="rsp-p2" st-sort="master_count" translate>
Master Count
</th>
<th class="rsp-p2" st-sort="node_count" translate>
Node Count
</th>
<th class="actions_column" translate>
Actions
</th>
</tr>
</thead>
<tbody>
<!--
Table-rows:
This is where we declaratively define the table columns.
Include multi_select_column if you want to select all.
Include expander if you want to inline details.
Include actions_column if you want to perform actions.
rsp-p1 rsp-p2 are responsive priority as user resizes window.
-->
<tr ng-repeat-start="b in table.bays track by b.id">
<td class="multi_select_column">
<input type="checkbox"
ng-model="tCtrl.selections[b.id].checked"
hz-select="b">
</td>
<td class="expander">
<span class="fa fa-chevron-right"
hz-expand-detail
duration="200">
</span>
</td>
<td class="rsp-p1"><a ng-href="project/bays/{$ b.id $}">{$ b.name|noName $}</a></td>
<td class="rsp-p2">{$ b.id $}</td>
<td class="rsp-p1">{$ b.status $}</td>
<td class="rsp-p2">{$ b.master_count $}</td>
<td class="rsp-p2">{$ b.node_count $}</td>
<td class="actions_column">
<!-- <!--
Table-row-action-column: Table-column-headers:
Actions taken here applies to a single item/row. The headers for the table columns
--> -->
<actions allowed="table.bayResource.itemActions" type="row" item="b"></actions> <tr>
</td> <th class="multi_select_column">
</tr> <input type="checkbox" hz-select-all="table.bays">
<tr ng-repeat-end class="detail-row"> </th>
<th class="expander"></th>
<th class="rsp-p1" st-sort="name" st-sort-default translate>
Name
</th>
<th class="rsp-p2" st-sort="id" translate>
ID
</th>
<th class="rsp-p1" st-sort="status" translate>
Status
</th>
<th class="rsp-p2" st-sort="master_count" translate>
Master Count
</th>
<th class="rsp-p2" st-sort="node_count" translate>
Node Count
</th>
<th class="actions_column" translate>
Actions
</th>
</tr>
</thead>
<tbody>
<!--
Table-rows:
This is where we declaratively define the table columns.
Include multi_select_column if you want to select all.
Include expander if you want to inline details.
Include actions_column if you want to perform actions.
rsp-p1 rsp-p2 are responsive priority as user resizes window.
-->
<tr ng-repeat-start="b in table.bays track by b.id">
<td class="multi_select_column">
<input type="checkbox"
ng-model="tCtrl.selections[b.id].checked"
hz-select="b">
</td>
<td class="expander">
<span class="fa fa-chevron-right"
hz-expand-detail
duration="200">
</span>
</td>
<td class="rsp-p1"><a ng-href="project/bays/{$ b.id $}">{$ b.name|noName $}</a></td>
<td class="rsp-p2">{$ b.id $}</td>
<td class="rsp-p1">{$ b.status $}</td>
<td class="rsp-p2">{$ b.master_count $}</td>
<td class="rsp-p2">{$ b.node_count $}</td>
<td class="actions_column">
<!--
Table-row-action-column:
Actions taken here applies to a single item/row.
-->
<actions allowed="table.bayResource.itemActions" type="row" item="b"></actions>
</td>
</tr>
<tr ng-repeat-end class="detail-row">
<!--
Detail-row:
Contains detailed information on this item.
Can be toggled using the chevron button.
Ensure colspan is greater or equal to number of column-headers.
-->
<td class="detail" colspan="100">
<!--
The responsive columns that disappear typically should reappear here
with the same responsive priority that they disappear.
E.g. table header with rsp-p2 should be here with rsp-alt-p2
-->
<div class="row">
<span class="rsp-alt-p2">
<dl class="col-xs-5">
<dt translate>ID</dt>
<dd>{$ b.id $}</dd>
</dl>
<dl class="col-xs-3">
<dt translate>Master Count</dt>
<dd>{$ b.master_count $}</dd>
</dl>
<dl class="col-xs-3">
<dt translate>Node Count</dt>
<dd>{$ b.node_count $}</dd>
</dl>
</span>
</div>
<div class="row">
<dl class="col-xs-5">
<dt translate>Baymodel</dt>
<dd><a ng-href="project/baymodels/{$ b.baymodel_id $}">{$ b.baymodel_id $}</a></dd>
</dl>
<dl class="col-xs-3">
<dt translate>Node Addresses</dt>
<dd ng-repeat="addr in b.node_addresses">{$ addr $}</dd>
</dl>
</div>
</td>
</tr>
<tr hz-no-items items="table.bays"></tr>
</tbody>
<!-- <!--
Detail-row: Table-footer:
Contains detailed information on this item. This is where we display number of items and pagination controls.
Can be toggled using the chevron button.
Ensure colspan is greater or equal to number of column-headers.
--> -->
<td class="detail" colspan="100"> <tfoot hz-table-footer items="table.bays"></tfoot>
<!-- </table>
The responsive columns that disappear typically should reappear here </hz-magic-search-context>
with the same responsive priority that they disappear. </div>
E.g. table header with rsp-p2 should be here with rsp-alt-p2
-->
<div class="row">
<span class="rsp-alt-p2">
<dl class="col-xs-5">
<dt translate>ID</dt>
<dd>{$ b.id $}</dd>
</dl>
<dl class="col-xs-3">
<dt translate>Master Count</dt>
<dd>{$ b.master_count $}</dd>
</dl>
<dl class="col-xs-3">
<dt translate>Node Count</dt>
<dd>{$ b.node_count $}</dd>
</dl>
</span>
</div>
<div class="row">
<dl class="col-xs-5">
<dt translate>Baymodel</dt>
<dd><a ng-href="project/baymodels/{$ b.baymodel_id $}">{$ b.baymodel_id $}</a></dd>
</dl>
<dl class="col-xs-3">
<dt translate>Node Addresses</dt>
<dd ng-repeat="addr in b.node_addresses">{$ addr $}</dd>
</dl>
</div>
</td>
</tr>
<tr hz-no-items items="table.bays"></tr>
</tbody>
<!--
Table-footer:
This is where we display number of items and pagination controls.
-->
<tfoot hz-table-footer items="table.bays"></tfoot>
</table>

View File

@ -1,7 +1,7 @@
@import "baymodels/baymodels"; @import "baymodels/baymodels";
@import "bays/bays"; @import "bays/bays";
.table > thead > .action-row > th > actions { .batch-action {
float: right; float: right;
action-list { action-list {
padding-left: 0.3em; padding-left: 0.3em;