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

feat: implement frameless windows, fix: smooth out menu transitions

Browse Source
This commit is contained in:
dragonwocky 2024-01-23 14:30:47 +11:00
parent db0f3c5228
commit 77322fc8ad
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
29 changed files with 192 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.yarnrc.yml
View File

@ -1,5 +0,0 @@
enableMessageNames: false
nodeLinker: node-modules
yarnPath: .yarn/releases/yarn-3.6.1.cjs

4
scripts/patch-desktop-app.mjs
View File

@ -61,6 +61,10 @@ const mainScript = ".webpack/main/index",
replace(storeDeclaration, storeInterceptor);
replace(updateDeclaration, updateInterceptor);
// conditionally create frameless windows
const titlebarStyle = `titleBarStyle:globalThis.__notionConfig?.titlebarStyle??"hiddenInset"`;
replace(`titleBarStyle:"hiddenInset"`, titlebarStyle);
return scriptContent;
},
[rendererScript]: (scriptContent) =>

6
src/_assets/icons.svg.js
View File

File diff suppressed because one or more lines are too long

3
src/_common/events.js
View File

@ -155,8 +155,7 @@ document.addEventListener("keydown", (event) => {
handleKeypress(event, keydownListeners);
});
globalThis.__enhancerApi ??= {};
Object.assign(globalThis.__enhancerApi, {
Object.assign((globalThis.__enhancerApi ??= {}), {
debounce,
setState,
useState,

3
src/_common/markup.js
View File

@ -587,8 +587,7 @@ const h = (type, props, ...children) => {
},
html = htm.bind(h);
globalThis.__enhancerApi ??= {};
Object.assign(globalThis.__enhancerApi, {
Object.assign((globalThis.__enhancerApi ??= {}), {
html,
extendProps,
});

3
src/_common/registry.js
View File

@ -79,8 +79,7 @@ const modDatabase = async (id) => {
);
};
globalThis.__enhancerApi ??= {};
Object.assign(globalThis.__enhancerApi, {
Object.assign((globalThis.__enhancerApi ??= {}), {
getMods,
getProfile,
isEnabled,

3
src/_common/system.js
View File

@ -146,8 +146,7 @@ const initDatabase = (namespace, fallbacks = {}) => {
} else sendMessage("notion-enhancer", "reload-app");
};
globalThis.__enhancerApi ??= {};
Object.assign(globalThis.__enhancerApi, {
Object.assign((globalThis.__enhancerApi ??= {}), {
platform,
version,
enhancerUrl,

3
src/core/electron.cjs
View File

@ -22,8 +22,7 @@ module.exports = async ({}, db) => {
setPreference("isDraggableTabsEnabled", draggableTabs);
// enable developer mode, access extra debug tools
globalThis.__notionConfig ??= {};
Object.assign(globalThis.__notionConfig, {
Object.assign((globalThis.__notionConfig ??= {}), {
env: developerMode ? "development" : "production",
});

3
src/core/islands/Panel.mjs
View File

@ -385,8 +385,7 @@ function Panel({
return $panel;
}
globalThis.__enhancerApi ??= {};
Object.assign(globalThis.__enhancerApi, {
Object.assign((globalThis.__enhancerApi ??= {}), {
addPanelView,
removePanelView,
});

19
src/core/menu/islands/Footer.mjs
View File

@ -29,29 +29,26 @@ function Footer({ categories }) {
];
});
const buttons = [...$categories.map(([, $btn]) => $btn), $reload],
updateFooter = () => {
const buttonsVisible = buttons.some(($el) => $el.style.display === "");
setState({ footerOpen: buttonsVisible });
};
useState(["view"], ([view]) => {
let footerOpen = $reload.style.display !== "none";
for (const [ids, $btn] of $categories) {
const modActive = ids.some((id) => id === view);
$btn.style.display = modActive ? "" : "none";
const modInCategory = ids.some((id) => id === view);
if (modInCategory) footerOpen = true;
$btn.style.display = modInCategory ? "" : "none";
}
updateFooter();
setState({ footerOpen });
});
useState(["databaseUpdated"], ([databaseUpdated]) => {
$reload.style.display = databaseUpdated ? "" : "none";
updateFooter();
setState({ footerOpen: true });
});
return html`<footer
class="notion-enhancer--menu-footer px-[60px] py-[16px]
flex w-full bg-[color:var(--theme--bg-primary)]
flex w-full bg-[color:var(--theme--bg-primary)] h-[64px]
border-t-(& [color:var(--theme--fg-border)])"
>
${buttons}
${$categories.map(([, $btn]) => $btn)}${$reload}
</footer>`;
}

3
src/core/menu/islands/Mod.mjs
View File

@ -28,7 +28,8 @@ function Mod({
class="notion-enhancer--menu-mod flex items-stretch rounded-[4px]
bg-[color:var(--theme--bg-secondary)] w-full py-[18px] px-[16px]
border border-[color:var(--theme--fg-border)] cursor-pointer
transition duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]"
duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]
transition &+.notion-enhancer--menu-option:mt-[24px]"
>
${thumbnail
? html`<img

40
src/core/menu/islands/View.mjs
View File

@ -25,18 +25,20 @@ function View({ id }, ...children) {
const duration = 100,
cssTransition = `opacity ${duration}ms`;
if (isVisible && !nowActive) {
setState({ transitionInProgress: true });
$view.style.transition = cssTransition;
$view.style.opacity = "0";
setTimeout(() => ($view.style.display = "none"), duration);
$view.parentElement.style.overflow = "hidden";
requestAnimationFrame(() => {
$view.style.transition = cssTransition;
$view.style.opacity = "0";
setTimeout(() => ($view.style.display = "none"), duration);
});
} else if (!isVisible && nowActive) {
setTimeout(() => {
$view.style.opacity = "0";
$view.style.display = "";
requestIdleCallback(() => {
requestAnimationFrame(() => {
$view.style.transition = cssTransition;
$view.style.opacity = "1";
setState({ transitionInProgress: false });
$view.parentElement.style.overflow = "";
});
}, duration);
}
@ -48,28 +50,30 @@ function View({ id }, ...children) {
const duration = 200,
cssTransition = `opacity ${duration}ms, transform ${duration}ms`;
if (isVisible && !nowActive) {
setState({ transitionInProgress: true });
$view.style.transition = cssTransition;
$view.style.transform = `translateX(${
transition === "slide-to-right" ? "-100%" : "100%"
})`;
$view.style.opacity = "0";
setTimeout(() => {
$view.style.display = "none";
$view.style.transform = "";
}, duration);
$view.parentElement.style.overflow = "hidden";
requestAnimationFrame(() => {
$view.style.transition = cssTransition;
$view.style.transform = `translateX(${
transition === "slide-to-right" ? "-100%" : "100%"
})`;
$view.style.opacity = "0";
setTimeout(() => {
$view.style.display = "none";
$view.style.transform = "";
}, duration);
});
} else if (!isVisible && nowActive) {
$view.style.transform = `translateX(${
transition === "slide-to-right" ? "100%" : "-100%"
})`;
$view.style.opacity = "0";
$view.style.display = "";
requestIdleCallback(() => {
requestAnimationFrame(() => {
$view.style.transition = cssTransition;
$view.style.transform = "";
$view.style.opacity = "1";
setTimeout(() => {
setState({ transitionInProgress: false });
$view.parentElement.style.overflow = "";
}, duration);
});
}

5
src/core/menu/menu.mjs
View File

@ -149,10 +149,7 @@ const renderMenu = async () => {
</main>
`;
useState(["footerOpen"], ([footerOpen]) => {
$main.style.height = footerOpen ? "100%" : "calc(100% + 33px)";
});
useState(["transitionInProgress"], ([transitionInProgress]) => {
$main.children[0].style.overflow = transitionInProgress ? "hidden" : "";
$main.style.height = footerOpen ? "100%" : "calc(100% + 65px)";
});
const $skeleton = document.querySelector("#skeleton");

15
src/core/mod.json
View File

@ -12,10 +12,7 @@
}
],
"options": [
{
"type": "heading",
"label": "Hotkeys"
},
{ "type": "heading", "label": "Hotkeys" },
{
"type": "hotkey",
"key": "openMenuHotkey",
@ -34,10 +31,7 @@
"description": "Toggles focus of the Notion window anywhere, even when your Notion app isn't active.",
"value": "Ctrl+Shift+A"
},
{
"type": "heading",
"label": "Appearance"
},
{ "type": "heading", "label": "Appearance" },
{
"type": "file",
"key": "customStyles",
@ -56,10 +50,7 @@
"description": "Sets whether the notion-enhancer icon added to Notion's sidebar should be coloured or monochrome. The latter style will match the theme's icon colour for users who would like the icon to be less noticeable.",
"values": ["Colour", "Monochrome"]
},
{
"type": "heading",
"label": "Experimental"
},
{ "type": "heading", "label": "Experimental" },
{
"type": "toggle",
"key": "draggableTabs",

58
src/extensions/integrated-titlebar/client.mjs
View File

@ -1,58 +0,0 @@
/**
* notion-enhancer: integrated titlebar
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
import { createWindowButtons } from './buttons.mjs';
export default async function (api, db) {
const { web, registry, electron } = api,
tilingMode = await db.get(['tiling']),
dragareaHeight = await db.get(['dragarea_height']),
tabsEnabled = await registry.enabled('e1692c29-475e-437b-b7ff-3eee872e1a42'),
sidebarSelector = '.notion-sidebar',
panelSelector = '#enhancer--panel',
topbarSelector = '.notion-topbar',
topbarActionsSelector = '.notion-topbar-action-buttons';
if (tilingMode || tabsEnabled) return;
let sidebarWidth = '0px',
panelWidth = '0px';
const updateDragareaOffsets = () => {
const $sidebar = document.querySelector(sidebarSelector),
newSidebarWidth =
!$sidebar || $sidebar.style.height === 'auto' ? '0px' : $sidebar.style.width,
$panel = document.querySelector(panelSelector),
newPanelWidth =
$panel && $panel.dataset.enhancerPanelPinned === 'true'
? window
.getComputedStyle(document.documentElement)
.getPropertyValue('--component--panel-width')
: '0px';
if (newSidebarWidth !== sidebarWidth) {
sidebarWidth = newSidebarWidth;
electron.sendMessageToHost('sidebar-width', sidebarWidth);
}
if (newPanelWidth !== panelWidth) {
panelWidth = newPanelWidth;
electron.sendMessageToHost('panel-width', panelWidth);
}
};
web.addDocumentObserver(updateDragareaOffsets);
await web.whenReady([topbarSelector, topbarActionsSelector]);
const $topbar = document.querySelector(topbarSelector),
$dragarea = web.html`<div class="integrated_titlebar--dragarea"></div>`;
$topbar.prepend($dragarea);
document.documentElement.style.setProperty(
'--integrated_titlebar--dragarea-height',
dragareaHeight + 'px'
);
const $topbarActions = document.querySelector(topbarActionsSelector),
$windowButtons = await createWindowButtons(api, db);
web.render($topbarActions.parentElement, $windowButtons);
}

18
src/extensions/integrated-titlebar/createWindow.cjs
View File

@ -1,18 +0,0 @@
/**
* notion-enhancer: integrated titlebar
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
module.exports = function (api, db, __exports, __eval) {
__eval(`
const notionRectFromFocusedWindow = getRectFromFocusedWindow;
getRectFromFocusedWindow = (windowState) => {
const rect = notionRectFromFocusedWindow(windowState);
rect.frame = false;
return rect;
};
`);
};

74
src/extensions/integrated-titlebar/mod.json
View File

@ -1,74 +0,0 @@
{
"name": "Titlebar",
"id": "a5658d03-21c6-4088-bade-fa4780459133",
"environments": ["linux", "win32"],
"version": "0.11.1",
"description": "replaces the native window titlebar with buttons inset into the app.",
"preview": "integrated-titlebar.jpg",
"tags": ["extension", "layout"],
"authors": [
{
"name": "dragonwocky",
"email": "thedragonring.bod@gmail.com",
"homepage": "https://dragonwocky.me/",
"avatar": "https://dragonwocky.me/avatar.jpg"
}
],
"css": {
"frame": ["buttons.css"],
"client": ["buttons.css"],
"menu": ["buttons.css"]
},
"js": {
"frame": ["frame.mjs"],
"client": ["client.mjs"],
"menu": ["menu.mjs"],
"electron": [
{ "source": "createWindow.cjs", "target": "main/createWindow.js" }
]
},
"options": [
{
"type": "toggle",
"key": "tiling",
"label": "tiling window manager mode",
"tooltip": "**completely remove the close/minimise/maximise buttons** (only for advanced use, not recommended)",
"value": false
},
{
"type": "number",
"key": "dragarea_height",
"label": "dragarea height (px)",
"tooltip": "**the height of the rectangle added to the top of the window, used to drag/move the window around** (dragging is not possible in a frameless window without this bar)",
"value": 12
},
{
"type": "text",
"key": "minimize_icon",
"label": "minimize window icon",
"tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
"value": ""
},
{
"type": "text",
"key": "maximize_icon",
"label": "maximize window icon",
"tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
"value": ""
},
{
"type": "text",
"key": "unmaximize_icon",
"label": "unmaximize window icon",
"tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
"value": ""
},
{
"type": "text",
"key": "close_icon",
"label": "close window icon",
"tooltip": "**may be an svg string or any unicode symbol e.g. an emoji** (the default icon will be used if this field is left empty)",
"value": ""
}
]
}

0
src/extensions/integrated-titlebar/buttons.css → src/extensions/titlebar/buttons.css
View File

0
src/extensions/integrated-titlebar/buttons.mjs → src/extensions/titlebar/buttons.mjs
View File

13
src/extensions/titlebar/client.css Normal file
View File

@ -0,0 +1,13 @@
/**
* notion-enhancer: titlebar
* (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
.notion-topbar {
user-select: none;
-webkit-app-region: drag;
}
.notion-topbar > div > * {
-webkit-app-region: no-drag;
}

58
src/extensions/titlebar/client.mjs Normal file
View File

@ -0,0 +1,58 @@
/**
* notion-enhancer: integrated titlebar
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
// import { createWindowButtons } from './buttons.mjs';
export default async function (api, db) {
// const { web, registry, electron } = api,
// tilingMode = await db.get(['tiling']),
// dragareaHeight = await db.get(['dragarea_height']),
// tabsEnabled = await registry.enabled('e1692c29-475e-437b-b7ff-3eee872e1a42'),
// sidebarSelector = '.notion-sidebar',
// panelSelector = '#enhancer--panel',
// topbarSelector = '.notion-topbar',
// topbarActionsSelector = '.notion-topbar-action-buttons';
// if (tilingMode || tabsEnabled) return;
// let sidebarWidth = '0px',
// panelWidth = '0px';
// const updateDragareaOffsets = () => {
// const $sidebar = document.querySelector(sidebarSelector),
// newSidebarWidth =
// !$sidebar || $sidebar.style.height === 'auto' ? '0px' : $sidebar.style.width,
// $panel = document.querySelector(panelSelector),
// newPanelWidth =
// $panel && $panel.dataset.enhancerPanelPinned === 'true'
// ? window
// .getComputedStyle(document.documentElement)
// .getPropertyValue('--component--panel-width')
// : '0px';
// if (newSidebarWidth !== sidebarWidth) {
// sidebarWidth = newSidebarWidth;
// electron.sendMessageToHost('sidebar-width', sidebarWidth);
// }
// if (newPanelWidth !== panelWidth) {
// panelWidth = newPanelWidth;
// electron.sendMessageToHost('panel-width', panelWidth);
// }
// };
// web.addDocumentObserver(updateDragareaOffsets);
// await web.whenReady([topbarSelector, topbarActionsSelector]);
// const $topbar = document.querySelector(topbarSelector),
// $dragarea = web.html`<div class="integrated_titlebar--dragarea"></div>`;
// $topbar.prepend($dragarea);
// document.documentElement.style.setProperty(
// '--integrated_titlebar--dragarea-height',
// dragareaHeight + 'px'
// );
// const $topbarActions = document.querySelector(topbarActionsSelector),
// $windowButtons = await createWindowButtons(api, db);
// web.render($topbarActions.parentElement, $windowButtons);
}

14
src/extensions/titlebar/electron.cjs Normal file
View File

@ -0,0 +1,14 @@
/**
* notion-enhancer: titlebar
* (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
"use strict";
module.exports = async ({}, db) => {
const titlebarStyle = await db.get("titlebarStyle");
Object.assign((globalThis.__notionConfig ??= {}), {
titlebarStyle: "hidden",
});
};

0
src/extensions/integrated-titlebar/frame.mjs → src/extensions/titlebar/frame.mjs
View File

0
src/extensions/integrated-titlebar/integrated-titlebar.jpg → src/extensions/titlebar/integrated-titlebar.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

0
src/extensions/integrated-titlebar/menu.mjs → src/extensions/titlebar/menu.mjs
View File

52
src/extensions/titlebar/mod.json Normal file
View File

@ -0,0 +1,52 @@
{
"id": "a5658d03-21c6-4088-bade-fa4780459133",
"name": "Titlebar",
"version": "0.11.1",
"environments": ["linux", "win32"],
"description": "Replaces the operating system's default window titlebar with buttons inset into the app.",
"thumbnail": "integrated-titlebar.jpg",
"tags": ["extension", "layout"],
"authors": [
{
"name": "dragonwocky",
"homepage": "https://dragonwocky.me/",
"avatar": "https://dragonwocky.me/avatar.jpg"
}
],
"options": [
{
"type": "select",
"key": "titlebarStyle",
"description": "The integrated titlebar replaces the operating system's default window titlebar with buttons inset into the app's interface. Tiling window manager users may choose to fully disable the titlebar instead.",
"values": ["Integrated", "Disabled"]
},
{ "type": "heading", "label": "Icons" },
{
"type": "file",
"key": "minimizeIcon",
"description": "Replaces the default icon used for the integrated titlebar's maximize button with an uploaded .svg image.",
"extensions": ["svg"]
},
{
"type": "file",
"key": "maximizeIcon",
"description": "Replaces the default icon used for the integrated titlebar's maximize button with an uploaded .svg image.",
"extensions": ["svg"]
},
{
"type": "file",
"key": "unmaximizeIcon",
"description": "Replaces the default icon used for the integrated titlebar's maximize button with an uploaded .svg image.",
"extensions": ["svg"]
},
{
"type": "file",
"key": "closeIcon",
"description": "Replaces the default icon used for the integrated titlebar's maximize button with an uploaded .svg image.",
"extensions": ["svg"]
}
],
"clientStyles": ["client.css"],
"clientScripts": ["client.mjs"],
"electronScripts": [[".webpack/main/index", "electron.cjs"]]
}

7
src/load.mjs
View File

@ -7,10 +7,9 @@
"use strict";
export default (async () => {
if (globalThis.__getEnhancerApi) {
globalThis.__enhancerApi ??= {};
Object.assign(globalThis.__enhancerApi, globalThis.__getEnhancerApi());
}
Object.assign((globalThis.__enhancerApi ??= {}), {
...(globalThis.__getEnhancerApi?.() ?? {}),
});
// prettier-ignore
const { enhancerUrl, platform } = globalThis.__enhancerApi,

2
src/registry.json
View File

@ -1 +1 @@
["core", "themes/classic-dark"]
["core", "extensions/titlebar", "themes/classic-dark"]

3
src/worker.js
View File

@ -175,5 +175,4 @@ if (IS_ELECTRON) {
});
}
globalThis.__enhancerApi ??= {};
Object.assign(globalThis.__enhancerApi, { queryDatabase });
Object.assign((globalThis.__enhancerApi ??= {}), { queryDatabase });