From d94ed7e4f3287395fa5c0d78e44253bfd471bf03 Mon Sep 17 00:00:00 2001
From: Alejandro Gallardo Escobar <alejandro.gallardo@artica.es>
Date: Thu, 4 Apr 2019 18:47:02 +0200
Subject: [PATCH] Visual Studio Refactor: fixed the items which use their label
as content
Former-commit-id: 48d50e90bd581312b39a90b12c5fe50e03c8730a
---
visual_console/playground/index.html | 2 +-
visual_console/src/Item.ts | 26 ++++++++++++++++---------
visual_console/src/items/Label.ts | 20 +++++++++----------
visual_console/src/items/SimpleValue.ts | 26 ++++++++++++++-----------
4 files changed, 42 insertions(+), 32 deletions(-)
diff --git a/visual_console/playground/index.html b/visual_console/playground/index.html
index 443368cc15..e7067a0f4e 100644
--- a/visual_console/playground/index.html
+++ b/visual_console/playground/index.html
@@ -212,7 +212,7 @@
// Generic props.
id: 9,
type: 2, // Simple value = 2
- label: '<h3 style="color: #FDFD96;">Simple Value: 10</h3>',
+ label: '<h3 style="color: #FDFD96;">Simple Value: (_VALUE_)</h3>',
isLinkEnabled: false,
isOnTop: false,
parentId: null,
diff --git a/visual_console/src/Item.ts b/visual_console/src/Item.ts
index 0b4de42c61..84fa84f7fb 100644
--- a/visual_console/src/Item.ts
+++ b/visual_console/src/Item.ts
@@ -132,8 +132,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
* when hovered, etc.
*/
this.elementRef = this.createContainerDomElement();
- this.labelElementRef = document.createElement("div");
- this.labelElementRef.className = "visual-console-item-label";
+ this.labelElementRef = this.createLabelDomElement();
/*
* Get a HTMLElement which represents the custom view
@@ -142,11 +141,6 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
*/
this.childElementRef = this.createDomElement();
- // Add the label if it exists.
- if (this.props.label && this.props.label.length) {
- this.labelElementRef.innerHTML = this.props.label;
- }
-
// Insert the elements into the container.
this.elementRef.append(this.childElementRef, this.labelElementRef);
@@ -172,6 +166,21 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
return box;
}
+ /**
+ * To create a new label for the visual console item.
+ * @return Item label.
+ */
+ protected createLabelDomElement(): HTMLElement {
+ const element = document.createElement("div");
+ element.className = "visual-console-item-label";
+ // Add the label if it exists.
+ if (this.props.label && this.props.label.length) {
+ element.innerHTML = this.props.label;
+ }
+
+ return element;
+ }
+
/**
* Public accessor of the `props` property.
* @return Properties.
@@ -230,8 +239,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
}
// Change label.
if (!prevProps || prevProps.label !== this.props.label) {
- this.labelElementRef.innerHTML =
- this.props.label != null ? this.props.label : "";
+ this.labelElementRef.innerHTML = this.createLabelDomElement().innerHTML;
}
// Change label position.
if (!prevProps || prevProps.labelPosition !== this.props.labelPosition) {
diff --git a/visual_console/src/items/Label.ts b/visual_console/src/items/Label.ts
index afd207f9fd..f3d85e60f0 100644
--- a/visual_console/src/items/Label.ts
+++ b/visual_console/src/items/Label.ts
@@ -28,22 +28,20 @@ export default class Label extends Item<LabelProps> {
public createDomElement(): HTMLElement {
const element = document.createElement("div");
element.className = "label";
- // Size to 0, as the item content is managed using the label.
- element.style.width = "0";
- element.style.height = "0";
- // The content of this item is already shown into the label container.
- // element.innerHTML = this.props.label || "";
+ element.innerHTML = this.props.label || "";
return element;
}
/**
- * @override Item.resize
- * To resize the item.
+ * @override Item.createLabelDomElement
+ * Create a new label for the visual console item.
+ * @return Item label.
*/
- public resizeElement(): void {
- // Size to 0, as the item content is managed using the label.
- this.childElementRef.style.width = `0`;
- this.childElementRef.style.height = `0`;
+ public createLabelDomElement(): HTMLElement {
+ const element = document.createElement("div");
+ element.className = "visual-console-item-label";
+ // Always return an empty label.
+ return element;
}
}
diff --git a/visual_console/src/items/SimpleValue.ts b/visual_console/src/items/SimpleValue.ts
index 69d4b0d8e1..0c37791642 100644
--- a/visual_console/src/items/SimpleValue.ts
+++ b/visual_console/src/items/SimpleValue.ts
@@ -97,23 +97,27 @@ export default class SimpleValue extends Item<SimpleValueProps> {
img.src = this.props.value;
element.append(img);
} else {
- // Size to 0, as the item content is managed using the label.
- element.style.width = "0";
- element.style.height = "0";
- // The content of this item is already shown into the label container.
- // element.innerHTML = this.props.label || "";
+ // Add the value to the label and show it.
+ let text = this.props.value;
+ if (this.props.label) {
+ text = this.props.label.replace(/\(?_VALUE_\)?/i, text);
+ }
+
+ element.innerHTML = text;
}
return element;
}
/**
- * @override Item.resize
- * To resize the item.
+ * @override Item.createLabelDomElement
+ * Create a new label for the visual console item.
+ * @return Item label.
*/
- public resizeElement(): void {
- // Size to 0, as the item content is managed using the label.
- this.childElementRef.style.width = `0`;
- this.childElementRef.style.height = `0`;
+ public createLabelDomElement(): HTMLElement {
+ const element = document.createElement("div");
+ element.className = "visual-console-item-label";
+ // Always return an empty label.
+ return element;
}
}