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

fix: set min widths on panel content to prevent layout shift on toggle

Browse Source
This commit is contained in:
dragonwocky 2023-08-11 00:15:48 +10:00
parent 9f998b5320
commit 608b8d42d4
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,8 +25,8 @@ function Panel({
const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
{ addMutationListener, removeMutationListener } = globalThis.__enhancerApi;
extendProps(props, {
class: `notion-enhancer--side-panel order-2 shrink-0
transition-[width] open:w-[var(--side\\_panel--width)]
class: `notion-enhancer--panel order-2 shrink-0
transition-[width] open:w-[var(--panel--width)]
border-l-1 border-[color:var(--theme--fg-border)]
relative bg-[color:var(--theme--bg-primary)] w-0
duration-[${transitionDuration}ms] group/panel`,
@ -78,12 +78,16 @@ function Panel({
>
<${Select}
popupMode="dropdown"
maxWidth="${maxWidth}"
class="w-full text-left"
...${{ _get, _set, values, maxWidth: maxWidth - 56 }}
maxWidth=${maxWidth - 56}
minWidth=${minWidth - 56}
...${{ _get, _set, values }}
/>
</div>`,
$view = html`<div class="h-full overflow-y-auto"></div>`,
$view = html`<div
class="overflow-(y-auto x-hidden)
h-full min-w-[var(--panel--width)]"
></div>`,
$panel = html`<aside ...${props}>
${$resize}
<div
@ -166,7 +170,7 @@ function Panel({
_setWidth?.(width);
} else width = await _getWidth?.();
if (isNaN(width)) width = minWidth;
$panel.style.setProperty("--side_panel--width", `${width}px`);
$panel.style.setProperty("--panel--width", `${width}px`);
repositionHelp();
};
$panel.open = () => {

8
src/core/menu/islands/Select.mjs
View File

@ -43,6 +43,7 @@ function Select({
_requireReload = true,
popupMode = "left",
maxWidth = 256,
minWidth = 48,
...props
}) {
const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
@ -52,9 +53,10 @@ function Select({
role="button"
tabindex="0"
class="appearance-none bg-transparent rounded-[4px]
cursor-pointer text-[14px] leading-[28px] h-[28px]
max-w-[${maxWidth}px] pl-[8px] pr-[28px] transition
duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]"
h-[28px] max-w-[${maxWidth}px] min-w-[${minWidth}px]
cursor-pointer text-[14px] overflow-hidden pr-[28px]
transition duration-[20ms] leading-[28px] pl-[8px]
hover:bg-[color:var(--theme--bg-hover)]"
></div>`;
const options = values.map((opt) => {