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

19
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,9 +76,11 @@ const CharacterConflictModal = (props: Props) => {
<Dialog open={open} onOpenChange={openChange}>
<DialogContent
className="Conflict"
footerref={footerRef}
onOpenAutoFocus={(event) => event.preventDefault()}
onEscapeKeyDown={close}
>
<div className="Content">
<p>
<Trans i18nKey="modals.conflict.character"></Trans>
</p>
@ -102,13 +107,21 @@ const CharacterConflictModal = (props: Props) => {
</div>
</div>
</div>
<footer>
<Button onClick={close} text={t('buttons.cancel')} />
</div>
<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')}
/>
</footer>
</div>
</div>
</DialogContent>
<Overlay open={open} visible={true} />
</Dialog>

24
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,9 +173,15 @@
&.Conflict {
$weapon-diameter: 14rem;
.Content {
display: flex;
flex-direction: column;
gap: $unit-4x;
padding: $unit-4x $unit-4x $unit-2x $unit-4x;
& > p {
line-height: 1.2;
max-width: 400px;
font-size: $font-regular;
line-height: 1.4;
strong {
font-weight: $bold;
@ -172,6 +191,7 @@
line-height: 1.4;
}
}
}
.weapon,
.character {

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

19
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,9 +70,11 @@ const WeaponConflictModal = (props: Props) => {
<Dialog open={open} onOpenChange={openChange}>
<DialogContent
className="Conflict"
footerref={footerRef}
onOpenAutoFocus={(event) => event.preventDefault()}
onEscapeKeyDown={close}
>
<div className="Content">
<p>{infoString()}</p>
<div className="WeaponDiagram Diagram">
<ul>
@ -94,13 +99,21 @@ const WeaponConflictModal = (props: Props) => {
</div>
</div>
</div>
<footer>
<Button onClick={close} text={t('buttons.cancel')} />
</div>
<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')}
/>
</footer>
</div>
</div>
</DialogContent>
<Overlay open={open} visible={true} />
</Dialog>