added tabs
mellbacon committed
Aug 15, 2022 at 21:07 UTC
70b46df20fa2b0645bb99b0dcb5d34522716760c
9 files changed
+294
-13
package.json
+2
@@ -33,7 +33,9 @@
33
"@rollup/plugin-json": "^4.1.0",
34
"@rollup/plugin-url": "^7.0.0",
35
"@tauri-apps/api": "^1.0.2",
36
+ "codemirror": "^6.0.1",
37
"sirv-cli": "^2.0.0",
38
+ "sortablejs": "^1.15.0",
39
"xterm": "^4.19.0",
40
"xterm-addon-fit": "^0.5.0"
41
}
public/global.css
+1
@@ -10,6 +10,7 @@ body {
10
padding: 8px;
11
box-sizing: border-box;
12
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13
+ overflow: hidden;
14
}
15
16
a {
src/components/Content/Editor/Editor.svelte
+7
-3
@@ -1,14 +1,18 @@
1
<script lang="ts">
2
import EditorTabs from "./EditorTabs.svelte";
3
+ import { tabs } from "./Tabs";
4
</script>
5
5
-<EditorTabs />
6
-<div id="editor"></div>
6
+{#if $tabs.length > 0}
7
+ <EditorTabs />
8
+ <div id="editor"></div>
9
+{/if}
10
11
<style>
12
#editor {
13
width: 100%;
11
- height: calc(100% - 1.5rem);
14
+ padding-top: 2rem;
15
+ height: calc(100%);
16
background-color: #1C1C1C;
17
z-index: 1;
18
}
src/components/Content/Editor/EditorTabs.svelte
+35
-7
@@ -1,13 +1,41 @@
1
-<script lang="ts"></script>
1
+<script lang="ts">
2
+ import { Sortable } from "sortablejs";
3
+ import { onMount } from "svelte";
4
+ import Tab from "./Tab.svelte";
5
+ import { tabs } from "./Tabs";
6
3
-<div id="editor-tabs">
4
-
7
+ let tabcontainer;
8
+ // TODO: Get this to work
9
+ onMount(() => {
10
+ Sortable.create(tabcontainer, {
11
+ draggable: ".tab",
12
+ animation: 150,
13
+ easing: "cubic-bezier(1, 0, 0, 1)",
14
+ sort: true
15
+ })
16
+ })
17
+</script>
18
+
19
+<div id="editor-tabs" bind:this={tabcontainer}>
20
+ {#each $tabs as tab}
21
+ <Tab label="Untitled-{tab.id}" active={tab.active} id={tab.id} />
22
+ {/each}
23
</div>
24
25
<style>
8
- #editor-tabs {
9
- width: 100%;
10
- height: 1.5rem;
26
+ :global(#editor-tabs) {
27
+ width: -webkit-fill-available;
28
+ height: 2rem;
29
background-color: #333;
30
+ display: flex;
31
+ position: absolute;
32
+ overflow-x: overlay;
33
+ top: 2rem;
34
+ }
35
+ :global(#editor-tabs::-webkit-scrollbar) {
36
+ height: 4px;
37
+ }
38
+ :global(#editor-tabs::-webkit-scrollbar-thumb) {
39
+ background-color: #1b5fdd;
40
}
13
-</style>
\ No newline at end of file
41
+</style>
src/components/Content/Editor/Tab.svelte
new
+77
@@ -0,0 +1,77 @@
1
+<script lang="ts">
2
+ import { closeTab, setActive, tabs } from "./Tabs";
3
+ export let id = 0;
4
+ export let label = "Untitled-1";
5
+ export let active = false;
6
+</script>
7
+<div class="tab" class:tab-active={active} on:click = {
8
+ () => {
9
+ setActive(id);
10
+ }
11
+}>
12
+ <div class="tab-content">
13
+ <span class="tab-label">{label}</span>
14
+ </div>
15
+ <div class="close-tab" on:click={() => {
16
+ closeTab(id);
17
+ }}>
18
+ <span></span>
19
+ </div>
20
+</div>
21
+
22
+<style>
23
+ .tab {
24
+ background-color: rgb(58 58 58);
25
+ height: 100%;
26
+ min-width: 150px;
27
+ flex-grow: 0.05;
28
+ display: flex;
29
+ overflow: hidden;
30
+ color: white;
31
+ justify-content: space-between;
32
+ align-items: center;
33
+ cursor: pointer;
34
+ }
35
+ .tab:not(.tab-active):hover {
36
+ background-color: rgb(43, 43, 43);
37
+ }
38
+ .tab-content::-webkit-scrollbar {
39
+ height: 4px;
40
+ }
41
+ .tab-content::-webkit-scrollbar {
42
+ background-color: #1b5fdd;
43
+ }
44
+ .tab-content {
45
+ display: flex;
46
+ justify-content: center;
47
+ align-items: center;
48
+ margin-left: 2rem;
49
+ overflow-x: overlay;
50
+ overflow-y: hidden;
51
+ height: 100%;
52
+ }
53
+ .tab-active {
54
+ background-color: rgb(28, 28, 28);
55
+ box-shadow: inset 0px -2px 0 0 #1b5fdd;
56
+ }
57
+ .tab-label {
58
+ text-overflow: ellipsis;
59
+ overflow-x: clip;
60
+ white-space: nowrap;
61
+ padding-right: 20px;
62
+ }
63
+ .close-tab span::before {
64
+ content: "\2715";
65
+ line-height: 30px;
66
+ }
67
+ .close-tab span:hover {
68
+ color: gray;
69
+ }
70
+ .close-tab {
71
+ width: 2rem;
72
+ margin-right: .25rem;
73
+ margin-left: -1rem;
74
+ display: flex;
75
+ justify-content: center;
76
+ }
77
+</style>
\ No newline at end of file
src/components/Content/Editor/Tabs.ts
new
+49
@@ -0,0 +1,49 @@
1
+import { writable } from 'svelte/store';
2
+export let tabs = writable([]);
3
+class Tab {
4
+ label: string;
5
+ id: number;
6
+ active: boolean
7
+ constructor(id: number, tabname:string = "", active:boolean = false) {
8
+ this.id = id;
9
+ this.label = tabname;
10
+ this.active = active;
11
+ }
12
+}
13
+
14
+let id = 0;
15
+let activeid;
16
+let tablist: Tab[] = [];
17
+export function addTab() {
18
+ let tab = new Tab(id);
19
+ tablist = [...tablist, tab];
20
+ tabs.set(tablist);
21
+ setActive(id);
22
+ id++;
23
+}
24
+
25
+export function setActive(id) {
26
+ for (let tab of tablist) {
27
+ if (tab.id === id) {
28
+ activeid = id;
29
+ tab.active = true;
30
+ }
31
+ else {
32
+ tab.active = false;
33
+ }
34
+ }
35
+ tabs.set(tablist);
36
+}
37
+
38
+export function closeTab(id) {
39
+ tablist = tablist.filter(t => t.id !== id);
40
+ tabs.set(tablist);
41
+ for (let _ of tablist) {
42
+ if (activeid >= tablist.length - 1) {
43
+ setActive(id - 1);
44
+ }
45
+ else {
46
+ setActive(id + 1);
47
+ }
48
+ }
49
+}
\ No newline at end of file
src/components/Content/MainContainer.svelte
+2
-1
@@ -5,7 +5,7 @@
5
6
<div id="container">
7
<div class="main">
8
-
8
+ <Editor />
9
</div>
10
<Footer></Footer>
11
</div>
@@ -14,6 +14,7 @@
14
#container {
15
flex-grow: 1;
16
height: 100%;
17
+ overflow: hidden;
18
}
19
.main {
20
width: 100%;
src/components/Menu/menu.ts
+5
-2
@@ -1,8 +1,11 @@
1
import { filetree, workspacename } from "../FileTree/TreeStore";
2
-import { data, workspace } from "../FileTree/TreeData";
2
+import { data, loadFile, workspace } from "../FileTree/TreeData";
3
+import { addTab } from "../Content/Editor/Tabs";
4
5
export const filemenu = [
5
- { option: "New File...", shortcut: "Ctrl + N", onclick: () => { console.log("click"); } },
6
+ { option: "New File...", shortcut: "Ctrl + N", onclick: () => {
7
+ addTab();
8
+ } },
9
{ option: "Open File...", shortcut: "Ctrl + O", onclick: () => { console.log("click"); } },
10
{ option: "Open Folder", shortcut: "Ctrl + K", onclick: async () => {
11
let treedata = await data();
yarn.lock
+116
@@ -23,6 +23,70 @@
23
chalk "^2.0.0"
24
js-tokens "^4.0.0"
25
26
+"@codemirror/autocomplete@^6.0.0":
27
+ version "6.1.0"
28
+ resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.1.0.tgz#7d3ca6d49e3a71cfd366c0af16172f5c128376eb"
29
+ integrity sha512-wtO4O5WDyXhhCd4q4utDIDZxnQfmJ++3dGBCG9LMtI79+92OcA1DVk/n7BEupKmjIr8AzvptDz7YQ9ud6OkU+A==
30
+ dependencies:
31
+ "@codemirror/language" "^6.0.0"
32
+ "@codemirror/state" "^6.0.0"
33
+ "@codemirror/view" "^6.0.0"
34
+ "@lezer/common" "^1.0.0"
35
+
36
+"@codemirror/commands@^6.0.0":
37
+ version "6.0.1"
38
+ resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.0.1.tgz#c005dd2dab2f6d90ad00d4a25bfeaaec2393efa6"
39
+ integrity sha512-iNHDByicYqQjs0Wo1MKGfqNbMYMyhS9WV6EwMVwsHXImlFemgEUC+c5X22bXKBStN3qnwg4fArNZM+gkv22baQ==
40
+ dependencies:
41
+ "@codemirror/language" "^6.0.0"
42
+ "@codemirror/state" "^6.0.0"
43
+ "@codemirror/view" "^6.0.0"
44
+ "@lezer/common" "^1.0.0"
45
+
46
+"@codemirror/language@^6.0.0":
47
+ version "6.2.1"
48
+ resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.2.1.tgz#cb10cd785a76e50ecd2fe2dc59ff66af8a41b87a"
49
+ integrity sha512-MC3svxuvIj0MRpFlGHxLS6vPyIdbTr2KKPEW46kCoCXw2ktb4NTkpkPBI/lSP/FoNXLCBJ0mrnUi1OoZxtpW1Q==
50
+ dependencies:
51
+ "@codemirror/state" "^6.0.0"
52
+ "@codemirror/view" "^6.0.0"
53
+ "@lezer/common" "^1.0.0"
54
+ "@lezer/highlight" "^1.0.0"
55
+ "@lezer/lr" "^1.0.0"
56
+ style-mod "^4.0.0"
57
+
58
+"@codemirror/lint@^6.0.0":
59
+ version "6.0.0"
60
+ resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.0.0.tgz#a249b021ac9933b94fe312d994d220f0ef11a157"
61
+ integrity sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==
62
+ dependencies:
63
+ "@codemirror/state" "^6.0.0"
64
+ "@codemirror/view" "^6.0.0"
65
+ crelt "^1.0.5"
66
+
67
+"@codemirror/search@^6.0.0":
68
+ version "6.0.1"
69
+ resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.0.1.tgz#12c20fdfb341fb4ca2125b2eaec35a8cf4b682f1"
70
+ integrity sha512-uOinkOrM+daMduCgMPomDfKLr7drGHB4jHl3Vq6xY2WRlL7MkNsBE0b+XHYa/Mee2npsJOgwvkW4n1lMFeBW2Q==
71
+ dependencies:
72
+ "@codemirror/state" "^6.0.0"
73
+ "@codemirror/view" "^6.0.0"
74
+ crelt "^1.0.5"
75
+
76
+"@codemirror/state@^6.0.0":
77
+ version "6.1.1"
78
+ resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.1.1.tgz#4f512e5e34ea23a5e10b2c1fe43f6195e90417bb"
79
+ integrity sha512-2s+aXsxmAwnR3Rd+JDHPG/1lw0YsA9PEwl7Re88gHJHGfxyfEzKBmsN4rr53RyPIR4lzbbhJX0DCq0WlqlBIRw==
80
+
81
+"@codemirror/view@^6.0.0":
82
+ version "6.2.0"
83
+ resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.2.0.tgz#bae4c486a84174bd9656af9c9d2bd709d5b26c9f"
84
+ integrity sha512-3emW1symh+GoteFMBPsltjmF790U/trouLILATh3JodbF/z98HvcQh2g3+H6dfNIHx16uNonsAF4mNzVr1TJNA==
85
+ dependencies:
86
+ "@codemirror/state" "^6.0.0"
87
+ style-mod "^4.0.0"
88
+ w3c-keyname "^2.2.4"
89
+
90
"@jridgewell/gen-mapping@^0.3.0":
91
version "0.3.2"
92
resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
@@ -63,6 +127,25 @@
127
"@jridgewell/resolve-uri" "^3.0.3"
128
"@jridgewell/sourcemap-codec" "^1.4.10"
129
130
+"@lezer/common@^1.0.0":
131
+ version "1.0.0"
132
+ resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.0.tgz#1c95ae53ec17706aa3cbcc88b52c23f22ed56096"
133
+ integrity sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA==
134
+
135
+"@lezer/highlight@^1.0.0":
136
+ version "1.0.0"
137
+ resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.0.0.tgz#1dc82300f5d39fbd67ae1194b5519b4c381878d3"
138
+ integrity sha512-nsCnNtim90UKsB5YxoX65v3GEIw3iCHw9RM2DtdgkiqAbKh9pCdvi8AWNwkYf10Lu6fxNhXPpkpHbW6mihhvJA==
139
+ dependencies:
140
+ "@lezer/common" "^1.0.0"
141
+
142
+"@lezer/lr@^1.0.0":
143
+ version "1.2.2"
144
+ resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.2.2.tgz#9f5a9c76580e730116bd5432de358506e0eeb7c6"
145
+ integrity sha512-Df2R6Q7mieAVKYOD5ifo9j5SUoT6EHp10FvHU0v4cQ3MoPsifi6mb8eEycI0uNTdtPSCZLqDqT8G1mNvEqSB1Q==
146
+ dependencies:
147
+ "@lezer/common" "^1.0.0"
148
+
149
"@nodelib/fs.scandir@2.1.5":
150
version "2.1.5"
151
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -360,6 +443,19 @@ chokidar@^3.4.1, chokidar@^3.5.0:
443
optionalDependencies:
444
fsevents "~2.3.2"
445
446
+codemirror@^6.0.1:
447
+ version "6.0.1"
448
+ resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
449
+ integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
450
+ dependencies:
451
+ "@codemirror/autocomplete" "^6.0.0"
452
+ "@codemirror/commands" "^6.0.0"
453
+ "@codemirror/language" "^6.0.0"
454
+ "@codemirror/lint" "^6.0.0"
455
+ "@codemirror/search" "^6.0.0"
456
+ "@codemirror/state" "^6.0.0"
457
+ "@codemirror/view" "^6.0.0"
458
+
459
color-convert@^1.9.0:
460
version "1.9.3"
461
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -392,6 +488,11 @@ console-clear@^1.1.0:
488
resolved "https://registry.yarnpkg.com/console-clear/-/console-clear-1.1.1.tgz#995e20cbfbf14dd792b672cde387bd128d674bf7"
489
integrity sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==
490
491
+crelt@^1.0.5:
492
+ version "1.0.5"
493
+ resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94"
494
+ integrity sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==
495
+
496
deepmerge@^4.2.2:
497
version "4.2.2"
498
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -911,6 +1012,11 @@ sorcery@^0.10.0:
1012
sander "^0.5.0"
1013
sourcemap-codec "^1.3.0"
1014
1015
+sortablejs@^1.15.0:
1016
+ version "1.15.0"
1017
+ resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.15.0.tgz#53230b8aa3502bb77a29e2005808ffdb4a5f7e2a"
1018
+ integrity sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==
1019
+
1020
source-map-support@~0.5.20:
1021
version "0.5.21"
1022
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
@@ -936,6 +1042,11 @@ strip-indent@^3.0.0:
1042
dependencies:
1043
min-indent "^1.0.0"
1044
1045
+style-mod@^4.0.0:
1046
+ version "4.0.0"
1047
+ resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.0.tgz#97e7c2d68b592975f2ca7a63d0dd6fcacfe35a01"
1048
+ integrity sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==
1049
+
1050
supports-color@^5.3.0:
1051
version "5.5.0"
1052
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -1023,6 +1134,11 @@ typescript@*, typescript@^4.0.0:
1134
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
1135
integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
1136
1137
+w3c-keyname@^2.2.4:
1138
+ version "2.2.6"
1139
+ resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.6.tgz#8412046116bc16c5d73d4e612053ea10a189c85f"
1140
+ integrity sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==
1141
+
1142
wrappy@1:
1143
version "1.0.2"
1144
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"