dvkei/Pterodactyl-Panel
1
0
Fork 0
forked from Alex/Pterodactyl-Panel
Code Issues Pull Requests Projects Releases Wiki Activity

Add animation and first round at doing sidebar for editing permissions

Browse Source
This commit is contained in:
Dane Everitt 2019-11-03 12:32:07 -08:00
parent 543884876f
commit 1153101a57
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
1 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
resources/scripts/components/server/users/UsersContainer.tsx
View File

@ -3,9 +3,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUserPlus } from '@fortawesome/free-solid-svg-icons/faUserPlus';
import { ServerContext } from '@/state/server';
import Spinner from '@/components/elements/Spinner';
import { Subuser } from '@/state/server/subusers';
import { CSSTransition } from 'react-transition-group';
export default () => {
const [ loading, setLoading ] = useState(true);
const [ editSubuser, setEditSubuser ] = useState<Subuser | null>(null);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const subusers = ServerContext.useStoreState(state => state.subusers.data);
const getSubusers = ServerContext.useStoreActions(actions => actions.subusers.getSubusers);
@ -22,7 +26,7 @@ export default () => {
if (subusers.length > 0) {
setLoading(false);
}
}, [subusers]);
}, [ subusers ]);
return (
<div className={'flex my-10'}>
@ -47,10 +51,16 @@ export default () => {
<p className={'text-sm'}>{subuser.email}</p>
</div>
<div className={'ml-4'}>
<button className={'btn btn-xs btn-primary'}>
<button
className={'btn btn-xs btn-primary'}
onClick={() => setEditSubuser(subuser)}
>
Edit
</button>
<button className={'ml-2 btn btn-xs btn-red btn-secondary'}>
<button
className={'ml-2 btn btn-xs btn-red btn-secondary'}
onClick={() => setEditSubuser(null)}
>
Remove
</button>
</div>
@ -58,12 +68,22 @@ export default () => {
))
}
</div>
<div className={'flex justify-end mt-4'}>
<div className={'flex justify-end mt-6'}>
<button className={'btn btn-primary btn-sm'}>
<FontAwesomeIcon icon={faUserPlus} className={'mr-1'}/> New User
</button>
</div>
</div>
{editSubuser &&
<CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
<div className={'flex-1 ml-6'}>
<h2 className={'text-neutral-300 mb-4'}>Edit {editSubuser.email}</h2>
<div className={'border-t-4 border-primary-400 grey-box mt-0'}>
<p>Edit permissions here.</p>
</div>
</div>
</CSSTransition>
}
</div>
);
};