phaz.uk
this repo has no description
1import { createSignal, For, onMount, Show } from 'solid-js';
2import './TabMenu.css';
3import { NodeManager } from '../Mangers/NodeManager';
4import { Tab } from '../structs/Tab';
5
6export let TabMenu = () => {
7 let [ tabImportOpen, setTabImportOpen ] = createSignal(false);
8 let [ tabs, setTabs ] = createSignal<Tab[]>([], { equals: false });
9
10 let closeTabImportMenu = () => {
11 window.removeEventListener('click', closeTabImportMenu);
12 setTabImportOpen(false);
13 }
14
15 onMount(() => {
16 NodeManager.Instance.HookTabUpdate(setTabs);
17 });
18
19 return (
20 <div class="tab-menu">
21 <For each={Object.values(tabs())}>
22 {
23 tab =>
24 <div class={ tab.selected() ? 'tab-selected ' : 'tab' } onClick={() => {
25 NodeManager.Instance.SelectTab(tab.id);
26 }}>
27 <div class="tab-icon" onClick={async () => {
28 if(tab.selected()){
29 NodeManager.Instance.SaveTab(tab);
30 }
31 }}>
32 <Show when={tab.selected() && tab.needsSave()} fallback={
33 <img src="/assets/icons/pen-to-square-regular-full.svg" width="15" />
34 }>
35 <img src="/assets/icons/floppy-disk-solid-full.svg" width="15" />
36 </Show>
37
38 </div>
39 <div class="tab-meta" onDblClick={( e ) => {
40 let input = <input class="tab-meta-input" value={ e.target.innerHTML } /> as HTMLInputElement;
41
42 e.target.innerHTML = '';
43 e.target.appendChild(input);
44
45 input.select();
46 input.onchange = () => {
47 NodeManager.Instance.RenameTab(tab.id, input.value);
48 e.target.innerHTML = input.value;
49 }
50 }}>{ tab.name }</div>
51 <div class="tab-close" onClick={() => {
52 setTimeout(() => {
53 NodeManager.Instance.CloseTab(tab.id);
54 }, 50)
55 }}><img src="/assets/icons/xmark-solid-full.svg" width="12" /></div>
56 </div>
57 }
58 </For>
59
60 <div class="tab" onClick={() => {
61 NodeManager.Instance.AddTab("Untitled");
62 }} onContextMenu={( e ) => {
63 e.preventDefault();
64 setTabImportOpen(true);
65
66 window.addEventListener('click', closeTabImportMenu);
67 }}>
68 <div class="tab-new-dropdown" style={{ display: tabImportOpen() ? 'block' : 'none' }}>
69 <div class="tab">Import from file</div>
70 <div class="tab">Import from URL</div>
71 </div>
72 <div class="tab-icon"><img src="/assets/icons/plus-solid-full.svg" width="15" /></div>
73 <div class="tab-meta">New Tab</div>
74 </div>
75 </div>
76 )
77}