Improve list tree styling and minor fix

Fixes bug with non standard primary key on model when using tree mode
Fixes #2532
Recompile assets
This commit is contained in:
Samuel Georges 2016-12-10 13:19:32 +11:00
parent e8ba7fef5b
commit b85c4f9b7b
6 changed files with 41 additions and 34 deletions

View File

@ -1,10 +1,9 @@
<?php
if ($showTree) {
$expanded = $this->isTreeNodeExpanded($record);
$childRecords = $record->getChildren();
}
$expanded = $showTree ? $this->isTreeNodeExpanded($record) : null;
$childRecords = $showTree ? $record->getChildren() : null;
$treeLevelClass = $showTree ? 'list-tree-level-'.$treeLevel : '';
?>
<tr class="list-tree-level-<?= $treeLevel ?> <?= $this->getRowClass($record) ?>">
<tr class="<?= $treeLevelClass ?> <?= $this->getRowClass($record) ?>">
<?php if ($showCheckboxes): ?>
<?= $this->makePartial('list_body_checkbox', ['record' => $record]) ?>
<?php endif ?>

View File

@ -4,7 +4,7 @@
class="list-expand-collapse"
data-request="<?= $this->getEventHandler('onToggleTreeNode') ?>"
data-stripe-load-indicator
data-request-data="node_id: '<?= $record->id ?>', status: <?= $expanded ? 1 : 0 ?>">
data-request-data="node_id: '<?= $record->getKey() ?>', status: <?= $expanded ? 1 : 0 ?>">
<?php if (!$childCount): ?>
<i class="icon-square-o"></i>
<?php elseif ($expanded): ?>

View File

@ -144,6 +144,7 @@ table.table.data {
border-left: 3px solid transparent;
padding-left: 22px;
}
tr.active td {
color: @color-list-text-active;
@ -151,6 +152,7 @@ table.table.data {
border-left: 3px solid @color-list-stripe-active;
}
}
tr.rowlink:hover td, tr:not(.no-data).selected td, {
background: @color-list-hover-bg !important;
text-shadow: 0 -1px 0 @highlight-hover-text-shadow;
@ -160,6 +162,7 @@ table.table.data {
color: @highlight-hover-text;
}
}
tr.rowlink:active td {
text-shadow: 0 -1px 0 @highlight-active-text-shadow;
background: @color-list-active-bg !important;
@ -370,27 +373,29 @@ table.table.data {
.list-tree {
width: 10px;
padding: 0;
padding-left: 0 !important;
vertical-align: middle;
a.list-expand-collapse {
padding: 5px;
display: block;
text-align: center;
font-size: 18px;
font-size: 14px;
position: relative;
top: 5px;
left: 10px;
text-decoration: none !important;
color: @color-list-text-tree;
}
}
// Tree levels 1 - 10
.makeTreeLevel(@count) {
tr.list-tree-level-@{count} {
a.list-expand-collapse { left: 20px + (10 * @count); }
td.list-cell-index-1 { padding-left: 25px + (10 * @count); }
a.list-expand-collapse { left: 10px + (10 * @count); }
td.list-cell-index-1 { padding-left: 15px + (10 * @count); }
}
}
.makeTreeLevel(0);
.makeTreeLevel(1);
.makeTreeLevel(2);
.makeTreeLevel(3);

View File

@ -27,6 +27,7 @@
@color-list-text-head: #666666;
@color-list-text: #666666;
@color-list-text-active: #000000;
@color-list-text-tree: #999999;
@color-list-stripe-active: #ff9933;
@color-list-accent: #ECF0F1;
@color-list-norecords-text: #555555;

View File

@ -2628,7 +2628,7 @@ function removeElement(){$element.remove()}
function remove(){window.clearInterval(timer)
$element.removeClass('in')
$.support.transition&&$element.hasClass('fade')?$element.one($.support.transition.end,removeElement).emulateTransitionEnd(500):removeElement()}}
FlashMessage.DEFAULTS={class:'success',text:'Default text',interval:2}
FlashMessage.DEFAULTS={class:'success',text:'Default text',interval:5}
if($.oc===undefined)
$.oc={}
$.oc.flashMsg=FlashMessage

View File

@ -2629,28 +2629,30 @@ table.table.data .list-checkbox .custom-checkbox{position:relative;top:-14px;lef
table.table.data .list-checkbox .custom-checkbox label{margin-right:0;margin-bottom:0}
table.table.data tbody tr td.list-checkbox{padding-left:17px;padding-right:3px}
table.table.data thead tr th.list-checkbox{padding:18px 0 0 20px}
table.table.data .list-tree{width:10px;padding:0}
table.table.data .list-tree a.list-expand-collapse{padding:5px;display:block;text-align:center;font-size:18px;position:relative;top:5px;left:10px;text-decoration:none !important}
table.table.data tr.list-tree-level-1 a.list-expand-collapse{left:30px}
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-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-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-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-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-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-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-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-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-cell-index-1{padding-left:125px}
table.table.data .list-tree{width:10px;padding:0;padding-left:0 !important;vertical-align:middle}
table.table.data .list-tree a.list-expand-collapse{padding:5px;display:block;text-align:center;font-size:14px;position:relative;text-decoration:none !important;color:#999999}
table.table.data tr.list-tree-level-0 a.list-expand-collapse{left:10px}
table.table.data tr.list-tree-level-0 td.list-cell-index-1{padding-left:15px}
table.table.data tr.list-tree-level-1 a.list-expand-collapse{left:20px}
table.table.data tr.list-tree-level-1 td.list-cell-index-1{padding-left:25px}
table.table.data tr.list-tree-level-2 a.list-expand-collapse{left:30px}
table.table.data tr.list-tree-level-2 td.list-cell-index-1{padding-left:35px}
table.table.data tr.list-tree-level-3 a.list-expand-collapse{left:40px}
table.table.data tr.list-tree-level-3 td.list-cell-index-1{padding-left:45px}
table.table.data tr.list-tree-level-4 a.list-expand-collapse{left:50px}
table.table.data tr.list-tree-level-4 td.list-cell-index-1{padding-left:55px}
table.table.data tr.list-tree-level-5 a.list-expand-collapse{left:60px}
table.table.data tr.list-tree-level-5 td.list-cell-index-1{padding-left:65px}
table.table.data tr.list-tree-level-6 a.list-expand-collapse{left:70px}
table.table.data tr.list-tree-level-6 td.list-cell-index-1{padding-left:75px}
table.table.data tr.list-tree-level-7 a.list-expand-collapse{left:80px}
table.table.data tr.list-tree-level-7 td.list-cell-index-1{padding-left:85px}
table.table.data tr.list-tree-level-8 a.list-expand-collapse{left:90px}
table.table.data tr.list-tree-level-8 td.list-cell-index-1{padding-left:95px}
table.table.data tr.list-tree-level-9 a.list-expand-collapse{left:100px}
table.table.data tr.list-tree-level-9 td.list-cell-index-1{padding-left:105px}
table.table.data tr.list-tree-level-10 a.list-expand-collapse{left:110px}
table.table.data tr.list-tree-level-10 td.list-cell-index-1{padding-left:115px}
.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{margin-bottom:0}