mirror of
https://github.com/wintercms/winter.git
synced 2024-06-28 05:33:29 +02:00
Improvements to List widget, CSS classes can now be passed through
This commit is contained in:
parent
3b96e50273
commit
b10b41f3bf
@ -9178,151 +9178,151 @@ table.table.data .list-tree a.list-expand-collapse {
|
||||
table.table.data tr.list-tree-level-1 a.list-expand-collapse {
|
||||
left: 30px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-1 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-1 td.list-cell-index-1 {
|
||||
padding-left: 35px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-2 a.list-expand-collapse {
|
||||
left: 40px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-2 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-2 td.list-cell-index-1 {
|
||||
padding-left: 45px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-3 a.list-expand-collapse {
|
||||
left: 50px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-3 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-3 td.list-cell-index-1 {
|
||||
padding-left: 55px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-4 a.list-expand-collapse {
|
||||
left: 60px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-4 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-4 td.list-cell-index-1 {
|
||||
padding-left: 65px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-5 a.list-expand-collapse {
|
||||
left: 70px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-5 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-5 td.list-cell-index-1 {
|
||||
padding-left: 75px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-6 a.list-expand-collapse {
|
||||
left: 80px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-6 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-6 td.list-cell-index-1 {
|
||||
padding-left: 85px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-7 a.list-expand-collapse {
|
||||
left: 90px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-7 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-7 td.list-cell-index-1 {
|
||||
padding-left: 95px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-8 a.list-expand-collapse {
|
||||
left: 100px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-8 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-8 td.list-cell-index-1 {
|
||||
padding-left: 105px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-9 a.list-expand-collapse {
|
||||
left: 110px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-9 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-9 td.list-cell-index-1 {
|
||||
padding-left: 115px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-10 a.list-expand-collapse {
|
||||
left: 120px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-10 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-10 td.list-cell-index-1 {
|
||||
padding-left: 125px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-11 a.list-expand-collapse {
|
||||
left: 130px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-11 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-11 td.list-cell-index-1 {
|
||||
padding-left: 135px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-12 a.list-expand-collapse {
|
||||
left: 140px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-12 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-12 td.list-cell-index-1 {
|
||||
padding-left: 145px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-13 a.list-expand-collapse {
|
||||
left: 150px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-13 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-13 td.list-cell-index-1 {
|
||||
padding-left: 155px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-14 a.list-expand-collapse {
|
||||
left: 160px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-14 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-14 td.list-cell-index-1 {
|
||||
padding-left: 165px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-15 a.list-expand-collapse {
|
||||
left: 170px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-15 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-15 td.list-cell-index-1 {
|
||||
padding-left: 175px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-16 a.list-expand-collapse {
|
||||
left: 180px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-16 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-16 td.list-cell-index-1 {
|
||||
padding-left: 185px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-17 a.list-expand-collapse {
|
||||
left: 190px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-17 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-17 td.list-cell-index-1 {
|
||||
padding-left: 195px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-18 a.list-expand-collapse {
|
||||
left: 200px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-18 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-18 td.list-cell-index-1 {
|
||||
padding-left: 205px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-19 a.list-expand-collapse {
|
||||
left: 210px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-19 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-19 td.list-cell-index-1 {
|
||||
padding-left: 215px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-20 a.list-expand-collapse {
|
||||
left: 220px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-20 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-20 td.list-cell-index-1 {
|
||||
padding-left: 225px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-21 a.list-expand-collapse {
|
||||
left: 230px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-21 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-21 td.list-cell-index-1 {
|
||||
padding-left: 235px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-22 a.list-expand-collapse {
|
||||
left: 240px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-22 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-22 td.list-cell-index-1 {
|
||||
padding-left: 245px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-23 a.list-expand-collapse {
|
||||
left: 250px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-23 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-23 td.list-cell-index-1 {
|
||||
padding-left: 255px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-24 a.list-expand-collapse {
|
||||
left: 260px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-24 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-24 td.list-cell-index-1 {
|
||||
padding-left: 265px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-25 a.list-expand-collapse {
|
||||
left: 270px;
|
||||
}
|
||||
table.table.data tr.list-tree-level-25 td.list-data-column-1 {
|
||||
table.table.data tr.list-tree-level-25 td.list-cell-index-1 {
|
||||
padding-left: 275px;
|
||||
}
|
||||
.list-preview {
|
||||
|
@ -273,7 +273,7 @@ table.table.data {
|
||||
.makeTreeLevel(@count) when (@count < 26) {
|
||||
tr.list-tree-level-@{count} {
|
||||
a.list-expand-collapse { left: 20px + (10 * @count); }
|
||||
td.list-data-column-1 { padding-left: 25px + (10 * @count); }
|
||||
td.list-cell-index-1 { padding-left: 25px + (10 * @count); }
|
||||
}
|
||||
.makeTreeLevel(@count + 1);
|
||||
}
|
||||
|
@ -51,7 +51,7 @@ class ListColumn
|
||||
public $relation;
|
||||
|
||||
/**
|
||||
* @var string Specify a CSS class to attach to the list row element.
|
||||
* @var string Specify a CSS class to attach to the list cell element.
|
||||
*/
|
||||
public $cssClass;
|
||||
|
||||
@ -75,19 +75,29 @@ class ListColumn
|
||||
* - number - numeric column, aligned right
|
||||
* @param string $type Specifies a render mode as described above
|
||||
*/
|
||||
public function displayAs($type)
|
||||
public function displayAs($type, $config)
|
||||
{
|
||||
$this->type = $type;
|
||||
$this->type = strtolower($type) ?: $this->type;
|
||||
$this->config = $this->evalConfig($config);
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Specifies CSS classes to apply to the table row element.
|
||||
* Process options and apply them to this object.
|
||||
* @param array $config
|
||||
* @return array
|
||||
*/
|
||||
public function cssClass($class)
|
||||
protected function evalConfig($config)
|
||||
{
|
||||
$this->cssClass = $class;
|
||||
return $this;
|
||||
if (isset($config['cssClass'])) $this->cssClass = $config['cssClass'];
|
||||
if (isset($config['searchable'])) $this->searchable = $config['searchable'];
|
||||
if (isset($config['sortable'])) $this->sortable = $config['sortable'];
|
||||
if (isset($config['invisible'])) $this->invisible = $config['invisible'];
|
||||
if (isset($config['select'])) $this->sqlSelect = $config['select'];
|
||||
if (isset($config['relation'])) $this->relation = $config['relation'];
|
||||
if (isset($config['format'])) $this->format = $config['format'];
|
||||
|
||||
return $config;
|
||||
}
|
||||
|
||||
}
|
@ -502,18 +502,10 @@ class Lists extends WidgetBase
|
||||
else
|
||||
$label = studly_case($name);
|
||||
|
||||
$column = new ListColumn($name, $label);
|
||||
$columnType = isset($config['type']) ? $config['type'] : null;
|
||||
|
||||
/*
|
||||
* Process options
|
||||
*/
|
||||
if (isset($config['type'])) $column->type = $config['type'];
|
||||
if (isset($config['searchable'])) $column->searchable = $config['searchable'];
|
||||
if (isset($config['sortable'])) $column->sortable = $config['sortable'];
|
||||
if (isset($config['invisible'])) $column->invisible = $config['invisible'];
|
||||
if (isset($config['select'])) $column->sqlSelect = $config['select'];
|
||||
if (isset($config['relation'])) $column->relation = $config['relation'];
|
||||
if (isset($config['format'])) $column->format = $config['format'];
|
||||
$column = new ListColumn($name, $label);
|
||||
$column->displayAs($columnType, $config);
|
||||
|
||||
return $column;
|
||||
}
|
||||
|
@ -19,7 +19,7 @@
|
||||
|
||||
<?php $index = 0; foreach ($columns as $key => $column): ?>
|
||||
<?php $index++; ?>
|
||||
<td data-title="<?= e(trans($column->label)) ?>" class="list-data-column-<?= $index ?> list-data-column-<?= $column->columnName ?>">
|
||||
<td data-title="<?= e(trans($column->label)) ?>" class="list-cell-index-<?= $index ?> list-cell-name-<?= $column->columnName ?> list-cell-type-<?= $column->type ?> <?= $column->cssClass ?>">
|
||||
<?php if ($index == 1 && ($url = $this->getRecordUrl($record))): ?>
|
||||
<a <?= $this->getRecordOnClick($record) ?> href="<?= $url ?>">
|
||||
<?= $this->getColumnValue($record, $column) ?>
|
||||
|
@ -16,7 +16,7 @@
|
||||
|
||||
<?php foreach ($columns as $key => $column): ?>
|
||||
<?php if ($showSorting && $column->sortable): ?>
|
||||
<th class="<?= $this->sortColumn==$column->columnName?'sort-'.$this->sortDirection.' active':'sort-desc' ?> list-data-column-<?= $column->columnName ?>"">
|
||||
<th class="<?= $this->sortColumn==$column->columnName?'sort-'.$this->sortDirection.' active':'sort-desc' ?> list-cell-name-<?= $column->columnName ?>">
|
||||
<a
|
||||
href="javascript:;"
|
||||
data-request="<?= $this->getEventHandler('onSort') ?>"
|
||||
@ -26,7 +26,7 @@
|
||||
</a>
|
||||
</th>
|
||||
<?php else: ?>
|
||||
<th class="list-data-column-<?= $column->columnName ?>">
|
||||
<th class="list-cell-name-<?= $column->columnName ?>">
|
||||
<span><?= $this->getHeaderValue($column) ?></span>
|
||||
</th>
|
||||
<?php endif ?>
|
||||
|
Loading…
x
Reference in New Issue
Block a user