From 5f8e3cc33206009aa560bdcda647bf5d03d4ee33 Mon Sep 17 00:00:00 2001
From: Ryo Hilmawan <54142180+CloudHill@users.noreply.github.com>
Date: Tue, 3 Nov 2020 18:47:39 +0700
Subject: [PATCH] Update mod.js

---
 mods/property-layout/mod.js | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/mods/property-layout/mod.js b/mods/property-layout/mod.js
index 10539da..5b5426a 100644
--- a/mods/property-layout/mod.js
+++ b/mods/property-layout/mod.js
@@ -43,16 +43,29 @@ module.exports = {
               'propertylayout-hidden'
             );
             const toggle = createElement(
-              '<button class="propertylayout-toggle" data-action="show">properties</button>'
+              '<button class="propertylayout-toggle" data-action="show">Properties</button>'
+            );
+            toggle.prepend(
+              createElement('<svg viewBox="0 0 100 100" class="triangle"><polygon points="5.9,88.2 50,11.8 94.1,88.2 "></polygon></svg>')
             );
             toggle.addEventListener('click', (event) => {
-              properties.classList.toggle('propertylayout-hidden');
-              toggle.setAttribute(
-                'data-action',
-                properties.classList.contains('propertylayout-hidden')
+              properties.style.maxHeight = properties.children[0].offsetHeight + 'px';
+              setTimeout(() => {
+                properties.classList.toggle('propertylayout-hidden');
+                toggle.setAttribute(
+                  'data-action',
+                  properties.classList.contains('propertylayout-hidden')
                   ? 'show'
                   : 'hide'
-              );
+                );
+              }, 0);
+            });
+            const propObserver = new MutationObserver(() => {
+              properties.style.maxHeight = '';
+            });
+            propObserver.observe(properties, {
+              childList: true,
+              subtree: true,
             });
             if (properties.previousElementSibling) {
               properties.previousElementSibling.append(toggle);