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

36
components/DialogContent/index.scss
View file

@ -149,6 +149,19 @@
flex-direction: column;
padding: ($unit * 1.5) ($unit * $multiplier) $unit-3x;
position: sticky;
.Buttons {
display: flex;
gap: $unit;
&.Span {
width: 100%;
.Button {
width: 100%;
}
}
}
}
.actions {
@ -160,16 +173,23 @@
&.Conflict {
$weapon-diameter: 14rem;
& > p {
line-height: 1.2;
max-width: 400px;
.Content {
display: flex;
flex-direction: column;
gap: $unit-4x;
padding: $unit-4x $unit-4x $unit-2x $unit-4x;
strong {
font-weight: $bold;
}
&:lang(ja) {
& > p {
font-size: $font-regular;
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>,
HTMLDivElement
> {
headerref: React.RefObject<HTMLDivElement>
headerref?: React.RefObject<HTMLDivElement>
footerref?: React.RefObject<HTMLDivElement>
onEscapeKeyDown: (event: KeyboardEvent) => void
onOpenAutoFocus: (event: Event) => void

65
components/WeaponConflictModal/index.tsx
View file

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