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

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

@ -43,9 +43,14 @@ module.exports = {
'propertylayout-hidden'
);
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) => {
properties.style.maxHeight = properties.children[0].offsetHeight + 'px';
setTimeout(() => {
properties.classList.toggle('propertylayout-hidden');
toggle.setAttribute(
'data-action',
@ -53,6 +58,14 @@ module.exports = {
? 'show'
: 'hide'
);
}, 0);
});
const propObserver = new MutationObserver(() => {
properties.style.maxHeight = '';
});
propObserver.observe(properties, {
childList: true,
subtree: true,
});
if (properties.previousElementSibling) {
properties.previousElementSibling.append(toggle);

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

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