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

feat(menu): clone notion file upload

Browse Source
This commit is contained in:
dragonwocky 2023-01-12 11:33:47 +11:00
parent b1e1405409
commit f85b3c1359
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
1 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -78,9 +78,30 @@ const HotkeyInput = ({}, ...children) => {};
const ColorInput = ({}, ...children) => {}; const ColorInput = ({}, ...children) => {};
const FileInput = ({}, ...children) => {}; const FileInput = ({ extensions, ...props }, ..._children) => {
// todo: show uploaded file name, clear prev upload
const { html } = globalThis.__enhancerApi;
return html`<label
tabindex="0"
class="flex items-center h-[28px] max-w-[256px]
leading-[1.2] px-[8px] rounded-[4px] cursor-pointer select-none
text-[14px] text-[color:var(--theme--fg-secondary)] transition duration-[20ms]
bg-[color:var(--theme--bg-secondary)] hover:bg-[color:var(--theme--bg-hover)]"
>
<input
type="file"
class="hidden"
accept=${extensions
?.map((ext) => (ext.startsWith(".") ? ext : `.${ext}`))
.join(",")}
...${props}
/>
<i class="i-file-up w-[16px] h-[16px] mr-[8px]"></i>
<span>Upload a file</span>
</label>`;
};
const Select = ({ values, onchange, ...props }, ...children) => { const Select = ({ values, onchange, ...props }, ..._children) => {
const { html } = globalThis.__enhancerApi, const { html } = globalThis.__enhancerApi,
updateWidth = ($select) => { updateWidth = ($select) => {
const $tmp = html`<span const $tmp = html`<span
@ -133,7 +154,7 @@ const Toggle = (props, ..._children) => {
<input <input
tabindex="-1" tabindex="-1"
type="checkbox" type="checkbox"
class="appearance-none w-0 h-0 checked:sibling:children:( class="hidden checked:sibling:children:(
bg-[color:var(--theme--accent-primary)] after:translate-x-[12px])" bg-[color:var(--theme--accent-primary)] after:translate-x-[12px])"
...${props} ...${props}
/> />
@ -183,23 +204,9 @@ const Option = ({ mod, type, ...props }, ..._children) => {
// break; // break;
// case "color": // case "color":
// break; // break;
// case "file": case "file":
// break; $input = html`<${FileInput} extensions=${props.extensions} />`;
// <div break;
// class="notion-focusable"
// role="button"
// tabindex="0"
// style="display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; height: 28px; border-radius: 4px; font-size: 14px; line-height: 1.2; min-width: 0px; padding-left: 8px; padding-right: 8px; color: rgba(255, 255, 255, 0.81); margin-top: 12px; margin-bottom: 4px;"
// >
// ${props.values[0]}
// <svg
// viewBox="0 0 30 30"
// class="chevronDown"
// style="width: 10px; height: 100%; display: block; fill: rgba(255, 255, 255, 0.282); flex-shrink: 0; backface-visibility: hidden; margin-left: 4px;"
// >
// <polygon points="15,17.4 4.8,7 2,9.8 15,23 28,9.8 25.2,7"></polygon>
// </svg>
// </div>
case "select": case "select":
$input = html`<${Select} values=${props.values} />`; $input = html`<${Select} values=${props.values} />`;
break; break;
@ -221,4 +228,13 @@ const Option = ({ mod, type, ...props }, ..._children) => {
<//>`; <//>`;
}; };
export { Sidebar, SidebarSection, SidebarButton, View, Select, Toggle, Option }; export {
Sidebar,
SidebarSection,
SidebarButton,
View,
FileInput,
Select,
Toggle,
Option,
};