Skip to content

Commit 54b8e79

Browse files
BrunoQuaresmaBrunoQuaresma
authored
feat: Add emoji picker for template icons (#3601)
1 parent a4c90c5 commit 54b8e79

File tree

3,697 files changed

+128
-34
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

3,697 files changed

+128
-34
lines changed

‎.github/workflows/typos.toml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ MacOS = "macOS"
99
[files]
1010
extend-exclude = [
1111
"**.svg",
12+
"**.png",
1213
"**.lock",
1314
"go.sum",
1415
"go.mod",

‎site/can-ndjson-stream.d.ts

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎site/emoji-mart.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
declare module "@emoji-mart/react" {
2+
const Picker: React.FC<{
3+
theme: "dark" | "light"
4+
data: Record<string, unknown>
5+
onEmojiSelect: (emojiData: { unified: string }) => void
6+
}>
7+
8+
export default Picker
9+
}

‎site/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,10 @@
5757
"xterm-addon-web-links": "0.6.0",
5858
"xterm-addon-webgl": "0.11.4",
5959
"xterm-for-react": "1.0.4",
60-
"yup": "0.32.11"
60+
"yup": "0.32.11",
61+
"@emoji-mart/data": "^1.0.5",
62+
"@emoji-mart/react": "^1.0.1",
63+
"emoji-mart": "^5.2.1"
6164
},
6265
"devDependencies": {
6366
"@playwright/test": "1.24.1",

‎site/src/components/ErrorSummary/ErrorSummary.tsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,13 @@ export const ErrorSummary: FC<ErrorSummaryProps> = ({
7575
</Collapse>
7676
{retry && (
7777
<div className={styles.retry}>
78-
<Button size="small" onClick={retry} startIcon={<RefreshIcon />} variant="outlined">
78+
<Button
79+
size="small"
80+
onClick={retry}
81+
startIcon={<RefreshIcon />}
82+
variant="outlined"
83+
className={styles.retryButton}
84+
>
7985
{Language.retryMessage}
8086
</Button>
8187
</div>
@@ -122,4 +128,12 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
122128
retry: {
123129
marginTop: `${theme.spacing(2)}px`,
124130
},
131+
retryButton: {
132+
color: theme.palette.error.contrastText,
133+
borderColor: theme.palette.error.contrastText,
134+
135+
"&:hover": {
136+
backgroundColor: theme.palette.error.dark,
137+
},
138+
},
125139
}))

‎site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx

Lines changed: 75 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1+
import data from "@emoji-mart/data/sets/14/twitter.json"
2+
import Picker from "@emoji-mart/react"
3+
import Button from "@material-ui/core/Button"
14
import InputAdornment from "@material-ui/core/InputAdornment"
5+
import Popover from "@material-ui/core/Popover"
26
import { makeStyles } from "@material-ui/core/styles"
37
import TextField from "@material-ui/core/TextField"
48
import { Template, UpdateTemplateMeta } from "api/typesGenerated"
9+
import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
510
import { FormFooter } from "components/FormFooter/FormFooter"
611
import { Stack } from "components/Stack/Stack"
712
import { FormikContextType, FormikTouched, useFormik } from "formik"
8-
import { FC } from "react"
13+
import { FC, useRef, useState } from "react"
14+
import { colors } from "theme/colors"
915
import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "util/formUtils"
1016
import * as Yup from "yup"
1117

@@ -17,6 +23,7 @@ export const Language = {
1723
// This is the same from the CLI on https://github.com/coder/coder/blob/546157b63ef9204658acf58cb653aa9936b70c49/cli/templateedit.go#L59
1824
maxTtlHelperText: "Edit the template maximum time before shutdown in milliseconds",
1925
formAriaLabel: "Template settings form",
26+
selectEmoji: "Select emoji",
2027
}
2128

2229
export const validationSchema = Yup.object({
@@ -43,6 +50,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
4350
isSubmitting,
4451
initialTouched,
4552
}) => {
53+
const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
4654
const form: FormikContextType<UpdateTemplateMeta> = useFormik<UpdateTemplateMeta>({
4755
initialValues: {
4856
name: template.name,
@@ -59,6 +67,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
5967
const getFieldHelpers = getFormHelpersWithError<UpdateTemplateMeta>(form, error)
6068
const styles = useStyles()
6169
const hasIcon = form.values.icon && form.values.icon !== ""
70+
const emojiButtonRef = useRef<HTMLButtonElement>(null)
6271

6372
return (
6473
<form onSubmit={form.handleSubmit} aria-label={Language.formAriaLabel}>
@@ -83,28 +92,61 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
8392
rows={2}
8493
/>
8594

86-
<TextField
87-
{...getFieldHelpers("icon")}
88-
disabled={isSubmitting}
89-
fullWidth
90-
label={Language.iconLabel}
91-
variant="outlined"
92-
InputProps={{
93-
endAdornment: hasIcon ? (
94-
<InputAdornment position="end">
95-
<img
96-
alt=""
97-
src={form.values.icon}
98-
className={styles.adornment}
99-
// This prevent browser to display the ugly error icon if the
100-
// image path is wrong or user didn't finish typing the url
101-
onError={(e) => (e.currentTarget.style.display = "none")}
102-
onLoad={(e) => (e.currentTarget.style.display = "inline")}
103-
/>
104-
</InputAdornment>
105-
) : undefined,
106-
}}
107-
/>
95+
<div className={styles.iconField}>
96+
<TextField
97+
{...getFieldHelpers("icon")}
98+
disabled={isSubmitting}
99+
fullWidth
100+
label={Language.iconLabel}
101+
variant="outlined"
102+
InputProps={{
103+
endAdornment: hasIcon ? (
104+
<InputAdornment position="end">
105+
<img
106+
alt=""
107+
src={form.values.icon}
108+
className={styles.adornment}
109+
// This prevent browser to display the ugly error icon if the
110+
// image path is wrong or user didn't finish typing the url
111+
onError={(e) => (e.currentTarget.style.display = "none")}
112+
onLoad={(e) => (e.currentTarget.style.display = "inline")}
113+
/>
114+
</InputAdornment>
115+
) : undefined,
116+
}}
117+
/>
118+
119+
<Button
120+
fullWidth
121+
ref={emojiButtonRef}
122+
variant="outlined"
123+
size="small"
124+
endIcon={<OpenDropdown />}
125+
onClick={() => {
126+
setIsEmojiPickerOpen((v) => !v)
127+
}}
128+
>
129+
{Language.selectEmoji}
130+
</Button>
131+
132+
<Popover
133+
id="emoji"
134+
open={isEmojiPickerOpen}
135+
anchorEl={emojiButtonRef.current}
136+
onClose={() => {
137+
setIsEmojiPickerOpen(false)
138+
}}
139+
>
140+
<Picker
141+
theme="dark"
142+
data={data}
143+
onEmojiSelect={(emojiData) => {
144+
form.setFieldValue("icon", `/emojis/${emojiData.unified}.png`)
145+
setIsEmojiPickerOpen(false)
146+
}}
147+
/>
148+
</Popover>
149+
</div>
108150

109151
<TextField
110152
{...getFieldHelpers("max_ttl_ms")}
@@ -123,8 +165,18 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
123165
}
124166

125167
const useStyles = makeStyles((theme) => ({
168+
"@global": {
169+
"em-emoji-picker": {
170+
"--rgb-background": theme.palette.background.paper,
171+
"--rgb-input": colors.gray[17],
172+
"--rgb-color": colors.gray[4],
173+
},
174+
},
126175
adornment: {
127176
width: theme.spacing(3),
128177
height: theme.spacing(3),
129178
},
179+
iconField: {
180+
paddingBottom: theme.spacing(0.5),
181+
},
130182
}))

‎site/src/theme/overrides.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
99
MuiCssBaseline: {
1010
"@global": {
1111
body: {
12-
backgroundImage: `linear-gradient(to right bottom, ${colors.gray[15]}, ${colors.gray[17]})`,
12+
backgroundImage: `linear-gradient(to right bottom, ${palette.background.default}, ${colors.gray[17]})`,
1313
backgroundRepeat: "no-repeat",
1414
backgroundAttachment: "fixed",
1515
letterSpacing: "-0.015em",
@@ -57,6 +57,12 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
5757
marginLeft: "0 !important",
5858
marginRight: 12,
5959
},
60+
outlined: {
61+
border: `1px solid ${palette.divider}`,
62+
"&:hover": {
63+
backgroundColor: palette.background.default,
64+
},
65+
},
6066
},
6167
MuiIconButton: {
6268
sizeSmall: {
@@ -82,8 +88,8 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
8288
root: {
8389
borderCollapse: "collapse",
8490
border: "none",
85-
background: colors.gray[15],
86-
boxShadow: `0 0 0 1px ${colors.gray[15]} inset`,
91+
background: palette.background.default,
92+
boxShadow: `0 0 0 1px ${palette.background.default} inset`,
8793
overflow: "hidden",
8894

8995
"& td": {

‎site/static/emojis/1f004.png

551 Bytes

‎site/static/emojis/1f0cf.png

923 Bytes

‎site/static/emojis/1f170.png

557 Bytes

0 commit comments

Comments
 (0)