Move list pagination out of table footer
Remove docs on list-unresponsive (removed a while ago) Add topPartial and sidePartial options to list controller configuration (experimental)
This commit is contained in:
Samuel Georges
parent
600794c891
commit
6c474bcae9
|
|
@ -26,6 +26,11 @@ class ListController extends ControllerBehavior
|
|||
*/
|
||||
protected $primaryDefinition;
|
||||
|
||||
/**
|
||||
* @var array List configuration, keys for alias and value for config objects.
|
||||
*/
|
||||
protected $listConfig = [];
|
||||
|
||||
/**
|
||||
* @var \Backend\Classes\WidgetBase Reference to the list widget object.
|
||||
*/
|
||||
|
|
@ -102,7 +107,7 @@ class ListController extends ControllerBehavior
|
|||
$definition = $this->primaryDefinition;
|
||||
}
|
||||
|
||||
$listConfig = $this->makeConfig($this->listDefinitions[$definition], $this->requiredConfig);
|
||||
$listConfig = $this->controller->listGetConfig($definition);
|
||||
|
||||
/*
|
||||
* Create the model
|
||||
|
|
@ -279,7 +284,7 @@ class ListController extends ControllerBehavior
|
|||
throw new ApplicationException(Lang::get('backend::lang.list.missing_parent_definition', compact('definition')));
|
||||
}
|
||||
|
||||
$listConfig = $this->makeConfig($this->listDefinitions[$definition], $this->requiredConfig);
|
||||
$listConfig = $this->controller->listGetConfig($definition);
|
||||
|
||||
/*
|
||||
* Create the model
|
||||
|
|
@ -331,19 +336,35 @@ class ListController extends ControllerBehavior
|
|||
$definition = $this->primaryDefinition;
|
||||
}
|
||||
|
||||
$collection = [];
|
||||
$listConfig = $this->controller->listGetConfig($definition);
|
||||
|
||||
$vars = [
|
||||
'toolbar' => null,
|
||||
'filter' => null,
|
||||
'list' => null,
|
||||
'topPartial' => null,
|
||||
'sidePartial' => null
|
||||
];
|
||||
|
||||
if (isset($listConfig->topPartial)) {
|
||||
$vars['topPartial'] = $listConfig->topPartial;
|
||||
}
|
||||
|
||||
if (isset($listConfig->sidePartial)) {
|
||||
$vars['sidePartial'] = $listConfig->sidePartial;
|
||||
}
|
||||
|
||||
if (isset($this->toolbarWidgets[$definition])) {
|
||||
$collection[] = $this->toolbarWidgets[$definition]->render();
|
||||
$vars['toolbar'] = $this->toolbarWidgets[$definition];
|
||||
}
|
||||
|
||||
if (isset($this->filterWidgets[$definition])) {
|
||||
$collection[] = $this->filterWidgets[$definition]->render();
|
||||
$vars['filter'] = $this->filterWidgets[$definition];
|
||||
}
|
||||
|
||||
$collection[] = $this->listWidgets[$definition]->render();
|
||||
$vars['list'] = $this->listWidgets[$definition];
|
||||
|
||||
return implode(PHP_EOL, $collection);
|
||||
return $this->makePartial('list', $vars);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -377,6 +398,23 @@ class ListController extends ControllerBehavior
|
|||
return array_get($this->listWidgets, $definition);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the configuration used by this behavior.
|
||||
* @return \Backend\Classes\WidgetBase
|
||||
*/
|
||||
public function listGetConfig($definition = null)
|
||||
{
|
||||
if (!$definition) {
|
||||
$definition = $this->primaryDefinition;
|
||||
}
|
||||
|
||||
if (!$config = array_get($this->listConfig, $definition)) {
|
||||
$config = $this->listConfig[$definition] = $this->makeConfig($this->listDefinitions[$definition], $this->requiredConfig);
|
||||
}
|
||||
|
||||
return $config;
|
||||
}
|
||||
|
||||
//
|
||||
// Overrides
|
||||
//
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.export-behavior .export-columns {
|
||||
max-height: 400px;
|
||||
background: #f0f0f0;
|
||||
padding: 15px;
|
||||
padding: 20px;
|
||||
padding-bottom: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.export-columns {
|
||||
max-height: 400px;
|
||||
background: #f0f0f0;
|
||||
padding: 15px;
|
||||
padding: @padding-standard;
|
||||
padding-bottom: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
<?php if ($toolbar): ?>
|
||||
<?= $toolbar->render() ?>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($filter): ?>
|
||||
<?= $filter->render() ?>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($topPartial): ?>
|
||||
<?= $this->makePartial($topPartial) ?>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if ($sidePartial): ?>
|
||||
<div class="row row-flush">
|
||||
<div class="col-sm-3">
|
||||
<?= $this->makePartial($sidePartial) ?>
|
||||
</div>
|
||||
<div class="col-sm-9 list-with-sidebar">
|
||||
<?= $list->render() ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<?= $list->render() ?>
|
||||
<?php endif ?>
|
||||
|
|
@ -8,20 +8,18 @@
|
|||
<?= $this->makePartial('list_body_rows') ?>
|
||||
<?php else: ?>
|
||||
<tr class="no-data">
|
||||
<td colspan="<?= $columnTotal ?>" class="list-pagination nolink">
|
||||
<td colspan="<?= $columnTotal ?>" class="nolink">
|
||||
<p class="no-data"><?= $noRecordsMessage ?></p>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endif ?>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<?php if ($showPagination): ?>
|
||||
<tr>
|
||||
<td colspan="<?= $columnTotal ?>" class="list-pagination nolink">
|
||||
<?= $this->makePartial('list_pagination') ?>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endif ?>
|
||||
</tfoot>
|
||||
</table>
|
||||
<?php if ($showPagination): ?>
|
||||
<div class="list-footer">
|
||||
<div class="list-pagination">
|
||||
<?= $this->makePartial('list_pagination') ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
### Basic example
|
||||
|
||||
<div class="control-list list-unresponsive">
|
||||
<div class="control-list">
|
||||
<table class="table data">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
### Complete example
|
||||
|
||||
<div class="control-list list-unresponsive">
|
||||
<div class="control-list">
|
||||
<table class="table data" data-control="rowlink">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -120,22 +120,20 @@
|
|||
<td> </td>
|
||||
</tr>
|
||||
</body>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="8" class="list-pagination nolink">
|
||||
<div class="control-pagination">
|
||||
<span class="page-iteration">1-5 of 20</span>
|
||||
<a href="#" class="page-back" title="Previous page"></a><a href="#" class="page-next" title="Next page"></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="list-footer">
|
||||
<div class="list-pagination">
|
||||
<div class="control-pagination">
|
||||
<span class="page-iteration">1-5 of 20</span>
|
||||
<a href="#" class="page-back" title="Previous page"></a><a href="#" class="page-next" title="Next page"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Responsive list
|
||||
### Empty list
|
||||
|
||||
Lists are responsive by default and will collapse at a breakpoint of `980px`. This behavior can be disabled by adding the `list-unresponsive` class.
|
||||
Use the `no-data` class to display a list that contains no records.
|
||||
|
||||
<div class="control-list">
|
||||
<table class="table data">
|
||||
|
|
@ -143,33 +141,17 @@ Lists are responsive by default and will collapse at a breakpoint of `980px`. Th
|
|||
<tr>
|
||||
<th class="sort-desc"><a href="/">Title</a></th>
|
||||
<th class="active sort-asc"><a href="/">Created</a></th>
|
||||
<th><span>Categories</span></th>
|
||||
<th><span>Published</span></th>
|
||||
<th><span>Updated</span></th>
|
||||
<th class="list-setup"><a href="/" title="List options"></a></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-title="Title">Welcome to October</td>
|
||||
<td data-title="Created">Oct 01, 2013</td>
|
||||
<td data-title="Categories">News</td>
|
||||
<td data-title="Published">Oct 01, 2013</td>
|
||||
<td data-title="Updated">Oct 01, 2013</td>
|
||||
<td class="list-setup"> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="5" class="list-pagination nolink">
|
||||
<div class="control-pagination">
|
||||
<span class="page-iteration">
|
||||
Displayed records: 1-1 of 1
|
||||
</span>
|
||||
</div>
|
||||
<tr class="no-data">
|
||||
<td colspan="100" class="nolink">
|
||||
<p class="no-data">
|
||||
There are no records in this view.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
|
@ -177,7 +159,7 @@ Lists are responsive by default and will collapse at a breakpoint of `980px`. Th
|
|||
|
||||
The following colored classes are available to use on the table row elements.
|
||||
|
||||
<div class="control-list list-unresponsive">
|
||||
<div class="control-list">
|
||||
<table class="table data">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -203,7 +185,7 @@ The following colored classes are available to use on the table row elements.
|
|||
|
||||
It might be fun to include a status column!
|
||||
|
||||
<div class="control-list list-unresponsive">
|
||||
<div class="control-list">
|
||||
<table class="table data">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -252,7 +234,7 @@ It might be fun to include a status column!
|
|||
|
||||
You may link an entire row by adding the `data-control="rowlink"` attribute to the table element. The first table data (TD) column with an anchor will be used to link the entire row. To bypass this behavior, simply add the `nolink` class to the column.
|
||||
|
||||
<div class="control-list list-unresponsive">
|
||||
<div class="control-list">
|
||||
<table class="table data" data-control="rowlink">
|
||||
<tbody>
|
||||
<tr>
|
||||
|
|
@ -271,7 +253,7 @@ You may link an entire row by adding the `data-control="rowlink"` attribute to t
|
|||
|
||||
You may add a small button to a list column by adding the `column-button` class to the table data (TD) element.
|
||||
|
||||
<div class="control-list list-unresponsive">
|
||||
<div class="control-list">
|
||||
<table class="table data" data-control="rowlink">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -285,7 +267,7 @@ You may add a small button to a list column by adding the `column-button` class
|
|||
<a
|
||||
href="http://google.com"
|
||||
target="_blank"
|
||||
class="btn btn-default btn-sm">
|
||||
class="btn btn-secondary btn-sm">
|
||||
Open Google
|
||||
</a>
|
||||
</td>
|
||||
|
|
@ -298,4 +280,3 @@ You may add a small button to a list column by adding the `column-button` class
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,9 +33,10 @@ table.table.data {
|
|||
}
|
||||
|
||||
font-size: @font-size-base - 1;
|
||||
border-bottom: 1px solid @color-list-border;
|
||||
|
||||
&.no-offset-bottom {
|
||||
margin-bottom: 0!important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
thead {
|
||||
|
|
@ -268,7 +269,10 @@ table.table.data {
|
|||
}
|
||||
|
||||
tfoot {
|
||||
a { color: @color-list-text; text-decoration: none; }
|
||||
a {
|
||||
color: @color-list-text;
|
||||
text-decoration: none;
|
||||
}
|
||||
td, th {
|
||||
border-color: @color-list-border;
|
||||
padding: 10px 15px;
|
||||
|
|
@ -358,9 +362,13 @@ table.table.data {
|
|||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.control-list:last-child > table {
|
||||
.control-list:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control-list:last-child > table {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// List to sit flush to the element above (no toolbar)
|
||||
|
|
@ -372,11 +380,20 @@ table.table.data {
|
|||
}
|
||||
}
|
||||
|
||||
// List with sidebar
|
||||
.list-with-sidebar {
|
||||
table.table.data {
|
||||
border-left: 1px solid @color-list-border;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// List control
|
||||
//
|
||||
|
||||
.control-list {
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
p.no-data {
|
||||
padding: 18px 20px;
|
||||
margin: 0 20px;
|
||||
|
|
@ -388,6 +405,8 @@ table.table.data {
|
|||
}
|
||||
|
||||
table.table.data {
|
||||
margin-bottom: 0;
|
||||
|
||||
.list-setup {
|
||||
width: 48px;
|
||||
a {
|
||||
|
|
@ -409,19 +428,6 @@ table.table.data {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-pagination {
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
padding-top: 20px;
|
||||
|
||||
.loading-indicator {
|
||||
div {
|
||||
margin-left: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -439,6 +445,29 @@ table.table.data {
|
|||
}
|
||||
}
|
||||
|
||||
.list-footer {
|
||||
padding: 10px 15px;
|
||||
|
||||
a {
|
||||
color: @color-list-text;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.list-pagination {
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
padding-top: 10px;
|
||||
overflow: hidden; /* clearfix */
|
||||
|
||||
.loading-indicator {
|
||||
div {
|
||||
margin-left: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.report-widget {
|
||||
.table-container {
|
||||
margin: -15px;
|
||||
|
|
|
|||
|
|
@ -140,8 +140,8 @@
|
|||
> div.tab-content {
|
||||
> div.tab-pane {
|
||||
padding: @padding-standard 0 0 0;
|
||||
.clearfix();
|
||||
display: none;
|
||||
.clearfix();
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -2511,7 +2511,7 @@ table td[class*="col-"],table th[class*="col-"]{position:static;float:none;displ
|
|||
.table-responsive > .table-bordered > thead > tr > th:last-child,.table-responsive > .table-bordered > tbody > tr > th:last-child,.table-responsive > .table-bordered > tfoot > tr > th:last-child,.table-responsive > .table-bordered > thead > tr > td:last-child,.table-responsive > .table-bordered > tbody > tr > td:last-child,.table-responsive > .table-bordered > tfoot > tr > td:last-child{border-right:0}
|
||||
.table-responsive > .table-bordered > tbody > tr:last-child > th,.table-responsive > .table-bordered > tfoot > tr:last-child > th,.table-responsive > .table-bordered > tbody > tr:last-child > td,.table-responsive > .table-bordered > tfoot > tr:last-child > td{border-bottom:0}
|
||||
}
|
||||
table.table.data{font-size:13px}
|
||||
table.table.data{font-size:13px;border-bottom:1px solid #d4d8da}
|
||||
table.table.data.no-offset-bottom{margin-bottom:0 !important}
|
||||
table.table.data thead{background:#ffffff}
|
||||
table.table.data thead td,table.table.data thead th{border-width:1px;border-top:1px solid #d4d8da !important;border-bottom:2px solid #d4d8da !important;border-color:#d4d8da;padding:0;font-weight:normal;text-transform:uppercase;font-size:11px;white-space:nowrap}
|
||||
|
|
@ -2591,17 +2591,23 @@ table.table.data tr.list-tree-level-10 a.list-expand-collapse{left:120px}
|
|||
table.table.data tr.list-tree-level-10 td.list-cell-index-1{padding-left:125px}
|
||||
.list-preview{padding:0;margin-bottom:20px;background:white;border:1px solid #d4d8da}
|
||||
.list-preview .list-header:first-child{padding-top:20px}
|
||||
.list-preview .control-list:last-child > table{margin-bottom:0}
|
||||
.list-preview .control-list:last-child{margin-bottom:0}
|
||||
.list-preview .control-list:last-child > table{border-bottom:none}
|
||||
.list-flush table.table.data thead tr th{border-top:none !important}
|
||||
.list-with-sidebar table.table.data{border-left:1px solid #d4d8da}
|
||||
.control-list{margin-bottom:20px}
|
||||
.control-list p.no-data{padding:18px 20px;margin:0 20px;color:#555555;font-size:13px;text-align:center;font-weight:300;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
|
||||
.control-list table.table.data{margin-bottom:0}
|
||||
.control-list table.table.data .list-setup{width:48px}
|
||||
.control-list table.table.data .list-setup a{display:block;color:#000000}
|
||||
.control-list table.table.data .list-setup a:before{font-size:14px;line-height:14px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f0ca";display:inline-block;margin-left:8px;vertical-align:baseline;opacity:0.6;filter:alpha(opacity=60)}
|
||||
.control-list table.table.data .list-setup a:hover:before{opacity:1;filter:alpha(opacity=100);color:#4ea5e0 !important}
|
||||
.control-list table.table.data .list-pagination{font-size:14px;text-align:right;padding-top:20px}
|
||||
.control-list table.table.data .list-pagination .loading-indicator div{margin-left:20px;font-size:12px}
|
||||
.list-header{background-color:transparent;padding:0 20px 1px 20px}
|
||||
.list-header h3{font-size:14px;color:#7e8c8d;text-transform:uppercase;font-weight:600;margin-top:0;margin-bottom:15px}
|
||||
.list-footer{padding:10px 15px}
|
||||
.list-footer a{color:#666666;text-decoration:none}
|
||||
.list-footer .list-pagination{font-size:14px;text-align:right;padding-top:10px;overflow:hidden; }
|
||||
.list-footer .list-pagination .loading-indicator div{margin-left:20px;font-size:12px}
|
||||
.report-widget .table-container{margin:-15px}
|
||||
.report-widget .table-container table.table.data{margin-bottom:0}
|
||||
.report-widget .table-container table.table.data thead tr th{border-top:none !important}
|
||||
|
|
|
|||
Loading…
Reference in New Issue