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

#177 made extra padding at the bottom in focus mode toggleable

Browse Source
This commit is contained in:
dragonwocky 2020-10-28 17:50:55 +11:00
parent dc60b3d9ae
commit 6a326a12be
2 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
repo/focus-mode/mod.js
View File

@ -13,6 +13,24 @@ module.exports = {
name: 'focus mode',
desc:
'hide the titlebar/menubar if the sidebar is closed (will be shown on hover).',
version: '0.1.1',
version: '0.2.0',
author: 'arecsu',
options: [
{
key: 'padded',
label: 'add padding to bottom of the page',
description: `will only take effect when the sidebar is hidden. aims to make the canvas\
as symmetrical/consistent as possible: if there is empty space on 3 sides, the 4th should follow.z`,
type: 'toggle',
value: true,
},
],
hacks: {
'renderer/preload.js': (store, __exports) => {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
if (store().padded) document.body.dataset.focusmode = 'padded';
});
},
},
};

22
repo/focus-mode/styles.css
View File

@ -5,16 +5,6 @@
* under the MIT license
*/
/* add space at the bottom of the main frame when sidebar is hidden
* -- matches space at top for titlebar */
.notion-dark-theme .notion-frame {
transition: height 100ms ease 0s;
}
.notion-sidebar-container[style*='width: 0px;'] + .notion-frame {
height: calc(
100% - (var(--configured--dragarea_height, 10px) + 45px)
) !important;
}
.notion-sidebar-container[style*='width: 0px;'] + .notion-frame .notion-topbar {
opacity: 0 !important;
transition: opacity 200ms ease-in-out !important;
@ -24,3 +14,15 @@
.notion-topbar:hover {
opacity: 1 !important;
}
/* add space at the bottom of the main frame when sidebar is hidden
* -- matches space at top for titlebar */
[data-focusmode='padded'] .notion-dark-theme .notion-frame {
transition: height 100ms ease 0s;
}
[data-focusmode='padded']
.notion-sidebar-container[style*='width: 0px;']
+ .notion-frame {
height: calc(
100% - (var(--configured--dragarea_height, 10px) + 45px)
) !important;
}