dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-06 05:29:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

update property-layout mod to notion's changes

Browse Source
This commit is contained in:
dragonwocky 2020-08-28 09:13:34 +10:00
parent 1901832d0e
commit 438ad10522
2 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
repo/property-layout/mod.js
View File

@ -30,27 +30,33 @@ module.exports = {
function process(list) { function process(list) {
queue = []; queue = [];
let properties = document.querySelector( 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 (
if (!properties.classList.contains('propertylayout-enhanced')) { properties &&
properties.classList.add( !properties.classList.contains('propertylayout-enhanced')
'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' 'propertylayout-hidden'
); )
const toggle = document.createElement('button'); ? 'show'
toggle.classList.add('propertylayout-toggle'); : 'hide';
toggle.innerText = '→ show properties'; toggle.innerText = `→ ${action} properties`;
toggle.addEventListener('click', (event) => { toggle.setAttribute('data-action', action);
properties.classList.toggle('propertylayout-hidden'); });
toggle.innerText = `→ ${ if (properties.previousElementSibling) {
properties.classList.contains('propertylayout-hidden')
? 'show'
: 'hide'
} properties`;
});
properties.previousElementSibling.append(toggle); properties.previousElementSibling.append(toggle);
} } else properties.parentElement.prepend(toggle);
} }
} }
}); });

6
repo/property-layout/styles.css
View File

@ -13,7 +13,6 @@
width: calc(100% - (2 * (96px + env(safe-area-inset-left)))); width: calc(100% - (2 * (96px + env(safe-area-inset-left))));
text-align: left; text-align: left;
font-size: 0.85em; font-size: 0.85em;
margin-bottom: 1em;
padding: 0.25em; padding: 0.25em;
background: transparent; background: transparent;
color: var(--theme--text_ui); color: var(--theme--text_ui);
@ -21,11 +20,14 @@
border-radius: 2px; border-radius: 2px;
transition: background 200ms; transition: background 200ms;
} }
.propertylayout-toggle[data-action='show'] {
margin-bottom: 1em;
}
[style*='width: 900px'] + .propertylayout-toggle { [style*='width: 900px'] + .propertylayout-toggle {
width: calc(900px - (2 * (96px + env(safe-area-inset-left)))); width: calc(900px - (2 * (96px + env(safe-area-inset-left))));
} }
.notion-peek-renderer .propertylayout-toggle { .notion-peek-renderer .propertylayout-toggle {
width: calc(100% - (2 * var(--theme--preview-padding))); width: 100%;
} }
.propertylayout-toggle:hover { .propertylayout-toggle:hover {
background: var(--theme--interactive_hover); background: var(--theme--interactive_hover);