feat(tree): Add material styled tree #8458

tinayuangao · 2017-11-15T20:55:49Z

Demo: https://mat-tree-tina-demo.firebaseapp.com/tree

TishchenkoAlex · 2017-11-15T22:08:24Z

src/cdk/tree/control/nested-tree-control.ts

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.io/license
 */
 import {Observable} from 'rxjs/Observable';
-import {first} from 'rxjs/operators';
+import {first} from 'rxjs/operators/first';


#8352
according to this PR "take(1)" may be better than "first" operator

rafaelss95 · 2017-11-16T00:24:28Z

src/lib/tree/tree.spec.ts

+import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+import {Observable} from 'rxjs/Observable';
+import {combineLatest} from 'rxjs/observable/combineLatest';
+import {map} from 'rxjs/operators';


Add /map?

jelbourn · 2017-11-16T21:47:42Z

@tinayuangao rebase?

benb7760 · 2017-11-16T21:54:41Z

looks like it has been rebased onto master instead of onto tree

tinayuangao · 2017-11-16T22:06:14Z

Rebased. Please take a look. Thanks!

mmalerba · 2017-11-20T23:10:52Z

Could you add a material tree demo to the demo app? It's kind of hard to reason about the CSS without being able to see a demo

jelbourn · 2017-11-21T04:23:40Z

src/cdk/tree/tree.ts

@@ -214,7 +214,9 @@ export class CdkTree<T> implements CollectionViewer, OnInit, OnDestroy {
    // Set the data to just created `CdkTreeNode`.
    // The `CdkTreeNode` created from `createEmbeddedView` will be saved in static variable
    //     `mostRecentTreeNode`. We get it from static variable and pass the node data to it.
-    CdkTreeNode.mostRecentTreeNode.data = nodeData;
+    if (CdkTreeNode.mostRecentTreeNode) {


Under what circumstances would this be undefined?

We have to initialize mostRecentTreeNode because of the error /usr/local/google/home/tinagao/WebstormProjects/material2/src/cdk/tree/node.ts:79:10: Metadata collected contains an error that will be reported at runtime: Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler.

So I initialize the static variable to be null, and we have to check whether it's null here.

But the value shouldn't be null or undefined when we call it from tree.ts

jelbourn · 2017-11-21T04:26:10Z

src/lib/tree/node.ts

+import {MatTreeNodeOutlet} from './outlet';
+
+
+/** Workaround for https://github.com/angular/angular/issues/17849 */


That issue is closed- is this still necessary? If so we should file a new issue.

jelbourn · 2017-11-21T04:27:14Z

src/lib/tree/node.ts

+  host: {
+    '[attr.role]': 'role',
+    'class': 'mat-tree-node',
+    'tabindex': '0',


Add TODO for applying mixinTabIndex?

jelbourn · 2017-11-21T04:28:59Z

src/lib/tree/outlet.ts

+@Directive({
+  selector: '[matTreeNodeOutlet]'
+})
+export class MatTreeNodeOutlet {


Should add here implements CdkTreeNodeOutlet to make sure they stay the same API

jelbourn · 2017-11-21T04:33:56Z

src/lib/tree/tree-module.ts

+import {MatTreeNodeOutlet} from './outlet';
+import {MatTreeNodePadding} from './padding';
+
+const EXPORTED_DECLARATIONS = [


MAT_TREE_DIRECTIVES?

googlebot · 2017-11-21T19:43:34Z

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this State. It's up to you to confirm consent of the commit author(s) and merge this pull request when appropriate.

jelbourn · 2017-11-27T19:39:29Z

src/lib/tree/tree.md

+
+### TreeControl
+
+The `TreeControl` expand/collapse of the tree node. Users can expand/collapse a tree node


The first sentence sounds like it's missing something.

The `TreeControl` controls the expand/collapse state of tree nodes.

After that, it would be good to explain the two types of TreeControl and when they'd be used before going into further detail

jelbourn · 2017-11-27T19:43:47Z

src/lib/tree/tree.md

+
+The trigger can be placed anywhere in the tree node, and is only triggered by `click` action. 
+
+The trigger is also work with both flat tree and nested tree.


I think you can omit this last sentence about the trigger; if we don't say anything, the default would be that it can be used in either.

jelbourn · 2017-11-27T19:44:16Z

src/lib/tree/tree.md

+
+This tree builds on the foundation of the CDK tree and uses a similar interface for its
+data source input and template, except that its element and attribute selectors will be prefixed 
+with `mat-` instead of `cdk-`.


Do you plan on adding examples in a follow-up PR?

Yes. I can add placeholders

jelbourn · 2017-11-27T19:45:55Z

src/lib/tree/tree.md

+`aria-labelledby`. The `aria-readonly` defaults to `true` if it's not set.
+
+Tree's role is `tree`.
+Node's default role is `treeitem`, and it will be changed to `group` if it has descendant nodes.


I would phrase this as

Parent nodes are given `role="group"`, while leaf nodes are given `role="treeitem"`

jelbourn · 2017-11-27T19:46:23Z

src/lib/tree/tree.md

+
+### Padding
+
+The `matTreeNodePadding` can be placed in a flat tree's node template to display the `level` 


I'd more strongly emphasize that this is only for flat variations

jelbourn · 2017-11-27T19:47:02Z

src/lib/tree/tree.md

+The `mat-tree` provides a Material Design styled tree that can be used to display hierarchy
+data.
+
+This tree builds on the foundation of the CDK tree and uses a similar interface for its


I would mention the concept of flat vs. nested trees here, as early as possible.

Added flat tree and nested tree part. Please take a look. Thanks!

jelbourn · 2017-11-28T00:42:13Z

src/lib/tree/tree.md

+two types of trees.
+
+#### Flat tree
+Flat tree has a list of flattened tree nodes. The hierarchy are flattened and no tree node is placed


In a flat tree, the hierarchy is flattened; nodes are not rendered inside of each other, but instead are rendered as siblings in sequence. An instance of `TreeFlattener` is used to generate the flat list of items from hierarchical data. The "level" of each tree node is read through the `getLevel` method of the `TreeControl`; this level can be used to style the node such that it is indented to the appropriate level.

Is that accurate?

jelbourn · 2017-11-28T00:44:04Z

src/lib/tree/tree.md

+    <mat-tree-node> -- child node2 </mat-tree-node>
+</mat-tree>
+```
+A flat tree is easier to implement virtual scrolling in the future or render only part of the tree.


Flat trees are generally easier to style and inspect. They are also more friendly to scrolling variations, such as infinite or virtual scrolling

jelbourn · 2017-11-28T00:45:47Z

src/lib/tree/tree.md

+</mat-tree>
+```
+
+A nested tree is easier to decorate to show hierarchy information.


Maybe

Nested trees are easier to work with when hierarchical relationships are visually represented in ways that would be difficult to accomplish with flat nodes.

?

jelbourn · 2017-11-28T00:46:31Z

src/lib/tree/tree.md

+### Simple Tree
+
+In the near future, we will provide a simplified version of the tree with an easy-to-use
+interface, material styling, and json input.


I would leave out this section; I want to avoid talking about future stuff in the docs

tinayuangao · 2017-11-28T01:00:13Z

Updated the document. Please take a look. Thanks!

jelbourn

LGTM

angular-automatic-lock-bot · 2019-09-07T19:02:19Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

tinayuangao requested review from crisbeto and jelbourn as code owners November 15, 2017 20:55

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Nov 15, 2017

tinayuangao requested a review from andrewseguin November 15, 2017 20:55

tinayuangao added the pr: needs review label Nov 15, 2017

TishchenkoAlex reviewed Nov 15, 2017

View reviewed changes

rafaelss95 reviewed Nov 16, 2017

View reviewed changes

tinayuangao force-pushed the mat-tree branch from bfcc824 to 3da64a9 Compare November 16, 2017 18:28

tinayuangao requested review from devversion, josephperrott and mmalerba as code owners November 16, 2017 18:28

googlebot added cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Nov 16, 2017

tinayuangao force-pushed the mat-tree branch from 3da64a9 to 841b589 Compare November 16, 2017 18:58

tinayuangao force-pushed the tree branch from 4a160c7 to 29a4dd4 Compare November 16, 2017 22:00

tinayuangao force-pushed the mat-tree branch from 841b589 to ba4ddb2 Compare November 16, 2017 22:05

mmalerba added cla: yes PR author has agreed to Google's Contributor License Agreement and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Nov 20, 2017

angular deleted a comment from googlebot Nov 21, 2017

jelbourn reviewed Nov 21, 2017

View reviewed changes

tinayuangao force-pushed the mat-tree branch from ba4ddb2 to 911009f Compare November 21, 2017 19:42

tinayuangao requested review from amcdnl and kara as code owners November 21, 2017 19:42

googlebot added cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Nov 21, 2017

jelbourn reviewed Nov 27, 2017

View reviewed changes

tinayuangao force-pushed the mat-tree branch from 1553441 to 37c159f Compare November 27, 2017 21:14

jelbourn reviewed Nov 28, 2017

View reviewed changes

tinayuangao force-pushed the tree branch from f0a3ba9 to 1027446 Compare November 28, 2017 00:56

feat(tree): Add mat tree

46f3274

tinayuangao force-pushed the mat-tree branch from 37c159f to 46f3274 Compare November 28, 2017 00:59

jelbourn approved these changes Nov 28, 2017

View reviewed changes

tinayuangao merged commit a6b63b2 into angular:tree Nov 28, 2017

tinayuangao added a commit that referenced this pull request Nov 29, 2017

feat(tree): Add mat tree (#8458)

8bf44e4

tinayuangao added a commit that referenced this pull request Dec 9, 2017

feat(tree): Add mat tree (#8458)

4da6fc1

tinayuangao added a commit that referenced this pull request Dec 13, 2017

feat(tree): Add mat tree (#8458)

54b374e

tinayuangao added a commit that referenced this pull request Dec 14, 2017

feat(tree): Add mat tree (#8458)

6a8cb16

tinayuangao added a commit that referenced this pull request Dec 15, 2017

feat(tree): Add mat tree (#8458)

27f5ba0

tinayuangao added a commit to tinayuangao/material2 that referenced this pull request Dec 15, 2017

feat(tree): Add mat tree (angular#8458)

1531930

tinayuangao added a commit that referenced this pull request Dec 19, 2017

feat(tree): Add mat tree (#8458)

f7692e5

tinayuangao added a commit that referenced this pull request Jan 4, 2018

feat(tree): Add mat tree (#8458)

0dc7d57

tinayuangao added a commit that referenced this pull request Jan 10, 2018

feat(tree): Add mat tree (#8458)

f3a35a6

tinayuangao added a commit that referenced this pull request Jan 23, 2018

feat(tree): Add mat tree (#8458)

37158ee

tinayuangao added a commit that referenced this pull request Feb 5, 2018

feat(tree): Add mat tree (#8458)

5ce7ca8

tinayuangao added a commit that referenced this pull request Feb 9, 2018

feat(tree): Add mat tree (#8458)

2a9fe4a

jelbourn pushed a commit that referenced this pull request Feb 12, 2018

feat(tree): Add mat tree (#8458)

0291a18

tinayuangao added a commit that referenced this pull request Feb 13, 2018

feat(tree): Add mat tree (#8458)

7427f55

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

		import {MatTreeNodeOutlet} from './outlet';


		/** Workaround for https://github.com/angular/angular/issues/17849 */


		### TreeControl

		The `TreeControl` expand/collapse of the tree node. Users can expand/collapse a tree node


		The trigger can be placed anywhere in the tree node, and is only triggered by `click` action.

		The trigger is also work with both flat tree and nested tree.


		### Padding

		The `matTreeNodePadding` can be placed in a flat tree's node template to display the `level`

feat(tree): Add material styled tree #8458

feat(tree): Add material styled tree #8458

Uh oh!

Conversation

tinayuangao commented Nov 15, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TishchenkoAlex Nov 15, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jelbourn commented Nov 16, 2017

Uh oh!

benb7760 commented Nov 16, 2017

Uh oh!

tinayuangao commented Nov 16, 2017

Uh oh!

mmalerba commented Nov 20, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

googlebot commented Nov 21, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tinayuangao commented Nov 28, 2017

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

angular-automatic-lock-bot bot commented Sep 7, 2019

Uh oh!

Uh oh!

tinayuangao commented Nov 15, 2017 •

edited

Loading

TishchenkoAlex Nov 15, 2017 •

edited

Loading