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

Improve design of file listing

Browse source
This commit is contained in:
Dane Everitt 2019-07-27 20:32:56 -07:00
parent c90fcea519
commit e0eedcb811
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
1 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
resources/scripts/components/server/files/FileManagerContainer.tsx
View file

@ -15,6 +15,9 @@ import { bytesToHuman } from '@/helpers';
import { CSSTransition } from 'react-transition-group';
import { Link } from 'react-router-dom';
import Spinner from '@/components/elements/Spinner';
import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
import { faFile } from '@fortawesome/free-solid-svg-icons/faFile';
import { faFileImport } from '@fortawesome/free-solid-svg-icons/faFileImport';
export default () => {
const [ loading, setLoading ] = useState(true);
@ -97,16 +100,20 @@ export default () => {
files.map(file => (
<a
key={file.name}
href={`#${currentDirectory}/${file.name}`}
href={file.isFile ? undefined : `#${currentDirectory}/${file.name}`}
className={`
flex px-4 py-3 bg-neutral-700 text-neutral-300 rounded-sm mb-px text-sm
border border-transparent hover:text-neutral-100 hover:border-neutral-600
cursor-pointer items-center no-underline
`}
flex px-4 py-3 bg-neutral-700 text-neutral-300 rounded-sm mb-px text-sm
hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600
`}
onClick={(e) => {
if (file.isFile) {
return e.preventDefault();
}
}}
>
<div className={'flex-none text-neutral-500 mr-4 text-lg'}>
<div className={'flex-none text-neutral-400 mr-4 text-lg'}>
{file.isFile ?
<FontAwesomeIcon icon={faFileAlt}/>
<FontAwesomeIcon icon={file.isSymlink ? faFileImport : faFileAlt}/>
:
<FontAwesomeIcon icon={faFolder}/>
}
@ -120,7 +127,7 @@ export default () => {
</div>
}
<div
className={'w-1/5 text-right'}
className={'w-1/5 text-right mr-4'}
title={file.modifiedAt.toString()}
>
{Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ?
@ -129,6 +136,9 @@ export default () => {
distanceInWordsToNow(file.modifiedAt, { includeSeconds: true })
}
</div>
<div>
<FontAwesomeIcon icon={faEllipsisH}/>
</div>
</a>
))
}