Skip to content

Commit

Permalink
[FIX] table column actions icon (#960)
Browse files Browse the repository at this point in the history 
* display popup icon before the column caption

* refactor TableColumn\Generic code for clarity and consistency

* refactor for more code clarity

* resolve conflicts

* fix wrap of caption and filter icon

* fix typo dot to comma
  • Loading branch information
@georgehristov
georgehristov authored Feb 18, 2020
1 parent d2bcda9 commit f4d5a13
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 64 deletions.
5 changes: 3 additions & 2 deletions public/agileui.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,8 @@ footer.atk-footer {

// table dropdown menu
.atk-table-dropdown {
margin-top: -10px;
margin-top: -8px;
float: left;
i {
opacity: 0.3;
vertical-align: bottom;
Expand All @@ -97,7 +98,7 @@ footer.atk-footer {
}

.atk-table-column-header {
padding-bottom: 4px;
white-space: break-spaces;
&:after {
//display: none;
font-style: normal;
Expand Down
111 changes: 49 additions & 62 deletions src/TableColumn/Generic.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
use atk4\ui\jsExpression;
use atk4\ui\Popup;
use atk4\data\Field;
use atk4\data\Model;

/**
* Implements Column helper for table.
Expand Down Expand Up @@ -80,11 +79,11 @@ public function __construct($defaults = [])
*
* @return mixed
*/
public function addPopup($popup = null, $icon = 'table-filter-off icon')
public function addPopup($popup = null, $icon = 'table-filter-off')
{
$id = $this->name.'_ac';

$popup = $this->table->owner->add($popup ? $popup : 'Popup')->setHoverable();
$popup = $this->table->owner->add($popup ?: 'Popup')->setHoverable();

$this->setHeaderPopup($icon, $id);

Expand Down Expand Up @@ -115,7 +114,7 @@ public function setHeaderPopup($class, $id)

$this->headerActionTag = ['div', ['class'=>'atk-table-dropdown'],
[
['i', ['id' => $id, 'class' => $class.' icon']],
['i', ['id' => $id, 'class' => $class.' icon'], ''],
],
];
}
Expand All @@ -127,10 +126,9 @@ public function setHeaderPopup($class, $id)
*/
public function setHeaderPopupIcon($icon)
{
$id = $this->name.'_ac';
$this->headerActionTag = ['div', ['class'=>'atk-table-dropdown'],
[
['i', ['id' => $id, 'class' => $icon.' icon']],
['i', ['id' => $this->name.'_ac', 'class' => $icon.' icon'], ''],
],
];
}
Expand All @@ -147,16 +145,12 @@ public function setHeaderPopupIcon($icon)
*/
public function addDropdown($items, $fx, $icon = 'caret square down', $menuId = null)
{
$menuITems = [];
$menuItems = [];
foreach ($items as $key => $item) {
if (is_int($key)) {
$menuITems[] = ['name' => $item, 'value' => $item];
} else {
$menuITems[] = ['name' => $key, 'value' => $item];
}
$menuItems[] = ['name' => is_int($key) ? $item : $key, 'value' => $item];
}

$cb = $this->setHeaderDropdown($menuITems, $icon, $menuId);
$cb = $this->setHeaderDropdown($menuItems, $icon, $menuId);

$cb->onSelectItem(function ($menu, $item) use ($fx) {
return call_user_func($fx, $item, $menu);
Expand Down Expand Up @@ -184,7 +178,7 @@ public function setHeaderDropdown($items, $icon = 'caret square down', $menuId =
[
[
'div', ['id' => $id, 'class'=>'ui top left pointing dropdown', 'data-menu-id' => $menuId],
[['i', ['class' => $icon.' icon']]],
[['i', ['class' => $icon.' icon'], '']],
],
],
];
Expand Down Expand Up @@ -257,13 +251,11 @@ public function setAttr($attr, $value, $position = 'body')
public function getTagAttributes($position, $attr = [])
{
// "all" applies on all positions
if (isset($this->attr['all'])) {
$attr = array_merge_recursive($attr, $this->attr['all']);
}

// specific position classes
if (isset($this->attr[$position])) {
$attr = array_merge_recursive($attr, $this->attr[$position]);
// $position is for specific position classes
foreach (['all', $position] as $key) {
if (isset($this->attr[$key])) {
$attr = array_merge_recursive($attr, $this->attr[$key]);
}
}

return $attr;
Expand Down Expand Up @@ -294,74 +286,69 @@ public function getTag($position, $value, $attr = [])
* Provided with a field definition (from a model) will return a header
* cell, fully formatted to be included in a Table. (<th>).
*
* @param Field $f
* @param Field $field
* @param mixed $value
*
* @return string
*/
public function getHeaderCellHTML(Field $f = null, $value = null)
public function getHeaderCellHTML(Field $field = null, $value = null)
{
$attr = [];
if (!$this->table) {
throw new \atk4\ui\Exception(['How $table could not be set??', 'f' => $f, 'value' => $value]);
throw new \atk4\ui\Exception(['How $table could not be set??', 'field' => $field, 'value' => $value]);
}

if ($tag = $this->table->hook('getColumnHeaderCell', [$this, $f, $value])) {
if ($tag = $this->table->hook('getColumnHeaderCell', [$this, $field, $value])) {
return $tag[0];
}

if ($f === null) {
if ($field === null) {
return $this->getTag('head', $this->caption ?: '', $this->table->sortable ? ['class' => ['disabled']] : []);
}

// if $this->caption is empty, header caption will be overriden by linked field definition
$captionHtmlTag = ['div', ['class' => 'atk-table-column-header'], empty($this->caption) ? $f->getCaption() : $this->caption];
$caption = $this->caption ?: $field->getCaption();

$attr = [
'data-column' => $this->columnData
];

$class = 'atk-table-column-header';

if ($this->hasHeaderAction) {
$attr['id'] = $this->name.'_th';

//add the action tag to the caption
$caption = [$this->headerActionTag, $caption];
}

// If table is being sorted by THIS column, set the proper class
$attr['data-column'] = $this->columnData;
if ($this->table->sortable) {
$attr['data-sort'] = $f->short_name;
if ($this->table->sort_by === $f->short_name) {
$captionHtmlTag[1]['class'] = $captionHtmlTag[1]['class'].' '.'sorted '.$this->table->sort_order;
$attr['data-sort'] = $field->short_name;
if ($this->table->sort_by === $field->short_name) {
$class .= ' sorted '.$this->table->sort_order;

if ($this->table->sort_order === 'ascending') {
$attr['data-sort'] = '-'.$f->short_name;
$attr['data-sort'] = '-'.$field->short_name;
} elseif ($this->table->sort_order === 'descending') {
$attr['data-sort'] = '';
}
}
}

if ($this->hasHeaderAction) {
$attr = array_merge($attr, ['id' => $this->name.'_th']);
$tag = $this->getTag(
'head',
[$captionHtmlTag,
$this->headerActionTag,
],
$attr
);
} else {
$tag = $this->getTag(
'head',
[$captionHtmlTag],
$attr
);
}

return $tag;
return $this->getTag('head', [['div', compact('class'), $caption]], $attr);
}

/**
* Return HTML for a total value of a specific field.
*
* @param Field $f
* @param mixed $value
* @param Field $field
* @param mixed $value
*
* @return string
*/
public function getTotalsCellHTML(Field $f, $value)
public function getTotalsCellHTML(Field $field, $value)
{
return $this->getTag('foot', $this->app->ui_persistence->typecastSaveField($f, $value));
return $this->getTag('foot', $this->app->ui_persistence->typecastSaveField($field, $value));
}

/**
Expand All @@ -376,13 +363,13 @@ public function getTotalsCellHTML(Field $f, $value)
* This method will be executed only once per table rendering, if you need to format data manually,
* you should use $this->table->addHook('formatRow');
*
* @param Field $f
* @param Field $field
*
* @return string
*/
public function getDataCellHTML(Field $f = null, $extra_tags = [])
public function getDataCellHTML(Field $field = null, $extra_tags = [])
{
return $this->getTag('body', [$this->getDataCellTemplate($f)], $extra_tags);
return $this->getTag('body', [$this->getDataCellTemplate($field)], $extra_tags);
}

/**
Expand All @@ -396,14 +383,14 @@ public function getDataCellHTML(Field $f = null, $extra_tags = [])
* applied to the same column. The first one to be applied is executed first, then
* a subsequent ones are executed.
*
* @param Field $f
* @param Field $field
*
* @return string
*/
public function getDataCellTemplate(Field $f = null)
public function getDataCellTemplate(Field $field = null)
{
if ($f) {
return '{$'.$f->short_name.'}';
if ($field) {
return '{$'.$field->short_name.'}';
} else {
return '{_$'.$this->short_name.'}';
}
Expand Down

0 comments on commit f4d5a13

Please sign in to comment.