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 8dd7d0649c
commit f6b52e5c02
19 changed files with 524 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
repo/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
repo/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
repo/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
repo/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
repo/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
repo/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
repo/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
repo/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
repo/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
repo/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
repo/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
repo/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
repo/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
repo/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
repo/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
repo/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
repo/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,
};

16
repo/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,15 +23,11 @@ module.exports = (defaults) =>
document
.getElementById('notion')
.addEventListener('ipc-message', (event) => {
if (event.channel.startsWith('enhancer:sidebar-width-'))
dragarea.setAttribute(
'style',
`${default_styles} top: 2px; height: ${
settings.dragarea_height
}px; left: ${event.channel.slice(
'enhancer:sidebar-width-'.length
)};`
);
if (event.channel !== 'enhancer:sidebar-width') return;
dragarea.setAttribute(
'style',
`${default_styles} top: 2px; height: ${settings.dragarea_height}px; left: ${event.args[0]};`
);
});
};
};

17
repo/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;
});
},
},
{