Make the entire tree node clickable.

Use native checkbox instead of `x-check` component.

Author: btecu

addon/components/x-tree-node.js

@@ -9,6 +9,10 @@ export default Component.extend({
   layout,
   classNameBindings: ['model.isSelected:tree-highlight'],
 
+  click() {
+    this.attrs.select(this.get('model'));
+  },
+
   mouseEnter(event) {
     let { hover } = this.attrs;
     if (hover) {

addon/styles/x-tree.css

@@ -12,10 +12,6 @@
   list-style: none;
 }
 
-.tree-node span {
-  cursor: pointer;
-}
-
 .tree-node .toggle-icon {
   color: #a5d4fd;
   cursor: pointer;
@@ -32,4 +28,5 @@
 .tree-node .tree-highlight {
   background-color: #f2f9fc;
   color: #333;
+  cursor: pointer;
 }

addon/templates/components/x-tree-node.hbs

@@ -1,7 +1,8 @@
 {{#if model.checkable}}
-  {{x-check value=model.id checked=model.isChecked action=(action 'toggleCheck')}}
+  <input type="checkbox" checked={{model.isChecked}}
+    onclick={{action 'toggleCheck' bubbles=false}}>
 {{/if}}
-<span class="toggle-icon" {{action 'toggleExpand'}}>
+<span class="toggle-icon" {{action 'toggleExpand' bubbles=false}}>
   {{#if model.children.length}}
     {{#if model.isExpanded}}
       &#x25BC;
@@ -12,6 +13,5 @@
     &nbsp;&nbsp;
   {{/if}}
 </span>
-<span {{action select model}}>
-  {{model.name}}
-</span>
+
+{{model.name}}