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: make peak panel on hover configurable

Browse Source
This commit is contained in:
dragonwocky 2024-02-09 13:46:10 +11:00
parent ad2c2cf199
commit d156d810ba
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -280,13 +280,17 @@ function Panel({
// hovering over the peek trigger will temporarily
// pop out an interactive preview of the panel
let _peekDebounce;
const $peekTrigger = html`<div
class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[96px]
let _peekDebounce, _peekPanelOnHover;
const coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
$peekTrigger = html`<div
class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[96px]
group-&[data-peeked]/panel:(w-[calc(var(--panel--width,0)+8px)])
group-&[data-pinned]/panel:(w-[calc(var(--panel--width,0)+8px)])"
></div>`;
$panel.prepend($peekTrigger);
></div>`;
modDatabase(coreId).then(async (db) => {
_peekPanelOnHover = await db.get("peekPanelOnHover");
if (_peekPanelOnHover) $panel.prepend($peekTrigger);
});
$panel.addEventListener("mouseout", () => {
if (isDragging() || isAnimated() || isPinned()) return;
if (!$panel.matches(":hover")) $panel.close();
@ -331,6 +335,7 @@ function Panel({
$panel.resize();
};
$panel.peek = () => {
if (!_peekPanelOnHover) return;
if (isPeeked() || !panelViews.length) return;
if (isClosed()) Object.assign(animationState, peekAnimation);
animatePanel({ ...openWidth, ...peekAnimation });
@ -353,7 +358,7 @@ function Panel({
// only animate container close if it is actually taking up space,
// otherwise will unnaturally grow + retrigger peek on peek mouseout
if (isPinned()) animate($panel, [{ width }, closedWidth]);
if (!$panel.matches(":hover")) {
if (!$panel.matches(":hover") || !_peekPanelOnHover) {
$panel.removeAttribute("data-pinned");
$panel.removeAttribute("data-peeked");
animatePanel(closedWidth);

6
src/core/mod.json
View File

@ -50,6 +50,12 @@
"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": "toggle",
"key": "peekPanelOnHover",
"description": "Pops the side panel out to preview its content when hovering near the right edge of the window, in the same way that Notion's left-hand sidebar will slide out on hover. Disable this if you prefer to view the panel only by pinning it.",
"value": true
},
{ "type": "heading", "label": "Experimental" },
{
"type": "toggle",