added collapse icon to tree node

kleber-swf · Sep 1, 2021 · 8b8ccc2 · 8b8ccc2
1 parent 4b883c6
commit 8b8ccc2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/src/editor/object-tree/inspector/object-tree-inspector.scss b/src/editor/object-tree/inspector/object-tree-inspector.scss
@@ -1,5 +1,5 @@
 phed-object-tree-inspector.phred-inspector {
 	.content {
-		margin: 6px 16px;
+		margin: 6px;
 	}
 }
diff --git a/src/editor/object-tree/tree-node/tree-node.scss b/src/editor/object-tree/tree-node/tree-node.scss
@@ -22,7 +22,12 @@ phed-tree-node {
 		display: flex;
 		align-items: center;
 		justify-content: stretch;
-		padding: 6px 4px;
+		padding: 0;
+
+		.collapse-icon {
+			padding: 6px 6px 6px 10px;
+			margin-right: 2px;
+		}
 
 		.node-icon {
 			display: inline-block;
@@ -36,6 +41,7 @@ phed-tree-node {
 	}
 
 	.node-children {
-		margin-left: 20px;
+		margin-left: 16px;
+		margin-bottom: 4px;
 	}
 }
diff --git a/src/editor/object-tree/tree-node/tree-node.ts b/src/editor/object-tree/tree-node/tree-node.ts
@@ -3,10 +3,10 @@ import './tree-node.scss';
 
 export class TreeNode extends HTMLElement {
 	public static readonly tagName: string = 'phed-tree-node';
-	public obj: PIXI.DisplayObject;
-	public onNodeSelect: (node: TreeNode) => void;
 
+	public obj: PIXI.DisplayObject;
 	private label: HTMLElement;
+	public onNodeSelect: (node: TreeNode) => void;
 
 	public updateTitle(type: PhaserObjectType, value: string) {
 		if (this.obj) this.label.textContent = value?.length > 0 ? value : type.name;
@@ -20,26 +20,25 @@ export class TreeNode extends HTMLElement {
 
 	public setContent(obj: PIXI.DisplayObject, type: PhaserObjectType) {
 		this.obj = obj;
-		const head = document.createElement('div');
+		const head = this.appendChild(document.createElement('div'));
 		head.classList.add('node-head');
 		head.onclick = this.select.bind(this);
-		this.appendChild(head);
 
-		const icon = document.createElement('i');
+		const collapseIcon = head.appendChild(document.createElement('i'));
+		collapseIcon.classList.add('fas', 'fa-caret-right', 'collapse-icon');
+
+		const icon = head.appendChild(document.createElement('i'));
 		icon.classList.add('fas', 'node-icon', type.icon);
-		head.appendChild(icon);
 
-		const label = this.label = document.createElement('div');
+		const label = head.appendChild(this.label = document.createElement('div'));
 		label.classList.add('node-name');
 		this.updateTitle(type, obj.name);
 		this.updateObjectVisibility(obj.visible);
-		head.appendChild(label);
 	}
 
 	public addChildrenContainer() {
-		const container = document.createElement('div');
+		const container = this.appendChild(document.createElement('div'));
 		container.classList.add('node-children');
-		this.appendChild(container);
 		return container;
 	}