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

Slightly better logic for dropdown menus

Browse source
This commit is contained in:
Dane Everitt 2019-08-05 21:02:36 -07:00
parent 456473ad0f
commit 34e54b4944
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
2 changed files with 50 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,6 @@ import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
import { faLevelUpAlt } from '@fortawesome/free-solid-svg-icons/faLevelUpAlt'; import { faLevelUpAlt } from '@fortawesome/free-solid-svg-icons/faLevelUpAlt';
import RenameFileModal from '@/components/server/files/RenameFileModal'; import RenameFileModal from '@/components/server/files/RenameFileModal';
import { ServerContext } from '@/state/server'; import { ServerContext } from '@/state/server';
import CopyFileModal from '@/components/server/files/CopyFileModal';
import { join } from 'path'; import { join } from 'path';
import deleteFile from '@/api/server/files/deleteFile'; import deleteFile from '@/api/server/files/deleteFile';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
@ -20,6 +19,7 @@ type ModalType = 'rename' | 'move';
export default ({ uuid }: { uuid: string }) => { export default ({ uuid }: { uuid: string }) => {
const menu = createRef<HTMLDivElement>(); const menu = createRef<HTMLDivElement>();
const menuButton = createRef<HTMLDivElement>();
const [ visible, setVisible ] = useState(false); const [ visible, setVisible ] = useState(false);
const [ showSpinner, setShowSpinner ] = useState(false); const [ showSpinner, setShowSpinner ] = useState(false);
const [ modal, setModal ] = useState<ModalType | null>(null); const [ modal, setModal ] = useState<ModalType | null>(null);
@ -29,6 +29,7 @@ export default ({ uuid }: { uuid: string }) => {
const file = ServerContext.useStoreState(state => state.files.contents.find(file => file.uuid === uuid)); const file = ServerContext.useStoreState(state => state.files.contents.find(file => file.uuid === uuid));
const directory = ServerContext.useStoreState(state => state.files.directory); const directory = ServerContext.useStoreState(state => state.files.directory);
const { removeFile, getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files); const { removeFile, getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files);
if (!file) { if (!file) {
return null; return null;
} }
@ -87,29 +88,39 @@ export default ({ uuid }: { uuid: string }) => {
return ( return (
<div key={`dropdown:${file.uuid}`}> <div key={`dropdown:${file.uuid}`}>
<div <div
ref={menuButton}
className={'p-3 hover:text-white'} className={'p-3 hover:text-white'}
onClick={e => { onClick={e => {
e.preventDefault(); e.preventDefault();
setModal(null);
if (!visible) { if (!visible) {
setPosX(e.clientX); setPosX(e.clientX);
} else if (visible) {
setModal(null);
} }
setVisible(!visible); setVisible(!visible);
}} }}
> >
<FontAwesomeIcon icon={faEllipsisH}/> <FontAwesomeIcon icon={faEllipsisH}/>
{visible && {visible &&
<React.Fragment> <React.Fragment>
<RenameFileModal file={file} visible={modal === 'rename'} onDismissed={() => setModal(null)}/> <RenameFileModal
file={file}
visible={modal === 'rename' || modal === 'move'}
useMoveTerminology={modal === 'move'}
onDismissed={() => {
setModal(null);
setVisible(false);
}}
/>
<SpinnerOverlay visible={showSpinner} fixed={true} large={true}/> <SpinnerOverlay visible={showSpinner} fixed={true} large={true}/>
</React.Fragment> </React.Fragment>
} }
</div> </div>
<CSSTransition timeout={250} in={visible} unmountOnExit={true} classNames={'fade'}> <CSSTransition timeout={250} in={visible} unmountOnExit={true} classNames={'fade'}>
<div <div
className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
ref={menu} ref={menu}
className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
> >
<div <div
onClick={() => setModal('rename')} onClick={() => setModal('rename')}
@ -118,7 +129,10 @@ export default ({ uuid }: { uuid: string }) => {
<FontAwesomeIcon icon={faPencilAlt} className={'text-xs'}/> <FontAwesomeIcon icon={faPencilAlt} className={'text-xs'}/>
<span className={'ml-2'}>Rename</span> <span className={'ml-2'}>Rename</span>
</div> </div>
<div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}> <div
onClick={() => setModal('move')}
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
>
<FontAwesomeIcon icon={faLevelUpAlt} className={'text-xs'}/> <FontAwesomeIcon icon={faLevelUpAlt} className={'text-xs'}/>
<span className={'ml-2'}>Move</span> <span className={'ml-2'}>Move</span>
</div> </div>

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

@ -6,14 +6,15 @@ import { join } from 'path';
import renameFile from '@/api/server/files/renameFile'; import renameFile from '@/api/server/files/renameFile';
import { ServerContext } from '@/state/server'; import { ServerContext } from '@/state/server';
import { FileObject } from '@/api/server/files/loadDirectory'; import { FileObject } from '@/api/server/files/loadDirectory';
import classNames from 'classnames';
interface FormikValues { interface FormikValues {
name: string; name: string;
} }
type Props = RequiredModalProps & { file: FileObject }; type Props = RequiredModalProps & { file: FileObject; useMoveTerminology?: boolean };
export default ({ file, ...props }: Props) => { export default ({ file, useMoveTerminology, ...props }: Props) => {
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const directory = ServerContext.useStoreState(state => state.files.directory); const directory = ServerContext.useStoreState(state => state.files.directory);
const pushFile = ServerContext.useStoreActions(actions => actions.files.pushFile); const pushFile = ServerContext.useStoreActions(actions => actions.files.pushFile);
@ -38,22 +39,36 @@ export default ({ file, ...props }: Props) => {
onSubmit={submit} onSubmit={submit}
initialValues={{ name: file.name }} initialValues={{ name: file.name }}
> >
{({ isSubmitting }) => ( {({ isSubmitting, values }) => (
<Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}> <Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
<Form className={'m-0'}> <Form className={'m-0'}>
<Field <div className={classNames('flex', {
type={'string'} 'items-center': useMoveTerminology,
id={'file_name'} 'items-end': !useMoveTerminology,
name={'name'} })}>
label={'File Name'} <div className={'flex-1 mr-6'}>
description={'Enter the new name of this file or folder.'} <Field
autoFocus={true} type={'string'}
/> id={'file_name'}
<div className={'mt-6 text-right'}> name={'name'}
<button className={'btn btn-sm btn-primary'}> label={'File Name'}
Rename description={useMoveTerminology
</button> ? 'Enter the new name and directory of this file or folder, relative to the current directory.'
: undefined
}
autoFocus={true}
/>
</div>
<div>
<button className={'btn btn-sm btn-primary'}>
{useMoveTerminology ? 'Move' : 'Rename'}
</button>
</div>
</div> </div>
<p className={'text-xs mt-2 text-neutral-400'}>
<strong className={'text-neutral-200'}>New location:</strong>
&nbsp;/home/container/{join(directory, values.name).replace(/^(\.\.\/|\/)+/, '')}
</p>
</Form> </Form>
</Modal> </Modal>
)} )}