From 7df80284f9dbdd3b2735c00dee83e29245809408 Mon Sep 17 00:00:00 2001
From: Matei Adriel <rafaeladriel11@gmail.com>
Date: Mon, 13 Apr 2020 17:59:41 +0300
Subject: [PATCH] feat: labels

---
 src/modules/logic-gates/components/GateProperties.scss |  4 ++++
 .../logic-gates/components/GatePropertiesModal.tsx     | 10 +++++++++-
 src/modules/simulation/constants.ts                    |  6 ++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/modules/logic-gates/components/GateProperties.scss b/src/modules/logic-gates/components/GateProperties.scss
index 87c2129..b6fd5c3 100644
--- a/src/modules/logic-gates/components/GateProperties.scss
+++ b/src/modules/logic-gates/components/GateProperties.scss
@@ -39,6 +39,10 @@ div .gate-prop-container {
 
     flex-direction: row;
     justify-content: start;
+
+    &.visible {
+        margin: 1rem;
+    }
 }
 
 div #save-props {
diff --git a/src/modules/logic-gates/components/GatePropertiesModal.tsx b/src/modules/logic-gates/components/GatePropertiesModal.tsx
index e9c1d27..dc67450 100644
--- a/src/modules/logic-gates/components/GatePropertiesModal.tsx
+++ b/src/modules/logic-gates/components/GatePropertiesModal.tsx
@@ -103,7 +103,15 @@ export const GatePropery = ({ raw, gate }: GatePropertyProps) => {
         }
     })()
 
-    return <div className="gate-prop-container">{input}</div>
+    return (
+        <div
+            className={`gate-prop-container ${
+                input !== emptyInput ? 'visible' : ''
+            }`}
+        >
+            {input}
+        </div>
+    )
 }
 
 /**
diff --git a/src/modules/simulation/constants.ts b/src/modules/simulation/constants.ts
index a19e712..b8e90ad 100644
--- a/src/modules/simulation/constants.ts
+++ b/src/modules/simulation/constants.ts
@@ -63,6 +63,12 @@ export const DefaultGateTemplate: GateTemplate = {
                     !gate.template.properties.data.some(
                         (prop) => prop.needsUpdate
                     )
+            },
+            {
+                type: 'string',
+                base: 'my-logic-gate',
+                name: 'label',
+                show: ({ internal }: { internal: boolean }) => internal
             }
         ]
     },