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

Merge branch 'dev' of https://github.com/dragonwocky/notion-enhancer into dev

Browse Source
This commit is contained in:
runargs 2020-10-19 22:49:07 -04:00
commit 17f28af64e
10 changed files with 193 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -39,6 +39,8 @@ a flexibility update.
`box-shadow`, `box-shadow_strong`, `select_input`, and `ui-border`
- bugfix: font sizing applied to overlays/previews.
- bugfix: removed typo in variable name for brown text.
- bugfix: primary-colour text (mainly in "add a \_" popups) is now properly themed.
- bugfix: right-to-left extension applies to text in columns.
- tweak: sticky table/list rows.
- theme: "material ocean" = an oceanic colour palette.
- theme: "dracula" = a theme based on the popular dracula color palette

5
README.md
View File

@ -375,8 +375,9 @@ the font you would like to use, or leave it blank to not change anything.
a couple months after I ([@dragonwocky](https://github.com/dragonwocky/)) picked the project up, at first extending
upon the original base and later moving to the javascript module system.
since then, various community members have helped out heaps - some listed as
the enhancer wouldn't be anything near to what it is now though without
interested community members testing, coding and ideating features - some are listed as
[contributors](https://github.com/dragonwocky/notion-enhancer/graphs/contributors) here on github,
but many helping with code, feedback and testing on discord and in emails.
but many more have been helping out on discord and in emails.
individual modules have their original authors attributed.

19
mods/cherrycola/styles.css
View File

@ -1,14 +1,15 @@
/*
* cherry cola
* (c) 2020 Alexa Baldon (https://github.com/runargs)
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* under the MIT license
*/
:root {
:root {
--cola-main: #180915;
--cola-sec: #1d0919;
--cola-tet: #492341;
--cola-info: #9b6890;
--cola-accent: #bf799b;
--cola-gray: #8a8a8a;
--cola-brown: #755241;
@ -24,11 +25,11 @@
--theme_dark--main: var(--cola-main);
--theme_dark--sidebar: var(--cola-sec);
--theme_dark--overlay: var(--cola-sec);
--theme_dark--dragarea: var(--cola-tet);
--theme_dark--dragarea: #210a1c;
--theme_dark--box-shadow: rgba(20, 0, 16, 0.2) 0px 0px 0px 1px,
rgba(20, 0, 16, 0.2) 0px 2px 4px;
rgba(20, 0, 16, 0.2) 0px 2px 4px;
--theme_dark--box-shadow_strong: rgba(20, 0, 16, 0.1) 0px 0px 0px 1px,
rgba(20, 0, 16, 0.2) 0px 3px 6px, rgba(20, 0, 16, 0.4) 0px 9px 24px;
rgba(20, 0, 16, 0.2) 0px 3px 6px, rgba(20, 0, 16, 0.4) 0px 9px 24px;
/* Scrollbar */
--theme_dark--scrollbar: var(--cola-sec);
@ -59,8 +60,8 @@
/* Default text colors */
--theme_dark--text: #ffffff;
--theme_dark--text_ui: var(--cola-gray);
--theme_dark--text_ui_info: var(--cola-gray);
--theme_dark--text_ui: var(--cola-info);
--theme_dark--text_ui_info: var(--cola-info);
/* Text color options */
--theme_dark--text_gray: var(--cola-gray);
@ -140,12 +141,10 @@
--theme_dark--code_number: var(--theme_dark--text_purple);
--theme_dark--code_string: var(--theme_dark--text_orange);
--theme_dark--code_attr-value: var(--theme_dark--text_orange);
}
/* Quotations as serif */
.notion-dark-theme
.notion-quote-block{
.notion-dark-theme .notion-quote-block {
font-family: Georgia, 'Times New Roman', Times, serif;
background-color: var(--cola-sec);
}

6
mods/core/buttons.js
View File

@ -83,19 +83,19 @@ module.exports = (store) => {
(async () => {
for (let btn of buttons.insert) {
buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
buttons.element.innerHTML += `<button class="window-button btn-${btn}">${await buttons.icons[
btn
]()}</button>`;
}
for (let btn of buttons.insert) {
buttons.element.querySelector(`.window-button#btn-${btn}`).onclick =
buttons.element.querySelector(`.window-button.btn-${btn}`).onclick =
buttons.actions[btn];
}
if (store().frameless && !store().tiling_mode && !is_mac) {
window.addEventListener('resize', (event) => {
Promise.resolve(buttons.icons.maximize()).then((icon) => {
icon = icon.toString();
const el = buttons.element.querySelector('#btn-maximize');
const el = buttons.element.querySelector('.btn-maximize');
if (el.innerHTML != icon) el.innerHTML = icon;
});
});

6
mods/core/css/buttons.css
View File

@ -37,9 +37,7 @@
background: var(--theme--interactive_hover);
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
}
.window-button#btn-close:hover {
.window-button.btn-close:hover {
background: var(--theme--button_close);
}
.window-button#btn-close:hover svg line {
stroke: var(--theme--button_close-fill);
color: var(--theme--button_close-fill);
}

13
mods/core/css/tabs.css
View File

@ -95,7 +95,7 @@ body,
color: var(--theme--text);
-webkit-app-region: no-drag;
border: none;
background-color: transparent;
background: transparent;
}
#titlebar .window-buttons-area {
margin: 0.5em 0.55em 0.5em auto;
@ -132,6 +132,7 @@ body,
}
#tabs .tab:not(.new) span:not(.close) {
width: 8.5em;
margin-right: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -166,9 +167,15 @@ body,
opacity: 1;
}
#tabs .tab .close:hover,
#tabs .tab.new span:hover {
#tabs .tab.new span:hover,
#titlebar .window-button:hover {
border-radius: 4px;
background: var(--theme--table-border);
border-radius: 5px;
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
}
#titlebar .window-button.btn-close:hover {
background: var(--theme--button_close);
color: var(--theme--button_close-fill);
}
#tabs .tab.dragged-over {
box-shadow: inset 4px 0 0 0 var(--theme--selected);

3
mods/core/css/theme.css
View File

@ -403,7 +403,8 @@
background: var(--theme--selected) !important;
}
[style*=' color: rgb(46, 170, 220)'] {
[style*=' color: rgb(46, 170, 220)'],
[style^='color: rgb(46, 170, 220)'] {
color: var(--theme--primary) !important;
}
[style*='fill: rgb(46, 170, 220)'] {

244
mods/core/render.js
View File

@ -86,12 +86,25 @@ module.exports = (store, __exports) => {
};
document.addEventListener('dragstart', (event) => {
if (!this.$titlebar) return;
this.$dragging = getTab(event.target)[0];
const tab = getTab(event.target);
this.$dragging = tab[0];
event.dataTransfer.setData(
'text',
JSON.stringify({
target: electron.remote.getCurrentWindow().webContents.id,
tab: tab[0],
title: tab[1].children[0].innerText,
url: document.getElementById(getTab(event.target)[0]).src,
})
);
event.target.style.opacity = 0.5;
});
document.addEventListener('dragend', (event) => {
if (!this.$titlebar) return;
event.target.style.opacity = '';
document
.querySelectorAll('.dragged-over')
.forEach((el) => el.classList.remove('dragged-over'));
});
document.addEventListener('dragover', (event) => {
if (!this.$titlebar) return;
@ -99,40 +112,54 @@ module.exports = (store, __exports) => {
document
.querySelectorAll('.dragged-over')
.forEach((el) => el.classList.remove('dragged-over'));
const tab = getTab(event.target);
if (tab[1]) tab[1].classList.add('dragged-over');
const tab = getTab(event.target)[1];
if (tab) tab.classList.add('dragged-over');
});
document.addEventListener('drop', (event) => {
if (!this.$titlebar || this.$dragging === null) return;
document.addEventListener('drop', async (event) => {
event.preventDefault();
document
.querySelectorAll('.dragged-over')
.forEach((el) => el.classList.remove('dragged-over'));
const from = getTab(this.views.tabs[+this.$dragging]),
to = getTab(event.target);
if (from[0] !== to[0]) {
if (to[1].classList.contains('new')) {
const list = new Map(this.state.tabs);
list.delete(from[0]);
list.set(from[0], this.state.tabs.get(from[0]));
this.setState({ tabs: list });
} else {
const list = [...this.state.tabs],
fromIndex = list.findIndex(
([id, { title, open }]) => id === from[0]
),
toIndex = list.findIndex(
([id, { title, open }]) => id === to[0]
);
list.splice(
toIndex > fromIndex ? toIndex - 1 : toIndex,
0,
list.splice(fromIndex, 1)[0]
);
this.setState({ tabs: new Map(list) });
}
const eventData = JSON.parse(event.dataTransfer.getData('text'));
if (
eventData.target !==
electron.remote.getCurrentWindow().webContents.id
) {
electron.ipcRenderer.send(
'enhancer:close-tab',
eventData.target,
eventData.tab
);
this.$dragging = await this.newTab(
eventData.url,
eventData.title,
false
);
}
if (this.$titlebar) {
const from = getTab(this.views.tabs[+this.$dragging]),
to = getTab(event.target);
if (from[0] !== to[0]) {
if (to[1].classList.contains('new')) {
const list = new Map(this.state.tabs);
list.delete(from[0]);
list.set(from[0], this.state.tabs.get(from[0]));
this.setState({ tabs: list });
} else {
const list = [...this.state.tabs],
fromIndex = list.findIndex(
([id, { title, open }]) => id === from[0]
),
toIndex = list.findIndex(
([id, { title, open }]) => id === to[0]
);
list.splice(
toIndex > fromIndex ? toIndex - 1 : toIndex,
0,
list.splice(fromIndex, 1)[0]
);
this.setState({ tabs: new Map(list) });
}
}
this.$dragging = null;
}
this.$dragging = null;
});
document.addEventListener('keyup', (event) => {
if (!electron.remote.getCurrentWindow().isFocused()) return;
@ -177,6 +204,9 @@ module.exports = (store, __exports) => {
if (triggered && document.querySelector('.tab.current .close'))
document.querySelector('.tab.current .close').click();
});
electron.ipcRenderer.on('enhancer:close-tab', (event, tab) => {
this.closeTab(tab);
});
}
componentDidMount() {
@ -218,12 +248,17 @@ module.exports = (store, __exports) => {
});
}
newTab(url = '') {
newTab(url = '', title = 'notion.so', animate = true) {
let id = 0;
const list = new Map(this.state.tabs);
while (this.state.tabs.get(id) && this.state.tabs.get(id).open) id++;
list.delete(id);
this.openTab(id, { state: list, load: url || true });
return this.openTab(id, {
state: list,
load: url || true,
title,
animate,
});
}
openTab(
id,
@ -231,70 +266,92 @@ module.exports = (store, __exports) => {
state = new Map(this.state.tabs),
slideOut = new Set(this.state.slideOut),
load,
animate,
title = 'notion.so',
} = {
state: new Map(this.state.tabs),
slideOut: new Set(this.state.slideOut),
load: false,
title: 'notion.so',
animate: false,
}
) {
if (!id && id !== 0) {
if (state.get(this.views.current.id).open) return;
const currentIndex = [...state].findIndex(
([id, { title, open }]) => id === this.views.current.id
);
id = (
[...state].find(
return new Promise((res, rej) => {
if (!id && id !== 0) {
if (state.get(this.views.current.id).open) return res(id);
const currentIndex = [...state].findIndex(
([id, { title, open }]) => id === this.views.current.id
);
id = ([...state].find(
([id, { title, open }], tabIndex) =>
open && tabIndex > currentIndex
) || [...state].find(([id, { title, open }]) => open)
).title;
}
const current_src = this.views.current.$el().src;
this.views.current.id = id;
this.setState(
{
tabs: state.set(id, {
title: state.get(id) ? state.get(id).title : 'notion.so',
open: true,
}),
slideIn: load ? this.state.slideIn.add(id) : this.state.slideIn,
slideOut: slideOut,
},
async () => {
this.focusTab();
if (load) {
await new Promise((res, rej) => {
let attempt;
attempt = setInterval(() => {
if (!document.body.contains(this.views.html[id])) return;
clearInterval(attempt);
res();
}, 50);
});
this.views.html[id].style.opacity = '0';
let unhide;
unhide = () => {
this.views.html[id].style.opacity = '';
this.views.html[id].removeEventListener(
'did-stop-loading',
unhide
);
};
this.views.html[id].addEventListener('did-stop-loading', unhide);
this.views.html[id].loadURL(
typeof load === 'string'
? load
: store().default_page
? idToNotionURL(store().default_page)
: current_src
);
// this.views.html[id].getWebContents().openDevTools();
}
setTimeout(() => {
this.setState({ slideIn: new Set(), slideOut: new Set() });
}, 150);
) || [...state].find(([id, { title, open }]) => open))[0];
}
);
const current_src = this.views.current.$el().src;
this.views.current.id = id;
this.setState(
{
tabs: state.set(id, {
title: state.get(id) ? state.get(id).title : title,
open: true,
}),
slideIn: animate
? this.state.slideIn.add(id)
: this.state.slideIn,
slideOut: slideOut,
},
async () => {
this.focusTab();
new Promise((resolve, reject) => {
let attempt,
clear = () => {
clearInterval(attempt);
return true;
};
attempt = setInterval(() => {
if (this.views.current.id !== id) return clear() && reject();
if (document.body.contains(this.views.html[id]))
return clear() && resolve();
}, 50);
})
.then(() => {
if (load) {
this.views.html[id].style.opacity = '0';
let unhide;
unhide = () => {
this.views.html[id].style.opacity = '';
this.views.html[id].removeEventListener(
'did-stop-loading',
unhide
);
};
this.views.html[id].addEventListener(
'did-stop-loading',
unhide
);
this.views.html[id].loadURL(
typeof load === 'string'
? load
: store().default_page
? idToNotionURL(store().default_page)
: current_src
);
}
})
.catch(() => {
// nothing
})
.finally(() => {
setTimeout(() => {
this.setState(
{ slideIn: new Set(), slideOut: new Set() },
() => res(id)
);
}, 150);
});
}
);
});
}
closeTab(id) {
if ((!id && id !== 0) || !this.state.tabs.get(id)) return;
@ -302,7 +359,7 @@ module.exports = (store, __exports) => {
list.set(id, { ...list.get(id), open: false });
if (![...list].filter(([id, { title, open }]) => open).length)
return electron.remote.getCurrentWindow().close();
this.openTab(
return this.openTab(
this.views.current.id === id ? null : this.views.current.id,
{ state: list, slideOut: this.state.slideOut.add(id) }
);
@ -390,8 +447,11 @@ module.exports = (store, __exports) => {
this.newTab(event.args[0]);
break;
case 'enhancer:close-tab':
if (document.querySelector('.tab.current .close'))
document.querySelector('.tab.current .close').click();
this.closeTab(
event.args[0] || event.args[0] === 0
? event.args[0]
: this.views.current.id
);
break;
}
}

5
mods/core/tray.js
View File

@ -46,6 +46,11 @@ module.exports = (store, __exports) => {
webContents.send('enhancer:get-menu-theme', arg)
);
});
electron.ipcMain.on('enhancer:close-tab', (event, target, tab) => {
electron.webContents
.fromId(target)
.webContents.send('enhancer:close-tab', tab);
});
function calculateWindowPos(width, height) {
const screen = electron.screen.getDisplayNearestPoint({

6
mods/right-to-left/mod.js
View File

@ -12,7 +12,7 @@ module.exports = {
tags: ['extension'],
name: 'right-to-left',
desc: 'enables auto rtl/ltr text direction detection.',
version: '1.4.0',
version: '1.4.1',
author: 'obahareth',
hacks: {
'renderer/preload.js'(store, __exports) {
@ -48,7 +48,9 @@ module.exports = {
function autoAlignPageContent() {
document
.querySelectorAll(
'.notion-page-content > div[data-block-id]:not([dir]), [placeholder="Untitled"]:not([dir])'
`.notion-page-content > div[data-block-id]:not([dir]):not(.notion-column_list-block),
[placeholder="Untitled"]:not([dir]),
.notion-column-block > div[data-block-id]:not([dir])`
)
.forEach((block) => block.setAttribute('dir', 'auto'));
document