Skip to content

Commit 5dcfa40

Browse files
bomberfishvelzie
bomberfish
authored and
velzie
committed
improve settings, update some browser elements to use button component
1 parent 0ee32dc commit 5dcfa40

File tree

11 files changed

+159
-163
lines changed

11 files changed

+159
-163
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,5 +54,8 @@
5454
"**/Makefile": false,
5555
"**/*.sh": false,
5656
"**/dist": false
57+
},
58+
"[typescriptreact]": {
59+
"editor.defaultFormatter": "vscode.typescript-language-features"
5760
}
5861
}

‎packages/chrome/public/icon.png‎

754 KB
Loading

‎packages/chrome/src/components/BookmarkPopup.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Icon } from "./Icon";
33
import { browser, type BookmarkEntry } from "../Browser";
44
import { Input } from "./Input";
55
import { closeMenu } from "./Menu";
6+
import { Button } from "./Button";
67

78
export function BookmarkPopup(s: {
89
bookmark: Stateful<BookmarkEntry>;
@@ -31,7 +32,7 @@ export function BookmarkPopup(s: {
3132
/>
3233
</div>
3334
<div class="actions">
34-
<button
35+
<Button
3536
on:click={() => {
3637
if (!s.new) {
3738
browser.bookmarks = browser.bookmarks.filter(
@@ -42,9 +43,9 @@ export function BookmarkPopup(s: {
4243
}}
4344
>
4445
{s.new ? "Cancel" : "Delete"}
45-
</button>
46-
<button
47-
class="accent"
46+
</Button>
47+
<Button
48+
variant="primary"
4849
on:click={() => {
4950
if (s.new) {
5051
browser.bookmarks = [s.bookmark, ...browser.bookmarks];
@@ -54,7 +55,7 @@ export function BookmarkPopup(s: {
5455
}}
5556
>
5657
{s.new ? "Add" : "Save"}
57-
</button>
58+
</Button>
5859
</div>
5960
</div>
6061
);

‎packages/chrome/src/components/Checkbox.tsx‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,59 @@
11
import { css } from "dreamland/core";
22

3-
export function Checkbox(s: { value: boolean }) {
3+
export function Checkbox(props: {
4+
value: boolean;
5+
"on:change"?: (value: boolean) => void;
6+
}) {
47
return (
58
<label>
6-
<input type="checkbox" checked={use(s.value)}></input>
9+
<input
10+
type="checkbox"
11+
checked={props.value}
12+
onChange={(e) => props["on:change"]?.(e.target.checked)}
13+
></input>
714
</label>
815
);
9-
}
16+
};
17+
1018
Checkbox.style = css`
1119
:scope {
1220
width: 1em;
1321
height: 1em;
1422
background: var(--bg);
1523
border: 1px solid var(--bg20);
24+
display: inline-block;
25+
position: relative;
26+
border-radius: 4px;
27+
vertical-align: middle;
28+
transition:
29+
background 120ms ease,
30+
border-color 120ms ease;
31+
box-sizing: border-box;
32+
}
33+
34+
:scope::after {
35+
content: "✓";
36+
position: absolute;
37+
inset: 0;
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
color: var(--bg);
42+
font-size: 0.8em;
43+
transform: scale(0);
44+
transition: transform 120ms ease;
45+
pointer-events: none;
1646
}
47+
1748
:scope:has(input:checked) {
1849
background: var(--accent);
50+
border-color: var(--accent);
51+
}
52+
53+
:scope:has(input:checked)::after {
54+
transform: scale(1);
1955
}
56+
2057
input {
2158
visibility: hidden;
2259
display: block;

‎packages/chrome/src/components/DownloadsPopup.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,22 @@ import { closeMenu } from "./Menu";
55
import { iconClose, iconFolder, iconOpen, iconPause } from "../icons";
66
import { formatBytes } from "../utils";
77
import { defaultFaviconUrl } from "../assets/favicon";
8+
import { Button } from "./Button";
89

910
export function DownloadsPopup() {
1011
return (
1112
<div>
1213
<div class="title">
1314
<span>Recent Downloads</span>
1415
<div class="buttoniconcontainer">
15-
<button
16+
<Button
17+
variant="icon"
1618
on:click={() => {
1719
closeMenu();
1820
}}
1921
>
2022
<Icon icon={iconClose}></Icon>
21-
</button>
23+
</Button>
2224
</div>
2325
</div>
2426
<div class="entries">
@@ -44,30 +46,32 @@ export function DownloadsPopup() {
4446
.map((b) => !b)
4547
.andThen(
4648
<>
47-
<button>
49+
<Button variant="icon">
4850
<Icon icon={iconFolder}></Icon>
49-
</button>
50-
<button>
51+
</Button>
52+
<Button variant="icon">
5153
<Icon icon={iconOpen}></Icon>
52-
</button>
54+
</Button>
5355
</>
5456
)}
5557
{use(b.progress).andThen(
5658
<>
57-
<button
59+
<Button
60+
variant="icon"
5861
on:click={() => {
5962
b.pause!();
6063
}}
6164
>
6265
<Icon icon={iconPause}></Icon>
63-
</button>
64-
<button
66+
</Button>
67+
<Button
68+
variant="icon"
6569
on:click={() => {
6670
b.cancel!();
6771
}}
6872
>
6973
<Icon icon={iconClose}></Icon>
70-
</button>
74+
</Button>
7175
</>
7276
)}
7377
</div>

‎packages/chrome/src/components/Input.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,25 @@ export function Input(s: {
99
required?: boolean;
1010
disabled?: boolean;
1111
autofocus?: boolean;
12-
className?: string;
13-
onInput?: (e: Event) => void;
14-
onFocus?: (e: FocusEvent) => void;
15-
onBlur?: (e: FocusEvent) => void;
16-
onKeyDown?: (e: KeyboardEvent) => void;
17-
onKeyUp?: (e: KeyboardEvent) => void;
12+
class?: string;
13+
"on:input"?: (e: Event) => void;
14+
"on:focus"?: (e: FocusEvent) => void;
15+
"on:blur"?: (e: FocusEvent) => void;
16+
"on:keydown"?: (e: KeyboardEvent) => void;
17+
"on:keyup"?: (e: KeyboardEvent) => void;
1818
}) {
1919
const handleInput = (e: Event) => {
2020
// keep the original behavior: assign into the passed `value` (may be a Pointer)
2121
(s.value as any) = (e.target as HTMLInputElement).value;
2222

23-
if (s.onInput) {
24-
s.onInput(e);
23+
if (s["on:input"]) {
24+
s["on:input"](e);
2525
}
2626
};
2727

2828
return (
29-
<div class={`input-container ${s.className || ""}`}>
30-
{(s.label as any) && <label>{s.label}</label>}
29+
<div class={`input-container ${s.class || ""}`}>
30+
{s.label && <label>{s.label}</label>}
3131
<input
3232
type={s.type || "text"}
3333
value={typeof s.value === "object" ? use(s.value) : s.value}
@@ -37,10 +37,10 @@ export function Input(s: {
3737
disabled={s.disabled}
3838
autofocus={s.autofocus}
3939
on:input={handleInput}
40-
on:focus={s.onFocus as any}
41-
on:blur={s.onBlur as any}
42-
on:keydown={s.onKeyDown as any}
43-
on:keyup={s.onKeyUp as any}
40+
on:focus={s["on:focus"] as any}
41+
on:blur={s["on:blur"] as any}
42+
on:keydown={s["on:keydown"] as any}
43+
on:keyup={s["on:keyup"] as any}
4444
/>
4545
</div>
4646
);

‎packages/chrome/src/components/Omnibar/OmnibarButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ OmnibarButton.style = css`
3232
padding: 0.25em;
3333
3434
font-size: 1.15em;
35-
color: var(--fg5);
35+
color: var(--fg2);
3636
border-radius: 0.2em;
3737
}
3838
:scope.active:hover {

‎packages/chrome/src/components/SiteInformationPopup.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { splitUrl } from "../utils";
44

55
import { iconClose, iconTrash, iconSettings } from "../icons";
66
import { Icon } from "./Icon";
7-
import { SmallIconButton } from "./SmallIconButton";
7+
import { Button } from "./Button";
88

99
import { closeMenu } from "./Menu";
1010

@@ -16,12 +16,14 @@ export function SiteInformationPopup(s: { tab: Tab }) {
1616
{use(s.tab.url).map((u) => splitUrl(u)[0] + splitUrl(u)[1])}
1717
</span>
1818
<div class="buttoniconscontainer">
19-
<SmallIconButton
20-
click={() => {
19+
<Button
20+
variant="icon"
21+
on:click={() => {
2122
closeMenu();
2223
}}
23-
icon={iconClose}
24-
></SmallIconButton>
24+
>
25+
<Icon icon={iconClose}></Icon>
26+
</Button>
2527
</div>
2628
</div>
2729
<div class="content">

‎packages/chrome/src/components/TabStrip.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ DragTab.style = css`
217217
color: var(--fg);
218218
219219
border-radius: 4px;
220-
padding: 7px 8px 5px 8px;
220+
padding: 7px 8px;
221221
222222
display: flex;
223223
align-items: center;
@@ -229,11 +229,13 @@ DragTab.style = css`
229229
}
230230
.main span {
231231
flex: 1;
232-
font-size: 13px;
233-
232+
font-size: 12px;
234233
overflow: hidden;
235234
white-space: nowrap;
236235
text-overflow: ellipsis;
236+
height: 100%;
237+
vertical-align: center;
238+
line-height: 100%;
237239
}
238240
.main .close > * {
239241
width: 14px;

0 commit comments

Comments
 (0)