Skip to content

Commit da42193

Browse files
velzievelzie
committed
better omnibox
1 parent 3068d54 commit da42193

File tree

4 files changed

+265
-153
lines changed

4 files changed

+265
-153
lines changed

‎dreamlandjs‎

‎frontend/src/Omnibox.tsx‎

Lines changed: 149 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,67 +5,151 @@ import iconBack from "@ktibow/iconset-material-symbols/arrow-back";
55
import iconForwards from "@ktibow/iconset-material-symbols/arrow-forward";
66
import iconRefresh from "@ktibow/iconset-material-symbols/refresh";
77
import iconExtension from "@ktibow/iconset-material-symbols/extension";
8+
import iconSettings from "@ktibow/iconset-material-symbols/settings";
9+
import iconShield from "@ktibow/iconset-material-symbols/shield";
10+
import iconStar from "@ktibow/iconset-material-symbols/star";
11+
import iconSearch from "@ktibow/iconset-material-symbols/search";
12+
import { createMenu } from "./Menu";
813

914
export const Spacer: Component = function (cx) {
10-
cx.css = `
11-
:scope {
12-
width: 2em;
13-
}
14-
`;
1515
return <div></div>;
1616
};
17+
Spacer.css = `
18+
:scope {
19+
width: 2em;
20+
}
21+
`;
1722

18-
export const UrlInput: Component = function (cx) {
19-
cx.css = `
20-
:scope {
21-
flex: 1;
22-
display: flex;
23-
padding: 0.25em;
24-
}
25-
input {
26-
width: 100%;
27-
height: 100%;
28-
border: none;
29-
outline: none;
30-
border-radius: 4px;
31-
}
32-
`;
23+
export const UrlInput: Component<
24+
{},
25+
{
26+
active: boolean;
27+
input: HTMLInputElement;
28+
29+
overflowItems: string[];
30+
}
31+
> = function (cx) {
32+
this.overflowItems = ["test", "test2", "test3", "test4", "test5"];
3333
return (
34-
<div>
35-
<input></input>
34+
<div
35+
on:click={(e: MouseEvent) => {
36+
this.active = true;
37+
document.body.addEventListener("click", (e) => {
38+
this.active = false;
39+
e.stopPropagation();
40+
});
41+
this.input.focus();
42+
e.stopPropagation();
43+
}}
44+
>
45+
<div class="inactivebar"></div>
46+
<div class="overflow" class:active={use(this.active)}>
47+
<div class="spacer"></div>
48+
{use(this.overflowItems).mapEach((item) => (
49+
<div
50+
class="overflowitem"
51+
on:click={() => {
52+
this.input.value = item;
53+
this.active = false;
54+
this.input.blur();
55+
}}
56+
>
57+
<IconButton icon={iconSearch}></IconButton>
58+
<span>{item}</span>
59+
</div>
60+
))}
61+
</div>
62+
<div class="realbar">
63+
<IconButton icon={iconShield}></IconButton>
64+
<input this={use(this.input).bind()}></input>
65+
66+
<IconButton icon={iconStar}></IconButton>
67+
</div>
3668
</div>
3769
);
3870
};
71+
UrlInput.css = `
72+
:scope {
73+
position: relative;
74+
flex: 1;
75+
display: flex;
76+
height: 100%;
77+
}
78+
.overflow {
79+
position: absolute;
80+
display: none;
81+
background: var(--aboutbrowser-omnibox-bg);
82+
width: 100%;
83+
border-radius: 4px;
84+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
85+
}
86+
.overflow .spacer {
87+
display: block;
88+
height: 2.5em;
89+
}
90+
.overflowitem {
91+
display: flex;
92+
align-items: center;
93+
height: 2.5em;
94+
cursor: pointer;
95+
}
3996
40-
export const IconButton: Component<{ icon: IconifyIcon }> = function (cx) {
41-
cx.css = `
42-
:scope {
43-
padding: 0.4em;
44-
display: flex;
45-
outline: none;
46-
border: none;
47-
font-size: 1.25em;
48-
background: inerhit
49-
# background: var(--aboutbrowser-toolbar-bg);
50-
cursor: pointer;
51-
}
52-
`;
97+
.overflow.active {
98+
display: block;
99+
}
100+
.inactivebar {
101+
background: white;
102+
width: 100%;
103+
border: none;
104+
outline: none;
105+
border-radius: 4px;
106+
margin: 0.25em;
107+
}
108+
input {
109+
background: none;
110+
border: none;
111+
outline: none;
112+
113+
font-size: 1.00em;
114+
115+
height: 100%;
116+
width: 100%;
117+
}
118+
119+
.realbar {
120+
position: absolute;
121+
width: 100%;
122+
height: 100%;
123+
display: flex;
124+
z-index: 1;
125+
align-items: center;
126+
}
127+
`;
128+
129+
export const IconButton: Component<{
130+
icon: IconifyIcon;
131+
click?: (e: MouseEvent) => void;
132+
}> = function (cx) {
53133
return (
54-
<button>
134+
<button on:click={(e) => this.click?.(e)}>
55135
<Icon icon={this.icon} />
56136
</button>
57137
);
58138
};
139+
IconButton.css = `
140+
:scope {
141+
padding: 0.4em;
142+
display: flex;
143+
outline: none;
144+
border: none;
145+
font-size: 1.25em;
146+
background: inerhit
147+
# background: var(--aboutbrowser-toolbar-bg);
148+
cursor: pointer;
149+
}
150+
`;
59151

60152
export const Omnibox: Component<{}> = function (cx) {
61-
cx.css = `
62-
:scope {
63-
background: var(--aboutbrowser-omnibox-bg);
64-
display: flex;
65-
padding: 0px 7px 0px 7px;
66-
}
67-
`;
68-
69153
return (
70154
<div>
71155
<IconButton icon={iconBack}></IconButton>
@@ -75,6 +159,27 @@ export const Omnibox: Component<{}> = function (cx) {
75159
<UrlInput></UrlInput>
76160
<Spacer></Spacer>
77161
<IconButton icon={iconExtension}></IconButton>
162+
<IconButton
163+
icon={iconSettings}
164+
click={(e: MouseEvent) => {
165+
createMenu(e.x, e.y, [
166+
{
167+
label: "Settings",
168+
},
169+
]);
170+
e.stopPropagation();
171+
}}
172+
></IconButton>
78173
</div>
79174
);
80175
};
176+
Omnibox.css = `
177+
:scope {
178+
background: var(--aboutbrowser-omnibox-bg);
179+
display: flex;
180+
padding: 0px 7px 0px 7px;
181+
height: 2.5em;
182+
align-items: center;
183+
position: relative;
184+
}
185+
`;

‎frontend/src/main.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import "./style.css";
22

33
import { createBrowser } from "./browser";
4-
4+
import { createMenu } from "./Menu";
55
let app = document.getElementById("app")!;
66

77
let browser = createBrowser();
@@ -10,6 +10,14 @@ let browser = createBrowser();
1010
try {
1111
let built = browser.build();
1212
built.id = "app";
13+
built.addEventListener("contextmenu", (e) => {
14+
createMenu(e.x, e.y, [
15+
{
16+
label: "Reload",
17+
},
18+
]);
19+
e.preventDefault();
20+
});
1321

1422
app.replaceWith(built);
1523
} catch (e) {

0 commit comments

Comments
 (0)