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