update property-layout mod to notion's changes

notion-enhancer · Aug 27, 2020 · 2eee02c · 2eee02c
1 parent 0081e3b
commit 2eee02c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/mods/property-layout/mod.js b/mods/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/mods/property-layout/styles.css b/mods/property-layout/styles.css
@@ -13,19 +13,21 @@
   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);
   border: none;
   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);

diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "notion-enhancer": "bin.js"
   },
   "scripts": {
-    "test": "echo \"no test specified\""
+    "test": "echo \"no test specified\"",
+    "preuninstall": "notion-enhancer remove -y"
   },
   "repository": {
     "type": "git",