@setoelkahfi / svara
Code Commits Issues Pulls Sessions CI/CD
feature/tauri-v2
feature/tauri-v2 master
svelte 192 lines 8.02 KB
Raw
1 <script lang="ts">
2 import { onMount } from "svelte";
3 import { appSettings } from "../config/config";
4 import Input from "./utility/Input.svelte";
5 import Select from "./utility/Select.svelte";
6 import FileTreeView from "./FileTree/FileTreeView.svelte";
7 import { getThemes } from "../config/themehandler";
8 import { addEditorTab } from "./EditorTabList.svelte";
9
10 export let hidden = true;
11
12 let editorFontSize;
13 let editorFontFamily;
14 let editorLineHeight;
15 let editorTabSize;
16 let svaraTheme;
17 let editorAutosave;
18 let externalTerminal;
19 let terminalOptions = {"fontWeight": "", "fontSize": "", "fontFamily": "", "lineHeight": "", "cursorStyle": ""};
20 onMount(async () => {
21 editorFontSize = await appSettings.get("editor.fontSize");
22 editorFontFamily = await appSettings.get("editor.fontFamily");
23 editorLineHeight = await appSettings.get("editor.lineHeight");
24 editorTabSize = await appSettings.get("editor.tabSize");
25 editorAutosave = await appSettings.get("editor.autosave");
26 svaraTheme = await appSettings.get("svara.theme");
27 externalTerminal = await appSettings.get("svara.useExternalTerminal");
28 terminalOptions = await appSettings.get("terminal.internal");
29 })
30
31 async function handleAutosaveSelect(e) {
32 await appSettings.set("editor.autosave", e.detail.selection);
33 await appSettings.save();
34 }
35 async function handleThemeSelect(e) {
36 await appSettings.set("svara.theme", e.detail.selection.name);
37 await appSettings.save();
38 }
39 async function handleEditorFontSize(e) {
40 await appSettings.set("editor.fontSize", e.detail.value);
41 await appSettings.save();
42 }
43 async function handleEditorFontFamily(e) {
44 await appSettings.set("editor.fontFamily", e.detail.value);
45 await appSettings.save();
46 }
47 async function handleEditorLineHeight(e) {
48 await appSettings.set("editor.lineHeight", e.detail.value);
49 await appSettings.save();
50 }
51 async function handleEditorTabSize(e) {
52 await appSettings.set("editor.tabSize", e.detail.value);
53 await appSettings.save();
54 }
55 async function handleTerminal(e) {
56 await appSettings.set("svara.useExternalTerminal", e.detail.selection.name);
57 await appSettings.save();
58 }
59 async function handleTerminalFontSize(e) {
60 terminalOptions.fontSize = e.detail.value;
61 await appSettings.set("terminal.internal", terminalOptions);
62 await appSettings.save();
63 }
64 async function handleTerminalFontFamily(e) {
65 terminalOptions.fontFamily = e.detail.value;
66 await appSettings.set("terminal.internal", terminalOptions);
67 await appSettings.save();
68 }
69 async function handleTerminalFontWeight(e) {
70 terminalOptions.fontWeight = e.detail.value;
71 await appSettings.set("terminal.internal", terminalOptions);
72 await appSettings.save();
73 }
74 async function handleTerminalLineHeight(e) {
75 terminalOptions.lineHeight = e.detail.value;
76 await appSettings.set("terminal.internal", terminalOptions);
77 await appSettings.save();
78 }
79 async function handleTerminalCursorStyle(e) {
80 terminalOptions.cursorStyle = e.detail.selection.name;
81 await appSettings.set("terminal.internal", terminalOptions);
82 await appSettings.save();
83
84 }
85 </script>
86
87 <div class="settings-container" class:hidden>
88 <div class="settings-directory">
89 <FileTreeView isExpanded iconsEnabled={false} tree={[
90 {id: 0, path: "", name: "General", children: [
91 {id: 1, path: "", name: "Theme"},
92 {id: 2, path: "", name: "Editor", children: [
93 {id: 3, path: "", name: "Autosave"},
94 {id: 4, path: "", name: "Font Size"},
95 {id: 5, path: "", name: "Font Family"}
96 ]},
97 {id: 6, path: "", name: "Terminal"},
98 ]},
99 ]}></FileTreeView>
100 <!-- svelte-ignore a11y-click-events-have-key-events -->
101 <span id="json" on:click={() => {addEditorTab(appSettings.path, "settings.json")}}>open settings.json</span>
102 </div>
103 <div class="settings">
104 <div class="settings-list">
105 <div class="settings-category">
106 <div class="heading">General</div>
107 <div class="content">
108 <Select label="Theme" items={getThemes()} selected={svaraTheme} on:select={handleThemeSelect}></Select>
109 </div>
110 </div>
111 <div class="settings-category">
112 <div class="heading">Editor</div>
113 <div class="content">
114 <Select label="Autosave" items={[{id: 0, name: "false"}, {id: 1, name: "true"}]} selected={editorAutosave} on:select={handleAutosaveSelect}></Select>
115 <Input _class="settings-input" placeholder="default: 14" value={editorFontSize} extra_small label="Font Size" on:d_input={handleEditorFontSize} />
116 <Input _class="settings-input" placeholder="monospace" value={editorFontFamily} medium label="Font Family" on:d_input={handleEditorFontFamily} />
117 <Input _class="settings-input" placeholder="default: 1.3" value={editorLineHeight} medium label="Line Height" on:d_input={handleEditorLineHeight} />
118 <Input _class="settings-input" placeholder="default: 4" value={editorTabSize} medium label="Tab Size" on:d_input={handleEditorTabSize} />
119 </div>
120 </div>
121 <div class="settings-category">
122 <div class="heading">Terminal</div>
123 <div class="content">
124 <Select label="Use External Terminal" items={[{id: 0, name: "false"}, {id: 1, name: "true"}]} selected={externalTerminal} on:select={handleTerminal} />
125 <Input label="Font Weight" _class="settings-input" placeholder="Cascadia Mono" value={terminalOptions.fontWeight} medium on:d_input={handleTerminalFontWeight} hintText="Values: normal, bold, or 100-900" />
126 <Input label="Font Size" _class="settings-input" placeholder="default: 14" value={terminalOptions.fontSize} extra_small on:d_input={handleTerminalFontSize} />
127 <Input label="Font Family" _class="settings-input" placeholder="Cascadia Mono" value={terminalOptions.fontFamily} medium on:d_input={handleTerminalFontFamily} />
128 <Input label="Line Height" _class="settings-input" placeholder="default: 1.2" value={terminalOptions.lineHeight} medium on:d_input={handleTerminalLineHeight} />
129 <Select label="Cursor Style" items={[{id: 0, name: "bar"}, {id: 1, name: "block"}, {id: 2, name: "underline"}]} selected={terminalOptions.cursorStyle} on:select={handleTerminalCursorStyle} />
130 </div>
131 </div>
132 </div>
133 </div>
134 </div>
135
136 <style lang="scss">
137 .hidden {
138 display: none !important;
139 }
140 .settings-container {
141 height: 100%;
142 display: flex;
143 }
144 .settings {
145 width: 100%;
146 height: 100%;
147 overflow: auto;
148 display: flex;
149 flex-direction: column;
150 justify-content: space-between;
151 }
152 .settings-list {
153 padding: 0 20px;
154 display: flex;
155 flex-direction: column;
156 }
157 .settings-directory {
158 min-width: 13rem;
159 height: 100%;
160 overflow: auto;
161 display: flex;
162 align-items: center;
163 flex-direction: column;
164 #json {
165 font-size: 0.9rem;
166 color: #939393;
167 cursor: pointer;
168 text-decoration: underline;
169 &:hover {
170 color: #4d73ad;
171 }
172 padding: 10px 0;
173 }
174 }
175 .settings-category {
176 padding: 10px 0;
177 }
178 .heading {
179 font-weight: 600;
180 font-size: 20px;
181 &::after {
182 height: 0.05rem;
183 width: 100%;
184 content: "";
185 display: block;
186 margin-top: 10px;
187 }
188 }
189 :global(.settings-input) {
190 margin: 10px 0;
191 }
192 </style>