feat!: added settings tab
mellbacon committed
Jul 12, 2023 at 18:53 UTC
5eb94555cea37e1184a1d292936f2e1836e1387d
2 files changed
+138
-3
src/lib/Editor.svelte
+3
-3
@@ -69,11 +69,11 @@
69
let _ = null;
70
async function updateContent() {
71
await tick();
72
- content = editorView.state.doc.toString();
73
- if (await appSettings.get("editor.autosave")) {
72
+ content = editorView.state.doc.toString();1
73
+ if (await appSettings.get("editor.autosave") === true) {
74
clearTimeout(_);
75
_ = setTimeout(async () => {
76
- if (!$file_info.path || $file_info.path === "") {
76
+ if (!$file_info.path || $file_info.path === $file_info.filename || $file_info.path === "") {
77
console.warn("No path found. Cannot save");
78
return;
79
}
src/lib/Settings.svelte
new
+135
@@ -0,0 +1,135 @@
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 nucleusTheme;
15
+ let editorAutosave;
16
+ onMount(async () => {
17
+ editorFontSize = await appSettings.get("editor.fontSize");
18
+ editorFontFamily = await appSettings.get("editor.fontFamily");
19
+ editorAutosave = await appSettings.get("editor.autosave");
20
+ nucleusTheme = await appSettings.get("nucleus.theme");
21
+ })
22
+
23
+ async function handleSelect(e) {
24
+ await appSettings.set("editor.autosave", e.detail.selection);
25
+ await appSettings.save();
26
+ }
27
+ async function handleThemeSelect(e) {
28
+ await appSettings.set("nucleus.theme", e.detail.selection);
29
+ await appSettings.save();
30
+ }
31
+ async function handleInput(e) {
32
+ await appSettings.set("editor.fontSize", e.detail.value);
33
+ await appSettings.save();
34
+ }
35
+ async function handleFamilySelect(e) {
36
+ await appSettings.set("editor.fontFamily", e.detail.value);
37
+ await appSettings.save();
38
+ }
39
+</script>
40
+
41
+<div class="settings-container" class:hidden>
42
+ <div class="settings-directory">
43
+ <FileTreeView expanded={true} iconsEnabled={false} tree={[
44
+ {id: 0, path: "", name: "General", children: [
45
+ {id: 1, path: "", name: "Theme"},
46
+ {id: 2, path: "", name: "Editor", children: [
47
+ {id: 3, path: "", name: "Autosave"},
48
+ {id: 4, path: "", name: "Font Size"},
49
+ {id: 5, path: "", name: "Font Family"}
50
+ ]},
51
+ ]},
52
+ ]}></FileTreeView>
53
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
54
+ <span id="json" on:click={() => {addEditorTab(appSettings.path, "settings.json")}}>open settings.json</span>
55
+ </div>
56
+ <div class="settings">
57
+ <div class="settings-list">
58
+ <div class="settings-category">
59
+ <div class="heading">General</div>
60
+ <div class="content">
61
+ <Select label="Theme" items={getThemes()} selected={nucleusTheme} on:select={handleThemeSelect}></Select>
62
+ </div>
63
+ </div>
64
+ <div class="settings-category">
65
+ <div class="heading">Editor</div>
66
+ <div class="content">
67
+ <Select label="Autosave" items={[{id: 0, name: "false"}, {id: 1, name: "true"}]} selected={editorAutosave} on:select={handleSelect}></Select>
68
+ <Input _class="settings-input" placeholder="default: 14" value={editorFontSize} extra_small label="Font Size" on:d_input={handleInput} />
69
+ <Input _class="settings-input" placeholder="monospace" value={editorFontFamily} medium label="Font Family" on:d_input={handleFamilySelect} />
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </div>
74
+</div>
75
+
76
+<style lang="scss">
77
+ .hidden {
78
+ display: none !important;
79
+ }
80
+ .settings-container {
81
+ background-color: #171717;
82
+ height: 100%;
83
+ display: flex;
84
+ }
85
+ .settings {
86
+ width: 100%;
87
+ height: 100%;
88
+ overflow: hidden;
89
+ display: flex;
90
+ flex-direction: column;
91
+ justify-content: space-between;
92
+ }
93
+ .settings-list {
94
+ padding: 0 20px;
95
+ display: flex;
96
+ flex-direction: column;
97
+ }
98
+ .settings-directory {
99
+ min-width: 13rem;
100
+ height: 100%;
101
+ border-right: 0.5px solid #333;
102
+ overflow: hidden;
103
+ display: flex;
104
+ align-items: center;
105
+ flex-direction: column;
106
+ #json {
107
+ font-size: 0.9rem;
108
+ color: #939393;
109
+ cursor: pointer;
110
+ text-decoration: underline;
111
+ &:hover {
112
+ color: #4d73ad;
113
+ }
114
+ padding: 10px 0;
115
+ }
116
+ }
117
+ .settings-category {
118
+ padding: 10px 0;
119
+ }
120
+ .heading {
121
+ font-weight: 600;
122
+ font-size: 20px;
123
+ &::after {
124
+ height: 0.05rem;
125
+ width: 100%;
126
+ background-color: #333;
127
+ content: "";
128
+ display: block;
129
+ margin-top: 10px;
130
+ }
131
+ }
132
+ :global(.settings-input) {
133
+ margin: 10px 0;
134
+ }
135
+</style>
\ No newline at end of file