Skip to content

Commit 94f81d4

Browse files
SuperAugusteSuperAuguste
committed
Restyle!
1 parent 95b44e0 commit 94f81d4

File tree

4 files changed

+161
-36
lines changed

4 files changed

+161
-36
lines changed

‎404.html‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,48 @@
1111
<script src="src/enable_coop_coep.js"></script>
1212
</head>
1313
<body>
14-
<div id="banner">
15-
<strong>Note:</strong> The self-hosted WebAssembly backend is still experimental: compiler bugs/crashes are not unexpected.
14+
<nav>
15+
<h1>Zig Playground</h1>
16+
17+
<div>
18+
<strong>Note:</strong> The self-hosted WebAssembly backend is still experimental: compiler bugs/crashes are not unexpected.
19+
</div>
20+
</nav>
21+
22+
<div id="popup">
23+
<h2>Grab the share link below:</h2>
24+
<input id="popup__input" type="text" readonly>
25+
<div>
26+
<button id="popup__copy" class="primary">Copy</button>
27+
<button id="popup__close">Close</button>
28+
</div>
1629
</div>
1730

1831
<main>
19-
<section>
20-
<h1>Zig+ZLS Playground</h1>
21-
22-
<p>This editor supports completions, formatting (<i>Ctrl+S</i>), and semantic token-based highlighting.</p>
23-
</section>
24-
2532
<div id="split-pane">
2633
<div id="editor"></div>
2734
<div id="outputs">
2835
<div id="outputs__toolbar">
2936
<div>
30-
<button id="outputs__run">Run</button>
37+
<button id="outputs__run" class="primary">Run</button>
3138
<button id="outputs__share">Share</button>
3239
</div>
3340

3441
<div>
3542
<select id="outputs__tab">
36-
<option value="zls-stderr" selected>ZLS Debug</option>
37-
<option value="zig-stderr">Zig Debug</option>
43+
<option value="zls-stderr">ZLS Debug</option>
44+
<option value="zig-stderr" selected>Zig Debug</option>
3845
<option value="zig-output">Zig Output</option>
3946
</select>
4047
</div>
4148
</div>
4249

4350
<div id="outputs__tabs">
44-
<div id="zls-stderr" class="shown">
51+
<div id="zls-stderr">
4552

4653
</div>
4754

48-
<div id="zig-stderr">
55+
<div id="zig-stderr" class="shown">
4956

5057
</div>
5158

‎src/editor.ts‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,9 @@ outputs_tab_selector.addEventListener("change", () => {
167167
const outputs_run = document.getElementById("outputs__run")! as HTMLButtonElement;
168168

169169
outputs_run.addEventListener("click", async () => {
170+
document.getElementById("zig-stderr")!.innerHTML = "";
171+
document.getElementById("zig-output")!.innerHTML = "";
172+
170173
zigWorker.postMessage({
171174
run: (await editor).state.doc.toString(),
172175
});
@@ -186,7 +189,11 @@ outputs_share.addEventListener("click", async () => {
186189
body: (await editor).state.doc.toString(),
187190
});
188191

189-
history.pushState(null, "", `/${(await response.text()).slice(0, 6)}`);
192+
const hash = (await response.text()).slice(0, 6);
193+
history.pushState(null, "", `/${hash}`);
194+
195+
(document.getElementById("popup__input")! as HTMLInputElement).value = `https://playground.zigtools.org/${hash}`;
196+
document.getElementById("popup")?.classList.add("shown");
190197
});
191198

192199
const endpoint = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://pastes.zigtools.org";
@@ -204,3 +211,15 @@ function getPasteHash(): string | null {
204211
if (maybeHash.length === 6 || maybeHash.length === 64) return maybeHash;
205212
return null;
206213
}
214+
215+
document.getElementById("popup__copy")?.addEventListener("click", () => {
216+
var c = document.getElementById("popup__input") as HTMLInputElement;
217+
c.select();
218+
document.execCommand("copy");
219+
220+
document.getElementById("popup__copy")!.innerHTML = "Copied!"
221+
});
222+
223+
document.getElementById("popup__close")?.addEventListener("click", () => {
224+
document.getElementById("popup")?.classList.remove("shown");
225+
});

‎style/style.scss‎

Lines changed: 113 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,33 @@ html, body {
2121
background-color: theme.$background;
2222
}
2323

24-
#banner {
25-
padding: 1rem 2rem;
24+
nav {
25+
display: flex;
26+
27+
align-items: center;
28+
justify-content: space-between;
29+
30+
padding: 1rem;
2631

2732
background-color: hsl(0, 0%, 20%);
2833
}
2934

35+
body {
36+
display: flex;
37+
flex-direction: column;
38+
height: 100vh;
39+
}
40+
3041
main {
31-
padding: 2rem;
42+
height: 100%;
43+
44+
flex-grow: 1;
45+
46+
height: calc(100% - 48px);
3247
}
3348

3449
h1 {
35-
margin-bottom: 2rem;
36-
font-size: 2em;
50+
font-size: 1.5em;
3751
font-weight: 600;
3852
}
3953

@@ -57,7 +71,9 @@ i {
5771
#split-pane {
5872
display: flex;
5973

60-
gap: 1rem;
74+
// gap: 1rem;
75+
76+
height: 100%;
6177

6278
&>*:first-child {
6379
width: 60%;
@@ -68,11 +84,6 @@ i {
6884
}
6985
}
7086

71-
#editor {
72-
border: 1px solid theme.$foreground;
73-
height: 70vh;
74-
}
75-
7687
#outputs__tabs, code {
7788
font-family: monospace;
7889
}
@@ -88,47 +99,88 @@ ul {
8899
}
89100

90101
button {
91-
border: 1px solid theme.$foreground;
92-
border-radius: 0px;
102+
display: inline-block;
93103

94-
padding: 0.25rem 1.5rem;
104+
border: none;
105+
border-radius: 3px;
106+
107+
padding: 0.5rem 2.25rem;
95108

109+
font-size: 1em;
96110
font-weight: 700;
111+
text-align: center;
112+
letter-spacing: -0.011em;
97113

98114
cursor: pointer;
99-
background-color: hsl(0, 0%, 17.5%);
115+
background-color: theme.$btn-background;
100116

101117
&:hover {
102-
background-color: hsl(0, 0%, 20%);
118+
background-color: theme.$btn-background--hover;
119+
}
120+
121+
&.primary {
122+
background-color: theme.$btn-background--primary;
123+
124+
&:hover {
125+
background-color: theme.$btn-background--primary--hover;
126+
}
103127
}
104128
}
105129

106130
select {
107-
border: 1px solid theme.$foreground;
108-
border-radius: 0;
131+
display: inline-block;
132+
133+
border: none;
134+
outline: none;
135+
border-radius: 3px;
136+
137+
padding: 0.5rem 2.25rem;
138+
139+
font-size: 1em;
140+
font-weight: 700;
141+
text-align: center;
142+
letter-spacing: -0.011em;
143+
144+
cursor: pointer;
145+
background-color: theme.$btn-background;
146+
}
109147

110-
padding: 0.25rem 1.5rem;
148+
input {
149+
display: inline-block;
111150

151+
border: none;
112152
outline: none;
113-
background-color: hsl(0, 0%, 17.5%);
153+
border-radius: 3px;
154+
155+
padding: 0.5rem;
156+
157+
font-size: 1em;
158+
font-weight: 700;
159+
text-align: center;
160+
letter-spacing: -0.011em;
161+
162+
background-color: theme.$btn-background;
114163
}
115164

116165
#outputs {
117-
height: 70vh;
166+
height: 100%;
118167

119168
display: flex;
120169
gap: 1rem;
121170
flex-direction: column;
122171
align-items: stretch;
123172

173+
padding: 1rem;
174+
124175
&__toolbar {
125176
display: flex;
126177
justify-content: space-between;
127178
}
128179

129180
&__tabs {
130181
border: 1px solid theme.$foreground;
131-
182+
border-radius: 3px;
183+
132184
padding: 1rem;
133185

134186
flex-grow: 1;
@@ -146,3 +198,42 @@ select {
146198
}
147199
}
148200
}
201+
202+
#popup {
203+
position: fixed;
204+
205+
top: 50%;
206+
left: 50%;
207+
208+
transform: translate(-50%, -50%);
209+
210+
border: 1px solid theme.$foreground;
211+
border-radius: 3px;
212+
213+
display: none;
214+
215+
gap: 1rem;
216+
flex-direction: column;
217+
218+
padding: 2rem;
219+
220+
z-index: 100;
221+
background-color: theme.$popup-background;
222+
223+
&.shown {
224+
display: flex;
225+
}
226+
227+
h2 {
228+
font-weight: 2rem;
229+
font-weight: 700;
230+
}
231+
232+
div {
233+
display: flex;
234+
flex-direction: row;
235+
justify-content: stretch;
236+
237+
gap: 1rem;
238+
}
239+
}

‎style/theme.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,10 @@
11
$foreground: hsl(0, 0%, 90%);
22
$background: hsl(0, 0%, 10%);
3+
4+
$btn-background: hsl(0, 0%, 20%);
5+
$btn-background--hover: hsl(0, 0%, 25%);
6+
7+
$popup-background: hsl(0, 0%, 15%);
8+
9+
$btn-background--primary: hsl(37, 50%, 24%);
10+
$btn-background--primary--hover: hsl(37, 93%, 30%);

0 commit comments

Comments
 (0)