Improvements to List widget, CSS classes can now be passed through

This commit is contained in:
Sam Georges 2014-07-31 19:34:38 +10:00
parent 3b96e50273
commit b10b41f3bf
6 changed files with 49 additions and 47 deletions

View File

@ -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 {

View File

@ -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);
}

View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -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) ?>

View File

@ -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 ?>