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

theme menu window + bunch of other tweaks

Browse Source
This commit is contained in:
dragonwocky 2020-08-01 23:46:43 +10:00
parent 9f8c70c203
commit 7d51ea9caa
Signed by: dragonwocky
GPG Key ID: C7A48B7846AA706D
27 changed files with 533 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bin.js
View File

@ -7,6 +7,7 @@
*/
'use strict';
const cli = require('cac')(),
{ EnhancerError } = require('./pkg/helpers.js');

98
mods/core/buttons.js Normal file
View File

@ -0,0 +1,98 @@
/*
* notion-enhancer
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
* (https://dragonwocky.me/) under the MIT license
*/
'use strict';
const __mod = require('./mod.js'),
store = require('../../pkg/store.js'),
settings = store(__mod.id, __mod.defaults),
path = require('path'),
fs = require('fs-extra'),
browser = require('electron').remote.getCurrentWindow(),
is_mac = process.platform === 'darwin',
buttons = {
element: document.createElement('div'),
insert: [
'alwaysontop',
...(settings.frameless && !is_mac
? ['minimize', 'maximize', 'close']
: []),
],
icons: {
raw: {
alwaysontop: {
on: fs.readFile(
path.resolve(`${__dirname}/icons/alwaysontop_on.svg`)
),
off: fs.readFile(
path.resolve(`${__dirname}/icons/alwaysontop_off.svg`)
),
},
minimize: fs.readFile(path.resolve(`${__dirname}/icons/minimize.svg`)),
maximize: {
on: fs.readFile(path.resolve(`${__dirname}/icons/maximize_on.svg`)),
off: fs.readFile(path.resolve(`${__dirname}/icons/maximize_off.svg`)),
},
close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)),
},
alwaysontop() {
return browser.isAlwaysOnTop()
? buttons.icons.raw.alwaysontop.on
: buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛'
},
minimize() {
return buttons.icons.raw.minimize; // '⚊'
},
maximize() {
return browser.isMaximized()
? buttons.icons.raw.maximize.on
: buttons.icons.raw.maximize.off; // '🗗' : '🗖'
},
close() {
return buttons.icons.raw.close; // '⨉'
},
},
actions: {
async alwaysontop() {
browser.setAlwaysOnTop(!browser.isAlwaysOnTop());
this.innerHTML = await buttons.icons.alwaysontop();
},
minimize() {
browser.minimize();
},
async maximize() {
browser.isMaximized() ? browser.unmaximize() : browser.maximize();
this.innerHTML = await buttons.icons.maximize();
},
close() {
browser.close();
},
},
};
(async () => {
buttons.element.className = 'window-buttons-area';
for (let btn of buttons.insert) {
buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
btn
]()}</button>`;
setTimeout(
() =>
(document.querySelector(`.window-button#btn-${btn}`).onclick =
buttons.actions[btn]),
10
);
}
if (settings.frameless && !is_mac) {
setInterval(async () => {
const icon = (await buttons.icons.maximize()).toString(),
el = buttons.element.querySelector('#btn-maximize');
if (el.innerHTML != icon) el.innerHTML = icon;
}, 100);
}
})();
module.exports = buttons;

183
mods/core/client.js
View File

@ -5,13 +5,11 @@
* (https://dragonwocky.me/) under the MIT license
*/
'use strict';
module.exports = (defaults) =>
function (store, __exports) {
const electron = require('electron'),
browser = electron.remote.getCurrentWindow(),
path = require('path'),
fs = require('fs-extra'),
is_mac = process.platform === 'darwin',
settings = store(defaults),
helpers = require('../../pkg/helpers.js'),
__notion = helpers.getNotion(),
@ -49,39 +47,9 @@ module.exports = (defaults) =>
}
}
// ctrl+f theming
function setTheme() {
const mode = JSON.parse(localStorage.theme).mode,
style = (prop) =>
getComputedStyle(document.body).getPropertyValue(prop);
notionIpc.sendNotionToIndex('search:set-theme', {
'mode': mode,
'colors': {
'white': style(`--theme_${mode}--todo_ticked-fill`),
'blue': style(`--theme_${mode}--primary`),
},
'borderRadius': 3,
'textColor': style(`--theme_${mode}--text`),
'popoverBackgroundColor': style(`--theme_${mode}--card`),
'popoverBoxShadow': `0 0 0 1px ${style(
`--theme_${mode}--overlay`
)}, 0 3px 6px ${style(`--theme_${mode}--overlay`)}`,
'inputBoxShadow': `box-shadow: ${style(
`--theme_${mode}--primary`
)} 0px 0px 0px 1px inset, ${style(
`--theme_${mode}--primary_hover`
)} 0px 0px 0px 2px !important`,
'inputBackgroundColor': style(`--theme_${mode}--main`),
'dividerColor': style(`--theme_${mode}--table-border`),
'shadowOpacity': 0.2,
});
}
setInterval(setTheme, 100);
// frameless
if (settings.frameless) {
document.body.classList.add('frameless');
// draggable area
const dragarea = document.createElement('div');
dragarea.className = 'window-dragarea';
@ -90,100 +58,10 @@ module.exports = (defaults) =>
'--configured-dragarea_height',
`${settings.dragarea_height + 2}px`
);
let sidebar_width;
interval_attempts.patchDragarea = setInterval(patchDragarea, 50);
function patchDragarea() {
const sidebar = document.querySelector('.notion-sidebar');
if (!sidebar) return;
clearInterval(interval_attempts.patchDragarea);
let new_width =
sidebar.style.height === 'auto' ? '0px' : sidebar.style.width;
if (sidebar_width !== new_width) {
sidebar_width = new_width;
electron.ipcRenderer.sendToHost(
`enhancer:sidebar-width-${sidebar_width}`
);
}
}
}
// window buttons
const buttons = {
element: document.createElement('span'),
insert: ['alwaysontop'],
icons: {
raw: {
alwaysontop: {
on: fs.readFile(
path.resolve(`${__dirname}/icons/alwaysontop_on.svg`)
),
off: fs.readFile(
path.resolve(`${__dirname}/icons/alwaysontop_off.svg`)
),
},
minimize: fs.readFile(
path.resolve(`${__dirname}/icons/minimize.svg`)
),
maximize: {
on: fs.readFile(
path.resolve(`${__dirname}/icons/maximize_on.svg`)
),
off: fs.readFile(
path.resolve(`${__dirname}/icons/maximize_off.svg`)
),
},
close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)),
},
alwaysontop() {
return browser.isAlwaysOnTop()
? buttons.icons.raw.alwaysontop.on
: buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛'
},
minimize() {
return buttons.icons.raw.minimize; // '⚊'
},
maximize() {
return browser.isMaximized()
? buttons.icons.raw.maximize.on
: buttons.icons.raw.maximize.off; // '🗗' : '🗖'
},
close() {
return buttons.icons.raw.close; // '⨉'
},
},
actions: {
async alwaysontop() {
browser.setAlwaysOnTop(!browser.isAlwaysOnTop());
this.innerHTML = await buttons.icons.alwaysontop();
},
minimize() {
browser.minimize();
},
async maximize() {
browser.isMaximized() ? browser.unmaximize() : browser.maximize();
this.innerHTML = await buttons.icons.maximize();
},
close() {
browser.close();
},
},
};
if (settings.frameless && !is_mac)
buttons.insert.push('minimize', 'maximize', 'close');
buttons.element.className = 'window-buttons-area';
for (let btn of buttons.insert) {
buttons.element.innerHTML += `<button class="window-button btn-${btn}">${await buttons.icons[
btn
]()}</button>`;
}
if (settings.frameless && !is_mac)
setInterval(async () => {
const icon = await buttons.icons.maximize(),
el = buttons.element.querySelector('.btn-maximize');
if (el.innerHTML != icon) el.innerHTML = icon;
}, 100);
const buttons = require('./buttons.js');
document
.querySelector('.notion-topbar > div[style*="display: flex"]')
.appendChild(buttons.element);
@ -196,9 +74,58 @@ module.exports = (defaults) =>
.querySelector('.notion-topbar-share-menu')
.parentElement.classList.add('notion-topbar-actions');
for (let btn of buttons.insert) {
document.querySelector(`.window-button.btn-${btn}`).onclick =
buttons.actions[btn];
let sidebar_width;
function communicationLoop() {
const getStyle = (prop) =>
getComputedStyle(document.body).getPropertyValue(prop),
mode = JSON.parse(localStorage.theme).mode;
// ctrl+f theming
notionIpc.sendNotionToIndex('search:set-theme', {
'mode': mode,
'colors': {
'white': getStyle(`--theme_${mode}--todo_ticked-fill`),
'blue': getStyle(`--theme_${mode}--primary`),
},
'borderRadius': 3,
'textColor': getStyle(`--theme_${mode}--text`),
'popoverBackgroundColor': getStyle(`--theme_${mode}--card`),
'popoverBoxShadow': `0 0 0 1px ${getStyle(
`--theme_${mode}--overlay`
)}, 0 3px 6px ${getStyle(`--theme_${mode}--overlay`)}`,
'inputBoxShadow': `box-shadow: ${getStyle(
`--theme_${mode}--primary`
)} 0px 0px 0px 1px inset, ${getStyle(
`--theme_${mode}--primary_hover`
)} 0px 0px 0px 2px !important`,
'inputBackgroundColor': getStyle(`--theme_${mode}--main`),
'dividerColor': getStyle(`--theme_${mode}--table-border`),
'shadowOpacity': 0.2,
});
// enhancer menu
electron.ipcRenderer.send('enhancer:set-theme', {
mode,
rules: require('./css/variables.json').map((rule) => [
rule,
getStyle(rule),
]),
});
// draggable area resizing
const sidebar = document.querySelector('.notion-sidebar');
if (settings.frameless && sidebar) {
let new_sidebar_width =
sidebar.style.height === 'auto' ? '0px' : sidebar.style.width;
if (sidebar_width !== new_sidebar_width) {
sidebar_width = new_sidebar_width;
electron.ipcRenderer.sendToHost(
'enhancer:sidebar-width',
sidebar_width
);
}
}
}
setInterval(communicationLoop, 500);
}
};

7
mods/core/create.js
View File

@ -5,10 +5,15 @@
* (https://dragonwocky.me/) under the MIT license
*/
'use strict';
module.exports = (defaults) =>
function (store, __exports) {
const electron = require('electron'),
allWindows = electron.BrowserWindow.getAllWindows,
allWindows = () =>
electron.BrowserWindow.getAllWindows().filter(
(win) => win.getTitle() !== 'notion-enhancer menu'
),
// createWindow = __exports.createWindow,
path = require('path'),
settings = store(defaults),

56
mods/core/css/buttons.css Normal file
View File

@ -0,0 +1,56 @@
/*
* notion-enhancer
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
* (c) 2020 TarasokUA
* (https://dragonwocky.me/) under the MIT license
*/
.window-buttons-area {
display: flex;
align-items: center;
font-size: 14px;
}
.window-button {
background: transparent;
border: 0;
margin: 0px 0px 0px 9px;
width: 32px;
line-height: 26px;
border-radius: 4px;
font-size: 16px;
transition: background 0.2s;
cursor: default;
}
.window-button svg {
margin-top: 8px;
width: 14px;
height: 14px;
}
.window-button svg path {
fill: currentColor;
}
.window-button svg line {
stroke: currentColor;
}
.notion-dark-theme .window-button:hover {
background: var(--theme_dark--button_hover);
box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border);
}
.notion-dark-theme .window-button#btn-close:hover {
background: var(--theme_dark--button_close);
}
.notion-dark-theme .window-button#btn-close:hover svg line {
stroke: var(--theme_dark--button_close-fill);
}
.notion-light-theme .window-button#btn-close:hover {
background: var(--theme_light--button_close);
}
.notion-light-theme .window-button#btn-close:hover svg line {
stroke: var(--theme_light--button_close-fill);
}
.notion-light-theme .window-button:hover {
background: var(--theme_light--button_hover);
box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border);
}

69
mods/core/css/menu.css Normal file
View File

@ -0,0 +1,69 @@
/*
* notion-enhancer
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
* (https://dragonwocky.me/) under the MIT license
*/
@import './buttons.css';
@import './scrollbars.css';
* {
box-sizing: border-box;
word-break: break-word;
text-decoration: none;
text-size-adjust: 100%;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.notion-dark-theme * {
outline-color: var(--theme_dark--card-border);
}
.notion-light-theme * {
outline-color: var(--theme_light--card-border);
}
.notion-dark-theme {
background: var(--theme_dark--main);
}
.notion-light-theme {
background: var(--theme_light--main);
}
.notion-dark-theme,
.notion-dark-theme button {
color: var(--theme_dark--text);
font-family: var(--theme_dark--font_sans);
}
.notion-light-theme,
.notion-light-theme button {
color: var(--theme_light--text);
font-family: var(--theme_light--font_sans);
}
#menu-titlebar {
display: flex;
padding: 0.4em;
-webkit-app-region: drag;
}
#menu-titlebar button {
-webkit-app-region: no-drag;
}
#menu-titlebar :first-child {
margin-left: auto;
}
.notion-dark-theme #menu-titlebar {
background: var(--theme_dark--dragarea);
}
.notion-light-theme #menu-titlebar {
background: var(--theme_light--dragarea);
}
main {
padding: 1em;
}

8
mods/core/css/shared.css
View File

@ -37,6 +37,14 @@
.notion-page-content .notion-collection_view-block {
width: 100% !important;
}
.notion-page-content
.notion-collection_view-block
[style*='padding-left: 96px'],
.notion-page-content
.notion-collection_view-block
[style*='padding-left: 126px'] {
padding-left: 0 !important;
}
.notion-page-content
.notion-collection_view-block
[style*='min-width: calc(100% - 192px);'],

52
mods/core/css/titlebar.css
View File

@ -6,6 +6,8 @@
* (https://dragonwocky.me/) under the MIT license
*/
@import 'buttons.css';
.frameless .notion-topbar {
height: calc(var(--configured-dragarea_height, 10px) + 45px) !important;
}
@ -45,56 +47,6 @@
}
}
.window-buttons-area {
display: flex;
align-items: center;
font-size: 14px;
}
.window-button {
background: transparent;
border: 0;
margin: 0px 0px 0px 9px;
width: 32px;
line-height: 26px;
border-radius: 4px;
font-size: 16px;
transition: background 0.2s;
cursor: default;
}
.window-button svg {
margin-top: 8px;
width: 14px;
height: 14px;
}
.window-button svg path {
fill: currentColor;
}
.window-button svg line {
stroke: currentColor;
}
.notion-dark-theme .window-button:hover {
background: var(--theme_dark--button_hover);
box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border);
}
.notion-dark-theme .window-button.btn-close:hover {
background: var(--theme_dark--button_close);
}
.notion-dark-theme .window-button.btn-close:hover svg line {
stroke: var(--theme_dark--button_close-fill);
}
.notion-light-theme .window-button.btn-close:hover {
background: var(--theme_light--button_close);
}
.notion-light-theme .window-button.btn-close:hover svg line {
stroke: var(--theme_light--button_close-fill);
}
.notion-light-theme .window-button:hover {
background: var(--theme_light--button_hover);
box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border);
}
/* hide topbar when sidebar is hidden */
.notion-sidebar-container[style*='width: 0px;'] + .notion-frame {
height: calc(

162
mods/core/css/variables.json Normal file
View File

@ -0,0 +1,162 @@
[
"--theme_dark--main",
"--theme_dark--sidebar",
"--theme_dark--overlay",
"--theme_dark--dragarea",
"--theme_dark--preview-width",
"--theme_dark--preview_banner-height",
"--theme_dark--page_banner-height",
"--theme_dark--font_sans",
"--theme_dark--font_serif",
"--theme_dark--font_mono",
"--theme_dark--font_code",
"--theme_dark--scrollbar",
"--theme_dark--scrollbar-border",
"--theme_dark--scrollbar_hover",
"--theme_dark--card",
"--theme_dark--card-border",
"--theme_dark--table-border",
"--theme_dark--button_hover",
"--theme_dark--button_hover-border",
"--theme_dark--button_close",
"--theme_dark--button_close-fill",
"--theme_dark--selected",
"--theme_dark--primary",
"--theme_dark--primary_hover",
"--theme_dark--primary_click",
"--theme_dark--primary_indicator",
"--theme_dark--todo_empty-border",
"--theme_dark--todo_ticked",
"--theme_dark--todo_ticked-fill",
"--theme_dark--todo_ticked-background",
"--theme_dark--todo_hover-background",
"--theme_dark--danger_text",
"--theme_dark--danger_border",
"--theme_dark--text",
"--theme_dark--text_ui",
"--theme_dark--text_ui_info",
"--theme_dark--text_gray",
"--theme_dark--text_brown",
"--theme_dark--text_orange",
"--theme_dark--text_yellow",
"--theme_dark--text_green",
"--theme_dark--text_blue",
"--theme_dark--text_purple",
"--theme_dark--text_pink",
"--theme_dark--text_red",
"--theme_dark--bg_gray",
"--theme_dark--bg_brown",
"--theme_dark--bg_orange",
"--theme_dark--bg_yellow",
"--theme_dark--bg_green",
"--theme_dark--bg_blue",
"--theme_dark--bg_purple",
"--theme_dark--bg_pink",
"--theme_dark--bg_red",
"--theme_dark--line_gray",
"--theme_dark--line_brown",
"--theme_dark--line_orange",
"--theme_dark--line_yellow",
"--theme_dark--line_green",
"--theme_dark--line_blue",
"--theme_dark--line_purple",
"--theme_dark--line_pink",
"--theme_dark--line_red",
"--theme_dark--code_inline-text",
"--theme_dark--code_inline-background",
"--theme_dark--code_text",
"--theme_dark--code-background",
"--theme_dark--code_function",
"--theme_dark--code_keyword",
"--theme_dark--code_tag",
"--theme_dark--code_operator",
"--theme_dark--code_property",
"--theme_dark--code_builtin",
"--theme_dark--code_attr-name",
"--theme_dark--code_comment",
"--theme_dark--code_punctuation",
"--theme_dark--code_doctype",
"--theme_dark--code_number",
"--theme_dark--code_string",
"--theme_dark--code_attr-value",
"--theme_light--main",
"--theme_light--sidebar",
"--theme_light--overlay",
"--theme_light--dragarea",
"--theme_light--preview-width",
"--theme_light--preview_banner-height",
"--theme_light--page_banner-height",
"--theme_light--font_sans",
"--theme_light--font_serif",
"--theme_light--font_mono",
"--theme_light--font_code",
"--theme_light--scrollbar",
"--theme_light--scrollbar-border",
"--theme_light--scrollbar_hover",
"--theme_light--card",
"--theme_light--card-border",
"--theme_light--table-border",
"--theme_light--button_hover",
"--theme_light--button_hover-border",
"--theme_light--button_close",
"--theme_light--button_close-fill",
"--theme_light--selected",
"--theme_light--primary",
"--theme_light--primary_hover",
"--theme_light--primary_click",
"--theme_light--primary_indicator",
"--theme_light--todo_empty-border",
"--theme_light--todo_ticked",
"--theme_light--todo_ticked-fill",
"--theme_light--todo_ticked-background",
"--theme_light--todo_hover-background",
"--theme_light--danger_text",
"--theme_light--danger_border",
"--theme_light--text",
"--theme_light--text_ui",
"--theme_light--text_ui_info",
"--theme_light--text_gray",
"--theme_light--text_brown",
"--theme_light--text_orange",
"--theme_light--text_yellow",
"--theme_light--text_green",
"--theme_light--text_blue",
"--theme_light--text_purple",
"--theme_light--text_pink",
"--theme_light--text_red",
"--theme_light--bg_gray",
"--theme_light--bg_brown",
"--theme_light--bg_orange",
"--theme_light--bg_yellow",
"--theme_light--bg_green",
"--theme_light--bg_blue",
"--theme_light--bg_purple",
"--theme_light--bg_pink",
"--theme_light--bg_red",
"--theme_light--line_gray",
"--theme_light--line_brown",
"--theme_light--line_orange",
"--theme_light--line_yellow",
"--theme_light--line_green",
"--theme_light--line_blue",
"--theme_light--line_purple",
"--theme_light--line_pink",
"--theme_light--line_red",
"--theme_light--code_inline-text",
"--theme_light--code_inline-background",
"--theme_light--code_text",
"--theme_light--code-background",
"--theme_light--code_function",
"--theme_light--code_keyword",
"--theme_light--code_tag",
"--theme_light--code_operator",
"--theme_light--code_property",
"--theme_light--code_builtin",
"--theme_light--code_attr-name",
"--theme_light--code_comment",
"--theme_light--code_punctuation",
"--theme_light--code_doctype",
"--theme_light--code_number",
"--theme_light--code_string",
"--theme_light--code_attr-value"
]

2
mods/core/icons/alwaysontop_off.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M124.859 234.52L67.5474 135.736H102.683V12.184H147.323V135.736H182.459L124.859 234.52Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M124.859 234.52L67.5474 135.736H102.683V12.184H147.323V135.736H182.459L124.859 234.52Z"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 215 B

After

Width:  |  Height:  |  Size: 221 B

2
mods/core/icons/alwaysontop_on.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M102.683 234.52V110.968H67.5474L124.859 12.184L182.459 110.968H147.323V234.52H102.683Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M102.683 234.52V110.968H67.5474L124.859 12.184L182.459 110.968H147.323V234.52H102.683Z"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 215 B

After

Width:  |  Height:  |  Size: 221 B

2
mods/core/icons/close.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><line x1="21.393" x2="233.525" y1="229.525" y2="17.393" stroke="#000" stroke-miterlimit="4.139" stroke-width="30"/><line x1="17.607" x2="229.739" y1="17.393" y2="229.525" stroke="#000" stroke-linejoin="round" stroke-width="30"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><line x1="21.393" x2="233.525" y1="229.525" y2="17.393" stroke="#000" stroke-miterlimit="4.139" stroke-width="30"></line><line x1="17.607" x2="229.739" y1="17.393" y2="229.525" stroke="#000" stroke-linejoin="round" stroke-width="30"></line></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 333 B

After

Width:  |  Height:  |  Size: 345 B

2
mods/core/icons/maximize_off.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M14.7346 227.26V7.03998H235.215V227.26H14.7346ZM46.4546 195.8H203.495V70.48H46.4546V195.8Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M14.7346 227.26V7.03998H235.215V227.26H14.7346ZM46.4546 195.8H203.495V70.48H46.4546V195.8Z"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 219 B

After

Width:  |  Height:  |  Size: 225 B

2
mods/core/icons/maximize_on.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M16.1311 225.96V76.72H84.5111V8.07999H233.751V157.32H165.371V225.96H16.1311ZM110.771 53.58V76.72H165.371V131.32H207.491V53.58H110.771ZM42.3911 199.96H139.111V122.22H42.3911V199.96Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M16.1311 225.96V76.72H84.5111V8.07999H233.751V157.32H165.371V225.96H16.1311ZM110.771 53.58V76.72H165.371V131.32H207.491V53.58H110.771ZM42.3911 199.96H139.111V122.22H42.3911V199.96Z"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 309 B

After

Width:  |  Height:  |  Size: 315 B

2
mods/core/icons/minimize.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M17.8021 138.04V106.072H232.074V138.04H17.8021Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><path fill="#000" d="M17.8021 138.04V106.072H232.074V138.04H17.8021Z"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 176 B

After

Width:  |  Height:  |  Size: 182 B

20
mods/core/menu.html
View File

@ -3,14 +3,20 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Notion Enhancements Menu</title>
<title>notion-enhancer menu</title>
<script
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.5.0/dist/alpine.min.js"
defer
></script>
<link rel="stylesheet" href="./css/menu.css" />
</head>
<style>
:root {
background: white;
}
</style>
<body>
yayayay it works!
<div id="menu-titlebar"></div>
<main>
hi
</main>
<script>
window['__start']();
</script>
</body>
</html>

23
mods/core/menu.js Normal file
View File

@ -0,0 +1,23 @@
/*
* notion-enhancer
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
* (https://dragonwocky.me/) under the MIT license
*/
'use strict';
const __mod = require('./mod.js'),
store = require('../../pkg/store.js'),
settings = store(__mod.id, __mod.defaults),
electron = require('electron');
window['__start'] = async () => {
const buttons = require('./buttons.js');
document.querySelector('#menu-titlebar').appendChild(buttons.element);
electron.ipcRenderer.on('enhancer:set-theme', (event, theme) => {
document.body.className = `notion-${theme.mode}-theme smooth-scrollbars`;
for (const style of theme.rules)
document.body.style.setProperty(style[0], style[1]);
});
};

3
mods/core/mod.js
View File

@ -4,6 +4,8 @@
* (https://dragonwocky.me/) under the MIT license
*/
'use strict';
const defaults = {
openhidden: false,
maximized: false,
@ -31,4 +33,5 @@ module.exports = {
'renderer/index.js': require('./render.js')(defaults),
'renderer/preload.js': require('./client.js')(defaults),
},
defaults,
};

10
mods/core/render.js
View File

@ -4,6 +4,8 @@
* (https://dragonwocky.me/) under the MIT license
*/
'use strict';
module.exports = (defaults) =>
function (store, __exports) {
const __start = window['__start'],
@ -21,14 +23,10 @@ module.exports = (defaults) =>
document
.getElementById('notion')
.addEventListener('ipc-message', (event) => {
if (event.channel.startsWith('enhancer:sidebar-width-'))
if (event.channel !== 'enhancer:sidebar-width') return;
dragarea.setAttribute(
'style',
`${default_styles} top: 2px; height: ${
settings.dragarea_height
}px; left: ${event.channel.slice(
'enhancer:sidebar-width-'.length
)};`
`${default_styles} top: 2px; height: ${settings.dragarea_height}px; left: ${event.args[0]};`
);
});
};

17
mods/core/tray.js
View File

@ -5,6 +5,8 @@
* (https://dragonwocky.me/) under the MIT license
*/
'use strict';
let tray, enhancer_menu;
module.exports = (defaults) =>
@ -29,6 +31,11 @@ module.exports = (defaults) =>
})
);
electron.ipcMain.on('enhancer:set-theme', (event, arg) => {
if (!enhancer_menu) return;
enhancer_menu.webContents.send('enhancer:set-theme', arg);
});
function calculateWindowPos(width, height) {
const screen = electron.screen.getDisplayNearestPoint({
x: tray.getBounds().x,
@ -36,7 +43,6 @@ module.exports = (defaults) =>
});
// left
if (screen.workArea.x > 0)
// The workspace starts more on the right
return {
x: screen.workArea.x,
y: screen.workArea.height - height,
@ -99,11 +105,13 @@ module.exports = (defaults) =>
type: 'normal',
label: 'Enhancements',
click: () => {
if (enhancer_menu) return enhancer_menu.show();
const window_state = require(`${__notion.replace(
/\\/g,
'/'
)}/app/node_modules/electron-window-state/index.js`)({
file: 'menu-windowstate.json',
path: helpers.data_folder,
defaultWidth: 275,
defaultHeight: 600,
});
@ -111,6 +119,8 @@ module.exports = (defaults) =>
enhancer_menu = new electron.BrowserWindow({
show: true,
frame: false,
backgroundColor: '#ffffff',
titleBarStyle: 'hiddenInset',
x:
window_state.x ||
calculateWindowPos(window_state.width, window_state.height).x,
@ -120,11 +130,16 @@ module.exports = (defaults) =>
width: window_state.width,
height: window_state.height,
webPreferences: {
preload: path.resolve(`${__dirname}/menu.js`),
nodeIntegration: true,
session: electron.session.fromPartition('persist:notion'),
},
});
enhancer_menu.loadURL('enhancement://core/menu.html');
enhancer_menu.on('close', (e) => {
window_state.saveState(enhancer_menu);
enhancer_menu = null;
});
},
},
{

1
pkg/apply.js
View File

@ -5,6 +5,7 @@
*/
'use strict';
const fs = require('fs-extra'),
path = require('path'),
{ readdirIterator } = require('readdir-enhanced'),

1
pkg/check.js
View File

@ -5,6 +5,7 @@
*/
'use strict';
const fs = require('fs-extra'),
path = require('path'),
helpers = require('./helpers.js'),

2
pkg/helpers.js
View File

@ -5,6 +5,7 @@
*/
'use strict';
const os = require('os'),
path = require('path'),
fs = require('fs-extra'),
@ -43,7 +44,6 @@ const is_wsl =
);
// transform a wsl filepath to its relative windows filepath if necessary.
// every file path inserted by hack.js should be put through this.
function realpath(hack_path) {
if (!is_wsl) return hack_path;
hack_path = fs.realpathSync(hack_path);

3
pkg/helpers.md
View File

@ -3,6 +3,8 @@
these shared variables/classes/functions (used for consistency of error handling and
cross-platform functionality) were previously documented in the [module-creation docs](../DOCUMENTATION.md).
however, to ensure things can be toggled on/off no non-core code is executed on enhancement.
this does made certain modding more difficult, but with some clever code the same results can be achieved.
it is unlikely any of these will need to be used, so they were removed from the main docs in
an attempt to keep things as simple as possible.
@ -61,7 +63,6 @@ function getNotion() {
```
use `await helpers.getNotion()` to get the notion app parent folder path
(used to acquire the \_\_notion argument above).
primarily used for internal modding of the app (e.g. to apply the modloader and patch launch scripts).

1
pkg/loader.js
View File

@ -5,6 +5,7 @@
*/
'use strict';
const fs = require('fs-extra'),
path = require('path'),
helpers = require('./helpers.js'),

1
pkg/remove.js
View File

@ -5,6 +5,7 @@
*/
'use strict';
const fs = require('fs-extra'),
path = require('path'),
helpers = require('./helpers.js');

1
pkg/store.js
View File

@ -5,6 +5,7 @@
*/
'use strict';
const path = require('path'),
fs = require('fs-extra'),
{ getJSON, data_folder } = require('./helpers.js');