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

feat(menu): show uploaded file name, clear prev uploads button

Browse Source
This commit is contained in:
dragonwocky 2023-01-13 00:05:32 +11:00
parent 8d12d63349
commit d406f99d7e
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
2 changed files with 61 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/core/client.mjs
View File

@ -21,7 +21,7 @@ export default async (api, db) => {
openMenuHotkey = await db.get("openMenuHotkey"), openMenuHotkey = await db.get("openMenuHotkey"),
menuButtonIconStyle = await db.get("menuButtonIconStyle"), menuButtonIconStyle = await db.get("menuButtonIconStyle"),
loadThemeOverrides = await db.get("loadThemeOverrides"), loadThemeOverrides = await db.get("loadThemeOverrides"),
customStyles = await db.get("customStyles"); customStyles = JSON.parse((await db.get("customStyles")) || "{}").content;
// appearance // appearance
@ -38,9 +38,10 @@ export default async (api, db) => {
} }
if (customStyles) { if (customStyles) {
document.head.append(html`<style> const $customStyles = html`<style>
${customStyles} ${customStyles}
</style>`); </style>`;
document.head.append($customStyles);
} }
// menu // menu

78
src/core/menu/components.mjs
View File

@ -100,9 +100,15 @@ function Option({ type, value, description, _update, ...props }) {
$input = html`<${ColorInput} ...${{ value, onchange }} />`; $input = html`<${ColorInput} ...${{ value, onchange }} />`;
break; break;
case "file": case "file":
try {
value = JSON.parse(value);
} catch {
value = {};
}
$input = html`<${FileInput} $input = html`<${FileInput}
filename="${value.filename}"
extensions="${props.extensions}" extensions="${props.extensions}"
onchange=${onchange} onupload=${(upload) => _update(JSON.stringify(upload))}
/>`; />`;
break; break;
case "select": case "select":
@ -278,27 +284,57 @@ function ColorInput({ value, ...props }) {
</label>`; </label>`;
} }
function FileInput({ extensions, ...props }) { function FileInput({ filename, extensions, onupload, onchange, ...props }) {
// todo: show uploaded file name, clear prev upload const { html } = globalThis.__enhancerApi,
const { html } = globalThis.__enhancerApi; $filename = html`<span>${filename || "Upload a file"}</span>`,
return html`<label $clear = html`<button
tabindex="0" class="ml-[8px] h-[14px] cursor-pointer text-[color:var(--theme--fg-secondary)]
class="notion-enhancer--menu-file-input flex shrink-0 items-center transition duration-[20ms] hover:text-[color:var(--theme--fg-primary)]"
h-[28px] leading-[1.2] px-[8px] rounded-[4px] cursor-pointer select-none style=${filename ? "" : "display: none"}
text-[14px] text-[color:var(--theme--fg-secondary)] transition duration-[20ms] onclick=${() => {
bg-[color:var(--theme--bg-secondary)] hover:bg-[color:var(--theme--bg-hover)]" $filename.innerText = "Upload a file";
$clear.style.display = "none";
onupload?.({ filename: "", content: "" });
}}
>
<i class="i-x w-[14px] h-[14px]"></i>
</button>`;
props.onchange = (event) => {
const file = event.target.files[0],
reader = new FileReader();
reader.onload = async (progress) => {
const content = progress.currentTarget.result,
upload = { filename: file.name, content };
$filename.innerText = file.name;
$clear.style.display = "";
onupload?.(upload);
};
reader.readAsText(file);
onchange?.(event);
};
return html`<div
class="notion-enhancer--menu-file-input shrink-0 flex items-center"
> >
<input <label
type="file" tabindex="0"
class="hidden" class="flex items-center cursor-pointer select-none
accept=${extensions h-[28px] text-[14px] leading-[1.2] px-[8px] rounded-[4px]
?.map((ext) => (ext.startsWith(".") ? ext : `.${ext}`)) text-[color:var(--theme--fg-secondary)] bg-[color:var(--theme--bg-secondary)]
.join(",")} transition duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]"
...${props} >
/> <input
<i class="i-file-up w-[16px] h-[16px] mr-[8px]"></i> type="file"
<span>Upload a file</span> class="hidden"
</label>`; accept=${extensions
?.map((ext) => (ext.startsWith(".") ? ext : `.${ext}`))
.join(",")}
...${props}
/>
<i class="i-file-up w-[16px] h-[16px] mr-[8px]"></i>
${$filename}
</label>
${$clear}
</div>`;
} }
function Select({ values, value, onchange, ...props }) { function Select({ values, value, onchange, ...props }) {