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

ui: fix borked styling

Browse source
This commit is contained in:
Matthew Penner 2021-07-25 16:41:54 -06:00
parent 7f290c6e52
commit b8b481b57b
8 changed files with 68 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/components/server/files/FileDropdownMenu.tsx
View file

@ -139,7 +139,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
<DropdownMenu
ref={onClickRef}
renderToggle={onClick => (
<div css={tw`p-3 hover:text-white`} onClick={onClick}>
<div css={tw`flex items-center hover:text-white ml-4`} onClick={onClick}>
<FontAwesomeIcon icon={faEllipsisH}/>
{modal ?
modal === 'chmod' ?

45
resources/scripts/components/server/files/FileObjectRow.tsx
View file

@ -14,7 +14,7 @@ import { usePermissions } from '@/plugins/usePermissions';
import { join } from 'path';
const Row = styled.div`
${tw`flex bg-neutral-700 rounded-sm mb-px text-sm hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600`};
${tw`flex items-center w-full h-10 px-3 rounded-sm cursor-pointer bg-neutral-700 hover:bg-neutral-600 mb-px`};
`;
const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
@ -25,13 +25,14 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
return (
(!canReadContents || (file.isFile && !file.isEditable())) ?
<div css={tw`flex flex-1 text-neutral-300 no-underline p-3 cursor-default overflow-hidden truncate`}>
<div css={tw`flex items-center w-full h-full`}>
{children}
</div>
:
<NavLink
to={`${match.url}${file.isFile ? '/edit' : ''}#${encodePathSegments(join(directory, file.name))}`}
css={tw`flex flex-1 text-neutral-300 no-underline p-3 overflow-hidden truncate`}
css={tw`flex items-center w-full h-full`}
draggable={false}
>
{children}
</NavLink>
@ -45,33 +46,37 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
e.preventDefault();
window.dispatchEvent(new CustomEvent(`pterodactyl:files:ctx:${file.key}`, { detail: e.clientX }));
}}
css={tw`h-10`}
>
<SelectFileCheckbox name={file.name}/>
<div css={tw`flex mr-4`}>
<SelectFileCheckbox name={file.name}/>
</div>
<Clickable file={file}>
<div css={tw`flex-none self-center text-neutral-400 ml-6 mr-4 text-lg pl-3`}>
<div css={tw`flex flex-row items-center justify-center w-5 text-neutral-400 mr-2`}>
{file.isFile ?
<FontAwesomeIcon icon={file.isSymlink ? faFileImport : file.isArchiveType() ? faFileArchive : faFileAlt}/>
:
<FontAwesomeIcon icon={faFolder}/>
}
</div>
<div css={tw`flex-1 truncate`}>
{file.name}
<div css={tw`block`}>
<span css={tw`text-sm font-normal leading-none text-neutral-300`}>{file.name}</span>
</div>
{file.isFile &&
<div css={tw`w-1/6 text-right mr-4 hidden sm:block`}>
{bytesToHuman(file.size)}
<div css={tw`hidden w-24 ml-auto sm:flex`}>
<span css={tw`ml-auto text-sm font-normal leading-none text-right text-neutral-300`}>
{bytesToHuman(file.size)}
</span>
</div>
}
<div
css={tw`w-1/5 text-right mr-4 hidden md:block`}
title={file.modifiedAt.toString()}
>
{Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ?
format(file.modifiedAt, 'MMM do, yyyy h:mma')
:
formatDistanceToNow(file.modifiedAt, { addSuffix: true })
}
<div css={tw`hidden w-48 md:flex`}>
<span css={tw`ml-auto text-sm font-normal leading-none text-right text-neutral-300`} title={file.modifiedAt.toString()}>
{Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ?
format(file.modifiedAt, 'MMM do, yyyy h:mma')
:
formatDistanceToNow(file.modifiedAt, { addSuffix: true })
}
</span>
</div>
</Clickable>
<FileDropdownMenu file={file}/>

30
resources/scripts/components/server/files/SelectFileCheckbox.tsx
View file

@ -4,6 +4,8 @@ import Input from '@/components/elements/Input';
import { ServerContext } from '@/state/server';
export const FileActionCheckbox = styled(Input)`
${tw`w-4 h-4 transition-all duration-75 border rounded-sm cursor-pointer border-neutral-500 hover:border-neutral-300 text-primary-400`};
&& {
${tw`border-neutral-500 bg-transparent`};
@ -19,20 +21,18 @@ export default ({ name }: { name: string }) => {
const removeSelectedFile = ServerContext.useStoreActions(actions => actions.files.removeSelectedFile);
return (
<label css={tw`flex-none p-4 absolute self-center z-30 cursor-pointer`}>
<FileActionCheckbox
name={'selectedFiles'}
value={name}
checked={isChecked}
type={'checkbox'}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.currentTarget.checked) {
appendSelectedFile(name);
} else {
removeSelectedFile(name);
}
}}
/>
</label>
<FileActionCheckbox
name={'selectedFiles'}
value={name}
checked={isChecked}
type={'checkbox'}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.currentTarget.checked) {
appendSelectedFile(name);
} else {
removeSelectedFile(name);
}
}}
/>
);
};