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

Property Layout Modification (#201)

Browse Source 
* Update mod.js

* Update styles.css
This commit is contained in:
Ryo Hilmawan 2020-11-03 18:51:47 +07:00 committed by GitHub
parent b671451261
commit f1dd72cf11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
mods/property-layout/mod.js
View File

@ -43,16 +43,29 @@ module.exports = {
'propertylayout-hidden' 'propertylayout-hidden'
); );
const toggle = createElement( const toggle = createElement(
'<button class="propertylayout-toggle" data-action="show">properties</button>' '<button class="propertylayout-toggle" data-action="show">Properties</button>'
);
toggle.prepend(
createElement('<svg viewBox="0 0 100 100" class="triangle"><polygon points="5.9,88.2 50,11.8 94.1,88.2 "></polygon></svg>')
); );
toggle.addEventListener('click', (event) => { toggle.addEventListener('click', (event) => {
properties.classList.toggle('propertylayout-hidden'); properties.style.maxHeight = properties.children[0].offsetHeight + 'px';
toggle.setAttribute( setTimeout(() => {
'data-action', properties.classList.toggle('propertylayout-hidden');
properties.classList.contains('propertylayout-hidden') toggle.setAttribute(
'data-action',
properties.classList.contains('propertylayout-hidden')
? 'show' ? 'show'
: 'hide' : 'hide'
); );
}, 0);
});
const propObserver = new MutationObserver(() => {
properties.style.maxHeight = '';
});
propObserver.observe(properties, {
childList: true,
subtree: true,
}); });
if (properties.previousElementSibling) { if (properties.previousElementSibling) {
properties.previousElementSibling.append(toggle); properties.previousElementSibling.append(toggle);

24
mods/property-layout/styles.css
View File

@ -5,20 +5,26 @@
* under the MIT license * under the MIT license
*/ */
.propertylayout-enhanced {
overflow: hidden;
transition: max-height 200ms ease-in, opacity 200ms ease-in;
}
.propertylayout-hidden { .propertylayout-hidden {
display: none; max-height: 0 !important;
opacity: 0;
} }
.propertylayout-toggle { .propertylayout-toggle {
width: 100%; width: 100%;
text-align: left; text-align: left;
font-size: 0.85em; font-size: 0.85em;
font-weight: 600;
padding: 0.25em; padding: 0.25em;
background: transparent; background: transparent;
color: var(--theme--text_ui); color: var(--theme--text_ui);
border: none; border: none;
border-radius: 2px; border-radius: 2px;
transition: background 200ms; transition: background 200ms, margin-bottom 200ms ease-in;
} }
.notion-scroller.vertical > div > :first-child .propertylayout-toggle { .notion-scroller.vertical > div > :first-child .propertylayout-toggle {
margin-top: 1em; margin-top: 1em;
@ -26,9 +32,17 @@
.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);
} }
.propertylayout-toggle .triangle {
width: 0.6875em;
height: 0.6875em;
margin: 0 0.75em 0 0.5em;
transition: transform 200ms ease-out 0s;
transform: rotateZ(90deg);
}
.propertylayout-toggle[data-action="hide"] .triangle {
transform: rotateZ(180deg);
}