Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Raw styling needed for mass actions bar

Browse source
This commit is contained in:
Dane Everitt 2022-02-26 22:06:47 -05:00
parent 308a7f3a90
commit e02f4b8433
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 29 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
resources/scripts/components/admin/users/UsersContainerV2.tsx
View file

@ -51,13 +51,27 @@ const UsersContainerV2 = () => {
<Button.Danger>Delete</Button.Danger>
</Dialog.Buttons>
</Dialog>
<div className={'flex items-center rounded-t bg-neutral-700 px-4 py-2'}>
<div className={'relative flex items-center rounded-t bg-neutral-700 px-4 py-2'}>
<div className={'mr-6'}>
<Checkbox />
</div>
<div className={'flex-1'}>
<InputField type={'text'} name={'filter'} placeholder={'Begin typing to filter...'} className={'w-56 focus:w-96'} />
</div>
<div className={'absolute rounded-t bg-neutral-700 w-full h-full top-0 left-0 flex items-center justify-end space-x-4 px-4'}>
<div className={'flex-1'}>
<Checkbox indeterminate />
</div>
<Button.Text square>
<SupportIcon className={'w-4 h-4'} />
</Button.Text>
<Button.Text square>
<LockOpenIcon className={'w-4 h-4'} />
</Button.Text>
<Button.Text square>
<TrashIcon className={'w-4 h-4'} />
</Button.Text>
</div>
</div>
<table className={'min-w-full rounded bg-neutral-700'}>
<thead className={'bg-neutral-900'}>

12
resources/scripts/components/elements/inputs/Checkbox.tsx
View file

@ -2,12 +2,18 @@ import React, { forwardRef } from 'react';
import styles from './inputs.module.css';
import classNames from 'classnames';
type Props = Omit<React.ComponentProps<'input'>, 'type'>
type Props = Omit<React.ComponentProps<'input'>, 'type'> & {
indeterminate?: boolean;
}
export default forwardRef<HTMLInputElement, Props>(({ className, ...props }, ref) => (
export default forwardRef<HTMLInputElement, Props>(({ className, indeterminate, ...props }, ref) => (
<input
ref={ref}
type={'checkbox'}
className={classNames('form-checkbox', styles.checkbox, className)} {...props}
className={classNames('form-checkbox', {
[styles.checkbox]: true,
[styles.indeterminate]: indeterminate,
}, className)}
{...props}
/>
));

5
resources/scripts/components/elements/inputs/inputs.module.css
View file

@ -4,6 +4,11 @@
&:focus, &:active {
@apply ring-2 ring-primary-500 ring-offset-2 ring-offset-neutral-700;
}
&.indeterminate:checked {
@apply text-primary-500/50 border border-primary-500;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E");
}
}
.text_input {