Unsaved file visual
mellobacon committed
Oct 25, 2022 at 14:55 UTC
cdd90e228950b273c3eb8f8a31a1e4114499cd78
3 files changed
+20
-9
src/components/Content/Editor/EditorTabs.svelte
+1
-1
@@ -18,7 +18,7 @@
18
19
<div id="editor-tabs" bind:this={tabcontainer} class:hidden={$hidden}>
20
{#each $tabs as tab}
21
- <Tab label={tab.label} path={tab.path} active={tab.active} id={tab.id} />
21
+ <Tab label={tab.label} path={tab.path} active={tab.active} id={tab.id} saved={tab.saved} />
22
{/each}
23
</div>
24
src/components/Content/Editor/Tab.svelte
+2
-2
@@ -5,10 +5,10 @@
5
export let label = "Untitled-1";
6
export let path = "";
7
export let active = false;
8
- export let unsaved = false;
8
+ export let saved = false;
9
let tab;
10
</script>
11
-<div bind:this={tab} title={path} id={`tab-${id}`} class="tab" class:tab-active={active} class:unsaved={unsaved}>
11
+<div bind:this={tab} title={path} id={`tab-${id}`} class="tab" class:tab-active={active} class:unsaved={!saved}>
12
<div class="tab-content" on:click = {
13
() => {
14
setActive(id);
src/components/Content/Editor/scripts/Tabs.ts
+17
-6
@@ -16,15 +16,14 @@ class Tab {
16
language: string = "Plain Text";
17
linefeed: string;
18
id: number;
19
- active: boolean;
19
+ active: boolean = false;
20
editor: CodeMirrorEditor | null;
21
editorcontent: string;
22
- saved: boolean;
23
- constructor(id: number, file , editor = null, active: boolean = false, saved: boolean = true) {
22
+ saved: boolean = true;
23
+ constructor(id: number, file , editor = null, saved: boolean = true) {
24
this.id = id;
25
this.label = file.filename === "" ? `Untitled-${id}` : file.filename;
26
this.path = file.path;
27
- this.active = active;
27
this.editor = editor;
28
this.editorcontent = file.content;
29
this.saved = saved;
@@ -43,9 +42,16 @@ class Tab {
42
clearTimeout(_);
43
_ = setTimeout(() => {
44
this.editorcontent = e.detail;
46
- if (this.path) {
45
+ if (this.path !== "") {
46
writeFile(this.path, e.detail);
47
console.log(`${this.label} saved`);
48
+ if (!this.saved) {
49
+ this.saved = true;
50
+ setActive(id);
51
+ }
52
+ }
53
+ else {
54
+ this.saved = false;
55
}
56
}, 1000)
57
})
@@ -96,7 +102,7 @@ export async function addNewFileTab() {
102
let content = "";
103
let editor = new CodeMirrorEditor({ target: document.getElementById("tabview"), props: { content: content } });
104
let file = createFile(); // create empty file
99
- let tab = new Tab(id, file, editor);
105
+ let tab = new Tab(id, file, editor, false);
106
tablist = [...tablist, tab];
107
if (tablist.length > 0) {
108
hidden.set(false);
@@ -116,6 +122,7 @@ export async function saveFile() {
122
if (filePath == undefined) return;
123
let file = createFile(filePath.split(sep).pop(), filePath);
124
tab.setFile(file);
125
+ tab.saved = true;
126
setActive(tab.id); // refresh active tab to load file data in status bar
127
}
128
else {
@@ -144,6 +151,10 @@ export function setLanguage(language) {
151
}
152
}
153
154
+export function isSaved(id) {
155
+ return tablist.find(t => t.id == id).saved;
156
+}
157
+
158
export function setActive(id) {
159
for (let tab of tablist) {
160
if (tab.id === id) {