dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-11 15:59: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, const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
{ addMutationListener, removeMutationListener } = globalThis.__enhancerApi; { addMutationListener, removeMutationListener } = globalThis.__enhancerApi;
extendProps(props, { extendProps(props, {
class: `notion-enhancer--side-panel order-2 shrink-0 class: `notion-enhancer--panel order-2 shrink-0
transition-[width] open:w-[var(--side\\_panel--width)] transition-[width] open:w-[var(--panel--width)]
border-l-1 border-[color:var(--theme--fg-border)] border-l-1 border-[color:var(--theme--fg-border)]
relative bg-[color:var(--theme--bg-primary)] w-0 relative bg-[color:var(--theme--bg-primary)] w-0
duration-[${transitionDuration}ms] group/panel`, duration-[${transitionDuration}ms] group/panel`,
@ -78,12 +78,16 @@ function Panel({
> >
<${Select} <${Select}
popupMode="dropdown" popupMode="dropdown"
maxWidth="${maxWidth}"
class="w-full text-left" class="w-full text-left"
...${{ _get, _set, values, maxWidth: maxWidth - 56 }} maxWidth=${maxWidth - 56}
minWidth=${minWidth - 56}
...${{ _get, _set, values }}
/> />
</div>`, </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}> $panel = html`<aside ...${props}>
${$resize} ${$resize}
<div <div
@ -166,7 +170,7 @@ function Panel({
_setWidth?.(width); _setWidth?.(width);
} else width = await _getWidth?.(); } else width = await _getWidth?.();
if (isNaN(width)) width = minWidth; if (isNaN(width)) width = minWidth;
$panel.style.setProperty("--side_panel--width", `${width}px`); $panel.style.setProperty("--panel--width", `${width}px`);
repositionHelp(); repositionHelp();
}; };
$panel.open = () => { $panel.open = () => {

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

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