From f1dd72cf118c940920ede572406ce3da1b8e9b21 Mon Sep 17 00:00:00 2001
From: Ryo Hilmawan <54142180+CloudHill@users.noreply.github.com>
Date: Tue, 3 Nov 2020 18:51:47 +0700
Subject: [PATCH] Property Layout Modification (#201)

* Update mod.js

* Update styles.css
---
 mods/property-layout/mod.js     | 25 +++++++++++++++++++------
 mods/property-layout/styles.css | 24 +++++++++++++++++++-----
 2 files changed, 38 insertions(+), 11 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);
diff --git a/mods/property-layout/styles.css b/mods/property-layout/styles.css
index 8ebf4c1..96016ee 100644
--- a/mods/property-layout/styles.css
+++ b/mods/property-layout/styles.css
@@ -5,20 +5,26 @@
  * under the MIT license
  */
 
+.propertylayout-enhanced {
+  overflow: hidden;
+  transition: max-height 200ms ease-in, opacity 200ms ease-in;
+}
 .propertylayout-hidden {
-  display: none;
+  max-height: 0 !important;
+  opacity: 0;
 }
 
 .propertylayout-toggle {
   width: 100%;
   text-align: left;
   font-size: 0.85em;
+  font-weight: 600;
   padding: 0.25em;
   background: transparent;
   color: var(--theme--text_ui);
   border: none;
   border-radius: 2px;
-  transition: background 200ms;
+  transition: background 200ms, margin-bottom 200ms ease-in;
 }
 .notion-scroller.vertical > div > :first-child .propertylayout-toggle {
   margin-top: 1em;
@@ -26,9 +32,17 @@
 .propertylayout-toggle[data-action='show'] {
   margin-bottom: 1em;
 }
-.propertylayout-toggle::before {
-  content: '→ ' attr(data-action) ' ';
-}
 .propertylayout-toggle:hover {
   background: var(--theme--interactive_hover);
 }
+
+.propertylayout-toggle .triangle {
+  width: 0.6875em;
+  height: 0.6875em;
+  margin: 0 0.75em 0 0.5em;
+  transition: transform 200ms ease-out 0s;
+  transform: rotateZ(90deg);
+}
+.propertylayout-toggle[data-action="hide"] .triangle {
+  transform: rotateZ(180deg);
+}