property layout extension ✔

mods/core/css/variables.css

@@ -15,7 +15,7 @@
   --theme_dark--overlay: rgba(15, 15, 15, 0.6);
   --theme_dark--dragarea: #272d2f;
   --theme_dark--preview-width: 977px;
-  --theme_dark--preview-padding: 8em;
+  --theme_dark--preview-padding: 8rem;
   --theme_dark--preview_banner-height: 20vh;
   --theme_dark--page_banner-height: 30vh;
 
@@ -128,7 +128,7 @@
   --theme_light--overlay: rgba(15, 15, 15, 0.6);
   --theme_light--dragarea: rgba(55, 53, 47, 0.04);
   --theme_light--preview-width: 977px;
-  --theme_light--preview-padding: 8em;
+  --theme_light--preview-padding: 8rem;
   --theme_light--preview_banner-height: 20vh;
   --theme_light--page_banner-height: 30vh;
 

mods/dark+/styles.css

@@ -10,7 +10,7 @@
   /* --theme_dark--overlay: rgba(15, 15, 15, 0.6); */
   --theme_dark--dragarea: #000;
   /* --theme_dark--preview-width: 977px;
-  --theme_dark--preview-padding: 8em;
+  --theme_dark--preview-padding: 8rem;
   --theme_dark--preview_banner-height: 20vh;
   --theme_dark--page_banner-height: 30vh; */
 

mods/emoji-sets/mod.js

@@ -47,7 +47,7 @@ module.exports = {
           if (!queue.length) requestAnimationFrame(process);
           queue.push(...list);
         });
-        observer.observe(document, {
+        observer.observe(document.body, {
           childList: true,
           subtree: true,
           characterData: true,

mods/gameish/styles.css

@@ -13,7 +13,7 @@
   /* --theme_dark--overlay: rgba(15, 15, 15, 0.6); */
   --theme_dark--dragarea: #19181f;
   /* --theme_dark--preview-width: 977px;
-  --theme_dark--preview-padding: 8em;
+  --theme_dark--preview-padding: 8rem;
   --theme_dark--preview_banner-height: 20vh;
   --theme_dark--page_banner-height: 30vh; */
 

mods/neutral/styles.css

@@ -16,7 +16,7 @@
   --theme_dark--overlay: rgba(15, 15, 15, 0.6);
   --theme_dark--dragarea: #111111;
   /* --theme_dark--preview-width: 977px;
-  --theme_dark--preview-padding: 8em;
+  --theme_dark--preview-padding: 8rem;
   --theme_dark--preview_banner-height: 20vh;
   --theme_dark--page_banner-height: 30vh; */
 

mods/pastel-dark/styles.css

@@ -13,7 +13,7 @@
   --theme_dark--overlay: rgba(15, 15, 15, 0.6);
   --theme_dark--dragarea: #0d0d0d;
   /* --theme_dark--preview-width: 977px;
-  --theme_dark--preview-padding: 8em;
+  --theme_dark--preview-padding: 8rem;
   --theme_dark--preview_banner-height: 20vh;
   --theme_dark--page_banner-height: 30vh; */
 

mods/property-layout/mod.js

@@ -18,66 +18,41 @@ module.exports = {
     'renderer/preload.js'(store, __exports) {
       document.addEventListener('readystatechange', (event) => {
         if (document.readyState !== 'complete') return false;
-
-        var isVisible = false;
-
-        function setPropertiesListVisibility(propertiesList, visible) {
-          if (visible) {
-            // Show properties list section
-            propertiesList.style.height = null;
-            propertiesList.style.display = null;
-            isVisible = true;
-          } else {
-            // Hide properties list section
-            propertiesList.style.height = 0;
-            propertiesList.style.display = 'none';
-            isVisible = false;
+        let queue = [];
+        const observer = new MutationObserver((list, observer) => {
+          if (!queue.length) requestAnimationFrame(() => process(queue));
+          queue.push(...list);
+        });
+        observer.observe(document.body, {
+          childList: true,
+          subtree: true,
+        });
+        function process(list) {
+          queue = [];
+          let properties = document.querySelector(
+            '.notion-scroller.vertical > div:nth-child(2)[style="width: 100%; font-size: 14px;"]'
+          );
+          if (properties) {
+            if (!properties.classList.contains('propertylayout-enhanced')) {
+              properties.classList.add(
+                'propertylayout-enhanced',
+                '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`;
+              });
+              properties.previousElementSibling.append(toggle);
+            }
           }
         }
-
-        // Called every time something new loads inside Notion window
-        // e.g. you navigate to a different Notion page
-        var onPageChange = function () {
-          console.log('Notion Layout Improver: Something changed');
-
-          // Find the block with properties list
-          var propertiesLists = document.querySelectorAll(
-            ".notion-scroller.vertical > div:nth-child(2)[style='width: 100%; font-size: 14px;']"
-          );
-
-          // For each found properties list
-          propertiesLists.forEach(function (propertiesList) {
-            console.log('Found properties list');
-
-            // Set up the toggle button
-            let toggleButton = document.createElement('button');
-            toggleButton.setAttribute('class', 'propertiesToggleBar');
-            toggleButton.innerHTML = '-';
-            toggleButton.onclick = function () {
-              setPropertiesListVisibility(propertiesList, !isVisible);
-            };
-
-            // If not already processed this properties list,
-            // add the toggle button and hide the list
-            if (!(propertiesList.id === 'already_processed')) {
-              console.log(
-                'Notion Layout Improver: Processing new properties list'
-              );
-              var parentBlockForButton =
-                propertiesList.parentElement.firstChild.firstChild;
-              parentBlockForButton.appendChild(toggleButton);
-              setPropertiesListVisibility(propertiesList, false);
-              propertiesList.id = 'already_processed';
-            }
-          });
-        };
-
-        // This calls onPageChange function each time Notion window changes
-        // e.g. you navigate to a new Notion page
-        const targetNode = document.body;
-        const config = { attributes: false, childList: true, subtree: true };
-        const observer = new MutationObserver(onPageChange);
-        observer.observe(targetNode, config);
       });
     },
   },

mods/property-layout/styles.css

@@ -0,0 +1,26 @@
+/*
+ * property layout
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 alexander-kazakov
+ * under the MIT license
+ */
+
+.propertylayout-hidden {
+  display: none;
+}
+
+.propertylayout-toggle {
+  width: calc(100% - (2 * var(--theme--preview-padding)));
+  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:hover {
+  background: var(--theme--interactive_hover);
+}

mods/right-to-left/mod.js

@@ -20,10 +20,10 @@ module.exports = {
         if (document.readyState !== 'complete') return false;
         let queue = [];
         const observer = new MutationObserver((list, observer) => {
-          if (!queue.length) requestAnimationFrame(() => process(list));
+          if (!queue.length) requestAnimationFrame(() => process(queue));
           queue.push(...list);
         });
-        observer.observe(document, {
+        observer.observe(document.body, {
           childList: true,
           subtree: true,
           characterData: true,