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

Implement Radix's Alert dialog for deleting teams

Browse source 
We didn't implement the method for actually doing the deleting yet, though
This commit is contained in:
Justin Edmund 2022-02-04 20:43:02 -08:00
parent 2140208530
commit 679710efc3
7 changed files with 143 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
components/BottomHeader/index.tsx
View file

@ -1,13 +1,17 @@
import React, { useContext, useEffect, useState } from 'react'
import React, { MouseEventHandler, useContext, useEffect, useState } from 'react'
import { useCookies } from 'react-cookie'
import { useRouter } from 'next/router'
import AppContext from '~context/AppContext'
import * as AlertDialog from '@radix-ui/react-alert-dialog';
import Header from '~components/Header'
import Button from '~components/Button'
import { ButtonType } from '~utils/enums'
import CrossIcon from '~public/icons/Cross.svg'
const BottomHeader = () => {
const { editable, setEditable, authenticated, setAuthenticated } = useContext(AppContext)
@ -26,6 +30,16 @@ const BottomHeader = () => {
}
}, [cookies, setUsername, setAuthenticated])
function closeModal() {
const escape = new KeyboardEvent('keydown', {'key': 'Escape'})
document.dispatchEvent(escape)
}
function deleteTeam(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
// TODO: Implement deleting teams
console.log("Deleting team...")
}
const leftNav = () => {
return (
<Button icon="edit" click={() => {}}>Add more info</Button>
@ -33,13 +47,35 @@ const BottomHeader = () => {
}
const rightNav = () => {
return (
<div>
{ (editable && router.route === '/p/[party]') ?
<Button icon="cross" type={ButtonType.Destructive} click={() => {}}>Delete team</Button> : ''
}
</div>
)
if (editable && router.route === '/p/[party]') {
return (
<AlertDialog.Root>
<AlertDialog.Trigger className="Button destructive">
<span className='icon'>
<CrossIcon />
</span>
<span className="text">Delete team</span>
</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className="Overlay" onClick={(e) => closeModal()} />
<AlertDialog.Content className="Dialog">
<AlertDialog.Title className="DialogTitle">
Delete team
</AlertDialog.Title>
<AlertDialog.Description className="DialogDescription">
Are you sure you want to permanently delete this team?
</AlertDialog.Description>
<div className="actions">
<AlertDialog.Cancel className="Button modal">Nevermind</AlertDialog.Cancel>
<AlertDialog.Action className="Button modal destructive" onClick={(e) => deleteTeam(e)}>Yes, delete</AlertDialog.Action>
</div>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
)
} else {
return (<div />)
}
}

12
components/Button/index.scss
View file

@ -34,6 +34,18 @@
}
}
&.modal:hover {
background: $grey-90;
}
&.modal.destructive {
color: $error;
&:hover {
color: darken($error, 10)
}
}
.icon {
margin-top: 2px;

20
components/Overlay/index.scss
View file

@ -1,12 +1,12 @@
.Overlay {
background: black;
position: absolute;
opacity: 0.28;
// .Overlay {
// background: black;
// position: absolute;
// opacity: 0.28;
height: 100%;
width: 100%;
// height: 100%;
// width: 100%;
top: 0;
left: 0;
z-index: 2;
}
// top: 0;
// left: 0;
// }

33
package-lock.json generated
View file

@ -6,6 +6,7 @@
"": {
"name": "grid-web",
"dependencies": {
"@radix-ui/react-alert-dialog": "^0.1.5",
"@radix-ui/react-dialog": "^0.1.5",
"@radix-ui/react-dropdown-menu": "^0.1.4",
"@radix-ui/react-hover-card": "^0.1.3",
@ -2284,6 +2285,24 @@
"@babel/runtime": "^7.13.10"
}
},
"node_modules/@radix-ui/react-alert-dialog": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-0.1.5.tgz",
"integrity": "sha512-Lq9h3GSvw752e7dFll3UWvm4uWiTlYAXLFX6wr/VQPRoa7XaQO8/1NBu4ikLHAecGEd/uDGZLY3aP7ovGPQYtg==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "0.1.0",
"@radix-ui/react-compose-refs": "0.1.0",
"@radix-ui/react-context": "0.1.1",
"@radix-ui/react-dialog": "0.1.5",
"@radix-ui/react-primitive": "0.1.3",
"@radix-ui/react-slot": "0.1.2"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": "^16.8 || ^17.0"
}
},
"node_modules/@radix-ui/react-arrow": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-0.1.3.tgz",
@ -8284,6 +8303,20 @@
"@babel/runtime": "^7.13.10"
}
},
"@radix-ui/react-alert-dialog": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-0.1.5.tgz",
"integrity": "sha512-Lq9h3GSvw752e7dFll3UWvm4uWiTlYAXLFX6wr/VQPRoa7XaQO8/1NBu4ikLHAecGEd/uDGZLY3aP7ovGPQYtg==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "0.1.0",
"@radix-ui/react-compose-refs": "0.1.0",
"@radix-ui/react-context": "0.1.1",
"@radix-ui/react-dialog": "0.1.5",
"@radix-ui/react-primitive": "0.1.3",
"@radix-ui/react-slot": "0.1.2"
}
},
"@radix-ui/react-arrow": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-0.1.3.tgz",

1
package.json
View file

@ -11,6 +11,7 @@
"lint": "next lint"
},
"dependencies": {
"@radix-ui/react-alert-dialog": "^0.1.5",
"@radix-ui/react-dialog": "^0.1.5",
"@radix-ui/react-dropdown-menu": "^0.1.4",
"@radix-ui/react-hover-card": "^0.1.3",

1
pages/p/[party].tsx
View file

@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import Party from '~components/Party'
import * as AlertDialog from '@radix-ui/react-alert-dialog'
const PartyRoute: React.FC = () => {
const router = useRouter()

43
styles/globals.scss
View file

@ -11,7 +11,7 @@ body {
font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1.4rem;
height: 100vh;
padding: $unit * 2;
padding: $unit * 2 !important;
&.no-scroll {
overflow: hidden;
@ -58,3 +58,44 @@ h1 {
}
.Overlay {
background: rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
}
.Dialog {
animation: 150ms cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running;
background: white;
border-radius: $unit;
display: flex;
flex-direction: column;
gap: $unit * 3;
min-width: $unit * 48;
min-height: $unit * 12;
padding: $unit * 3;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 21;
.DialogTitle {
font-size: $font-large;
}
.DialogDescription {
flex-grow: 1;
}
.actions {
display: flex;
justify-content: flex-end;
width: 100%;
}
}