change the size of images, and make a parent div of the component

Author: David Martínez Ros

src/app/load/load.component.html

@@ -1,3 +1,7 @@
-Load the file <input type="file" (change)="onChange($event)"/>
-
+<div>
+ <ul>
+ <li>Load the file <input type="file" (change)="onChange($event)"/></li>
+ <li>Example json file <a href="../../data/tree.json" target="_blank">download here</a></li>
+ </ul>
+</div>
 <app-tree [(tree)]="tree"></app-tree>

src/app/load/load.component.ts

@@ -38,6 +38,7 @@ export class LoadComponent implements OnInit {
  var url;
  console.log('file:' + file);
  console.log('file.name:' + file.name);
+ console.log('file.type:' + file.type);
  if(file != null) {
  url = URL.createObjectURL(file);
  } else {

src/app/node-tree/node-tree.component.css

@@ -1,28 +1,27 @@
 div.node {
  width: fit-content;
  cursor: pointer;
- line-height: 13px;
- width:100%;
+ line-height: 17px;
 }
 
 img {
  float: left;
- line-height: 13px;
+ line-height: 17px;
 }
 
 div.text {
  display: inline-block;
- line-height: 11px;
+ line-height: 15px;
  font-family: arial;
  border: 1px solid lightgoldenrodyellow;
  color:black;
- background: darkgoldenrod;
+ background: lightgoldenrodyellow;
 }
 
 div.text:hover {
  border: 1px solid darkgoldenrod;
  color:black;
- background: lightgoldenrodyellow;
+ background: darkgoldenrod;
 }
 
 div.text:active {

src/app/tree/tree.component.css

@@ -0,0 +1,10 @@
+div.parent {
+ border: 1px solid darkgoldenrod;
+ color:black;
+ background: lightgoldenrodyellow;
+ width:fit-content;
+ padding-top: 5px;
+ padding-left: 5px;
+ padding-bottom: 5px;
+ padding-right: 5px;
+}

src/app/tree/tree.component.html

@@ -1,3 +1,5 @@
-<div *ngFor="let node of tree | async; let lastNode = last">
- <app-node-tree [node]="node" [parent]="" [lastNode]="lastNode"></app-node-tree>
+<div class="parent"> 
+ <div *ngFor="let node of tree | async; let lastNode = last">
+ <app-node-tree [node]="node" [parent]="" [lastNode]="lastNode"></app-node-tree>
+ </div>
 </div>