From 6c474bcae9e4ed08bdc693c070597c5df81ce20e Mon Sep 17 00:00:00 2001 From: Samuel Georges Date: Sat, 3 Sep 2016 12:13:38 +1000 Subject: [PATCH] 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) --- modules/backend/behaviors/ListController.php | 52 +++++++++++++-- .../assets/css/export.css | 2 +- .../assets/less/export.less | 2 +- .../listcontroller/partials/_list.htm | 24 +++++++ .../backend/widgets/lists/partials/_list.htm | 18 +++-- modules/system/assets/ui/docs/list.md | 65 +++++++------------ modules/system/assets/ui/less/list.less | 61 ++++++++++++----- modules/system/assets/ui/less/tab.less | 2 +- modules/system/assets/ui/storm.css | 14 ++-- 9 files changed, 158 insertions(+), 82 deletions(-) create mode 100644 modules/backend/behaviors/listcontroller/partials/_list.htm diff --git a/modules/backend/behaviors/ListController.php b/modules/backend/behaviors/ListController.php index 231693695..400cd6039 100644 --- a/modules/backend/behaviors/ListController.php +++ b/modules/backend/behaviors/ListController.php @@ -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 // diff --git a/modules/backend/behaviors/importexportcontroller/assets/css/export.css b/modules/backend/behaviors/importexportcontroller/assets/css/export.css index 1278b0efe..b90013ca4 100644 --- a/modules/backend/behaviors/importexportcontroller/assets/css/export.css +++ b/modules/backend/behaviors/importexportcontroller/assets/css/export.css @@ -1,7 +1,7 @@ .export-behavior .export-columns { max-height: 400px; background: #f0f0f0; - padding: 15px; + padding: 20px; padding-bottom: 0; overflow: auto; } diff --git a/modules/backend/behaviors/importexportcontroller/assets/less/export.less b/modules/backend/behaviors/importexportcontroller/assets/less/export.less index 3ff782ed5..5f2e9f1c7 100644 --- a/modules/backend/behaviors/importexportcontroller/assets/less/export.less +++ b/modules/backend/behaviors/importexportcontroller/assets/less/export.less @@ -5,7 +5,7 @@ .export-columns { max-height: 400px; background: #f0f0f0; - padding: 15px; + padding: @padding-standard; padding-bottom: 0; overflow: auto; } diff --git a/modules/backend/behaviors/listcontroller/partials/_list.htm b/modules/backend/behaviors/listcontroller/partials/_list.htm new file mode 100644 index 000000000..0c910b69f --- /dev/null +++ b/modules/backend/behaviors/listcontroller/partials/_list.htm @@ -0,0 +1,24 @@ + + render() ?> + + + + render() ?> + + + + makePartial($topPartial) ?> + + + +
+
+ makePartial($sidePartial) ?> +
+
+ render() ?> +
+
+ + render() ?> + diff --git a/modules/backend/widgets/lists/partials/_list.htm b/modules/backend/widgets/lists/partials/_list.htm index 04c2f4dc8..79d6f81e7 100644 --- a/modules/backend/widgets/lists/partials/_list.htm +++ b/modules/backend/widgets/lists/partials/_list.htm @@ -8,20 +8,18 @@ makePartial('list_body_rows') ?> - +

- - - - - makePartial('list_pagination') ?> - - - - + +
+
+ makePartial('list_pagination') ?> +
+
+ diff --git a/modules/system/assets/ui/docs/list.md b/modules/system/assets/ui/docs/list.md index 4a6d442cd..d2261a99c 100644 --- a/modules/system/assets/ui/docs/list.md +++ b/modules/system/assets/ui/docs/list.md @@ -1,6 +1,6 @@ ### Basic example -
+
@@ -25,7 +25,7 @@ ### Complete example -
+
@@ -120,22 +120,20 @@ - - - - -
 
-
- 1-5 of 20 - -
-
+
+
+
+ 1-5 of 20 + +
+
+
-### 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.
@@ -143,33 +141,17 @@ Lists are responsive by default and will collapse at a breakpoint of `980px`. Th - - - - - - - - - - - - - - - - + - +
Title CreatedCategoriesPublishedUpdated
Welcome to OctoberOct 01, 2013NewsOct 01, 2013Oct 01, 2013 
-
- - Displayed records: 1-1 of 1 - -
+
+

+ There are no records in this view. +

@@ -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. -
+
@@ -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! -
+
@@ -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. -
+
@@ -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. -
+
@@ -285,7 +267,7 @@ You may add a small button to a list column by adding the `column-button` class + class="btn btn-secondary btn-sm"> Open Google @@ -298,4 +280,3 @@ You may add a small button to a list column by adding the `column-button` class
- diff --git a/modules/system/assets/ui/less/list.less b/modules/system/assets/ui/less/list.less index 338f8d289..0837f8fed 100644 --- a/modules/system/assets/ui/less/list.less +++ b/modules/system/assets/ui/less/list.less @@ -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; diff --git a/modules/system/assets/ui/less/tab.less b/modules/system/assets/ui/less/tab.less index a01afd2c2..131d4d445 100644 --- a/modules/system/assets/ui/less/tab.less +++ b/modules/system/assets/ui/less/tab.less @@ -140,8 +140,8 @@ > div.tab-content { > div.tab-pane { padding: @padding-standard 0 0 0; - .clearfix(); display: none; + .clearfix(); &.active { display: block; diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index 5e9ca98e9..9c81b4c3a 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -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}