added checkmark input
mellbacon committed
Dec 17, 2022 at 00:32 UTC
429bd5ba259e4c4cf8bb6e58645fc9412cbb42c3
4 files changed
+163
-5
src/components/Input/CheckmarkInput.svelte
new
+76
@@ -0,0 +1,76 @@
1
+<script lang="ts">
2
+ /**
3
+ * @event {boolean} check
4
+ */
5
+ /**
6
+ * Specify the value of the checkbox
7
+ * @type {any}
8
+ */
9
+ export let value = "";
10
+ /** Specify whether the checkbox is checked */
11
+ export let checked = false;
12
+ /** Set to `true` to mark the field as required */
13
+ export let required = false;
14
+ /** Set to `true` for the checkbox to be read-only */
15
+ export let readonly = false;
16
+ /** Set to `true` to disable the checkbox */
17
+ export let disabled = false;
18
+ /** Specify the label text */
19
+ export let labelText = "";
20
+ /** Set to `true` to visually hide the label text */
21
+ export let hideLabel = false;
22
+ /** Set a name for the input element */
23
+ export let name = "";
24
+ /**
25
+ * Specify the title attribute for the label element
26
+ * @type {string}
27
+ */
28
+ export let title = undefined;
29
+ /** Set an id for the input label */
30
+ export let id = "ccs-" + Math.random().toString(36);
31
+ /** Obtain a reference to the input HTML element */
32
+ export let ref = null;
33
+ import { createEventDispatcher } from "svelte";
34
+ const dispatch = createEventDispatcher();
35
+ $: checked = checked;
36
+ $: dispatch("check", checked);
37
+ let refLabel = null;
38
+ $: isTruncated = refLabel?.offsetWidth < refLabel?.scrollWidth;
39
+ $: title = !title && isTruncated ? refLabel?.innerText : title;
40
+ </script>
41
+ <!-- svelte-ignore a11y-mouse-events-have-key-events -->
42
+ <div
43
+ class:bx--form-item="{true}"
44
+ class:bx--checkbox-wrapper="{true}"
45
+ {...$$restProps}
46
+ on:click
47
+ on:mouseover
48
+ on:mouseenter
49
+ on:mouseleave
50
+>
51
+ <input
52
+ bind:this="{ref}"
53
+ type="checkbox"
54
+ value="{value}"
55
+ checked="{checked}"
56
+ disabled="{disabled}"
57
+ id="{id}"
58
+ name="{name}"
59
+ required="{required}"
60
+ readonly="{readonly}"
61
+ class:bx--checkbox="{true}"
62
+ on:change
63
+ on:blur
64
+ />
65
+ <label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
66
+ <span
67
+ bind:this="{refLabel}"
68
+ class:bx--checkbox-label-text="{true}"
69
+ class:bx--visually-hidden="{hideLabel}"
70
+ >
71
+ <slot name="labelText">
72
+ {labelText}
73
+ </slot>
74
+ </span>
75
+ </label>
76
+</div>
\ No newline at end of file
src/components/Settings/Settings.svelte
+9
@@ -12,6 +12,7 @@
12
<div id="title">{$setting}</div>
13
<div id="setting">
14
<AppearanceSettings></AppearanceSettings>
15
+ <span class="note">Settings incomplete. Everything is nonfunctional except for autosave</span>
16
</div>
17
</div>
18
</div>
@@ -20,6 +21,14 @@
21
.hidden {
22
display: none !important;
23
}
24
+ .note {
25
+ font-weight: 200;
26
+ font-size: 0.7rem;
27
+ color: #ffdc68;
28
+ text-decoration: underline;
29
+ margin-top: 50px;
30
+ display: block;
31
+ }
32
#settings {
33
height: 100%;
34
width: 100%;
src/components/Settings/settings/general/AppearanceSettings.svelte
+15
-5
@@ -1,15 +1,25 @@
1
<script>
2
import NumberInput from "../../../../components/Input/NumberInput.svelte";
3
-import Dropdown from "../../../../components/Input/Dropdown.svelte";
3
+ import Dropdown from "../../../../components/Input/Dropdown.svelte";
4
+ import { systemfonts, editorfont, setFont } from "../../../../config/config";
5
+ import CheckmarkInput from "../../../../components/Input/CheckmarkInput.svelte";
6
7
let themes = [
8
{id: 0, name: "Light"},
9
{id: 1, name: "Dark"},
10
]
11
let fonts = [
10
- {id: 0, name: "Roboto"},
11
- {id: 1, name: "Fira Code"},
12
+ {id: 0, name: "No fonts found"},
13
]
14
+ if ($systemfonts) {
15
+ fonts = $systemfonts;
16
+ }
17
+
18
+ function handleFontSelect(e) {
19
+ setFont(e.detail.selection);
20
+ }
21
</script>
14
-<Dropdown label="Theme" items={themes}></Dropdown>
15
-<NumberInput label="Font Size"></NumberInput>
\ No newline at end of file
22
+<Dropdown label="Window Theme" items={themes}></Dropdown>
23
+<NumberInput label="Editor - Font Size"></NumberInput>
24
+<Dropdown on:select={handleFontSelect} label="Editor - Font Family" items={fonts}></Dropdown>
25
+<CheckmarkInput labelText="Editor - Autosave:" title="Toggle autosave for files"></CheckmarkInput>
\ No newline at end of file
src/overrides.css
+63
@@ -79,6 +79,69 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active, a.bx--tabs__nav-link {
79
.bx--toast-notification__close-button .bx--toast-notification__close-icon {
80
fill: #ffffff;
81
}
82
+.bx--inline-loading {
83
+ justify-content: center;
84
+}
85
+.bx--checkbox-label::before {
86
+ position: absolute;
87
+ top: .125rem;
88
+ right: 0;
89
+ left: unset;
90
+ width: 1.2rem;
91
+ height: 1.2rem;
92
+ border: 1px solid #f4f4f4;
93
+ margin: .125rem .125rem .125rem .1875rem;
94
+ background-color: rgba(0,0,0,0);
95
+ border-radius: 1px;
96
+ content: "";
97
+}
98
+.bx--checkbox:checked+.bx--checkbox-label::before, .bx--checkbox:indeterminate+.bx--checkbox-label::before, .bx--checkbox-label[data-contained-checkbox-state=true]::before, .bx--checkbox-label[data-contained-checkbox-state=mixed]::before {
99
+ border-width: 1px;
100
+ border-color: #f4f4f4;
101
+ background-color: #f4f4f4;
102
+}
103
+.bx--checkbox-label::after {
104
+ position: absolute;
105
+ top: 0.35rem;
106
+ right: 0.3427rem;
107
+ left: unset;
108
+ width: 0.6625rem;
109
+ height: 0.5125rem;
110
+ border-bottom: 2px solid #161616;
111
+ border-left: 2px solid #161616;
112
+ margin-top: -0.1875rem /*rtl:0rem*/;
113
+ background: none;
114
+ content: "";
115
+ -webkit-transform: scale(0) rotate(-45deg);
116
+ transform: scale(0) rotate(-45deg);
117
+ -webkit-transform-origin: bottom right;
118
+ transform-origin: bottom right /*rtl:center*/;
119
+}
120
+.bx--checkbox-label-text {
121
+ padding-right: .375rem;
122
+ padding-left: unset;
123
+}
124
+.bx--checkbox-label {
125
+ font-size: .875rem;
126
+ font-weight: 400;
127
+ line-height: 1.28572;
128
+ letter-spacing: .16px;
129
+ position: relative;
130
+ display: flex;
131
+ min-height: 1.5rem;
132
+ padding-top: .1875rem;
133
+ padding-right: 1.25rem;
134
+ padding-left: unset;
135
+ cursor: pointer;
136
+ -webkit-user-select: none;
137
+ -moz-user-select: none;
138
+ -ms-user-select: none;
139
+ user-select: none;
140
+}
141
+.bx--checkbox:focus+.bx--checkbox-label::before, .bx--checkbox-label__focus::before, .bx--checkbox:checked:focus+.bx--checkbox-label::before, .bx--checkbox-label[data-contained-checkbox-state=true].bx--checkbox-label__focus::before, .bx--checkbox:indeterminate:focus+.bx--checkbox-label::before, .bx--checkbox-label[data-contained-checkbox-state=mixed].bx--checkbox-label__focus::before {
142
+ outline: none;
143
+ outline-offset: 0px;
144
+}
145
/*----------------------*/
146
.editor-pane .splitpanes__pane {
147
background-color: transparent;