Added language list dropdown
mellobacon committed
Oct 24, 2022 at 13:28 UTC
7a0fc6fdfc71ce49d215fb82323e95a5642ba848
4 files changed
+175
-3
public/global.css
+6
-1
@@ -37,12 +37,17 @@ input, button, select, textarea {
37
font-size: inherit;
38
-webkit-padding: 0.4em 0;
39
padding: 0.4em;
40
- margin: 0 0 0.5em 0;
40
+ margin: 0;
41
+ outline: none !important;
42
box-sizing: border-box;
43
border: 1px solid #ccc;
44
border-radius: 2px;
45
}
46
47
+input:focus, button:focus, textarea:focus {
48
+ outline: none !important;
49
+}
50
+
51
input:disabled {
52
color: #ccc;
53
}
src/components/Content/Editor/scripts/Tabs.ts
+13
-1
@@ -51,7 +51,7 @@ class Tab {
51
})
52
}
53
54
- async setLanguage(lang) {
54
+ async setLanguage(lang: string) {
55
let mode = await getLangMode(lang);
56
this.editor.setLanguageMode(mode);
57
}
@@ -121,6 +121,18 @@ export async function saveFile() {
121
else {
122
writeFile(tab.path, tab.editorcontent);
123
}
124
+ break;
125
+ }
126
+ }
127
+}
128
+
129
+export function setLanguage(language) {
130
+ for (let tab of tablist) {
131
+ if (tab.active) {
132
+ file_language.set(language);
133
+ tab.language = language;
134
+ tab.setLanguage(language);
135
+ break;
136
}
137
}
138
}
src/components/Footer/Footer.svelte
+25
-1
@@ -5,6 +5,16 @@
5
import { invoke } from "@tauri-apps/api/tauri";
6
import { homeDir } from '@tauri-apps/api/path';
7
import { filetree } from "../FileTree/scripts/TreeStore";
8
+ import LanguageList from "./LanguageList.svelte";
9
+ import { languages } from "@codemirror/language-data";
10
+
11
+ let langs = [];
12
+ for (let l of languages) {
13
+ let langdata = {lang: l.name, tags: l.extensions}
14
+ langs = [...langs, langdata];
15
+ }
16
+
17
+ let showlangs = false;
18
</script>
19
20
<div id="footer">
@@ -27,9 +37,14 @@
37
<div id="codeinfo">
38
<span title="End of Line Sequence">{$linefeed}</span>
39
<span>{$line_info.line} : {$line_info.col}</span>
30
- <span>{$file_language}</span>
40
+ <span on:click={
41
+ () => {showlangs = true;}
42
+ } id="language">{$file_language}</span>
43
</div>
44
{/if}
45
+ {#if showlangs}
46
+ <LanguageList bind:showlangs {langs}></LanguageList>
47
+ {/if}
48
</div>
49
50
<style>
@@ -53,6 +68,7 @@
68
align-items: center;
69
flex-grow: 1;
70
font-size: 13px;
71
+ height: 100%;
72
}
73
#tools {
74
display: flex;
@@ -83,11 +99,19 @@
99
}
100
#codeinfo span {
101
padding: 0 7px;
102
+ height: 100%;
103
+ display: flex;
104
+ align-items: center;
105
+ }
106
+ #codeinfo span:hover {
107
+ background-color: #b1b1b133;
108
+ cursor: pointer;
109
}
110
#codeinfo span:nth-child(even) {
111
border-right: 1px solid #393939;
112
border-left: 1px solid #393939;
113
}
114
+
115
#apptitle {
116
padding: 0 15px;
117
}
src/components/Footer/LanguageList.svelte
new
+131
@@ -0,0 +1,131 @@
1
+<script lang="ts">
2
+ import { Modal, Search } from "carbon-components-svelte";
3
+ import { setLanguage } from "../Content/Editor/scripts/Tabs";
4
+
5
+ export let showlangs = false;
6
+ export let langs;
7
+
8
+ let selectedlang = "None";
9
+ let selected = false;
10
+</script>
11
+
12
+<Modal
13
+ bind:open={showlangs}
14
+ modalHeading="Languages"
15
+ on:open
16
+ on:close
17
+ passiveModal
18
+>
19
+ <div id="model-content">
20
+ <Search placeholder="Search for a language" size="lg"></Search>
21
+ <div id="langlist">
22
+ <div><span class="note">Missing a language? Search for new ones in Extensions ></span></div>
23
+ {#each langs as language}
24
+ <div class="language" on:click={() => {
25
+ selectedlang = language.lang;
26
+ }}>
27
+ <span class="name">{language.lang}</span>
28
+ <span class="tags">
29
+ {#each language.tags as tag}
30
+ <span class="tag">{tag}</span>
31
+ {/each}
32
+ </span>
33
+ </div>
34
+ {/each}
35
+ </div>
36
+ <div id="selected">Selected: {selectedlang}</div>
37
+ <div id="button" on:click={() => {
38
+ setLanguage(selectedlang);
39
+ showlangs = false;
40
+ }}>
41
+ Select
42
+ </div>
43
+ </div>
44
+</Modal>
45
+
46
+<style>
47
+ :global(.bx--modal-container) {
48
+ max-height: none !important;
49
+ }
50
+ :global(#language-dropdown .bx--modal-content) {
51
+ margin-bottom: 0 !important;
52
+ }
53
+ #model-content {
54
+ display: flex;
55
+ justify-content: center;
56
+ align-items: center;
57
+ flex-direction: column;
58
+ }
59
+ #langlist {
60
+ display: flex;
61
+ flex-direction: column;
62
+ align-items: center;
63
+ width: 100%;
64
+ background-color: #1e1e1e;
65
+ padding: 20px;
66
+ height: 350px;
67
+ overflow-y: overlay;
68
+ }
69
+ #langlist::-webkit-scrollbar {
70
+ width: 10px;
71
+ }
72
+ #langlist::-webkit-scrollbar-thumb {
73
+ background-color: #414141;
74
+ }
75
+ #langlist>div {
76
+ display: flex;
77
+ justify-content: flex-start;
78
+ width: 100%;
79
+ }
80
+ .note {
81
+ font-size: 10px;
82
+ color: #BDD4FF;
83
+ text-decoration: underline;
84
+ cursor: pointer;
85
+ }
86
+ .language {
87
+ padding: 5px 5px;
88
+ border-radius: 3px;
89
+ background-color: #424242;
90
+ display: flex;
91
+ width: 100%;
92
+ justify-content: flex-start;
93
+ margin: 3px 0;
94
+ align-items: center;
95
+ cursor: pointer;
96
+ }
97
+ .language:hover {
98
+ background-color: #2276B2;
99
+ }
100
+ .tags {
101
+ margin-left: auto;
102
+ display: flex;
103
+ }
104
+ .tag {
105
+ margin: 0 3px;
106
+ display: flex;
107
+ justify-content: center;
108
+ align-items: center;
109
+ border-radius: 5px;
110
+ padding: 0 5px;
111
+ color: #717171;
112
+ background-color: #424242;
113
+ }
114
+ #selected {
115
+ font-size: 20px;
116
+ margin: 15px 0;
117
+ }
118
+ #button {
119
+ width: 100px;
120
+ height: 30px;
121
+ background-color: #2276B2;
122
+ font-size: 16px;
123
+ display: flex;
124
+ justify-content: center;
125
+ align-items: center;
126
+ cursor: pointer;
127
+ }
128
+ #button:hover {
129
+ background-color: #195b8a;
130
+ }
131
+</style>
\ No newline at end of file