Merge pull request #174 from jedmund/revamp-header
Implement redesigned header
This commit is contained in:
GitHub
commit
59fce34bd6
29 changed files with 1127 additions and 612 deletions
|
|
@ -34,300 +34,306 @@ type StateVariables = {
|
|||
}
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
username?: string
|
||||
picture?: string
|
||||
gender?: number
|
||||
language?: string
|
||||
theme?: string
|
||||
private?: boolean
|
||||
onOpenChange?: (open: boolean) => void
|
||||
}
|
||||
|
||||
const AccountModal = (props: Props) => {
|
||||
// Localization
|
||||
const { t } = useTranslation('common')
|
||||
const router = useRouter()
|
||||
const locale =
|
||||
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
|
||||
const AccountModal = React.forwardRef<HTMLDivElement, Props>(
|
||||
function AccountModal(props: Props, forwardedRef) {
|
||||
// Localization
|
||||
const { t } = useTranslation('common')
|
||||
const router = useRouter()
|
||||
const locale =
|
||||
router.locale && ['en', 'ja'].includes(router.locale)
|
||||
? router.locale
|
||||
: 'en'
|
||||
|
||||
// useEffect only runs on the client, so now we can safely show the UI
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const { theme: appTheme, setTheme: setAppTheme } = useTheme()
|
||||
// useEffect only runs on the client, so now we can safely show the UI
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const { theme: appTheme, setTheme: setAppTheme } = useTheme()
|
||||
|
||||
// Cookies
|
||||
const accountCookie = getCookie('account')
|
||||
const userCookie = getCookie('user')
|
||||
// Cookies
|
||||
const accountCookie = getCookie('account')
|
||||
const userCookie = getCookie('user')
|
||||
|
||||
const cookieData = {
|
||||
account: accountCookie ? JSON.parse(accountCookie as string) : undefined,
|
||||
user: userCookie ? JSON.parse(userCookie as string) : undefined,
|
||||
}
|
||||
|
||||
// UI State
|
||||
const [open, setOpen] = useState(false)
|
||||
const [selectOpenState, setSelectOpenState] = useState<StateVariables>({
|
||||
picture: false,
|
||||
gender: false,
|
||||
language: false,
|
||||
theme: false,
|
||||
})
|
||||
|
||||
// Values
|
||||
const [username, setUsername] = useState(props.username || '')
|
||||
const [picture, setPicture] = useState(props.picture || '')
|
||||
const [language, setLanguage] = useState(props.language || '')
|
||||
const [gender, setGender] = useState(props.gender || 0)
|
||||
const [theme, setTheme] = useState(props.theme || 'system')
|
||||
// const [privateProfile, setPrivateProfile] = useState(false)
|
||||
|
||||
// Setup
|
||||
const [pictureOpen, setPictureOpen] = useState(false)
|
||||
const [genderOpen, setGenderOpen] = useState(false)
|
||||
const [languageOpen, setLanguageOpen] = useState(false)
|
||||
const [themeOpen, setThemeOpen] = useState(false)
|
||||
|
||||
// Refs
|
||||
const headerRef = React.createRef<HTMLDivElement>()
|
||||
const footerRef = React.createRef<HTMLDivElement>()
|
||||
|
||||
// UI management
|
||||
function openChange(open: boolean) {
|
||||
setOpen(open)
|
||||
}
|
||||
|
||||
function openSelect(name: 'picture' | 'gender' | 'language' | 'theme') {
|
||||
setPictureOpen(name === 'picture' ? !pictureOpen : false)
|
||||
setGenderOpen(name === 'gender' ? !genderOpen : false)
|
||||
setLanguageOpen(name === 'language' ? !languageOpen : false)
|
||||
setThemeOpen(name === 'theme' ? !themeOpen : false)
|
||||
}
|
||||
|
||||
// Event handlers
|
||||
function handlePictureChange(value: string) {
|
||||
setPicture(value)
|
||||
}
|
||||
|
||||
function handleLanguageChange(value: string) {
|
||||
setLanguage(value)
|
||||
}
|
||||
|
||||
function handleGenderChange(value: string) {
|
||||
setGender(parseInt(value))
|
||||
}
|
||||
|
||||
function handleThemeChange(value: string) {
|
||||
setTheme(value)
|
||||
setAppTheme(value)
|
||||
}
|
||||
|
||||
function onEscapeKeyDown(event: KeyboardEvent) {
|
||||
if (pictureOpen || genderOpen || languageOpen || themeOpen) {
|
||||
return event.preventDefault()
|
||||
} else {
|
||||
setOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
// API calls
|
||||
function update(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault()
|
||||
|
||||
const object = {
|
||||
user: {
|
||||
picture: picture,
|
||||
element: pictureData.find((i) => i.filename === picture)?.element,
|
||||
language: language,
|
||||
gender: gender,
|
||||
theme: theme,
|
||||
// private: privateProfile,
|
||||
},
|
||||
const cookieData = {
|
||||
account: accountCookie ? JSON.parse(accountCookie as string) : undefined,
|
||||
user: userCookie ? JSON.parse(userCookie as string) : undefined,
|
||||
}
|
||||
|
||||
if (accountState.account.user) {
|
||||
api.endpoints.users
|
||||
.update(accountState.account.user?.id, object)
|
||||
.then((response) => {
|
||||
const user = response.data
|
||||
|
||||
const cookieObj = {
|
||||
picture: user.avatar.picture,
|
||||
element: user.avatar.element,
|
||||
gender: user.gender,
|
||||
language: user.language,
|
||||
theme: user.theme,
|
||||
}
|
||||
|
||||
const expiresAt = new Date()
|
||||
expiresAt.setDate(expiresAt.getDate() + 60)
|
||||
setCookie('user', cookieObj, { path: '/', expires: expiresAt })
|
||||
|
||||
accountState.account.user = {
|
||||
id: user.id,
|
||||
username: user.username,
|
||||
picture: user.avatar.picture,
|
||||
element: user.avatar.element,
|
||||
language: user.language,
|
||||
theme: user.theme,
|
||||
gender: user.gender,
|
||||
}
|
||||
|
||||
setOpen(false)
|
||||
changeLanguage(router, user.language)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Views
|
||||
const pictureOptions = pictureData
|
||||
.sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
|
||||
.map((item, i) => {
|
||||
return (
|
||||
<PictureSelectItem
|
||||
key={`picture-${i}`}
|
||||
element={item.element}
|
||||
src={[
|
||||
`/profile/${item.filename}.png`,
|
||||
`/profile/${item.filename}@2x.png 2x`,
|
||||
]}
|
||||
value={item.filename}
|
||||
>
|
||||
{item.name[locale]}
|
||||
</PictureSelectItem>
|
||||
)
|
||||
// UI State
|
||||
const [open, setOpen] = useState(false)
|
||||
const [selectOpenState, setSelectOpenState] = useState<StateVariables>({
|
||||
picture: false,
|
||||
gender: false,
|
||||
language: false,
|
||||
theme: false,
|
||||
})
|
||||
|
||||
const pictureField = () => (
|
||||
<SelectTableField
|
||||
name="picture"
|
||||
description={t('modals.settings.descriptions.picture')}
|
||||
className="Image"
|
||||
label={t('modals.settings.labels.picture')}
|
||||
open={pictureOpen}
|
||||
onOpenChange={() => openSelect('picture')}
|
||||
onChange={handlePictureChange}
|
||||
onClose={() => setPictureOpen(false)}
|
||||
imageAlt={t('modals.settings.labels.image_alt')}
|
||||
imageClass={pictureData.find((i) => i.filename === picture)?.element}
|
||||
imageSrc={[`/profile/${picture}.png`, `/profile/${picture}@2x.png 2x`]}
|
||||
value={picture}
|
||||
>
|
||||
{pictureOptions}
|
||||
</SelectTableField>
|
||||
)
|
||||
// Values
|
||||
const [username, setUsername] = useState(props.username || '')
|
||||
const [picture, setPicture] = useState(props.picture || '')
|
||||
const [language, setLanguage] = useState(props.language || '')
|
||||
const [gender, setGender] = useState(props.gender || 0)
|
||||
const [theme, setTheme] = useState(props.theme || 'system')
|
||||
// const [privateProfile, setPrivateProfile] = useState(false)
|
||||
|
||||
const genderField = () => (
|
||||
<SelectTableField
|
||||
name="gender"
|
||||
description={t('modals.settings.descriptions.gender')}
|
||||
label={t('modals.settings.labels.gender')}
|
||||
open={genderOpen}
|
||||
onOpenChange={() => openSelect('gender')}
|
||||
onChange={handleGenderChange}
|
||||
onClose={() => setGenderOpen(false)}
|
||||
value={`${gender}`}
|
||||
>
|
||||
<SelectItem key="gran" value="0">
|
||||
{t('modals.settings.gender.gran')}
|
||||
</SelectItem>
|
||||
<SelectItem key="djeeta" value="1">
|
||||
{t('modals.settings.gender.djeeta')}
|
||||
</SelectItem>
|
||||
</SelectTableField>
|
||||
)
|
||||
// Setup
|
||||
const [pictureOpen, setPictureOpen] = useState(false)
|
||||
const [genderOpen, setGenderOpen] = useState(false)
|
||||
const [languageOpen, setLanguageOpen] = useState(false)
|
||||
const [themeOpen, setThemeOpen] = useState(false)
|
||||
|
||||
const languageField = () => (
|
||||
<SelectTableField
|
||||
name="language"
|
||||
label={t('modals.settings.labels.language')}
|
||||
open={languageOpen}
|
||||
onOpenChange={() => openSelect('language')}
|
||||
onChange={handleLanguageChange}
|
||||
onClose={() => setLanguageOpen(false)}
|
||||
value={language}
|
||||
>
|
||||
<SelectItem key="en" value="en">
|
||||
{t('modals.settings.language.english')}
|
||||
</SelectItem>
|
||||
<SelectItem key="ja" value="ja">
|
||||
{t('modals.settings.language.japanese')}
|
||||
</SelectItem>
|
||||
</SelectTableField>
|
||||
)
|
||||
// Refs
|
||||
const headerRef = React.createRef<HTMLDivElement>()
|
||||
const footerRef = React.createRef<HTMLDivElement>()
|
||||
|
||||
const themeField = () => (
|
||||
<SelectTableField
|
||||
name="theme"
|
||||
label={t('modals.settings.labels.theme')}
|
||||
open={themeOpen}
|
||||
onOpenChange={() => openSelect('theme')}
|
||||
onChange={handleThemeChange}
|
||||
onClose={() => setThemeOpen(false)}
|
||||
value={theme}
|
||||
>
|
||||
<SelectItem key="system" value="system">
|
||||
{t('modals.settings.theme.system')}
|
||||
</SelectItem>
|
||||
<SelectItem key="light" value="light">
|
||||
{t('modals.settings.theme.light')}
|
||||
</SelectItem>
|
||||
<SelectItem key="dark" value="dark">
|
||||
{t('modals.settings.theme.dark')}
|
||||
</SelectItem>
|
||||
</SelectTableField>
|
||||
)
|
||||
useEffect(() => {
|
||||
setOpen(props.open)
|
||||
}, [props.open])
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
// UI management
|
||||
function openChange(open: boolean) {
|
||||
if (props.onOpenChange) props.onOpenChange(open)
|
||||
setOpen(open)
|
||||
}
|
||||
|
||||
if (!mounted) {
|
||||
return null
|
||||
}
|
||||
function openSelect(name: 'picture' | 'gender' | 'language' | 'theme') {
|
||||
setPictureOpen(name === 'picture' ? !pictureOpen : false)
|
||||
setGenderOpen(name === 'gender' ? !genderOpen : false)
|
||||
setLanguageOpen(name === 'language' ? !languageOpen : false)
|
||||
setThemeOpen(name === 'theme' ? !themeOpen : false)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={openChange}>
|
||||
<DialogTrigger asChild>
|
||||
<li className="MenuItem">
|
||||
<span>{t('menu.settings')}</span>
|
||||
</li>
|
||||
</DialogTrigger>
|
||||
<DialogContent
|
||||
className="Account"
|
||||
headerref={headerRef}
|
||||
footerref={footerRef}
|
||||
onOpenAutoFocus={(event: Event) => {}}
|
||||
onEscapeKeyDown={onEscapeKeyDown}
|
||||
// Event handlers
|
||||
function handlePictureChange(value: string) {
|
||||
setPicture(value)
|
||||
}
|
||||
|
||||
function handleLanguageChange(value: string) {
|
||||
setLanguage(value)
|
||||
}
|
||||
|
||||
function handleGenderChange(value: string) {
|
||||
setGender(parseInt(value))
|
||||
}
|
||||
|
||||
function handleThemeChange(value: string) {
|
||||
setTheme(value)
|
||||
setAppTheme(value)
|
||||
}
|
||||
|
||||
function onEscapeKeyDown(event: KeyboardEvent) {
|
||||
if (pictureOpen || genderOpen || languageOpen || themeOpen) {
|
||||
return event.preventDefault()
|
||||
} else {
|
||||
setOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
// API calls
|
||||
function update(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault()
|
||||
|
||||
const object = {
|
||||
user: {
|
||||
picture: picture,
|
||||
element: pictureData.find((i) => i.filename === picture)?.element,
|
||||
language: language,
|
||||
gender: gender,
|
||||
theme: theme,
|
||||
// private: privateProfile,
|
||||
},
|
||||
}
|
||||
|
||||
if (accountState.account.user) {
|
||||
api.endpoints.users
|
||||
.update(accountState.account.user?.id, object)
|
||||
.then((response) => {
|
||||
const user = response.data
|
||||
|
||||
const cookieObj = {
|
||||
picture: user.avatar.picture,
|
||||
element: user.avatar.element,
|
||||
gender: user.gender,
|
||||
language: user.language,
|
||||
theme: user.theme,
|
||||
}
|
||||
|
||||
const expiresAt = new Date()
|
||||
expiresAt.setDate(expiresAt.getDate() + 60)
|
||||
setCookie('user', cookieObj, { path: '/', expires: expiresAt })
|
||||
|
||||
accountState.account.user = {
|
||||
id: user.id,
|
||||
username: user.username,
|
||||
picture: user.avatar.picture,
|
||||
element: user.avatar.element,
|
||||
language: user.language,
|
||||
theme: user.theme,
|
||||
gender: user.gender,
|
||||
}
|
||||
|
||||
setOpen(false)
|
||||
changeLanguage(router, user.language)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Views
|
||||
const pictureOptions = pictureData
|
||||
.sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
|
||||
.map((item, i) => {
|
||||
return (
|
||||
<PictureSelectItem
|
||||
key={`picture-${i}`}
|
||||
element={item.element}
|
||||
src={[
|
||||
`/profile/${item.filename}.png`,
|
||||
`/profile/${item.filename}@2x.png 2x`,
|
||||
]}
|
||||
value={item.filename}
|
||||
>
|
||||
{item.name[locale]}
|
||||
</PictureSelectItem>
|
||||
)
|
||||
})
|
||||
|
||||
const pictureField = () => (
|
||||
<SelectTableField
|
||||
name="picture"
|
||||
description={t('modals.settings.descriptions.picture')}
|
||||
className="Image"
|
||||
label={t('modals.settings.labels.picture')}
|
||||
open={pictureOpen}
|
||||
onOpenChange={() => openSelect('picture')}
|
||||
onChange={handlePictureChange}
|
||||
onClose={() => setPictureOpen(false)}
|
||||
imageAlt={t('modals.settings.labels.image_alt')}
|
||||
imageClass={pictureData.find((i) => i.filename === picture)?.element}
|
||||
imageSrc={[`/profile/${picture}.png`, `/profile/${picture}@2x.png 2x`]}
|
||||
value={picture}
|
||||
>
|
||||
<div className="DialogHeader" ref={headerRef}>
|
||||
<div className="DialogTop">
|
||||
<DialogTitle className="SubTitle">
|
||||
{t('modals.settings.title')}
|
||||
</DialogTitle>
|
||||
<DialogTitle className="DialogTitle">@{username}</DialogTitle>
|
||||
</div>
|
||||
<DialogClose className="DialogClose" asChild>
|
||||
<span>
|
||||
<CrossIcon />
|
||||
</span>
|
||||
</DialogClose>
|
||||
</div>
|
||||
{pictureOptions}
|
||||
</SelectTableField>
|
||||
)
|
||||
|
||||
<form onSubmit={update}>
|
||||
<div className="Fields">
|
||||
{pictureField()}
|
||||
{genderField()}
|
||||
{languageField()}
|
||||
{themeField()}
|
||||
const genderField = () => (
|
||||
<SelectTableField
|
||||
name="gender"
|
||||
description={t('modals.settings.descriptions.gender')}
|
||||
label={t('modals.settings.labels.gender')}
|
||||
open={genderOpen}
|
||||
onOpenChange={() => openSelect('gender')}
|
||||
onChange={handleGenderChange}
|
||||
onClose={() => setGenderOpen(false)}
|
||||
value={`${gender}`}
|
||||
>
|
||||
<SelectItem key="gran" value="0">
|
||||
{t('modals.settings.gender.gran')}
|
||||
</SelectItem>
|
||||
<SelectItem key="djeeta" value="1">
|
||||
{t('modals.settings.gender.djeeta')}
|
||||
</SelectItem>
|
||||
</SelectTableField>
|
||||
)
|
||||
|
||||
const languageField = () => (
|
||||
<SelectTableField
|
||||
name="language"
|
||||
label={t('modals.settings.labels.language')}
|
||||
open={languageOpen}
|
||||
onOpenChange={() => openSelect('language')}
|
||||
onChange={handleLanguageChange}
|
||||
onClose={() => setLanguageOpen(false)}
|
||||
value={language}
|
||||
>
|
||||
<SelectItem key="en" value="en">
|
||||
{t('modals.settings.language.english')}
|
||||
</SelectItem>
|
||||
<SelectItem key="ja" value="ja">
|
||||
{t('modals.settings.language.japanese')}
|
||||
</SelectItem>
|
||||
</SelectTableField>
|
||||
)
|
||||
|
||||
const themeField = () => (
|
||||
<SelectTableField
|
||||
name="theme"
|
||||
label={t('modals.settings.labels.theme')}
|
||||
open={themeOpen}
|
||||
onOpenChange={() => openSelect('theme')}
|
||||
onChange={handleThemeChange}
|
||||
onClose={() => setThemeOpen(false)}
|
||||
value={theme}
|
||||
>
|
||||
<SelectItem key="system" value="system">
|
||||
{t('modals.settings.theme.system')}
|
||||
</SelectItem>
|
||||
<SelectItem key="light" value="light">
|
||||
{t('modals.settings.theme.light')}
|
||||
</SelectItem>
|
||||
<SelectItem key="dark" value="dark">
|
||||
{t('modals.settings.theme.dark')}
|
||||
</SelectItem>
|
||||
</SelectTableField>
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
if (!mounted) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={openChange}>
|
||||
<DialogContent
|
||||
className="Account"
|
||||
headerref={headerRef}
|
||||
footerref={footerRef}
|
||||
onOpenAutoFocus={(event: Event) => {}}
|
||||
onEscapeKeyDown={onEscapeKeyDown}
|
||||
>
|
||||
<div className="DialogHeader" ref={headerRef}>
|
||||
<div className="DialogTop">
|
||||
<DialogTitle className="SubTitle">
|
||||
{t('modals.settings.title')}
|
||||
</DialogTitle>
|
||||
<DialogTitle className="DialogTitle">@{username}</DialogTitle>
|
||||
</div>
|
||||
<DialogClose className="DialogClose" asChild>
|
||||
<span>
|
||||
<CrossIcon />
|
||||
</span>
|
||||
</DialogClose>
|
||||
</div>
|
||||
<div className="DialogFooter" ref={footerRef}>
|
||||
<Button
|
||||
contained={true}
|
||||
text={t('modals.settings.buttons.confirm')}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
<form onSubmit={update}>
|
||||
<div className="Fields">
|
||||
{pictureField()}
|
||||
{genderField()}
|
||||
{languageField()}
|
||||
{themeField()}
|
||||
</div>
|
||||
<div className="DialogFooter" ref={footerRef}>
|
||||
<Button
|
||||
contained={true}
|
||||
text={t('modals.settings.buttons.confirm')}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
export default AccountModal
|
||||
|
|
|
|||
|
|
@ -23,7 +23,11 @@ const Alert = (props: Props) => {
|
|||
<AlertDialog.Overlay className="Overlay" onClick={props.cancelAction} />
|
||||
<div className="AlertWrapper">
|
||||
<AlertDialog.Content className="Alert">
|
||||
{props.title ? <AlertDialog.Title>Error</AlertDialog.Title> : ''}
|
||||
{props.title ? (
|
||||
<AlertDialog.Title>{props.title}</AlertDialog.Title>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<AlertDialog.Description className="description">
|
||||
{props.message}
|
||||
</AlertDialog.Description>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
stroke: #ff4d4d;
|
||||
}
|
||||
|
||||
&.Active.Save {
|
||||
&.Save {
|
||||
color: #ff4d4d;
|
||||
|
||||
.Accessory svg {
|
||||
|
|
@ -99,24 +99,27 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.save:hover {
|
||||
color: #ff4d4d;
|
||||
|
||||
&.Save {
|
||||
.Accessory svg {
|
||||
fill: #ff4d4d;
|
||||
stroke: #ff4d4d;
|
||||
fill: none;
|
||||
stroke: var(--button-text);
|
||||
}
|
||||
}
|
||||
|
||||
&.save.Active {
|
||||
color: #ff4d4d;
|
||||
&.Saved {
|
||||
color: #ff4d4d;
|
||||
|
||||
.Accessory svg {
|
||||
fill: #ff4d4d;
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: darken(#ff4d4d, 30);
|
||||
color: #ff4d4d;
|
||||
|
||||
.icon svg {
|
||||
fill: darken(#ff4d4d, 30);
|
||||
stroke: darken(#ff4d4d, 30);
|
||||
.Accessory svg {
|
||||
fill: none;
|
||||
stroke: #ff4d4d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -138,6 +141,10 @@
|
|||
|
||||
display: flex;
|
||||
|
||||
&.Arrow {
|
||||
margin-top: $unit-half;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--button-text);
|
||||
height: $dimension;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,10 @@ interface Props
|
|||
React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
HTMLButtonElement
|
||||
> {
|
||||
accessoryIcon?: React.ReactNode
|
||||
leftAccessoryIcon?: React.ReactNode
|
||||
leftAccessoryClassName?: string
|
||||
rightAccessoryIcon?: React.ReactNode
|
||||
rightAccessoryClassName?: string
|
||||
active?: boolean
|
||||
blended?: boolean
|
||||
contained?: boolean
|
||||
|
|
@ -24,22 +27,45 @@ const defaultProps = {
|
|||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
|
||||
{ accessoryIcon, active, blended, contained, buttonSize, text, ...props },
|
||||
{
|
||||
leftAccessoryIcon,
|
||||
leftAccessoryClassName,
|
||||
rightAccessoryIcon,
|
||||
rightAccessoryClassName,
|
||||
active,
|
||||
blended,
|
||||
contained,
|
||||
buttonSize,
|
||||
text,
|
||||
...props
|
||||
},
|
||||
forwardedRef
|
||||
) {
|
||||
const classes = classNames(
|
||||
{
|
||||
Button: true,
|
||||
Active: active,
|
||||
Blended: blended,
|
||||
Contained: contained,
|
||||
},
|
||||
buttonSize,
|
||||
props.className
|
||||
)
|
||||
const classes = classNames(buttonSize, props.className, {
|
||||
Button: true,
|
||||
Active: active,
|
||||
Blended: blended,
|
||||
Contained: contained,
|
||||
})
|
||||
|
||||
const hasAccessory = () => {
|
||||
if (accessoryIcon) return <span className="Accessory">{accessoryIcon}</span>
|
||||
const leftAccessoryClasses = classNames(leftAccessoryClassName, {
|
||||
Accessory: true,
|
||||
Left: true,
|
||||
})
|
||||
|
||||
const rightAccessoryClasses = classNames(rightAccessoryClassName, {
|
||||
Accessory: true,
|
||||
Right: true,
|
||||
})
|
||||
|
||||
const hasLeftAccessory = () => {
|
||||
if (leftAccessoryIcon)
|
||||
return <span className={leftAccessoryClasses}>{leftAccessoryIcon}</span>
|
||||
}
|
||||
|
||||
const hasRightAccessory = () => {
|
||||
if (rightAccessoryIcon)
|
||||
return <span className={rightAccessoryClasses}>{rightAccessoryIcon}</span>
|
||||
}
|
||||
|
||||
const hasText = () => {
|
||||
|
|
@ -48,8 +74,9 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
|
|||
|
||||
return (
|
||||
<button {...props} className={classes} ref={forwardedRef}>
|
||||
{hasAccessory()}
|
||||
{hasLeftAccessory()}
|
||||
{hasText()}
|
||||
{hasRightAccessory()}
|
||||
</button>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@
|
|||
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { getCookie } from 'cookies-next'
|
||||
import { useSnapshot } from 'valtio'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
import { AxiosResponse } from 'axios'
|
||||
import { AxiosError, AxiosResponse } from 'axios'
|
||||
import debounce from 'lodash.debounce'
|
||||
|
||||
import Alert from '~components/Alert'
|
||||
|
|
@ -31,12 +32,19 @@ const CharacterGrid = (props: Props) => {
|
|||
// Constants
|
||||
const numCharacters: number = 5
|
||||
|
||||
// Localization
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
// Cookies
|
||||
const cookie = getCookie('account')
|
||||
const accountData: AccountCookie = cookie
|
||||
? JSON.parse(cookie as string)
|
||||
: null
|
||||
|
||||
// Set up state for error handling
|
||||
const [axiosError, setAxiosError] = useState<AxiosResponse>()
|
||||
const [errorAlertOpen, setErrorAlertOpen] = useState(false)
|
||||
|
||||
// Set up state for view management
|
||||
const { party, grid } = useSnapshot(appState)
|
||||
const [slug, setSlug] = useState()
|
||||
|
|
@ -111,7 +119,15 @@ const CharacterGrid = (props: Props) => {
|
|||
if (party.editable)
|
||||
saveCharacter(party.id, character, position)
|
||||
.then((response) => handleCharacterResponse(response.data))
|
||||
.catch((error) => console.error(error))
|
||||
.catch((error) => {
|
||||
const axiosError = error as AxiosError
|
||||
const response = axiosError.response
|
||||
|
||||
if (response) {
|
||||
setErrorAlertOpen(true)
|
||||
setAxiosError(response)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -482,6 +498,18 @@ const CharacterGrid = (props: Props) => {
|
|||
}
|
||||
|
||||
// Render: JSX components
|
||||
const errorAlert = () => {
|
||||
return (
|
||||
<Alert
|
||||
open={errorAlertOpen}
|
||||
title={axiosError ? `${axiosError.status}` : 'Error'}
|
||||
message={t(`errors.${axiosError?.statusText.toLowerCase()}`)}
|
||||
cancelAction={() => setErrorAlertOpen(false)}
|
||||
cancelActionText={t('buttons.confirm')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Alert
|
||||
|
|
@ -526,6 +554,7 @@ const CharacterGrid = (props: Props) => {
|
|||
})}
|
||||
</ul>
|
||||
</div>
|
||||
{errorAlert()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -218,7 +218,7 @@ const CharacterUnit = ({
|
|||
<ContextMenu onOpenChange={handleContextMenuOpenChange}>
|
||||
<ContextMenuTrigger asChild>
|
||||
<Button
|
||||
accessoryIcon={<SettingsIcon />}
|
||||
leftAccessoryIcon={<SettingsIcon />}
|
||||
className={buttonClasses}
|
||||
onClick={handleButtonClicked}
|
||||
/>
|
||||
|
|
|
|||
188
components/DropdownMenuContent/index.scss
Normal file
188
components/DropdownMenuContent/index.scss
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
.Menu {
|
||||
transform-origin: --radix-dropdown-menu-content-transform-origin;
|
||||
background: var(--menu-bg);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
|
||||
box-sizing: border-box;
|
||||
min-width: 15vw;
|
||||
margin: 0 $unit-2x;
|
||||
// top: $unit-8x; // This shouldn't be hardcoded. How to calculate it?
|
||||
// Also, add space that doesn't make the menu disappear if you move your mouse slowly
|
||||
z-index: 15;
|
||||
|
||||
@include breakpoint(phone) {
|
||||
left: $unit-2x;
|
||||
right: $unit-2x;
|
||||
}
|
||||
}
|
||||
|
||||
.MenuItem {
|
||||
color: var(--text-tertiary);
|
||||
font-weight: $normal;
|
||||
|
||||
@include breakpoint(phone) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
background: var(--menu-bg-item-hover);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
|
||||
a {
|
||||
color: var(--text-primary);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(phone) {
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
cursor: default;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.profile > div {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
&.language {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: $unit;
|
||||
padding-right: $unit;
|
||||
|
||||
span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.Switch {
|
||||
$height: 24px;
|
||||
|
||||
background: $grey-60;
|
||||
border-radius: calc($height / 2);
|
||||
border: none;
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: $height;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.Thumb {
|
||||
$diameter: 18px;
|
||||
|
||||
background: $grey-100;
|
||||
border-radius: calc($diameter / 2);
|
||||
display: block;
|
||||
height: $diameter;
|
||||
width: $diameter;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
z-index: 3;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&[data-state='checked'] {
|
||||
background: $grey-100;
|
||||
left: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
color: $grey-100;
|
||||
font-size: 10px;
|
||||
font-weight: $bold;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.left {
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.right {
|
||||
top: 6px;
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $grey-50;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $grey-50;
|
||||
}
|
||||
}
|
||||
|
||||
& > a,
|
||||
& > span {
|
||||
display: block;
|
||||
padding: 12px 12px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 12px;
|
||||
|
||||
&:hover {
|
||||
i.tag {
|
||||
background: var(--tag-bg);
|
||||
color: var(--tag-text);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
$diameter: 32px;
|
||||
border-radius: calc($diameter / 2);
|
||||
height: $diameter;
|
||||
width: $diameter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.MenuGroup {
|
||||
border-bottom: 1px solid var(--menu-separator);
|
||||
|
||||
&:first-child .MenuItem:first-child:hover {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
||||
&:last-child .MenuItem:last-child:hover {
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
37
components/DropdownMenuContent/index.tsx
Normal file
37
components/DropdownMenuContent/index.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import React, { PropsWithChildren } from 'react'
|
||||
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
|
||||
import classNames from 'classnames'
|
||||
|
||||
import './index.scss'
|
||||
|
||||
interface Props extends DropdownMenuPrimitive.DropdownMenuContentProps {}
|
||||
|
||||
export const DropdownMenu = DropdownMenuPrimitive.Root
|
||||
export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
||||
export const DropdownMenuLabel = DropdownMenuPrimitive.Label
|
||||
export const DropdownMenuItem = DropdownMenuPrimitive.Item
|
||||
export const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
||||
export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator
|
||||
|
||||
export const DropdownMenuContent = React.forwardRef<HTMLDivElement, Props>(
|
||||
({ children, ...props }: PropsWithChildren<Props>, forwardedRef) => {
|
||||
const classes = classNames(props.className, {
|
||||
Menu: true,
|
||||
})
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
{...props}
|
||||
className={classes}
|
||||
ref={forwardedRef}
|
||||
>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.Content>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
DropdownMenuContent.defaultProps = {
|
||||
sideOffset: 4,
|
||||
}
|
||||
|
|
@ -208,7 +208,7 @@ const GridRep = (props: Props) => {
|
|||
<a href="#">
|
||||
<Button
|
||||
className="Save"
|
||||
accessoryIcon={<SaveIcon className="stroke" />}
|
||||
leftAccessoryIcon={<SaveIcon className="stroke" />}
|
||||
active={props.favorited}
|
||||
contained={true}
|
||||
buttonSize="small"
|
||||
|
|
|
|||
|
|
@ -5,11 +5,23 @@
|
|||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
#Right > div {
|
||||
section {
|
||||
display: flex;
|
||||
gap: $unit;
|
||||
}
|
||||
|
||||
img,
|
||||
.placeholder {
|
||||
$diameter: 32px;
|
||||
border-radius: calc($diameter / 2);
|
||||
height: $diameter;
|
||||
width: $diameter;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
background: var(--placeholder-bg);
|
||||
}
|
||||
|
||||
#DropdownWrapper {
|
||||
display: inline-block;
|
||||
padding-bottom: $unit;
|
||||
|
|
@ -20,7 +32,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
padding-right: $unit-4x;
|
||||
// padding-right: $unit-4x;
|
||||
|
||||
.Button {
|
||||
background: var(--button-bg-hover);
|
||||
|
|
|
|||
|
|
@ -3,21 +3,33 @@ import { useSnapshot } from 'valtio'
|
|||
import { deleteCookie } from 'cookies-next'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
import classNames from 'classnames'
|
||||
import clonedeep from 'lodash.clonedeep'
|
||||
import Link from 'next/link'
|
||||
|
||||
import api from '~utils/api'
|
||||
import { accountState, initialAccountState } from '~utils/accountState'
|
||||
import { appState, initialAppState } from '~utils/appState'
|
||||
import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
} from '~components/DropdownMenuContent'
|
||||
import LoginModal from '~components/LoginModal'
|
||||
import SignupModal from '~components/SignupModal'
|
||||
import AccountModal from '~components/AccountModal'
|
||||
import Toast from '~components/Toast'
|
||||
import Button from '~components/Button'
|
||||
import HeaderMenu from '~components/HeaderMenu'
|
||||
|
||||
import AddIcon from '~public/icons/Add.svg'
|
||||
import LinkIcon from '~public/icons/Link.svg'
|
||||
import MenuIcon from '~public/icons/Menu.svg'
|
||||
import ArrowIcon from '~public/icons/Arrow.svg'
|
||||
import SaveIcon from '~public/icons/Save.svg'
|
||||
import classNames from 'classnames'
|
||||
|
||||
import './index.scss'
|
||||
|
||||
|
|
@ -29,18 +41,50 @@ const Header = () => {
|
|||
const router = useRouter()
|
||||
|
||||
// State management
|
||||
const [open, setOpen] = useState(false)
|
||||
const [copyToastOpen, setCopyToastOpen] = useState(false)
|
||||
const [loginModalOpen, setLoginModalOpen] = useState(false)
|
||||
const [signupModalOpen, setSignupModalOpen] = useState(false)
|
||||
const [settingsModalOpen, setSettingsModalOpen] = useState(false)
|
||||
const [leftMenuOpen, setLeftMenuOpen] = useState(false)
|
||||
const [rightMenuOpen, setRightMenuOpen] = useState(false)
|
||||
|
||||
// Snapshots
|
||||
const { account } = useSnapshot(accountState)
|
||||
const { party } = useSnapshot(appState)
|
||||
|
||||
function menuButtonClicked() {
|
||||
setOpen(!open)
|
||||
function handleCopyToastOpenChanged(open: boolean) {
|
||||
setCopyToastOpen(open)
|
||||
}
|
||||
|
||||
function onClickOutsideMenu() {
|
||||
setOpen(false)
|
||||
function handleCopyToastCloseClicked() {
|
||||
setCopyToastOpen(false)
|
||||
}
|
||||
|
||||
function handleLeftMenuButtonClicked() {
|
||||
setLeftMenuOpen(!leftMenuOpen)
|
||||
}
|
||||
|
||||
function handleRightMenuButtonClicked() {
|
||||
setRightMenuOpen(!rightMenuOpen)
|
||||
}
|
||||
|
||||
function handleLeftMenuOpenChange(open: boolean) {
|
||||
setLeftMenuOpen(open)
|
||||
}
|
||||
function handleRightMenuOpenChange(open: boolean) {
|
||||
setRightMenuOpen(open)
|
||||
}
|
||||
|
||||
function closeLeftMenu() {
|
||||
setLeftMenuOpen(false)
|
||||
}
|
||||
|
||||
function closeRightMenu() {
|
||||
setRightMenuOpen(false)
|
||||
}
|
||||
|
||||
function handleSettingsOpenChanged(open: boolean) {
|
||||
setRightMenuOpen(false)
|
||||
}
|
||||
|
||||
function copyToClipboard() {
|
||||
|
|
@ -52,11 +96,15 @@ const Header = () => {
|
|||
el.select()
|
||||
document.execCommand('copy')
|
||||
el.remove()
|
||||
|
||||
setCopyToastOpen(true)
|
||||
}
|
||||
|
||||
function newParty() {
|
||||
function handleNewParty(event: React.MouseEvent, path: string) {
|
||||
event.preventDefault()
|
||||
|
||||
// Push the root URL
|
||||
router.push('/')
|
||||
router.push(path)
|
||||
|
||||
// Clean state
|
||||
const resetState = clonedeep(initialAppState)
|
||||
|
|
@ -66,9 +114,16 @@ const Header = () => {
|
|||
|
||||
// Set party to be editable
|
||||
appState.party.editable = true
|
||||
|
||||
// Close right menu
|
||||
closeRightMenu()
|
||||
}
|
||||
|
||||
function logout() {
|
||||
// Close menu
|
||||
closeRightMenu()
|
||||
|
||||
// Delete cookies
|
||||
deleteCookie('account')
|
||||
deleteCookie('user')
|
||||
|
||||
|
|
@ -103,85 +158,305 @@ const Header = () => {
|
|||
else console.error('Failed to unsave team: No party ID')
|
||||
}
|
||||
|
||||
const copyButton = () => {
|
||||
if (router.route === '/p/[party]')
|
||||
return (
|
||||
<Button
|
||||
accessoryIcon={<LinkIcon className="stroke" />}
|
||||
blended={true}
|
||||
text={t('buttons.copy')}
|
||||
onClick={copyToClipboard}
|
||||
/>
|
||||
)
|
||||
const pageTitle = () => {
|
||||
let title = ''
|
||||
let hasAccessory = false
|
||||
|
||||
const path = router.asPath.split('/')[1]
|
||||
if (path === 'p') {
|
||||
hasAccessory = true
|
||||
if (appState.party && appState.party.name) {
|
||||
title = appState.party.name
|
||||
} else {
|
||||
title = t('no_title')
|
||||
}
|
||||
} else if (['weapons', 'summons', 'characters', 'new', ''].includes(path)) {
|
||||
title = t('new_party')
|
||||
} else {
|
||||
title = ''
|
||||
}
|
||||
|
||||
return title !== '' ? (
|
||||
<Button
|
||||
blended={true}
|
||||
rightAccessoryIcon={
|
||||
path === 'p' && hasAccessory ? (
|
||||
<LinkIcon className="stroke" />
|
||||
) : undefined
|
||||
}
|
||||
text={title}
|
||||
onClick={copyToClipboard}
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
}
|
||||
|
||||
const leftNav = () => {
|
||||
const profileImage = () => {
|
||||
let image
|
||||
|
||||
const user = accountState.account.user
|
||||
if (accountState.account.authorized && user) {
|
||||
image = (
|
||||
<img
|
||||
alt={user.username}
|
||||
className={`profile ${user.element}`}
|
||||
srcSet={`/profile/${user.picture}.png,
|
||||
/profile/${user.picture}@2x.png 2x`}
|
||||
src={`/profile/${user.picture}.png`}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
image = <div className="profile placeholder" />
|
||||
}
|
||||
|
||||
return image
|
||||
}
|
||||
|
||||
const urlCopyToast = () => {
|
||||
return (
|
||||
<div id="DropdownWrapper">
|
||||
<Button
|
||||
accessoryIcon={<MenuIcon />}
|
||||
className={classNames({ Active: open })}
|
||||
blended={true}
|
||||
text={t('buttons.menu')}
|
||||
onClick={menuButtonClicked}
|
||||
/>
|
||||
<HeaderMenu
|
||||
authenticated={account.authorized}
|
||||
open={open}
|
||||
username={account.user?.username}
|
||||
onClickOutside={onClickOutsideMenu}
|
||||
logout={logout}
|
||||
/>
|
||||
</div>
|
||||
<Toast
|
||||
open={copyToastOpen}
|
||||
duration={2400}
|
||||
type="foreground"
|
||||
content="This party's URL was copied to your clipboard"
|
||||
onOpenChange={handleCopyToastOpenChanged}
|
||||
onCloseClick={handleCopyToastCloseClicked}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const saveButton = () => {
|
||||
if (party.favorited)
|
||||
return (
|
||||
<Button
|
||||
accessoryIcon={<SaveIcon />}
|
||||
blended={true}
|
||||
text="Saved"
|
||||
onClick={toggleFavorite}
|
||||
/>
|
||||
)
|
||||
else
|
||||
return (
|
||||
<Button
|
||||
accessoryIcon={<SaveIcon />}
|
||||
blended={true}
|
||||
text="Save"
|
||||
onClick={toggleFavorite}
|
||||
/>
|
||||
)
|
||||
return (
|
||||
<Button
|
||||
leftAccessoryIcon={<SaveIcon />}
|
||||
className={classNames({
|
||||
Save: true,
|
||||
Saved: party.favorited,
|
||||
})}
|
||||
blended={true}
|
||||
text={party.favorited ? 'Saved' : 'Save'}
|
||||
onClick={toggleFavorite}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const rightNav = () => {
|
||||
const settingsModal = () => {
|
||||
const user = accountState.account.user
|
||||
|
||||
if (user) {
|
||||
return (
|
||||
<AccountModal
|
||||
open={settingsModalOpen}
|
||||
username={user.username}
|
||||
picture={user.picture}
|
||||
gender={user.gender}
|
||||
language={user.language}
|
||||
theme={user.theme}
|
||||
onOpenChange={setSettingsModalOpen}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const loginModal = () => {
|
||||
return <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
|
||||
}
|
||||
|
||||
const signupModal = () => {
|
||||
return (
|
||||
<div>
|
||||
<SignupModal open={signupModalOpen} onOpenChange={setSignupModalOpen} />
|
||||
)
|
||||
}
|
||||
|
||||
const left = () => {
|
||||
return (
|
||||
<section>
|
||||
<div id="DropdownWrapper">
|
||||
<DropdownMenu
|
||||
open={leftMenuOpen}
|
||||
onOpenChange={handleLeftMenuOpenChange}
|
||||
>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
leftAccessoryIcon={<MenuIcon />}
|
||||
className={classNames({ Active: leftMenuOpen })}
|
||||
blended={true}
|
||||
onClick={handleLeftMenuButtonClicked}
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="Left">
|
||||
{leftMenuItems()}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
{pageTitle()}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
const right = () => {
|
||||
return (
|
||||
<section>
|
||||
{router.route === '/p/[party]' &&
|
||||
account.user &&
|
||||
(!party.user || party.user.id !== account.user.id)
|
||||
? saveButton()
|
||||
: ''}
|
||||
|
||||
{copyButton()}
|
||||
|
||||
<Button
|
||||
accessoryIcon={<AddIcon className="Add" />}
|
||||
blended={true}
|
||||
text={t('buttons.new')}
|
||||
onClick={newParty}
|
||||
/>
|
||||
</div>
|
||||
<DropdownMenu
|
||||
open={rightMenuOpen}
|
||||
onOpenChange={handleRightMenuOpenChange}
|
||||
>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
className={classNames({ Active: rightMenuOpen })}
|
||||
leftAccessoryIcon={profileImage()}
|
||||
rightAccessoryIcon={<ArrowIcon />}
|
||||
rightAccessoryClassName="Arrow"
|
||||
onClick={handleRightMenuButtonClicked}
|
||||
blended={true}
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="Right">
|
||||
{rightMenuItems()}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
const leftMenuItems = () => {
|
||||
return (
|
||||
<>
|
||||
{accountState.account.authorized && accountState.account.user ? (
|
||||
<>
|
||||
<DropdownMenuGroup className="MenuGroup">
|
||||
<DropdownMenuItem className="MenuItem" onClick={closeRightMenu}>
|
||||
<Link
|
||||
href={`/${accountState.account.user.username}` || ''}
|
||||
passHref
|
||||
>
|
||||
Your profile
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
|
||||
<Link href={`/saved` || ''}>{t('menu.saved')}</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<DropdownMenuGroup className="MenuGroup">
|
||||
<DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
|
||||
<Link href="/teams">{t('menu.teams')}</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="MenuItem">
|
||||
<div>
|
||||
<span>{t('menu.guides')}</span>
|
||||
<i className="tag">{t('coming_soon')}</i>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuGroup className="MenuGroup">
|
||||
<DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
|
||||
<a href="/about" target="_blank">
|
||||
{t('about.segmented_control.about')}
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
|
||||
<a href="/updates" target="_blank">
|
||||
{t('about.segmented_control.updates')}
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
|
||||
<a href="/roadmap" target="_blank">
|
||||
{t('about.segmented_control.roadmap')}
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const rightMenuItems = () => {
|
||||
let items
|
||||
|
||||
const account = accountState.account
|
||||
if (account.authorized && account.user) {
|
||||
items = (
|
||||
<>
|
||||
<DropdownMenuGroup className="MenuGroup">
|
||||
<DropdownMenuItem className="MenuItem">
|
||||
<Link href="/new">
|
||||
<a onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}>
|
||||
New party
|
||||
</a>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="MenuItem">
|
||||
<Link href={`/${account.user.username}` || ''} passHref>
|
||||
Your profile
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup className="MenuGroup">
|
||||
<DropdownMenuItem
|
||||
className="MenuItem"
|
||||
onClick={() => setSettingsModalOpen(true)}
|
||||
>
|
||||
<span>{t('menu.settings')}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="MenuItem" onClick={logout}>
|
||||
<span>{t('menu.logout')}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</>
|
||||
)
|
||||
} else {
|
||||
items = (
|
||||
<>
|
||||
<DropdownMenuGroup className="MenuGroup">
|
||||
<DropdownMenuItem className="MenuItem">
|
||||
<Link href="/new">
|
||||
<a onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}>
|
||||
New party
|
||||
</a>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup className="MenuGroup">
|
||||
<DropdownMenuItem
|
||||
className="MenuItem"
|
||||
onClick={() => setLoginModalOpen(true)}
|
||||
>
|
||||
<span>Log in</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="MenuItem"
|
||||
onClick={() => setSignupModalOpen(true)}
|
||||
>
|
||||
<span>Sign up</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return items
|
||||
}
|
||||
|
||||
return (
|
||||
<nav id="Header">
|
||||
<div id="Left">{leftNav()}</div>
|
||||
<div id="Right">{rightNav()}</div>
|
||||
{left()}
|
||||
{right()}
|
||||
{urlCopyToast()}
|
||||
{settingsModal()}
|
||||
{loginModal()}
|
||||
{signupModal()}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,187 +0,0 @@
|
|||
.Menu {
|
||||
background: var(--menu-bg);
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
min-width: 220px;
|
||||
position: absolute;
|
||||
top: $unit-8x; // This shouldn't be hardcoded. How to calculate it?
|
||||
// Also, add space that doesn't make the menu disappear if you move your mouse slowly
|
||||
z-index: 10;
|
||||
|
||||
@include breakpoint(phone) {
|
||||
left: $unit-2x;
|
||||
right: $unit-2x;
|
||||
}
|
||||
}
|
||||
|
||||
.MenuItem {
|
||||
color: var(--text-tertiary);
|
||||
font-weight: $normal;
|
||||
|
||||
@include breakpoint(phone) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
background: var(--menu-bg-item-hover);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
|
||||
a {
|
||||
color: var(--text-primary);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(phone) {
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
cursor: default;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.profile > div {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
&.language {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: $unit;
|
||||
padding-right: $unit;
|
||||
|
||||
span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.Switch {
|
||||
$height: 24px;
|
||||
|
||||
background: $grey-60;
|
||||
border-radius: calc($height / 2);
|
||||
border: none;
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: $height;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.Thumb {
|
||||
$diameter: 18px;
|
||||
|
||||
background: $grey-100;
|
||||
border-radius: calc($diameter / 2);
|
||||
display: block;
|
||||
height: $diameter;
|
||||
width: $diameter;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
z-index: 3;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&[data-state='checked'] {
|
||||
background: $grey-100;
|
||||
left: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
color: $grey-100;
|
||||
font-size: 10px;
|
||||
font-weight: $bold;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.left {
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.right {
|
||||
top: 6px;
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $grey-50;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $grey-50;
|
||||
}
|
||||
}
|
||||
|
||||
& > a,
|
||||
& > span {
|
||||
display: block;
|
||||
padding: 12px 12px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 12px;
|
||||
|
||||
&:hover {
|
||||
i.tag {
|
||||
background: var(--tag-bg);
|
||||
color: var(--tag-text);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
$diameter: 32px;
|
||||
border-radius: calc($diameter / 2);
|
||||
height: $diameter;
|
||||
width: $diameter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.MenuGroup {
|
||||
border-bottom: 1px solid var(--menu-separator);
|
||||
|
||||
&:first-child .MenuItem:first-child:hover {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
||||
&:last-child .MenuItem:last-child:hover {
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
import React, { PropsWithChildren, useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import classNames from 'classnames'
|
||||
|
||||
import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
|
||||
|
||||
import * as RadioGroup from '@radix-ui/react-radio-group'
|
||||
|
||||
import Button from '~components/Button'
|
||||
import {
|
||||
Popover,
|
||||
|
|
@ -13,7 +15,6 @@ import {
|
|||
import JobAccessoryItem from '~components/JobAccessoryItem'
|
||||
|
||||
import './index.scss'
|
||||
import classNames from 'classnames'
|
||||
|
||||
interface Props {
|
||||
buttonref: React.RefObject<HTMLButtonElement>
|
||||
|
|
@ -80,10 +81,6 @@ const JobAccessoryPopover = ({
|
|||
onOpenChange(false)
|
||||
}
|
||||
|
||||
function capitalizeFirstLetter(string: string) {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1)
|
||||
}
|
||||
|
||||
const radioGroup = (
|
||||
<>
|
||||
<h3>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ const JobImage = ({
|
|||
|
||||
return (
|
||||
<Button
|
||||
accessoryIcon={icon}
|
||||
leftAccessoryIcon={icon}
|
||||
className={classes}
|
||||
onClick={handleAccessoryButtonClicked}
|
||||
ref={buttonRef}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { setCookie } from 'cookies-next'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
|
@ -26,7 +26,12 @@ interface ErrorMap {
|
|||
const emailRegex =
|
||||
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
||||
|
||||
const LoginModal = () => {
|
||||
interface Props {
|
||||
open: boolean
|
||||
onOpenChange?: (open: boolean) => void
|
||||
}
|
||||
|
||||
const LoginModal = (props: Props) => {
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
|
|
@ -46,6 +51,10 @@ const LoginModal = () => {
|
|||
const footerRef: React.RefObject<HTMLDivElement> = React.createRef()
|
||||
const form: React.RefObject<HTMLInputElement>[] = [emailInput, passwordInput]
|
||||
|
||||
useEffect(() => {
|
||||
setOpen(props.open)
|
||||
}, [props.open])
|
||||
|
||||
function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
|
||||
const { name, value } = event.target
|
||||
let newErrors = { ...errors }
|
||||
|
|
@ -185,6 +194,8 @@ const LoginModal = () => {
|
|||
email: '',
|
||||
password: '',
|
||||
})
|
||||
|
||||
if (props.onOpenChange) props.onOpenChange(open)
|
||||
}
|
||||
|
||||
function onEscapeKeyDown(event: KeyboardEvent) {
|
||||
|
|
@ -198,11 +209,6 @@ const LoginModal = () => {
|
|||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={openChange}>
|
||||
<DialogTrigger asChild>
|
||||
<li className="MenuItem">
|
||||
<span>{t('menu.login')}</span>
|
||||
</li>
|
||||
</DialogTrigger>
|
||||
<DialogContent
|
||||
className="Login"
|
||||
footerref={footerRef}
|
||||
|
|
|
|||
|
|
@ -538,7 +538,7 @@ const PartyDetails = (props: Props) => {
|
|||
<div className="left">
|
||||
{router.pathname !== '/new' ? (
|
||||
<Button
|
||||
accessoryIcon={<CrossIcon />}
|
||||
leftAccessoryIcon={<CrossIcon />}
|
||||
className="Blended medium destructive"
|
||||
onClick={handleClick}
|
||||
text={t('buttons.delete')}
|
||||
|
|
@ -550,7 +550,7 @@ const PartyDetails = (props: Props) => {
|
|||
<div className="right">
|
||||
<Button text={t('buttons.cancel')} onClick={toggleDetails} />
|
||||
<Button
|
||||
accessoryIcon={<CheckIcon className="Check" />}
|
||||
leftAccessoryIcon={<CheckIcon className="Check" />}
|
||||
text={t('buttons.save_info')}
|
||||
onClick={updateDetails}
|
||||
/>
|
||||
|
|
@ -643,7 +643,7 @@ const PartyDetails = (props: Props) => {
|
|||
<div className="Right">
|
||||
{party.editable ? (
|
||||
<Button
|
||||
accessoryIcon={<EditIcon />}
|
||||
leftAccessoryIcon={<EditIcon />}
|
||||
text={t('buttons.show_info')}
|
||||
onClick={toggleDetails}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { setCookie } from 'cookies-next'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
|
@ -15,7 +15,10 @@ import DialogContent from '~components/DialogContent'
|
|||
import CrossIcon from '~public/icons/Cross.svg'
|
||||
import './index.scss'
|
||||
|
||||
interface Props {}
|
||||
interface Props {
|
||||
open: boolean
|
||||
onOpenChange?: (open: boolean) => void
|
||||
}
|
||||
|
||||
interface ErrorMap {
|
||||
[index: string]: string
|
||||
|
|
@ -58,6 +61,10 @@ const SignupModal = (props: Props) => {
|
|||
passwordConfirmationInput,
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
setOpen(props.open)
|
||||
}, [props.open])
|
||||
|
||||
function register(event: React.FormEvent) {
|
||||
event.preventDefault()
|
||||
|
||||
|
|
@ -266,6 +273,8 @@ const SignupModal = (props: Props) => {
|
|||
password: '',
|
||||
passwordConfirmation: '',
|
||||
})
|
||||
|
||||
if (props.onOpenChange) props.onOpenChange(open)
|
||||
}
|
||||
|
||||
function onEscapeKeyDown(event: KeyboardEvent) {
|
||||
|
|
@ -279,11 +288,6 @@ const SignupModal = (props: Props) => {
|
|||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={openChange}>
|
||||
<DialogTrigger asChild>
|
||||
<li className="MenuItem">
|
||||
<span>{t('menu.signup')}</span>
|
||||
</li>
|
||||
</DialogTrigger>
|
||||
<DialogContent
|
||||
className="Signup"
|
||||
footerref={footerRef}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@ import { getCookie } from 'cookies-next'
|
|||
import { useSnapshot } from 'valtio'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
import { AxiosResponse } from 'axios'
|
||||
import { AxiosError, AxiosResponse } from 'axios'
|
||||
import debounce from 'lodash.debounce'
|
||||
|
||||
import Alert from '~components/Alert'
|
||||
import SummonUnit from '~components/SummonUnit'
|
||||
import ExtraSummons from '~components/ExtraSummons'
|
||||
|
||||
|
|
@ -38,6 +39,10 @@ const SummonGrid = (props: Props) => {
|
|||
// Localization
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
// Set up state for error handling
|
||||
const [axiosError, setAxiosError] = useState<AxiosResponse>()
|
||||
const [errorAlertOpen, setErrorAlertOpen] = useState(false)
|
||||
|
||||
// Set up state for view management
|
||||
const { party, grid } = useSnapshot(appState)
|
||||
const [slug, setSlug] = useState()
|
||||
|
|
@ -100,12 +105,12 @@ const SummonGrid = (props: Props) => {
|
|||
saveSummon(party.id, summon, position)
|
||||
.then((response) => handleSummonResponse(response.data))
|
||||
.catch((error) => {
|
||||
const code = error.response.status
|
||||
const data = error.response.data
|
||||
if (code === 422) {
|
||||
if (data.code === 'incompatible_summon_for_position') {
|
||||
// setShowIncompatibleAlert(true)
|
||||
}
|
||||
const axiosError = error as AxiosError
|
||||
const response = axiosError.response
|
||||
|
||||
if (response) {
|
||||
setErrorAlertOpen(true)
|
||||
setAxiosError(response)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -380,6 +385,18 @@ const SummonGrid = (props: Props) => {
|
|||
}
|
||||
|
||||
// Render: JSX components
|
||||
const errorAlert = () => {
|
||||
return (
|
||||
<Alert
|
||||
open={errorAlertOpen}
|
||||
title={axiosError ? `${axiosError.status}` : 'Error'}
|
||||
message={t(`errors.${axiosError?.statusText.toLowerCase()}`)}
|
||||
cancelAction={() => setErrorAlertOpen(false)}
|
||||
cancelActionText={t('buttons.confirm')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const mainSummonElement = (
|
||||
<div className="LabeledUnit">
|
||||
<div className="Label">{t('summons.main')}</div>
|
||||
|
|
@ -460,6 +477,7 @@ const SummonGrid = (props: Props) => {
|
|||
</div>
|
||||
|
||||
{subAuraSummonElement}
|
||||
{errorAlert()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@ const SummonUnit = ({
|
|||
<ContextMenu onOpenChange={handleContextMenuOpenChange}>
|
||||
<ContextMenuTrigger asChild>
|
||||
<Button
|
||||
accessoryIcon={<SettingsIcon />}
|
||||
leftAccessoryIcon={<SettingsIcon />}
|
||||
className={buttonClasses}
|
||||
onClick={handleButtonClicked}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,33 @@
|
|||
.Toast {
|
||||
background: var(--dialog-bg);
|
||||
border-radius: $card-corner;
|
||||
box-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit-2x;
|
||||
padding: $unit-3x;
|
||||
|
||||
&[data-state='open'] {
|
||||
animation: slideLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
&[data-state='closed'] {
|
||||
animation: fadeOut 300ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
&[data-swipe='move'] {
|
||||
transform: translateX(var(--radix-toast-swipe-move-x));
|
||||
}
|
||||
|
||||
&[data-swipe='cancel'] {
|
||||
transform: translateX(0);
|
||||
transition: transform 200ms ease-out;
|
||||
}
|
||||
|
||||
&[data-swipe='end'] {
|
||||
animation: slideRight 100ms ease-out;
|
||||
}
|
||||
|
||||
.Header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -17,22 +17,24 @@ const Toast = ({
|
|||
content,
|
||||
...props
|
||||
}: PropsWithChildren<Props>) => {
|
||||
const { onCloseClick, ...toastProps } = props
|
||||
|
||||
const classes = classNames(props.className, {
|
||||
Toast: true,
|
||||
})
|
||||
|
||||
return (
|
||||
<ToastPrimitive.Root {...props} className={classes}>
|
||||
<div className="Header">
|
||||
{title && (
|
||||
<ToastPrimitive.Root {...toastProps} className={classes}>
|
||||
{title && (
|
||||
<div className="Header">
|
||||
<ToastPrimitive.Title asChild>
|
||||
<h3>{title}</h3>
|
||||
</ToastPrimitive.Title>
|
||||
)}
|
||||
<ToastPrimitive.Close aria-label="Close" onClick={props.onCloseClick}>
|
||||
<span aria-hidden>×</span>
|
||||
</ToastPrimitive.Close>
|
||||
</div>
|
||||
<ToastPrimitive.Close aria-label="Close" onClick={onCloseClick}>
|
||||
<span aria-hidden>×</span>
|
||||
</ToastPrimitive.Close>
|
||||
</div>
|
||||
)}
|
||||
<ToastPrimitive.Description asChild>
|
||||
<p>{content}</p>
|
||||
</ToastPrimitive.Description>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { getCookie } from 'cookies-next'
|
|||
import { useSnapshot } from 'valtio'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
import { AxiosResponse } from 'axios'
|
||||
import { AxiosError, AxiosResponse } from 'axios'
|
||||
import debounce from 'lodash.debounce'
|
||||
|
||||
import Alert from '~components/Alert'
|
||||
|
|
@ -41,11 +41,15 @@ const WeaponGrid = (props: Props) => {
|
|||
? JSON.parse(cookie as string)
|
||||
: null
|
||||
|
||||
// Set up state for error handling
|
||||
const [axiosError, setAxiosError] = useState<AxiosResponse>()
|
||||
const [errorAlertOpen, setErrorAlertOpen] = useState(false)
|
||||
const [showIncompatibleAlert, setShowIncompatibleAlert] = useState(false)
|
||||
|
||||
// Set up state for view management
|
||||
const { party, grid } = useSnapshot(appState)
|
||||
const [slug, setSlug] = useState()
|
||||
const [modalOpen, setModalOpen] = useState(false)
|
||||
const [showIncompatibleAlert, setShowIncompatibleAlert] = useState(false)
|
||||
|
||||
// Set up state for conflict management
|
||||
const [incoming, setIncoming] = useState<Weapon>()
|
||||
|
|
@ -100,11 +104,21 @@ const WeaponGrid = (props: Props) => {
|
|||
saveWeapon(party.id, weapon, position)
|
||||
.then((response) => handleWeaponResponse(response.data))
|
||||
.catch((error) => {
|
||||
const code = error.response.status
|
||||
const data = error.response.data
|
||||
if (code === 422) {
|
||||
if (data.code === 'incompatible_weapon_for_position') {
|
||||
const axiosError = error as AxiosError
|
||||
const response = axiosError.response
|
||||
|
||||
if (response) {
|
||||
const code = response.status
|
||||
const data = response.data
|
||||
|
||||
if (
|
||||
code === 422 &&
|
||||
data.code === 'incompatible_weapon_for_position'
|
||||
) {
|
||||
setShowIncompatibleAlert(true)
|
||||
} else {
|
||||
setErrorAlertOpen(true)
|
||||
setAxiosError(response)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -362,16 +376,29 @@ const WeaponGrid = (props: Props) => {
|
|||
cancelAction={() => setShowIncompatibleAlert(!showIncompatibleAlert)}
|
||||
cancelActionText={t('buttons.confirm')}
|
||||
message={t('alert.incompatible_weapon')}
|
||||
></Alert>
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
}
|
||||
|
||||
const errorAlert = () => {
|
||||
return (
|
||||
<Alert
|
||||
open={errorAlertOpen}
|
||||
title={axiosError ? `${axiosError.status}` : 'Error'}
|
||||
message={t(`errors.${axiosError?.statusText.toLowerCase()}`)}
|
||||
cancelAction={() => setErrorAlertOpen(false)}
|
||||
cancelActionText={t('buttons.confirm')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="WeaponGrid">
|
||||
{conflicts ? conflictModal() : ''}
|
||||
{incompatibleAlert()}
|
||||
{errorAlert()}
|
||||
<div id="MainGrid">
|
||||
{mainhandElement}
|
||||
<ul id="Weapons">{weaponGridElement}</ul>
|
||||
|
|
|
|||
|
|
@ -450,7 +450,7 @@ const WeaponUnit = ({
|
|||
<ContextMenu onOpenChange={handleContextMenuOpenChange}>
|
||||
<ContextMenuTrigger asChild>
|
||||
<Button
|
||||
accessoryIcon={<SettingsIcon />}
|
||||
leftAccessoryIcon={<SettingsIcon />}
|
||||
className={buttonClasses}
|
||||
onClick={handleButtonClicked}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ function MyApp({ Component, pageProps }: AppProps) {
|
|||
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<ToastProvider>
|
||||
<ToastProvider swipeDirection="right">
|
||||
<Layout>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -51,6 +51,9 @@
|
|||
},
|
||||
"remove": "Remove from grid"
|
||||
},
|
||||
"errors": {
|
||||
"unauthorized": "You don't have permission to perform that action"
|
||||
},
|
||||
"filters": {
|
||||
"labels": {
|
||||
"element": "Element",
|
||||
|
|
@ -384,6 +387,7 @@
|
|||
"extra_weapons": "Additional Weapons",
|
||||
"equipped": "Equipped",
|
||||
"coming_soon": "Coming Soon",
|
||||
"new_party": "New party",
|
||||
"no_accessory": "No {{accessory}} equipped",
|
||||
"no_title": "Untitled",
|
||||
"no_raid": "No raid",
|
||||
|
|
|
|||
|
|
@ -59,6 +59,9 @@
|
|||
"rarity": "レアリティ"
|
||||
}
|
||||
},
|
||||
"errors": {
|
||||
"unauthorized": "行ったアクションを実行する権限がありません"
|
||||
},
|
||||
"header": {
|
||||
"anonymous": "無名",
|
||||
"untitled_team": "{{username}}さんからの無題編成",
|
||||
|
|
@ -385,6 +388,7 @@
|
|||
"equipped": "装備した",
|
||||
"extra_weapons": "Additional Weapons",
|
||||
"coming_soon": "開発中",
|
||||
"new_party": "新しい編成",
|
||||
"no_accessory": "{{accessory}}は装備していません",
|
||||
"no_title": "無題",
|
||||
"no_raid": "マルチなし",
|
||||
|
|
|
|||
|
|
@ -368,6 +368,15 @@ i.tag {
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes openModalDesktop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -392,6 +401,24 @@ i.tag {
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes slideLeft {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRight {
|
||||
from {
|
||||
transform: translateX(var(--radix-toast-swipe-end-x));
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInFilter {
|
||||
from {
|
||||
backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@
|
|||
--selected-item-bg: #{$selected--item--bg--light};
|
||||
--selected-item-bg-hover: #{$selected--item--bg--light--hover};
|
||||
|
||||
--placeholder-bg: #{$grey-80};
|
||||
|
||||
// Light - Menus
|
||||
--dialog-bg: #{$dialog--bg--light};
|
||||
|
||||
|
|
@ -149,6 +151,8 @@
|
|||
--selected-item-bg: #{$selected--item--bg--dark};
|
||||
--selected-item-bg-hover: #{$selected--item--bg--dark--hover};
|
||||
|
||||
--placeholder-bg: #{$grey-40};
|
||||
|
||||
// Dark - Dialogs
|
||||
--dialog-bg: #{$dialog--bg--dark};
|
||||
|
||||
|
|
|
|||
3
utils/capitalizeFirstLetter.tsx
Normal file
3
utils/capitalizeFirstLetter.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export default function capitalizeFirstLetter(string: string) {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1)
|
||||
}
|
||||
Loading…
Reference in a new issue