Skip to content

Commit a3b4db7

Browse files
benderabendera
committed
Adjust Control css
1 parent 89e8325 commit a3b4db7

4 files changed

Lines changed: 214 additions & 199 deletions

File tree

‎src/components/Controls/Controls.astro‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
1-
---
2-
export type Props = {
3-
target: string;
4-
};
5-
6-
const { target } = Astro.props;
7-
---
8-
9-
<fieldset data-target={target} data-astro-component="Controls" class="controls">
10-
<legend>Controls</legend>
11-
<slot />
12-
</fieldset>
13-
14-
<style>
15-
.controls {
16-
border: 0;
17-
border-radius: 5px;
18-
font-size: var(--sl-text-sm);
19-
margin: 40px 0;
20-
padding: 10px 20px;
21-
}
22-
23-
.controls:last-child {
24-
margin-bottom: 0;
25-
}
26-
27-
legend {
28-
font-weight: bold;
29-
}
30-
</style>
31-
32-
<style is:global>
33-
.vscode-light [data-astro-component="Controls"] {
34-
border: 1px solid rgba(0, 0, 0, 0.1);
35-
}
36-
37-
.vscode-dark [data-astro-component="Controls"] {
38-
border: 1px solid rgba(255, 255, 255, 0.1);
39-
}
40-
</style>
1+
---
2+
export type Props = {
3+
target: string;
4+
};
5+
6+
const { target } = Astro.props;
7+
---
8+
9+
<fieldset data-target={target} data-astro-component="Controls" class="controls">
10+
<legend>Controls</legend>
11+
<slot />
12+
</fieldset>
13+
14+
<style>
15+
.controls {
16+
border: 0;
17+
border-radius: 5px;
18+
font-size: var(--sl-text-sm);
19+
margin: 40px 0;
20+
padding: 10px 20px;
21+
}
22+
23+
.controls:last-child {
24+
margin-bottom: 0;
25+
}
26+
27+
legend {
28+
font-weight: bold;
29+
}
30+
</style>
31+
32+
<style is:global>
33+
.vscode-light [data-astro-component="Controls"] {
34+
border: 1px solid rgba(0, 0, 0, 0.1);
35+
}
36+
37+
.vscode-dark [data-astro-component="Controls"] {
38+
border: 1px solid rgba(255, 255, 255, 0.1);
39+
}
40+
</style>

‎src/components/Controls/EnumField.astro‎

Lines changed: 73 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,73 @@
1-
---
2-
import { uniqueId } from "./uniqueid";
3-
import Field from "./Field.astro";
4-
5-
export type Props = {
6-
name: string;
7-
defaultValue: string;
8-
options: string[];
9-
};
10-
11-
const cid = uniqueId("EnumField-");
12-
13-
const { name = "", defaultValue = false, options = [] } = Astro.props;
14-
---
15-
16-
<Field cid={cid} name={name} fieldType="EnumField">
17-
<select id={cid} name={name}>
18-
{
19-
options.map((o) => (
20-
<option value={o} selected={o === defaultValue}>
21-
{o}
22-
</option>
23-
))
24-
}
25-
</select>
26-
</Field>
27-
28-
<style>
29-
select {
30-
border: 1px solid var(--sl-color-gray-5);
31-
font-family: var(--sl-font);
32-
font-size: var(--sl-text-sm);
33-
}
34-
</style>
35-
36-
<script>
37-
function selectChange(ev: Event) {
38-
const field = (ev.target as HTMLOptionElement).closest<HTMLDivElement>(
39-
'[data-astro-component="EnumField"]'
40-
)!;
41-
42-
updateFieldTarget(field);
43-
}
44-
45-
function updateFieldTarget(field: HTMLDivElement) {
46-
const root = field.closest<HTMLFieldSetElement>(
47-
'[data-astro-component="Controls"]'
48-
);
49-
const select = field.querySelector("select")!;
50-
51-
if (root) {
52-
const target = root.dataset.target!;
53-
const targetEl = document.querySelector(target);
54-
55-
if (targetEl) {
56-
targetEl[select.name] = select.value;
57-
}
58-
}
59-
}
60-
61-
document
62-
.querySelectorAll<HTMLDivElement>('[data-astro-component="EnumField"]')
63-
.forEach((el) => {
64-
const select = el.querySelector("select");
65-
select?.addEventListener("change", selectChange);
66-
updateFieldTarget(el);
67-
});
68-
</script>
1+
---
2+
import { uniqueId } from "./uniqueid";
3+
import Field from "./Field.astro";
4+
5+
export type Props = {
6+
name: string;
7+
defaultValue: string;
8+
options: string[];
9+
};
10+
11+
const cid = uniqueId("EnumField-");
12+
13+
const { name = "", defaultValue = false, options = [] } = Astro.props;
14+
---
15+
16+
<Field cid={cid} name={name} fieldType="EnumField">
17+
<select id={cid} name={name}>
18+
{
19+
options.map((o) => (
20+
<option value={o} selected={o === defaultValue}>
21+
{o}
22+
</option>
23+
))
24+
}
25+
</select>
26+
</Field>
27+
28+
<style>
29+
select {
30+
background-color: var(--vscode-settings-dropdownBackground);
31+
border: 1px solid var(--vscode-settings-dropdownBorder);
32+
color: var(--vscode-foreground);
33+
font-family: var(--vscode-font-family);
34+
font-size: var(--vscode-font-size);
35+
font-weight: var(--vscode-font-weight);
36+
line-height: 18px;
37+
padding: 3px 4px;
38+
}
39+
</style>
40+
41+
<script>
42+
function selectChange(ev: Event) {
43+
const field = (ev.target as HTMLOptionElement).closest<HTMLDivElement>(
44+
'[data-astro-component="EnumField"]'
45+
)!;
46+
47+
updateFieldTarget(field);
48+
}
49+
50+
function updateFieldTarget(field: HTMLDivElement) {
51+
const root = field.closest<HTMLFieldSetElement>(
52+
'[data-astro-component="Controls"]'
53+
);
54+
const select = field.querySelector("select")!;
55+
56+
if (root) {
57+
const target = root.dataset.target!;
58+
const targetEl = document.querySelector(target);
59+
60+
if (targetEl) {
61+
targetEl[select.name] = select.value;
62+
}
63+
}
64+
}
65+
66+
document
67+
.querySelectorAll<HTMLDivElement>('[data-astro-component="EnumField"]')
68+
.forEach((el) => {
69+
const select = el.querySelector("select");
70+
select?.addEventListener("change", selectChange);
71+
updateFieldTarget(el);
72+
});
73+
</script>

‎src/components/Controls/Field.astro‎

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
1-
---
2-
export type Props = {
3-
cid: string;
4-
fieldType: string;
5-
name: string;
6-
};
7-
8-
const { cid, fieldType, name } = Astro.props;
9-
---
10-
11-
<div data-cid={cid} data-astro-component={fieldType} class="Field">
12-
<label for={cid}>{name}</label>
13-
<slot />
14-
</div>
15-
16-
<style>
17-
.Field {
18-
align-items: center;
19-
display: flex;
20-
height: 40px;
21-
}
22-
23-
label {
24-
display: block;
25-
padding-right: 10px;
26-
text-align: right;
27-
user-select: none;
28-
width: 200px;
29-
}
30-
31-
label::after {
32-
content: ':';
33-
}
34-
</style>
1+
---
2+
export type Props = {
3+
cid: string;
4+
fieldType: string;
5+
name: string;
6+
};
7+
8+
const { cid, fieldType, name } = Astro.props;
9+
---
10+
11+
<div data-cid={cid} data-astro-component={fieldType} class="Field">
12+
<label for={cid}>{name}</label>
13+
<slot />
14+
</div>
15+
16+
<style>
17+
.Field {
18+
align-items: center;
19+
display: flex;
20+
height: 40px;
21+
}
22+
23+
label {
24+
color: var(--vscode-foreground);
25+
display: block;
26+
font-family: var(--vscode-font-family, sans-serif);
27+
font-size: var(--vscode-font-size, 13px);
28+
font-weight: var(--vscode-font-weight, normal);
29+
padding-right: 10px;
30+
text-align: right;
31+
user-select: none;
32+
width: 200px;
33+
}
34+
35+
label::after {
36+
content: ':';
37+
}
38+
</style>

0 commit comments

Comments
 (0)