fix property-layout again

CHANGELOG.md

@@ -24,6 +24,7 @@ a feature and cleanup update.
 - bugfix: weekly calendar view height is now sized correctly according to its contents.
 - bugfix: made the open enhancements menu hotkey configurable and changed the default to `ALT+E`
   to remove conflict with the inline code highlight shortcut.
+- bugfix: update property-layout to match notion changes again.
 - themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
 - extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use,
   or leave it blank to not change anything.
@@ -35,7 +36,6 @@ a feature and cleanup update.
 - improved: added individual text-colour rules for different background colours.
 - improved: added variables for callout colouring.
 - bugfix: block-level text colours are now changed properly.
-- bugfix: update property-layout to match notion changes again.
 - extension: "calendar scroll" = a button to scroll down to the current week for you.
 
 notion-deb-builder has been discovered to not generate an app.asar and so is no longer supported.

mods/custom-inserts/mod.js

@@ -6,12 +6,14 @@
 
 'use strict';
 
+const helpers = require('../../pkg/helpers.js');
+
 module.exports = {
   id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb',
   tags: ['extension'],
   name: 'custom inserts',
   desc: 'link files for small client-side tweaks.',
-  version: '0.1.1',
+  version: '0.1.2',
   author: 'dragonwocky',
   options: [
     {
@@ -34,10 +36,15 @@ module.exports = {
         if (document.readyState !== 'complete') return false;
         if (store().css) {
           try {
-            const style = document.createElement('style');
-            style.type = 'text/css';
-            style.innerHTML = fs.readFileSync(store().css);
-            document.querySelector('head').appendChild(style);
+            document
+              .querySelector('head')
+              .appendChild(
+                helpers.createElement(
+                  `<style type="text/css">${fs.readFileSync(
+                    store().css
+                  )}</style>`
+                )
+              );
           } catch (err) {
             console.warn('<custom-inserts> invalid css file... unsetting.');
             store().css = '';

mods/property-layout/mod.js

@@ -7,12 +7,14 @@
 
 'use strict';
 
+const helpers = require('../../pkg/helpers.js');
+
 module.exports = {
   id: '4034a578-7dd3-4633-80c6-f47ac5b7b160',
   tags: ['extension'],
   name: 'property layout',
   desc: 'auto-collapse page properties that usually push down page content.',
-  version: '0.2.3',
+  version: '0.2.4',
   author: 'alexander-kazakov',
   hacks: {
     'renderer/preload.js'(store, __exports) {
@@ -30,7 +32,7 @@ module.exports = {
         function process(list) {
           queue = [];
           let properties = document.querySelector(
-            '.notion-scroller.vertical > :first-child [style="width: 100%; font-size: 14px;"]'
+            '.notion-scroller.vertical [style*="env(safe-area-inset-left)"] > [style="width: 100%; font-size: 14px;"]'
           );
           if (
             properties &&
@@ -40,19 +42,17 @@ module.exports = {
               'propertylayout-enhanced',
               'propertylayout-hidden'
             );
-            const toggle = document.createElement('button');
-            toggle.classList.add('propertylayout-toggle');
-            toggle.setAttribute('data-action', 'show');
-            toggle.innerText = '→ show properties';
+            const toggle = helpers.createElement(
+              '<button class="propertylayout-toggle" data-action="show">properties</button>'
+            );
             toggle.addEventListener('click', (event) => {
               properties.classList.toggle('propertylayout-hidden');
-              const action = properties.classList.contains(
-                'propertylayout-hidden'
-              )
+              toggle.setAttribute(
+                'data-action',
+                properties.classList.contains('propertylayout-hidden')
                   ? 'show'
-                : 'hide';
-              toggle.innerText = `→ ${action} properties`;
-              toggle.setAttribute('data-action', action);
+                  : 'hide'
+              );
             });
             if (properties.previousElementSibling) {
               properties.previousElementSibling.append(toggle);

mods/property-layout/styles.css

@@ -26,6 +26,9 @@
 .propertylayout-toggle[data-action='show'] {
   margin-bottom: 1em;
 }
+.propertylayout-toggle::before {
+  content: '→ ' attr(data-action) ' ';
+}
 .propertylayout-toggle:hover {
   background: var(--theme--interactive_hover);
 }