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

feat(panel): open panel switcher as dropdown

Browse Source
This commit is contained in:
dragonwocky 2023-08-09 00:01:10 +10:00
parent 0ad2b2ff54
commit 681d5c13f6
Signed by: dragonwocky
GPG Key ID: D408552AAEF956CB
3 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,3 @@
1;
/** /**
* notion-enhancer * notion-enhancer
* (c) 2023 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) * (c) 2023 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
@ -23,7 +22,7 @@ function Panel({
_setWidth, _setWidth,
_getOpen, _getOpen,
_setOpen, _setOpen,
minWidth = 260, minWidth = 250,
maxWidth = 640, maxWidth = 640,
transitionDuration = 300, transitionDuration = 300,
...props ...props
@ -66,12 +65,14 @@ function Panel({
${$resizeHandle} ${$resizeHandle}
<div <div
class="flex justify-between items-center class="flex justify-between items-center
border-(b [color:var(--theme--fg-border)])" border-(b [color:var(--theme--fg-border)])"
> >
<div <div
class="relative flex grow font-medium items-center p-[8.5px] ml-[4px]" class="relative flex grow font-medium items-center p-[8.5px] ml-[4px]"
> >
<${Select} <${Select}
popupMode="dropdown"
maxWidth="${maxWidth}"
class="w-full text-left" class="w-full text-left"
...${{ _get, _set, values, maxWidth: maxWidth - 56 }} ...${{ _get, _set, values, maxWidth: maxWidth - 56 }}
/> />

31
src/core/menu/islands/Popup.mjs
View File

@ -4,23 +4,34 @@
* (https://notion-enhancer.github.io/) under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
function Popup({ trigger, ...props }, ...children) { function Popup(
const { html, extendProps, setState, useState } = globalThis.__enhancerApi; { trigger, mode = "left", width = 250, maxWidth, ...props },
...children
) {
const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
// known values for mode:
// dropdown => panel switcher
isDropdown = mode === "dropdown",
// left => menu option select
isLeft = mode === "left";
extendProps(props, { extendProps(props, {
class: `notion-enhancer--menu-popup group/popup class: `notion-enhancer--menu-popup group/popup
absolute top-0 left-0 w-full h-full z-20 text-left absolute top-0 left-0 z-20 text-left font-normal
flex-(& col) justify-center items-end font-normal flex-(& col) justify-center pointer-events-none
pointer-events-none`, items-end w-full ${isDropdown ? "" : "h-full"}`,
}); });
const $popup = html`<div ...${props}> const $popup = html`<div ...${props}>
<div class="relative right-[calc(100%+8px)]"> <div
class="relative ${isDropdown ? "w-full" : ""}
${isLeft ? "right-[calc(100%+8px)]" : ""}"
>
<div <div
class="bg-[color:var(--theme--bg-secondary)] class="bg-[color:var(--theme--bg-secondary)]
w-[250px] max-w-[calc(100vw-24px)] max-h-[70vh] rounded-[4px] overflow-y-auto drop-shadow-xl max-h-[70vh]
py-[6px] px-[4px] drop-shadow-xl overflow-y-auto ${isDropdown ? "w-full" : "w-[250px] max-w-[calc(100vw-24px)]"}
transition duration-200 opacity-0 scale-95 rounded-[4px] transition duration-200 opacity-0 scale-95 py-[6px] px-[4px]
group-open/popup:(pointer-events-auto opacity-100 scale-100)" group-open/popup:( pointer-events-auto opacity-100 scale-100)"
> >
${children} ${children}
</div> </div>

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

@ -37,6 +37,7 @@ function Select({
_get, _get,
_set, _set,
_requireReload = true, _requireReload = true,
popupMode = "left",
maxWidth = 256, maxWidth = 256,
...props ...props
}) { }) {
@ -66,6 +67,7 @@ function Select({
${$select} ${$select}
<${Popup} <${Popup}
trigger=${$select} trigger=${$select}
mode=${popupMode}
onbeforeclose=${() => { onbeforeclose=${() => {
$select.style.width = `${$select.offsetWidth}px`; $select.style.width = `${$select.offsetWidth}px`;
$select.style.background = "transparent"; $select.style.background = "transparent";