Skip to content

Commit 75fca1d

Browse files
aradziearadzie
committed
feat: improve the styling of the custom layout designer
1 parent c14a872 commit 75fca1d

File tree

5 files changed

+114
-96
lines changed

5 files changed

+114
-96
lines changed

‎packages/keybr-keyboard-ui/lib/custom/CharacterInfo.tsx

+49-48
Original file line numberDiff line numberDiff line change
@@ -8,54 +8,55 @@ export function CharacterInfo({
88
}: {
99
readonly character: Character | null;
1010
}) {
11-
if (character == null || character === 0x0000) {
12-
return <em className={styles.unassigned}>Unassigned</em>;
13-
}
14-
if (KeyCharacters.isCodePoint(character)) {
15-
let label;
16-
switch (character) {
17-
case 0x0020:
18-
label = "SPACE";
19-
break;
20-
case 0x00a0:
21-
label = "NBSP";
22-
break;
23-
default:
24-
label = (
25-
<span className={styles.char}>{String.fromCodePoint(character)}</span>
26-
);
27-
break;
11+
if (character) {
12+
if (KeyCharacters.isCodePoint(character)) {
13+
let label;
14+
switch (character) {
15+
case 0x0020:
16+
label = "SPACE";
17+
break;
18+
case 0x00a0:
19+
label = "NBSP";
20+
break;
21+
default:
22+
label = (
23+
<span className={styles.char}>
24+
{String.fromCodePoint(character)}
25+
</span>
26+
);
27+
break;
28+
}
29+
return (
30+
<>
31+
{label} {formatCodePoint(character)}
32+
</>
33+
);
34+
}
35+
if (KeyCharacters.isDead(character)) {
36+
const { dead } = character;
37+
const label = (
38+
<span className={clsx(styles.char, styles.dead)}>
39+
{isDiacritic(dead)
40+
? String.fromCodePoint(/* DOTTED CIRCLE */ 0x25cc, dead)
41+
: String.fromCodePoint(dead)}
42+
</span>
43+
);
44+
return (
45+
<>
46+
{label} {formatCodePoint(dead)}
47+
</>
48+
);
49+
}
50+
if (KeyCharacters.isLigature(character)) {
51+
return (
52+
<span className={clsx(styles.char, styles.ligature)}>
53+
{character.ligature}
54+
</span>
55+
);
56+
}
57+
if (KeyCharacters.isSpecial(character)) {
58+
return formatCodePoint(character.special);
2859
}
29-
return (
30-
<>
31-
{label} {formatCodePoint(character)}
32-
</>
33-
);
34-
}
35-
if (KeyCharacters.isDead(character)) {
36-
const { dead } = character;
37-
const label = (
38-
<span className={clsx(styles.char, styles.dead)}>
39-
{isDiacritic(dead)
40-
? String.fromCodePoint(/* DOTTED CIRCLE */ 0x25cc, dead)
41-
: String.fromCodePoint(dead)}
42-
</span>
43-
);
44-
return (
45-
<>
46-
{label} {formatCodePoint(dead)}
47-
</>
48-
);
49-
}
50-
if (KeyCharacters.isLigature(character)) {
51-
return (
52-
<em className={clsx(styles.char, styles.ligature)}>
53-
{character.ligature}
54-
</em>
55-
);
56-
}
57-
if (KeyCharacters.isSpecial(character)) {
58-
return formatCodePoint(character.special);
5960
}
60-
throw new TypeError();
61+
return <span className={styles.unassigned}>Unassigned</span>;
6162
}

‎packages/keybr-keyboard-ui/lib/custom/CustomLayoutDesigner.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { type KeyId } from "@keybr/keyboard";
22
import { exportLayout, importLayout, LayoutBuilder } from "@keybr/keyboard-io";
3-
import { Button, ErrorAlert, Field, FieldList } from "@keybr/widget";
3+
import { Button, ErrorAlert, Field, FieldList, Para } from "@keybr/widget";
44
import { useRef, useState } from "react";
55
import { CustomLayoutProvider, useCustomLayout } from "./context.tsx";
66
import { LayoutView } from "./LayoutView.tsx";
@@ -59,6 +59,9 @@ function DesignPane() {
5959
}
6060
}}
6161
/>
62+
<Para align="center">
63+
This is a preview of the feature that is still a work in progress.
64+
</Para>
6265
<LayoutView keyId={keyId} setKeyId={setKeyId} />
6366
<LiveImport onChange={setKeyId} />
6467
<FieldList>

‎packages/keybr-keyboard-ui/lib/custom/LayoutTable.module.less

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
1+
.root {
2+
max-block-size: 30rem;
3+
padding-inline-end: 1rem;
4+
overflow-x: auto; // For Chrome 129
5+
overflow-inline: auto;
6+
overflow-y: scroll; // For Chrome 129
7+
overflow-block: scroll;
8+
overscroll-behavior: contain;
9+
}
10+
111
.table {
212
table-layout: fixed;
313
inline-size: 100%;
4-
margin-block: 1rem;
5-
padding: 1rem;
614
border: var(--separator-border);
715
border-collapse: collapse;
816
}
917

18+
.table thead {
19+
position: sticky;
20+
inset-block-start: 0;
21+
background-color: var(--primary);
22+
}
23+
1024
.row {
1125
border-block-end: var(--separator-border);
1226
}

‎packages/keybr-keyboard-ui/lib/custom/LayoutTable.tsx

+44-42
Original file line numberDiff line numberDiff line change
@@ -8,47 +8,49 @@ import { ModifierInfo } from "./ModifierInfo.tsx";
88
export function LayoutTable() {
99
const { layout } = useCustomLayout();
1010
return (
11-
<table className={styles.table}>
12-
<thead>
13-
<tr className={styles.row}>
14-
<th className={styles.keyCol}>Key</th>
15-
<th className={styles.characterCol}>
16-
<ModifierInfo modifier={KeyModifier.None} />
17-
</th>
18-
<th className={styles.characterCol}>
19-
<ModifierInfo modifier={KeyModifier.Shift} />
20-
</th>
21-
<th className={styles.characterCol}>
22-
<ModifierInfo modifier={KeyModifier.Alt} />
23-
</th>
24-
<th className={styles.characterCol}>
25-
<ModifierInfo modifier={KeyModifier.ShiftAlt} />
26-
</th>
27-
</tr>
28-
</thead>
29-
<tbody>
30-
{LayoutBuilder.allKeys().map((id) => {
31-
const { a, b, c, d } =
32-
layout.get(id) ?? new KeyCharacters(id, null, null, null, null);
33-
return (
34-
<tr key={id} className={styles.row}>
35-
<td className={styles.keyCol}>{id}</td>
36-
<td className={styles.characterCol}>
37-
<CharacterInfo character={a} />
38-
</td>
39-
<td className={styles.characterCol}>
40-
<CharacterInfo character={b} />
41-
</td>
42-
<td className={styles.characterCol}>
43-
<CharacterInfo character={c} />
44-
</td>
45-
<td className={styles.characterCol}>
46-
<CharacterInfo character={d} />
47-
</td>
48-
</tr>
49-
);
50-
})}
51-
</tbody>
52-
</table>
11+
<div className={styles.root}>
12+
<table className={styles.table}>
13+
<thead>
14+
<tr className={styles.row}>
15+
<th className={styles.keyCol}>Key</th>
16+
<th className={styles.characterCol}>
17+
<ModifierInfo modifier={KeyModifier.None} />
18+
</th>
19+
<th className={styles.characterCol}>
20+
<ModifierInfo modifier={KeyModifier.Shift} />
21+
</th>
22+
<th className={styles.characterCol}>
23+
<ModifierInfo modifier={KeyModifier.Alt} />
24+
</th>
25+
<th className={styles.characterCol}>
26+
<ModifierInfo modifier={KeyModifier.ShiftAlt} />
27+
</th>
28+
</tr>
29+
</thead>
30+
<tbody>
31+
{LayoutBuilder.allKeys().map((id) => {
32+
const { a, b, c, d } =
33+
layout.get(id) ?? new KeyCharacters(id, null, null, null, null);
34+
return (
35+
<tr key={id} className={styles.row}>
36+
<td className={styles.keyCol}>{id}</td>
37+
<td className={styles.characterCol}>
38+
<CharacterInfo character={a} />
39+
</td>
40+
<td className={styles.characterCol}>
41+
<CharacterInfo character={b} />
42+
</td>
43+
<td className={styles.characterCol}>
44+
<CharacterInfo character={c} />
45+
</td>
46+
<td className={styles.characterCol}>
47+
<CharacterInfo character={d} />
48+
</td>
49+
</tr>
50+
);
51+
})}
52+
</tbody>
53+
</table>
54+
</div>
5355
);
5456
}

‎packages/keybr-keyboard-ui/lib/custom/LiveImport.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,7 @@ export function LiveImport({
5757
}}
5858
/>
5959
</Field>
60-
<Field>
61-
{(inputData && <LiveInputInfo inputData={inputData} />) || <em>-</em>}
62-
</Field>
60+
<Field>{inputData && <LiveInputInfo inputData={inputData} />}</Field>
6361
</FieldList>
6462
);
6563
}

0 commit comments

Comments
 (0)