Clarity: Design and implement a Tree view

[lil-kim]

Select one ... (check one with "x")

[ ] bug
[x] feature request
[ ] enhancement

Expected behavior

Design and implement a tree view with options for icons or checkboxes in the nodes. See attached files for and visual spec and behavior info.

Types of trees and Behavior

Terminology
Highlight = Click the text node to navigate to that content.
Select = Choose items to apply an action to, ie: via checkboxes.

View Tree
1 click target.
Clicking the caret expands or collapses the list.
This tree is view only, nodes can’t be highlighted or selected.

Basic Tree with or without icons
2 click targets: 1) caret, 2) text (plus icons, when present).
Clicking the caret expands or collapses the list.
User can highlight just the text to navigate to that content.
Multi-selection is not supported.

Checkbox Tree
3 click targets: 1) caret, 2) checkbox, 3) text
Multi-selection supported via checkboxes
Text nodes can be highlighted to navigate to content

Loading Behavior

Cursor:
Hover/click over caret: Cursor doesn’t change (standard arrow). Color of caret changes to #000000 on hover/click.

Hover over text: Cursor changes to hand, row BG color: #EEEEEE (hover); #D9E4EA (select)

Loading spinner position:
Upon click, caret is replaced by the spinner.

Animation
Caret should animate smoothly in a 90° arc.
When expanded, the child nodes should cascade in from top to bottom

Reproduction of behavior

Environment details

• Angular version: 2.0.X

• Clarity version:

• OS and version:

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[adityarb88]

@youdz and I discussed the following use cases/examples that we plan to cover during implementation:

1. Basic Example

<clr-tree-node>
    A1
    <clr-tree-node>
        B1
        <clr-tree-node>C1</clr-tree-node>
        <clr-tree-node>C2</clr-tree-node>
        <clr-tree-node>C3</clr-tree-node>
    </clr-tree-node>

    <clr-tree-node>
        B2
        <clr-tree-node>D1</clr-tree-node>
        <clr-tree-node>D2</clr-tree-node>
        <clr-tree-node>D3</clr-tree-node>
    </clr-tree-node>

    <clr-tree-node>
        B3
        <clr-tree-node>E1</clr-tree-node>
        <clr-tree-node>E2</clr-tree-node>
        <clr-tree-node>E3</clr-tree-node>
    </clr-tree-node>
</clr-tree-node>

2. Dynamic Example

<clr-tree-node *ngFor="let i of rootNodes">
    {{i.name}}
    <clr-tree-node *ngFor="let j of i.children">
        {{j.name}}
        <clr-tree-node *ngFor="let k of j.children">
            {{k.name}}
        </clr-tree-node>
    </clr-tree-node>
</clr-tree-node>

3. Label changing on expand

<clr-tree-node [(clrTreeExpanded)]="expanded">
    {{expanded ? "I am expanded" : "I am collapsed"}}

    <clr-tree-node>...</clr-tree-node>
    ...
</clr-tree-node>

4. Lazy loading of children

<clr-tree-node *ngFor="let node of rootNodes" [clrTreeExpandable]="true"
    (clrTreeExpandedChange)="toggleChildren(node, $event)">
    {{node.name}}

    <clr-tree-node *ngFor="let child of node.children">
        {{child.name}}
    </clr-tree-node>
</clr-tree-node>


toggleChildren(node: MyNode, value: boolean) {
    if (value) {
        node.children = this.fetchChildren(node);
    } else {
        this.discardChildren(node);
    }
}

5. Selection, node by node

<clr-tree-node *ngFor="let i of rootNodes"
    [(clrTreeNodeSelected)]="i.selected">
    {{i.name}}

    <clr-tree-node *ngFor="let j of i.children"
        [(clrTreeNodeSelected)]="j.selected">
        {{j.name}}

    <clr-tree-node *ngFor="let k of j.children"
        [(clrTreeNodeSelected)]="i.selected">
        {{k.name}}
        </clr-tree-node>
    </clr-tree-node>
</clr-tree-node>

6. Selection, as a global variable

<clr-tree [(clrTreeSelected)]="selection">
    <clr-tree-node *ngFor="let i of rootNodes" [clrTreeModel]="i">
        {{i.name}}

        <clr-tree-node *ngFor="let j of i.children" [clrTreeModel]="j">
            {{j.name}}

            <clr-tree-node *ngFor="let k of j.children" [clrTreeModel]="k">
                {{k.name}}
            </clr-tree-node>
        </clr-tree-node>
    </clr-tree-node>
</clr-tree>

Selection is of type:

class TreeSelection {
    public model: any;
    public selected: boolean;
    public children: TreeSelection[];

    public flatten(): any[];
}

Please note that this is an initial draft and might be updated if needed

cc: @jaffoneh

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.