Skip to content

feat: Add emoji picker to group settings #4685

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 21, 2022
Merged

feat: Add emoji picker to group settings #4685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions site/src/i18n/en/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,5 +31,8 @@
},
"warningsAndErrors": {
"somethingWentWrong": "Something went wrong."
},
"emojiPicker": {
"select": "Select emoji"
}
}
85 changes: 83 additions & 2 deletions site/src/pages/GroupsPage/SettingsGroupPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
import data from "@emoji-mart/data/sets/14/twitter.json"
import Picker from "@emoji-mart/react"
import Button from "@material-ui/core/Button"
import InputAdornment from "@material-ui/core/InputAdornment"
import Popover from "@material-ui/core/Popover"
import { makeStyles } from "@material-ui/core/styles"
import TextField from "@material-ui/core/TextField"
import { Group } from "api/typesGenerated"
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
import { FormFooter } from "components/FormFooter/FormFooter"
import { FullPageForm } from "components/FullPageForm/FullPageForm"
import { FullScreenLoader } from "components/Loader/FullScreenLoader"
import { Margins } from "components/Margins/Margins"
import { useFormik } from "formik"
import React from "react"
import React, { useRef, useState } from "react"
import { colors } from "theme/colors"
import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
import * as Yup from "yup"

Expand All @@ -26,6 +34,7 @@ const UpdateGroupForm: React.FC<{
onCancel: () => void
isLoading: boolean
}> = ({ group, errors, onSubmit, onCancel, isLoading }) => {
const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
const form = useFormik<FormData>({
initialValues: {
name: group.name,
Expand All @@ -35,6 +44,10 @@ const UpdateGroupForm: React.FC<{
onSubmit,
})
const getFieldHelpers = getFormHelpers<FormData>(form, errors)
const hasIcon = form.values.avatar_url && form.values.avatar_url !== ""
const emojiButtonRef = useRef<HTMLButtonElement>(null)
const styles = useStyles()
const { t } = useTranslation("common")

return (
<FullPageForm title="Group settings" onCancel={onCancel}>
Expand All @@ -53,9 +66,60 @@ const UpdateGroupForm: React.FC<{
onChange={onChangeTrimmed(form)}
autoFocus
fullWidth
label="Avatar URL"
label="Icon"
variant="outlined"
InputProps={{
endAdornment: hasIcon ? (
<InputAdornment position="end">
<img
alt=""
src={form.values.avatar_url}
className={styles.adornment}
// This prevent browser to display the ugly error icon if the
// image path is wrong or user didn't finish typing the url
onError={(e) => (e.currentTarget.style.display = "none")}
onLoad={(e) => (e.currentTarget.style.display = "inline")}
/>
</InputAdornment>
) : undefined,
}}
/>

<Button
fullWidth
ref={emojiButtonRef}
variant="outlined"
size="small"
endIcon={<OpenDropdown />}
onClick={() => {
setIsEmojiPickerOpen((v) => !v)
}}
>
{t("emojiPicker.select")}
</Button>

<Popover
id="emoji"
open={isEmojiPickerOpen}
anchorEl={emojiButtonRef.current}
onClose={() => {
setIsEmojiPickerOpen(false)
}}
>
<Picker
theme="dark"
data={data}
onEmojiSelect={(emojiData) => {
form
.setFieldValue("avatar_url", `/emojis/${emojiData.unified}.png`)
.catch((ex) => {
console.error(ex)
})
setIsEmojiPickerOpen(false)
}}
/>
</Popover>

<FormFooter onCancel={onCancel} isLoading={isLoading} />
</form>
</FullPageForm>
Expand Down Expand Up @@ -100,4 +164,21 @@ export const SettingsGroupPageView: React.FC<SettingsGroupPageViewProps> = ({
)
}

const useStyles = makeStyles((theme) => ({
"@global": {
"em-emoji-picker": {
"--rgb-background": theme.palette.background.paper,
"--rgb-input": colors.gray[17],
"--rgb-color": colors.gray[4],
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to add this site/src/theme/overrides.ts? I feel like I might not look for it here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just copied this from the template settings one, but I assume we'll abstract this (maybe once it's used once more?).

Copy link
Member

@Kira-Pilot Kira-Pilot Oct 21, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could be wrong, but I thought the @global key meant any classes defined within would be defined globally. So, if this is already declared in template settings, I'm surprised we need it here, too.

I'm suggesting we move it to overrides because we have a bunch of other globals there, and it's nice to have them colocated. But not a blocker.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the @global will go away when the component is unmounted, so it won't actually apply globally to all pages, just to the global scope on this page.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohhh, interesting; thanks for explaining. Alrighty, let's keep it!

},
adornment: {
width: theme.spacing(3),
height: theme.spacing(3),
},
iconField: {
paddingBottom: theme.spacing(0.5),
},
}))

export default SettingsGroupPageView