granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix Conflict modals and make scrollable

Browse source
This commit is contained in:
Justin Edmund 2023-01-21 07:56:25 -08:00
parent acadbc3eea
commit 0678856b43
4 changed files with 109 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
components/CharacterConflictModal/index.tsx
View file

@ -30,6 +30,9 @@ const CharacterConflictModal = (props: Props) => {
// States // States
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
// Refs
const footerRef = React.createRef<HTMLDivElement>()
useEffect(() => { useEffect(() => {
setOpen(props.open) setOpen(props.open)
}, [setOpen, props.open]) }, [setOpen, props.open])
@ -73,42 +76,52 @@ const CharacterConflictModal = (props: Props) => {
<Dialog open={open} onOpenChange={openChange}> <Dialog open={open} onOpenChange={openChange}>
<DialogContent <DialogContent
className="Conflict" className="Conflict"
footerref={footerRef}
onOpenAutoFocus={(event) => event.preventDefault()} onOpenAutoFocus={(event) => event.preventDefault()}
onEscapeKeyDown={close} onEscapeKeyDown={close}
> >
<p> <div className="Content">
<Trans i18nKey="modals.conflict.character"></Trans> <p>
</p> <Trans i18nKey="modals.conflict.character"></Trans>
<div className="CharacterDiagram Diagram"> </p>
<ul> <div className="CharacterDiagram Diagram">
{props.conflictingCharacters?.map((character, i) => ( <ul>
<li className="character" key={`conflict-${i}`}> {props.conflictingCharacters?.map((character, i) => (
<li className="character" key={`conflict-${i}`}>
<img
alt={character.object.name[locale]}
src={imageUrl(character.object, character.uncap_level)}
/>
<span>{character.object.name[locale]}</span>
</li>
))}
</ul>
<span className="arrow">&rarr;</span>
<div className="wrapper">
<div className="character">
<img <img
alt={character.object.name[locale]} alt={props.incomingCharacter?.name[locale]}
src={imageUrl(character.object, character.uncap_level)} src={imageUrl(props.incomingCharacter)}
/> />
<span>{character.object.name[locale]}</span> <span>{props.incomingCharacter?.name[locale]}</span>
</li> </div>
))}
</ul>
<span className="arrow">&rarr;</span>
<div className="wrapper">
<div className="character">
<img
alt={props.incomingCharacter?.name[locale]}
src={imageUrl(props.incomingCharacter)}
/>
<span>{props.incomingCharacter?.name[locale]}</span>
</div> </div>
</div> </div>
</div> </div>
<footer> <div className="DialogFooter" ref={footerRef}>
<Button onClick={close} text={t('buttons.cancel')} /> <div className="Buttons Span">
<Button <Button
onClick={props.resolveConflict} contained={true}
text={t('modals.conflict.buttons.confirm')} onClick={close}
/> text={t('buttons.cancel')}
</footer> />
<Button
contained={true}
onClick={props.resolveConflict}
text={t('modals.conflict.buttons.confirm')}
/>
</div>
</div>
</DialogContent> </DialogContent>
<Overlay open={open} visible={true} /> <Overlay open={open} visible={true} />
</Dialog> </Dialog>

36
components/DialogContent/index.scss
View file

@ -149,6 +149,19 @@
flex-direction: column; flex-direction: column;
padding: ($unit * 1.5) ($unit * $multiplier) $unit-3x; padding: ($unit * 1.5) ($unit * $multiplier) $unit-3x;
position: sticky; position: sticky;
.Buttons {
display: flex;
gap: $unit;
&.Span {
width: 100%;
.Button {
width: 100%;
}
}
}
} }
.actions { .actions {
@ -160,16 +173,23 @@
&.Conflict { &.Conflict {
$weapon-diameter: 14rem; $weapon-diameter: 14rem;
& > p { .Content {
line-height: 1.2; display: flex;
max-width: 400px; flex-direction: column;
gap: $unit-4x;
padding: $unit-4x $unit-4x $unit-2x $unit-4x;
strong { & > p {
font-weight: $bold; font-size: $font-regular;
}
&:lang(ja) {
line-height: 1.4; line-height: 1.4;
strong {
font-weight: $bold;
}
&:lang(ja) {
line-height: 1.4;
}
} }
} }

2
components/DialogContent/index.tsx
View file

@ -11,7 +11,7 @@ interface Props
React.DialogHTMLAttributes<HTMLDivElement>, React.DialogHTMLAttributes<HTMLDivElement>,
HTMLDivElement HTMLDivElement
> { > {
headerref: React.RefObject<HTMLDivElement> headerref?: React.RefObject<HTMLDivElement>
footerref?: React.RefObject<HTMLDivElement> footerref?: React.RefObject<HTMLDivElement>
onEscapeKeyDown: (event: KeyboardEvent) => void onEscapeKeyDown: (event: KeyboardEvent) => void
onOpenAutoFocus: (event: Event) => void onOpenAutoFocus: (event: Event) => void

65
components/WeaponConflictModal/index.tsx
View file

@ -30,6 +30,9 @@ const WeaponConflictModal = (props: Props) => {
// States // States
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
// Refs
const footerRef = React.createRef<HTMLDivElement>()
useEffect(() => { useEffect(() => {
setOpen(props.open) setOpen(props.open)
}, [setOpen, props.open]) }, [setOpen, props.open])
@ -67,40 +70,50 @@ const WeaponConflictModal = (props: Props) => {
<Dialog open={open} onOpenChange={openChange}> <Dialog open={open} onOpenChange={openChange}>
<DialogContent <DialogContent
className="Conflict" className="Conflict"
footerref={footerRef}
onOpenAutoFocus={(event) => event.preventDefault()} onOpenAutoFocus={(event) => event.preventDefault()}
onEscapeKeyDown={close} onEscapeKeyDown={close}
> >
<p>{infoString()}</p> <div className="Content">
<div className="WeaponDiagram Diagram"> <p>{infoString()}</p>
<ul> <div className="WeaponDiagram Diagram">
{props.conflictingWeapons?.map((weapon, i) => ( <ul>
<li className="weapon" key={`conflict-${i}`}> {props.conflictingWeapons?.map((weapon, i) => (
<li className="weapon" key={`conflict-${i}`}>
<img
alt={weapon.object.name[locale]}
src={imageUrl(weapon.object)}
/>
<span>{weapon.object.name[locale]}</span>
</li>
))}
</ul>
<span className="arrow">&rarr;</span>
<div className="wrapper">
<div className="weapon">
<img <img
alt={weapon.object.name[locale]} alt={props.incomingWeapon?.name[locale]}
src={imageUrl(weapon.object)} src={imageUrl(props.incomingWeapon)}
/> />
<span>{weapon.object.name[locale]}</span> {props.incomingWeapon?.name[locale]}
</li> </div>
))}
</ul>
<span className="arrow">&rarr;</span>
<div className="wrapper">
<div className="weapon">
<img
alt={props.incomingWeapon?.name[locale]}
src={imageUrl(props.incomingWeapon)}
/>
{props.incomingWeapon?.name[locale]}
</div> </div>
</div> </div>
</div> </div>
<footer> <div className="DialogFooter" ref={footerRef}>
<Button onClick={close} text={t('buttons.cancel')} /> <div className="Buttons Span">
<Button <Button
onClick={props.resolveConflict} contained={true}
text={t('modals.conflict.buttons.confirm')} onClick={close}
/> text={t('buttons.cancel')}
</footer> />
<Button
contained={true}
onClick={props.resolveConflict}
text={t('modals.conflict.buttons.confirm')}
/>
</div>
</div>
</DialogContent> </DialogContent>
<Overlay open={open} visible={true} /> <Overlay open={open} visible={true} />
</Dialog> </Dialog>