begin settings
mellbacon committed
Dec 13, 2022 at 19:28 UTC
1f7bf35bd988911940d16ed36282e6d6a7d672d1
4 files changed
+162
-4
src/components/Input/Dropdown.svelte
new
+109
@@ -0,0 +1,109 @@
1
+<script lang="ts">
2
+ import { ChevronDown } from "carbon-icons-svelte";
3
+ import { afterUpdate } from "svelte";
4
+
5
+ export let label: string;
6
+ export let items = [];
7
+
8
+ let open = false;
9
+ let button;
10
+ let list;
11
+
12
+ afterUpdate(() => {
13
+ if (open && list) {
14
+ const { _ , width } = button.getBoundingClientRect();
15
+ list.style.width = `${width}px`;
16
+ }
17
+ })
18
+
19
+ $: selected = items[0].name;
20
+</script>
21
+
22
+<svelte:window on:click={(e) => {
23
+ if (open && !button.contains(e.target)) {
24
+ open = false;
25
+ }
26
+}}></svelte:window>
27
+
28
+<div class="dropdown">
29
+ <span class="label">{label}:</span>
30
+ <div class="dropdown-list" class:open>
31
+ <button bind:this={button} on:click={() => {open = !open}}>
32
+ <span>{selected}</span>
33
+ <span class="arrow"><ChevronDown></ChevronDown></span>
34
+ </button>
35
+ {#if open}
36
+ <div bind:this={list} class="item-list">
37
+ {#each items as item}
38
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
39
+ <div id={item.id} class="item" on:click={() => {
40
+ selected = item.name;
41
+ open = false;
42
+ }}>{item.name}</div>
43
+ {/each}
44
+ </div>
45
+ {/if}
46
+ </div>
47
+</div>
48
+
49
+<style lang="scss">
50
+ .dropdown {
51
+ display: flex;
52
+ align-items: center;
53
+ margin: 10px 0;
54
+ }
55
+ .open {
56
+ .arrow {
57
+ transform: rotateZ(180deg) !important;
58
+ }
59
+ }
60
+ .dropdown-list {
61
+ margin-left: 10px;
62
+ min-width: 10rem;
63
+ button {
64
+ display: flex;
65
+ align-items: center;
66
+ justify-content: center;
67
+ min-height: 2rem;
68
+ width: 100%;
69
+ border: 1px solid #333;
70
+ background-color: #1f1f1f;
71
+ padding: 0 20px;
72
+ span {
73
+ display: flex;
74
+ align-items: center;
75
+ &:nth-child(1) {
76
+ margin-right: 5px;
77
+ }
78
+ &.arrow {
79
+ transform: rotateZ(0);
80
+ transition: 0.2s;
81
+ }
82
+ }
83
+ }
84
+ }
85
+ .item-list {
86
+ position: absolute;
87
+ border: 1px solid #333;
88
+ background-color: #1f1f1f;
89
+ max-height: 15rem;
90
+ overflow-y: overlay;
91
+ &::-webkit-scrollbar {
92
+ width: 12px;
93
+ }
94
+ &::-webkit-scrollbar-thumb {
95
+ background-color: #4c4c4c38;
96
+ }
97
+ .item {
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ min-height: 2rem;
102
+ cursor: pointer;
103
+ padding: 0 20px;
104
+ &:hover {
105
+ background-color: #373737;
106
+ }
107
+ }
108
+ }
109
+</style>
\ No newline at end of file
src/components/Input/NumberInput.svelte
new
+38
@@ -0,0 +1,38 @@
1
+<script lang="ts">
2
+ export let label = "";
3
+</script>
4
+
5
+<div class="numberinput">
6
+ <span class="label">{label}:</span>
7
+ <div class="input">
8
+ <input type="number" value="13">
9
+ </div>
10
+</div>
11
+
12
+<style lang="scss">
13
+ .numberinput {
14
+ display: flex;
15
+ align-items: center;
16
+ margin: 10px 0;
17
+ }
18
+ .input {
19
+ margin-left: 10px;
20
+ height: 2rem;
21
+ width: 3rem;
22
+ input {
23
+ background-color: #1f1f1f;
24
+ width: 100%;
25
+ height: 100%;
26
+ display: flex;
27
+ justify-content: center;
28
+ align-items: center;
29
+ text-align: center;
30
+ border: 1px solid #333;
31
+ color: white;
32
+ &::-webkit-inner-spin-button {
33
+ -webkit-appearance: none;
34
+ margin: 0;
35
+ }
36
+ }
37
+ }
38
+</style>
\ No newline at end of file
src/components/Settings/Settings.svelte
+10
-1
@@ -24,10 +24,19 @@
24
height: 100%;
25
width: 100%;
26
display: flex;
27
+ background: #1c1c1c;
28
+ overflow-y: hidden;
29
+ overflow-x: overlay;
30
+ &::-webkit-scrollbar {
31
+ width: 12px;
32
+ }
33
+ &::-webkit-scrollbar-thumb {
34
+ background-color: #4c4c4c38;
35
+ }
36
}
37
#settings-list {
38
height: 100%;
30
- min-width: 9rem;
39
+ min-width: 15rem;
40
border-right: solid 1px #333;
41
padding-top: 1rem;
42
}
src/components/Settings/settings/general/AppearanceSettings.svelte
+5
-3
@@ -1,13 +1,15 @@
1
<script>
2
+ import NumberInput from "../../../../components/Input/NumberInput.svelte";
3
+import Dropdown from "../../../../components/Input/Dropdown.svelte";
4
+
5
let themes = [
6
{id: 0, name: "Light"},
7
{id: 1, name: "Dark"},
5
- {id: 2, name: "Myst"}
8
]
9
let fonts = [
10
{id: 0, name: "Roboto"},
11
{id: 1, name: "Fira Code"},
10
- {id: 2, name: "Cursed"}
12
]
13
</script>
13
-Settings
\ No newline at end of file
14
+<Dropdown label="Theme" items={themes}></Dropdown>
15
+<NumberInput label="Font Size"></NumberInput>
\ No newline at end of file