Skip to content

Commit dd7e3f8

Browse files
grantnelson-wfgrantnelson-wf
committed
adding toggle
1 parent 224894d commit dd7e3f8

File tree

5 files changed

+206
-79
lines changed

5 files changed

+206
-79
lines changed

‎playground/internal/react/formatImportsControl.go‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,20 @@ func formatImportsComponent(props Props) *Element {
1717
setFmtImports(e.Get(`target`).Get(`checked`).Bool())
1818
}
1919

20-
return CreateElement(`label`, Props{
21-
`id`: `format-imports-label`,
20+
return Div(Props{
21+
`id`: `format-imports-control`,
2222
`title`: `Rewrite imports on Format`,
2323
},
2424
CreateElement(`input`, Props{
25-
`id`: `format-imports`,
25+
`id`: `format-imports-checkbox`,
2626
`type`: `checkbox`,
2727
`checked`: fmtImports,
2828
`onChange`: onChange,
2929
}),
30+
CreateElement(`label`, Props{
31+
`id`: `format-imports-toggle`,
32+
`htmlFor`: `format-imports-checkbox`,
33+
}),
3034
`Imports`,
3135
)
3236
}

‎playground/internal/react/shareUrlControl.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ func shareUrlComponent(props Props) *Element {
4040
`type`: `text`,
4141
`className`: className,
4242
`ref`: shareUrlRef,
43-
`value`: shareUrl,
43+
`value`: `Hello!`, //shareUrl, // TODO(grantnelson): Fix
4444
`readOnly`: true,
4545
`onFocus`: onShareUrlFocus,
4646
}),

‎playground/internal/react/toggleBox.go‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
package react
2+
3+
import "github.com/gopherjs/gopherjs/js"
4+
5+
func ToggleBox(id, title, label string, checked bool, setChecked func(any)) *Element {
6+
return CreateElement(toggleBoxComponent, Props{
7+
`id`: id,
8+
`title`: title,
9+
`label`: label,
10+
`checked`: checked,
11+
`setChecked`: setChecked,
12+
})
13+
}
14+
15+
func toggleBoxComponent(props Props) *Element {
16+
id := As[string](props, `id`)
17+
title := As[string](props, `title`)
18+
label := As[string](props, `label`)
19+
checked := As[bool](props, `checked`)
20+
setChecked := AsSetter(props, `setChecked`)
21+
22+
onChange := func(e *js.Object) {
23+
setChecked(e.Get(`target`).Get(`checked`).Bool())
24+
}
25+
26+
return Div(Props{
27+
`id`: id,
28+
`class`: `toggle-box`,
29+
`title`: title,
30+
},
31+
CreateElement(`input`, Props{
32+
`id`: id + `-checkbox`,
33+
`class`: `toggle-box-checkbox`,
34+
`type`: `checkbox`,
35+
`checked`: checked,
36+
`onChange`: onChange,
37+
}),
38+
CreateElement(`label`, Props{
39+
`id`: id + `-toggle`,
40+
`class`: `toggle-box-toggle`,
41+
`htmlFor`: id + `-checkbox`,
42+
}),
43+
label,
44+
)
45+
}

‎playground/playground.css‎

Lines changed: 122 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,41 @@
1111
--color-output-normal-background: #ddd;
1212
--color-output-error-text: #800;
1313
--color-output-error-background: #fcc;
14+
--color-run-button-background: #eee;
15+
--color-run-button-boarder: #ccc;
16+
--color-run-button-text: #222;
17+
--color-run-button-hover-background: #666;
18+
--color-run-button-hover-boarder: #ccc;
19+
--color-run-button-hover-text: #fff;
20+
--color-buttons-background: #eee;
21+
--color-buttons-boarder: #ccc;
22+
--color-buttons-text: #222;
23+
--color-buttons-hover-background: #666;
24+
--color-buttons-hover-boarder: #ccc;
25+
--color-buttons-hover-text: #fff;
26+
--color-share-url-background: #eee;
27+
--color-share-url-boarder: #ccc;
28+
--color-share-url-text: black;
1429

1530
--font-family-banner-title: Arial, sans;
1631
--font-size-banner-title: 32px;
1732
--font-size-banner-title-sub: 24px;
18-
19-
/* "mono" applies to mono-space text boxes, i.e. code, line number, and output */
33+
--font-family-controls: sans-serif;
34+
--font-size-controls: 16px;
35+
--size-format-imports-toggle: 30px;
2036
--font-family-mono: Menlo, Courier\ New, monospace;
2137
--font-size-mono: 11pt;
2238
--padding-mono: 5px;
2339
--tab-size-code-text: 4;
2440
}
2541

42+
[data-theme='dark'] {
43+
--color-banner-title-text: white;
44+
--color-banner-background: black;
45+
/* TODO(grantnelson-wf): Finish */
46+
}
47+
48+
2649
html, body {
2750
width: 100%;
2851
height: 100%;
@@ -71,72 +94,124 @@ html, body {
7194
margin-left: auto;
7295
}
7396

74-
/* The run code button */
75-
#run-button { /* TODO(grantnelson-wf): Update */
76-
background: #eee;
77-
border: 1px solid #ccc;
78-
color: #222;
79-
font-size: 20px;
80-
height: 30px;
97+
#controls input[type=button] {
98+
padding: 5px 8px 5px 8px;
8199
border-radius: 5px;
100+
margin-left: 10px; /* TODO(grantnelson-wf): Try replacing with gap */
101+
font-family: var(--font-family-controls);
102+
font-size: var(--font-size-controls);
103+
}
104+
105+
/* The run code button */
106+
#run-button {
107+
background: var(--color-run-button-background);
108+
border: 1px solid var(--color-run-button-boarder);
109+
color: var(--color-run-button-text);
82110
}
83111

84-
#run-button:hover { /* TODO(grantnelson-wf): Update */
85-
background: #666;
86-
color: #fff;
112+
#run-button:hover {
113+
background: var(--color-run-button-hover-background);
114+
border-color: var(--color-run-button-hover-boarder);
115+
color: var(--color-run-button-hover-text);
87116
}
88117

89118
/* The format code button */
90-
#format-button { /* TODO(grantnelson-wf): Update */
91-
background: #eee;
92-
border: 1px solid #ccc;
93-
color: #222;
94-
font-size: 20px;
95-
height: 30px;
96-
border-radius: 5px;
119+
#format-button {
120+
background: var(--color-buttons-background);
121+
border: 1px solid var(--color-buttons-boarder);
122+
color: var(--color-buttons-text);
97123
}
98124

99-
#format-button:hover { /* TODO(grantnelson-wf): Update */
100-
background: #666;
101-
color: #fff;
125+
#format-button:hover {
126+
background: var(--color-buttons-hover-background);
127+
border-color: var(--color-buttons-hover-boarder);
128+
color: var(--color-buttons-hover-text);
102129
}
103130

104131
/* The checkbox and label for indicating if imports should be formatted */
105-
#format-imports-label { /* TODO(grantnelson-wf): Update */
106-
font-family: sans-serif;
107-
font-size: 16px;
132+
#format-imports-control {
133+
font-family: var(--font-family-controls);
134+
font-size: var(--font-size-controls);
135+
display: flex;
136+
align-items: center;
137+
gap: 2px;
138+
}
139+
140+
#format-imports-checkbox {
141+
display: none;
142+
box-sizing: border-box;
108143
}
109144

110-
/* The checkbox for indicating if imports should be formatted */
111-
#format-imports { /* TODO(grantnelson-wf): Update */
112-
height: 14px;
145+
#format-imports-checkbox+#format-imports-toggle {
146+
outline: 0;
147+
display: block;
148+
box-sizing: border-box;
149+
width: calc(var(--size-format-imports-toggle)/2);
150+
height: var(--size-format-imports-toggle);
151+
position: relative;
152+
cursor: pointer;
153+
-webkit-user-select: none;
154+
-moz-user-select: none;
155+
-ms-user-select: none;
156+
user-select: none;
157+
background: #f0f0f0;
158+
border-radius: calc(var(--size-format-imports-toggle)/2);
159+
border: 1 solid #222;
160+
padding: 2px;
161+
transition: all 0.4s ease;
162+
}
163+
164+
#format-imports-checkbox+#format-imports-toggle:after {
165+
position: relative;
166+
top: 50%;
167+
display: block;
168+
content: "";
169+
width: 100%;
170+
height: 50%;
171+
border-radius: 50%;
172+
background: #ccc;
173+
transition: all 0.2s ease;
174+
}
175+
176+
#format-imports-checkbox:checked+#format-imports-toggle {
177+
background: green;
113178
}
114179

180+
#format-imports-checkbox:checked+#format-imports-toggle:after {
181+
top: 0;
182+
}
183+
184+
185+
186+
187+
115188
/* The share code button */
116-
#share-button { /* TODO(grantnelson-wf): Update */
117-
background: #eee;
118-
border: 1px solid #ccc;
119-
color: #222;
120-
font-size: 20px;
121-
height: 30px;
122-
border-radius: 5px;
189+
#share-button {
190+
background: var(--color-buttons-background);
191+
border: 1px solid var(--color-buttons-boarder);
192+
color: var(--color-buttons-text);
123193
}
124194

125-
#share-button:hover { /* TODO(grantnelson-wf): Update */
126-
background: #666;
127-
color: #fff;
195+
#share-button:hover {
196+
background: var(--color-buttons-hover-background);
197+
border-color: var(--color-buttons-hover-boarder);
198+
color: var(--color-buttons-hover-text);
128199
}
129200

130201
/* The text box containing the url for sharing code. */
131-
#share-url { /* TODO(grantnelson-wf): Update */
132-
width: 320px;
133-
font-size: 16px;
134-
border: 1px solid #ccc;
135-
background: #eee;
202+
#share-url {
203+
margin-left: 5px;
204+
flex-grow: 3;
205+
font-family: var(--font-family-controls);
206+
font-size: var(--font-size-controls);
207+
border: 1px solid var(--color-share-url-boarder);
208+
background: var(--color-share-url-background);
209+
color: var(--color-share-url-text);
136210
}
137211

138212
.share-url-hidden {
139-
display: none;
213+
/*display: none;*/
214+
background-color: orange; /* TODO(grantnelson-wf): Undo */
140215
}
141216

142217
/* The panel that contains everything below the banner */
@@ -196,6 +271,9 @@ html, body {
196271
/* The readonly line numbers next to the code */
197272
#line-nums {
198273
text-align: right;
274+
-webkit-user-select: none;
275+
-moz-user-select: none;
276+
-ms-user-select: none;
199277
user-select: none;
200278
overflow: hidden;
201279
text-overflow: clip;

0 commit comments

Comments
 (0)