Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ZK-4494: Tree shall provide enough information to decorate lines with CSS #3051

Merged
merged 2 commits into from
Sep 14, 2023
Merged

ZK-4494: Tree shall provide enough information to decorate lines with CSS #3051

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d10b3df
ZK-4494: Tree shall provide enough information to decorate lines with…
rebecca0201 Sep 12, 2023
7cc7cfe
Merge branch '10-experiment' into F100-ZK-4494
jumperchen Sep 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions zkdoc/release-note
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ ZK 10.0.0
ZK-5541: Move widget restriction check to Client MVVM
ZK-5354: Update animation implementation to avoid iframe reloading
ZK-4969: dropupload supports accept file type
ZK-4494: Tree shall provide enough information to decorate lines with CSS

* Bugs
ZK-5089: AfterSizeEvent doesn't return a correct size of a Window component
Expand Down
181 changes: 181 additions & 0 deletions zktest/src/main/webapp/test2/F100-ZK-4494-1.zul
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
F100-ZK-4494-1.zul

Purpose:

Description:

History:
Mon Sep 11 18:15:20 CST 2023, Created by rebeccalai

Copyright (C) 2023 Potix Corporation. All Rights Reserved.
-->
<zk>
<label multiline="true">
1. Click the toggle visible and move out/back button
2. Check that the lines decorate the tree structure correctly
3. Please ignore the small gaps between lines, they are caused by different row heights
</label>

<style src="/test2/css/F100-ZK-4494-Style.css"/>

<tree>
<treecols>
<treecol id="tcola" label="A" />
</treecols>
<treechildren>
<treeitem id="ti0" selected="true">
<treerow>
<treecell label="A"/>
</treerow>
<treechildren>
<treeitem selected="true">
<treerow>
<treecell label="A-1">
<button label="toggle A-1-2 Visible" onClick="a12.setVisible(!a12.isVisible())"/>
</treecell>
</treerow>
<treechildren>
<treeitem selected="true">
<treerow>
<treecell label="A-1-1">
<button label="toggle A-1-1-2 Visible" onClick="a112.setVisible(!a112.isVisible())"/>
</treecell>
</treerow>
<treechildren>
<treeitem selected="true">
<treerow>
<treecell label="A-1-1-1"/>
</treerow>
</treeitem>
<treeitem id="a112">
<treerow>
<treecell label="A-1-1-2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem id="a12">
<treerow>
<treecell label="A-1-2">
<button label="toggle A-1-2-2 Visible" onClick="a122.setVisible(!a122.isVisible())"/>
</treecell>
</treerow>
<treechildren>
<treeitem selected="true">
<treerow>
<treecell label="A-1-2-1"/>
</treerow>
</treeitem>
<treeitem id="a122">
<treerow>
<treecell label="A-1-2-2" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="A-1-2-3">
<button label="toggle treerow A-1-2-3-1 Visible" onClick="a1231.setVisible(!a1231.isVisible())"/>
</treecell>
</treerow>
<treechildren>
<treeitem selected="true">
<treerow id="a1231">
<treecell label="A-1-2-3-1"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="A-1-2-3-2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="A-2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="B" />
</treerow>
<treechildren>
<treeitem selected="true">
<treerow>
<treecell label="B-1" />
</treerow>
<treechildren id="tc">
<treeitem selected="true">
<treerow>
<treecell label="B-1-1" />
</treerow>
<treechildren id="tc2">
<treeitem selected="true">
<treerow>
<treecell label="B-1-1-1" />
</treerow>
</treeitem>
<treeitem id="ti">
<treerow>
<treecell label="B-1-1-2" >
<button label="move out" onClick="ti.setParent(tc)"/>
<button label="move back" onClick="ti.setParent(tc2)"/>
</treecell>
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="B-1-2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="B-2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem>
<treerow>
<treecell label="C" />
</treerow>
</treeitem>
</treechildren>
</tree>
<tree checkmark="true" multiple="true">
<treecols>
<treecol label="A" />
</treecols>
<treechildren>
<treeitem selected="true">
<treerow>
<treecell label="A" />
</treerow>
<treechildren>
<treeitem selected="true">
<treerow>
<treecell label="A-1" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="A-2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree>
</zk>
51 changes: 51 additions & 0 deletions zktest/src/main/webapp/test2/F100-ZK-4494.zul
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
F100-ZK-4494.zul

Purpose:

Description:

History:
Tue Sep 05 15:40:03 CST 2023, Created by rebeccalai

Copyright (C) 2023 Potix Corporation. All Rights Reserved.
-->
<zk>
<label multiline="true">
1. Check that the lines decorate the tree structure correctly
</label>

<style src="/test2/css/F100-ZK-4494-Style.css"/>

<tree>
<treechildren>
<treeitem label="item 1">
<treechildren>
<treeitem label="item 1.1"/>
<treeitem label="item 1.2">
<treechildren>
<treeitem label="item 1.2.1"/>
<treeitem label="item 1.2.2">
<treechildren>
<treeitem label="item 1.2.2.1"/>
<treeitem label="item 1.2.2.2"/>
<treeitem label="item 1.2.2.3"/>
</treechildren>
</treeitem>
<treeitem label="item 1.2.3"/>
</treechildren>
</treeitem>
<treeitem label="item 1.3">
<treechildren>
<treeitem label="item 1.3.1"/>
<treeitem label="item 1.3.2"/>
</treechildren>
</treeitem>
</treechildren>
</treeitem>
<treeitem label="item 2"/>
<treeitem label="item 3"/>
</treechildren>
</tree>
</zk>
2 changes: 2 additions & 0 deletions zktest/src/main/webapp/test2/config.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3784,6 +3784,8 @@ F86-ZK-4235.zul=A,E,datefmt,library-property
##zats##F100-ZK-5354.zul=A,E,Iframe,Animation,reload
##zats##F100-ZK-5354-2.zul=A,E,Ckeditor,Animation,reload
##manually##F100-ZK-4969.zul=A,E,Dropupload,accept,type
##manually##F100-ZK-4494.zul=A,E,Tree,CSS
##manually##F100-ZK-4494-1.zul=A,E,Tree,CSS

# Complex Test Case
#
Expand Down
31 changes: 31 additions & 0 deletions zktest/src/main/webapp/test2/css/F100-ZK-4494-Style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.z-treecell-content > span {
position: relative;
}

.z-treerow, .z-treecell, .z-treecell-content {
overflow: visible !important;
}

/* vertical lines */
span.z-tree-spacer::before {
left: 50%;
bottom: 50%;
width: 100%;
height: 280%;
content: "";
position: absolute;
display: inline-block;
border-left: 1px solid black;
}

/* horizontal lines */
span:nth-last-of-type(3).z-tree-spacer::before,
span:nth-last-of-type(3).z-tree-spacer + span.z-tree-spacer::before {
border-bottom: 1px solid black;
}

/* omitted vertical lines */
span.z-tree-line-omit::before,
span:nth-last-of-type(2).z-tree-spacer::before {
border-left: none;
}
13 changes: 8 additions & 5 deletions zul/src/main/resources/web/js/zul/sel/Treecell.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,9 +218,11 @@ export class Treecell extends zul.LabelImageWidget<HTMLTableCellElement> {
}
var iconScls = tree ? tree.getZclass() : '',
pitems = this._getTreeitems(item, tree);
for (var j = 0, k = pitems.length; j < k; ++j)
this._appendIcon(sb, iconScls, 'spacer', false);

for (var j = 0, k = pitems.length; j < k; ++j) {
// ZK-4494: Add information about whether a line should be omitted when decorating
const omit = j < k - 1 && pitems[j + 1].treerow?.isLastVisibleChild_();
this._appendIcon(sb, iconScls, 'spacer', false, omit);
}
if (item.isContainer()) {
var name = item.isOpen() ? 'open' : 'close';
this._appendIcon(sb, iconScls, name, true);
Expand Down Expand Up @@ -251,11 +253,12 @@ export class Treecell extends zul.LabelImageWidget<HTMLTableCellElement> {
}

/** @internal */
_appendIcon(sb: string[], iconScls: string, name: string, button: boolean): void {
_appendIcon(sb: string[], iconScls: string, name: string, button: boolean, omit?: boolean): void {
var openCloseIcon = '';
sb.push('<span class="');
if (name == 'spacer') {
sb.push(iconScls, '-line ', iconScls, '-', name, '"');
// ZK-4494: Add information about whether a line should be omitted when decorating lines
sb.push(iconScls, '-line ', iconScls, '-', name, omit ? (' ' + iconScls + '-line-omit') : '', '"');
} else {
var id = '';
if (button) {
Expand Down
8 changes: 8 additions & 0 deletions zul/src/main/resources/web/js/zul/sel/Treechildren.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,4 +298,12 @@ export class Treechildren extends zul.Widget {
}
child.bind(desktop, skipper);
}

/** @internal */
getLastVisibleItem_(): zul.sel.Treeitem | undefined {
for (let w = this.lastChild; w; w = w.previousSibling) {
if (w._isVisibleInTree()) return w;
}
return undefined;
}
}
6 changes: 6 additions & 0 deletions zul/src/main/resources/web/js/zul/sel/Treerow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,4 +147,10 @@ export class Treerow extends zul.Widget<HTMLTableRowElement> {
}
}
}

/** @internal */
isLastVisibleChild_(): boolean {
const treeitem = this.parent;
return !!treeitem && treeitem == treeitem.parent?.getLastVisibleItem_();
}
}