From 438ad10522f3366bfe2e807273de602e7a94b5ca Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Fri, 28 Aug 2020 09:13:34 +1000
Subject: [PATCH] update property-layout mod to notion's changes

---
 repo/property-layout/mod.js     | 42 +++++++++++++++++++--------------
 repo/property-layout/styles.css |  6 +++--
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/repo/property-layout/mod.js b/repo/property-layout/mod.js
index b2ac2b7..48f5729 100644
--- a/repo/property-layout/mod.js
+++ b/repo/property-layout/mod.js
@@ -30,27 +30,33 @@ module.exports = {
         function process(list) {
           queue = [];
           let properties = document.querySelector(
-            '.notion-scroller.vertical > div:nth-child(2)[style="width: 100%; font-size: 14px;"]'
+            '.notion-scroller.vertical > div > div:nth-child(2) [style="width: 100%; font-size: 14px;"]'
           );
-          if (properties) {
-            if (!properties.classList.contains('propertylayout-enhanced')) {
-              properties.classList.add(
-                'propertylayout-enhanced',
+          if (
+            properties &&
+            !properties.classList.contains('propertylayout-enhanced')
+          ) {
+            properties.classList.add(
+              'propertylayout-enhanced',
+              'propertylayout-hidden'
+            );
+            const toggle = document.createElement('button');
+            toggle.classList.add('propertylayout-toggle');
+            toggle.setAttribute('data-action', 'show');
+            toggle.innerText = '→ show properties';
+            toggle.addEventListener('click', (event) => {
+              properties.classList.toggle('propertylayout-hidden');
+              const action = properties.classList.contains(
                 'propertylayout-hidden'
-              );
-              const toggle = document.createElement('button');
-              toggle.classList.add('propertylayout-toggle');
-              toggle.innerText = '→ show properties';
-              toggle.addEventListener('click', (event) => {
-                properties.classList.toggle('propertylayout-hidden');
-                toggle.innerText = `→ ${
-                  properties.classList.contains('propertylayout-hidden')
-                    ? 'show'
-                    : 'hide'
-                } properties`;
-              });
+              )
+                ? 'show'
+                : 'hide';
+              toggle.innerText = `→ ${action} properties`;
+              toggle.setAttribute('data-action', action);
+            });
+            if (properties.previousElementSibling) {
               properties.previousElementSibling.append(toggle);
-            }
+            } else properties.parentElement.prepend(toggle);
           }
         }
       });
diff --git a/repo/property-layout/styles.css b/repo/property-layout/styles.css
index da7c877..a669012 100644
--- a/repo/property-layout/styles.css
+++ b/repo/property-layout/styles.css
@@ -13,7 +13,6 @@
   width: calc(100% - (2 * (96px + env(safe-area-inset-left))));
   text-align: left;
   font-size: 0.85em;
-  margin-bottom: 1em;
   padding: 0.25em;
   background: transparent;
   color: var(--theme--text_ui);
@@ -21,11 +20,14 @@
   border-radius: 2px;
   transition: background 200ms;
 }
+.propertylayout-toggle[data-action='show'] {
+  margin-bottom: 1em;
+}
 [style*='width: 900px'] + .propertylayout-toggle {
   width: calc(900px - (2 * (96px + env(safe-area-inset-left))));
 }
 .notion-peek-renderer .propertylayout-toggle {
-  width: calc(100% - (2 * var(--theme--preview-padding)));
+  width: 100%;
 }
 .propertylayout-toggle:hover {
   background: var(--theme--interactive_hover);