change the styles of the tree div and the node div

Author: David Martínez Ros

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

@@ -1,16 +1,32 @@
-div {
- background: #363ca1;
- border-radius: 4px;
- box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
- will-change: transform;
+div.node {
+ width: fit-content;
  cursor: pointer;
- padding: 0 0 0 0;
- margin: 0 0 0 0;
+ line-height: 13px;
+ width:100%;
 }
 
-.images {
+img {
  float: left;
- display: block;
- padding: 0 0 0 0;
- margin: 0 0 0 0;
+ line-height: 13px;
+}
+
+div.text {
+ display: inline-block;
+ line-height: 11px;
+ font-family: arial;
+ border: 1px solid lightgoldenrodyellow;
+ color:black;
+ background: darkgoldenrod;
+}
+
+div.text:hover {
+ border: 1px solid darkgoldenrod;
+ color:black;
+ background: lightgoldenrodyellow;
+}
+
+div.text:active {
+ border: 1px solid black;
+ color:white;
+ background: black;
 }

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

@@ -1,7 +1,7 @@
-<div id="{{ node.id }}">
- <span class="images">
- <span *ngIf="node.parents.length > 0" class="images">
- <span *ngFor="let p of node.parents" class="images">
+<div id="{{ node.id }}" class="node">
+ <span>
+ <span *ngIf="node.parents.length > 0">
+ <span *ngFor="let p of node.parents">
  <img *ngIf="!p.lastNode" src="../assets/line_continue.png"/>
  <img *ngIf="p.lastNode" src="../assets/blank_node.png"/>
  </span>
@@ -11,10 +11,10 @@
  <img *ngIf="node.lastNode" src="../assets/line_node_and_end.png"/>
  <img *ngIf="!node.sheet && node.expand" src="../assets/collapse_icon.png" (click)="clickExpandCollapse()"/>
  <img *ngIf="!node.sheet && !node.expand" src="../assets/expand_icon.png" (click)="clickExpandCollapse()"/>
- <img *ngIf="node.sheet" src="../assets/line_sheet.png" (click)="clickExpandCollapse()"/>
+ <img *ngIf="node.sheet" src="../assets/line_sheet.png"/>
  </span>
 
- <span><b>{{ node.name }}</b> el seu pare es: {{ node.idParent }}</span>
+ <div class="text"><b>{{ node.name }}</b> el seu pare es: {{ node.idParent }}</div>
 </div>
 <div *ngIf="!node.sheet">
  <div *ngIf="node.expand">