fix property-layout again

This commit is contained in:
dragonwocky 2020-09-02 22:33:47 +10:00
parent c5f5ce30e5
commit 666925c081
3 changed files with 28 additions and 18 deletions

View File

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

View File

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

View File

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