From bd7adbf3f78a69e4ae84e6b8e5635737ba58ddb0 Mon Sep 17 00:00:00 2001
From: Kleber Silva <kleber.swf@gmail.com>
Date: Wed, 8 Dec 2021 00:08:10 -0300
Subject: [PATCH] tooltips

---
 src/component-tags.ts                         |  1 +
 src/core/editor.ts                            |  1 -
 .../actions/button/action-button.scss         | 41 +++++++++++++++++++
 .../actions/button/action-button.ts           | 13 ++++++
 .../inspector/object-tree-inspector.scss      |  1 +
 .../object-tree/model/object-tree-model.ts    |  1 +
 6 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/src/component-tags.ts b/src/component-tags.ts
index 829e8e9..c37cb99 100644
--- a/src/component-tags.ts
+++ b/src/component-tags.ts
@@ -1,4 +1,5 @@
 export class ComponentTags {
+	// TODO remove the ones that doesn't need to be here
 	public static readonly EditorView = 'phred-editor-view';
 	public static readonly GameContainer = 'phred-game-container';
 	public static readonly ActionsToolbar = 'phred-actions-toolbar';
diff --git a/src/core/editor.ts b/src/core/editor.ts
index cb6ccde..73f6341 100644
--- a/src/core/editor.ts
+++ b/src/core/editor.ts
@@ -161,7 +161,6 @@ class EditorClass {
 				id: Actions.TOGGLE_ENABLED,
 				label: 'edit',
 				icon: 'fa-edit',
-				shortcuts: ['ctrl+F2'],
 			},
 
 			{
diff --git a/src/editor-view/actions/button/action-button.scss b/src/editor-view/actions/button/action-button.scss
index b36aa61..9649a16 100644
--- a/src/editor-view/actions/button/action-button.scss
+++ b/src/editor-view/actions/button/action-button.scss
@@ -4,6 +4,7 @@ phred-action-button.button {
 	min-width: 35px;
 	padding: 0;
 	box-shadow: none;
+	position: relative;
 
 	&:hover {
 		background-color: $primary-color;
@@ -27,4 +28,44 @@ phred-action-button.button {
 			background-color: lighten($primary-color, 10%);
 		}
 	}
+
+	&:hover .tooltip {
+		opacity: 1;
+		transition: opacity 200ms 800ms;
+	}
+
+	.tooltip {
+		position: absolute;
+		top: 46px;
+		background-color: lighten($background-color, 2%);
+		color: $on-background;
+		padding: 4px 10px;
+		border-radius: 6px;
+		font-size: 14px;
+		text-align: center;
+		user-select: none;
+		pointer-events: none;
+		opacity: 0;
+		max-width: 150px;
+		box-sizing: border-box;
+		white-space: nowrap;
+		box-shadow: 0 2px 2px 2px $light-shadow-color;
+		transition: opacity 200ms 100ms;
+		z-index: 1;
+
+		&:before {
+			content: '';
+			position: absolute;
+			top: -4px;
+			left: 50%;
+			display: block;
+			width: 8px;
+			height: 8px;
+			background-color: lighten($background-color, 2%);
+			transform-origin: 4px 4px;
+			margin-left: -4px;
+			transform: rotateZ(45deg);
+			z-index: -1;
+		}
+	}
 }
diff --git a/src/editor-view/actions/button/action-button.ts b/src/editor-view/actions/button/action-button.ts
index 3176ce2..3a5762d 100644
--- a/src/editor-view/actions/button/action-button.ts
+++ b/src/editor-view/actions/button/action-button.ts
@@ -8,6 +8,8 @@ export class ActionButton extends HTMLElement {
 	public setAction(action: Action) {
 		this.classList.add('button');
 		this.action = action;
+		this.createTooltip(action);
+
 		if (action.icon) {
 			const icon = this.appendChild(document.createElement('i'));
 			icon.classList.add('fas', action.icon);
@@ -21,10 +23,21 @@ export class ActionButton extends HTMLElement {
 			this.onclick = () => action.command();
 			return;
 		}
+
 		this.onclick = this.toggleSelected.bind(this);
 		this.updateState();
 	}
 
+	private createTooltip(action: Action) {
+		const tooltip = this.appendChild(document.createElement('div'));
+		tooltip.classList.add('tooltip');
+		let text = action.label;
+		if (action.shortcuts?.length) {
+			text += ` (${action.shortcuts[0].replace('+Shift', '')})`;
+		}
+		tooltip.innerText = text;
+	}
+
 	private toggleSelected() {
 		this.action.command();
 		this.updateState();
diff --git a/src/editor-view/object-tree/inspector/object-tree-inspector.scss b/src/editor-view/object-tree/inspector/object-tree-inspector.scss
index b228ba7..574c77a 100644
--- a/src/editor-view/object-tree/inspector/object-tree-inspector.scss
+++ b/src/editor-view/object-tree/inspector/object-tree-inspector.scss
@@ -8,6 +8,7 @@ phred-object-tree-inspector.phred-inspector {
 	&.filtering {
 		.content .node-children {
 			margin-left: 0;
+			display: flex;
 		}
 		.collapse-icon {
 			display: none;
diff --git a/src/editor-view/object-tree/model/object-tree-model.ts b/src/editor-view/object-tree/model/object-tree-model.ts
index 02c35ef..9fd1e86 100644
--- a/src/editor-view/object-tree/model/object-tree-model.ts
+++ b/src/editor-view/object-tree/model/object-tree-model.ts
@@ -57,6 +57,7 @@ export class ObjectTreeModel {
 		filter = filter ? filter.toLowerCase() : '';
 		Object.keys(objects).forEach(k => {
 			const o = objects[k] as ObjectTreeNodeModel;
+			console.log(o.node?.title);
 			if (!o.node) return;
 			if (o.node.title.toLowerCase().indexOf(filter) >= 0) {
 				o.node.classList.remove('invisible');