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