Update file manager design a bit

resources/lang/en/activity.php

@@ -61,7 +61,7 @@ return [
             'copy' => 'Created a copy of :file',
             'create-directory' => 'Created a new directory :name in :directory',
             'decompress' => 'Decompressed :files in :directory',
-            'delete_one' => 'Deleted :directory:files',
+            'delete_one' => 'Deleted :directory:files.0',
             'delete_other' => 'Deleted :count files in :directory',
             'download' => 'Downloaded :file',
             'pull' => 'Downloaded a remote file from :url to :directory',

resources/scripts/components/elements/Portal.tsx

@@ -0,0 +1,8 @@
+import React, { useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+export default ({ children }: { children: React.ReactNode }) => {
+    const element = useRef(document.getElementById('modal-portal'));
+
+    return createPortal(children, element!.current!);
+};

resources/scripts/components/elements/dialog/Dialog.tsx

@@ -44,8 +44,8 @@ const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }:
                     open={open}
                     onClose={onClose}
                 >
-                    <div className={'fixed inset-0 bg-gray-900/50'}/>
-                    <div className={'fixed inset-0 overflow-y-auto'}>
+                    <div className={'fixed inset-0 bg-gray-900/50 z-40'}/>
+                    <div className={'fixed inset-0 overflow-y-auto z-50'}>
                         <div className={'flex min-h-full items-center justify-center p-4 text-center'}>
                             <HDialog.Panel
                                 as={motion.div}
@@ -58,7 +58,7 @@ const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }:
                                     'ring-4 ring-gray-800 ring-opacity-80',
                                 ])}
                             >
-                                <div className={'flex p-6'}>
+                                <div className={'flex p-6 overflow-y-auto'}>
                                     {icon && <div className={'mr-4'}>{icon}</div>}
                                     <div className={'flex-1 max-h-[70vh]'}>
                                         {title &&

resources/scripts/components/server/files/FileDropdownMenu.tsx

@@ -30,8 +30,8 @@ import useEventListener from '@/plugins/useEventListener';
 import compressFiles from '@/api/server/files/compressFiles';
 import decompressFiles from '@/api/server/files/decompressFiles';
 import isEqual from 'react-fast-compare';
-import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import ChmodFileModal from '@/components/server/files/ChmodFileModal';
+import { Dialog } from '@/components/elements/dialog';
 
 type ModalType = 'rename' | 'move' | 'chmod';
 
@@ -128,15 +128,16 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
 
     return (
         <>
-            <ConfirmationModal
-                visible={showConfirmation}
-                title={`Delete this ${file.isFile ? 'File' : 'Directory'}?`}
-                buttonText={`Yes, Delete ${file.isFile ? 'File' : 'Directory'}`}
+            <Dialog.Confirm
+                open={showConfirmation}
+                onClose={() => setShowConfirmation(false)}
+                title={`Delete ${file.isFile ? 'File' : 'Directory'}`}
+                confirm={'Delete'}
                 onConfirmed={doDeletion}
-                onModalDismissed={() => setShowConfirmation(false)}
             >
-                Deleting files is a permanent operation, you cannot undo this action.
-            </ConfirmationModal>
+                You will not be able to recover the contents of&nbsp;
+                <span className={'font-semibold text-gray-50'}>{file.name}</span> once deleted.
+            </Dialog.Confirm>
             <DropdownMenu
                 ref={onClickRef}
                 renderToggle={onClick => (

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -10,7 +10,7 @@ import { NavLink, useLocation } from 'react-router-dom';
 import Can from '@/components/elements/Can';
 import { ServerError } from '@/components/elements/ScreenBlock';
 import tw from 'twin.macro';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button/index';
 import { ServerContext } from '@/state/server';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import MassActionsBar from '@/components/server/files/MassActionsBar';
@@ -20,6 +20,7 @@ import { useStoreActions } from '@/state/hooks';
 import ErrorBoundary from '@/components/elements/ErrorBoundary';
 import { FileActionCheckbox } from '@/components/server/files/SelectFileCheckbox';
 import { hashToPath } from '@/helpers';
+import style from './style.module.css';
 
 const sortFiles = (files: FileObject[]): FileObject[] => {
     const sortedFiles: FileObject[] = files.sort((a, b) => a.name.localeCompare(b.name)).sort((a, b) => a.isFile === b.isFile ? 0 : (a.isFile ? 1 : -1));
@@ -59,8 +60,8 @@ export default () => {
 
     return (
         <ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
-            <div css={tw`flex flex-wrap-reverse md:flex-nowrap justify-center mb-4`}>
-                <ErrorBoundary>
+            <ErrorBoundary>
+                <div className={'flex flex-wrap-reverse md:flex-nowrap mb-4'}>
                     <FileManagerBreadcrumbs
                         renderLeft={
                             <FileActionCheckbox
@@ -71,24 +72,17 @@ export default () => {
                             />
                         }
                     />
-                </ErrorBoundary>
-                <Can action={'file.create'}>
-                    <ErrorBoundary>
-                        <div css={tw`flex flex-shrink-0 flex-wrap-reverse md:flex-nowrap justify-end mb-4 md:mb-0 ml-0 md:ml-auto`}>
-                            <NewDirectoryButton css={tw`w-full flex-none mt-4 sm:mt-0 sm:w-auto sm:mr-4`}/>
-                            <UploadButton css={tw`flex-1 mr-4 sm:flex-none sm:mt-0`}/>
-                            <NavLink
-                                to={`/server/${id}/files/new${window.location.hash}`}
-                                css={tw`flex-1 sm:flex-none sm:mt-0`}
-                            >
-                                <Button css={tw`w-full`}>
-                                    New File
-                                </Button>
+                    <Can action={'file.create'}>
+                        <div className={style.manager_actions}>
+                            <NewDirectoryButton/>
+                            <UploadButton/>
+                            <NavLink to={`/server/${id}/files/new${window.location.hash}`}>
+                                <Button>New File</Button>
                             </NavLink>
                         </div>
-                    </ErrorBoundary>
-                </Can>
-            </div>
+                    </Can>
+                </div>
+            </ErrorBoundary>
             {
                 !files ?
                     <Spinner size={'large'} centered/>
@@ -102,12 +96,12 @@ export default () => {
                             <CSSTransition classNames={'fade'} timeout={150} appear in>
                                 <div>
                                     {files.length > 250 &&
-                                    <div css={tw`rounded bg-yellow-400 mb-px p-3`}>
-                                        <p css={tw`text-yellow-900 text-sm text-center`}>
-                                            This directory is too large to display in the browser,
-                                            limiting the output to the first 250 files.
-                                        </p>
-                                    </div>
+                                        <div css={tw`rounded bg-yellow-400 mb-px p-3`}>
+                                            <p css={tw`text-yellow-900 text-sm text-center`}>
+                                                This directory is too large to display in the browser,
+                                                limiting the output to the first 250 files.
+                                            </p>
+                                        </div>
                                     }
                                     {
                                         sortFiles(files.slice(0, 250)).map(file => (

resources/scripts/components/server/files/MassActionsBar.tsx

@@ -1,17 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import tw from 'twin.macro';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button/index';
 import Fade from '@/components/elements/Fade';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFileArchive, faLevelUpAlt, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import useFlash from '@/plugins/useFlash';
 import compressFiles from '@/api/server/files/compressFiles';
 import { ServerContext } from '@/state/server';
-import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import deleteFiles from '@/api/server/files/deleteFiles';
 import RenameFileModal from '@/components/server/files/RenameFileModal';
+import Portal from '@/components/elements/Portal';
+import { Dialog } from '@/components/elements/dialog';
 
 const MassActionsBar = () => {
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
@@ -62,53 +61,54 @@ const MassActionsBar = () => {
     };
 
     return (
-        <Fade timeout={75} in={selectedFiles.length > 0} unmountOnExit>
+        <>
             <div css={tw`pointer-events-none fixed bottom-0 z-20 left-0 right-0 flex justify-center`}>
                 <SpinnerOverlay visible={loading} size={'large'} fixed>
                     {loadingMessage}
                 </SpinnerOverlay>
-                <ConfirmationModal
-                    visible={showConfirm}
-                    title={'Delete these files?'}
-                    buttonText={'Yes, Delete Files'}
+                <Dialog.Confirm
+                    title={'Delete Files'}
+                    open={showConfirm}
+                    confirm={'Delete'}
+                    onClose={() => setShowConfirm(false)}
                     onConfirmed={onClickConfirmDeletion}
-                    onModalDismissed={() => setShowConfirm(false)}
                 >
-                    Are you sure you want to delete {selectedFiles.length} file(s)?
-                    <br/>
-                    Deleting the file(s) listed below is a permanent operation, you cannot undo this action.
-                    <br/>
-                    <code>
-                        { selectedFiles.slice(0, 15).map(file => (
-                            <li key={file}>{file}<br/></li>))
-                        }
-                        { selectedFiles.length > 15 &&
-                                    <li> + {selectedFiles.length - 15} other(s) </li>
-                        }
-                    </code>
-                </ConfirmationModal>
+                    <p className={'mb-2'}>
+                        Are you sure you want to delete&nbsp;
+                        <span className={'font-semibold text-gray-50'}>{selectedFiles.length} files</span>? This is
+                        a permanent action and the files cannot be recovered.
+                    </p>
+                    {selectedFiles.slice(0, 15).map(file => (
+                        <li key={file}>{file}</li>))
+                    }
+                    {selectedFiles.length > 15 &&
+                        <li>and {selectedFiles.length - 15} others</li>
+                    }
+                </Dialog.Confirm>
                 {showMove &&
-                <RenameFileModal
-                    files={selectedFiles}
-                    visible
-                    appear
-                    useMoveTerminology
-                    onDismissed={() => setShowMove(false)}
-                />
+                    <RenameFileModal
+                        files={selectedFiles}
+                        visible
+                        appear
+                        useMoveTerminology
+                        onDismissed={() => setShowMove(false)}
+                    />
                 }
-                <div css={tw`pointer-events-auto rounded p-4 mb-6`} style={{ background: 'rgba(0, 0, 0, 0.35)' }}>
-                    <Button size={'xsmall'} css={tw`mr-4`} onClick={() => setShowMove(true)}>
-                        <FontAwesomeIcon icon={faLevelUpAlt} css={tw`mr-2`}/> Move
-                    </Button>
-                    <Button size={'xsmall'} css={tw`mr-4`} onClick={onClickCompress}>
-                        <FontAwesomeIcon icon={faFileArchive} css={tw`mr-2`}/> Archive
-                    </Button>
-                    <Button size={'xsmall'} color={'red'} isSecondary onClick={() => setShowConfirm(true)}>
-                        <FontAwesomeIcon icon={faTrashAlt} css={tw`mr-2`}/> Delete
-                    </Button>
-                </div>
+                <Portal>
+                    <div className={'fixed bottom-0 mb-6 flex justify-center w-full z-50'}>
+                        <Fade timeout={75} in={selectedFiles.length > 0} unmountOnExit>
+                            <div css={tw`flex items-center space-x-4 pointer-events-auto rounded p-4 bg-black/50`}>
+                                <Button onClick={() => setShowMove(true)}>Move</Button>
+                                <Button onClick={onClickCompress}>Archive</Button>
+                                <Button.Danger variant={Button.Variants.Secondary} onClick={() => setShowConfirm(true)}>
+                                    Delete
+                                </Button.Danger>
+                            </div>
+                        </Fade>
+                    </div>
+                </Portal>
             </div>
-        </Fade>
+        </>
     );
 };
 

resources/scripts/components/server/files/NewDirectoryButton.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import Modal from '@/components/elements/Modal';
 import { ServerContext } from '@/state/server';
 import { Form, Formik, FormikHelpers } from 'formik';
 import Field from '@/components/elements/Field';
@@ -7,12 +6,15 @@ import { join } from 'path';
 import { object, string } from 'yup';
 import createDirectory from '@/api/server/files/createDirectory';
 import tw from 'twin.macro';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button/index';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import useFlash from '@/plugins/useFlash';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import { WithClassname } from '@/components/types';
 import FlashMessageRender from '@/components/FlashMessageRender';
+import { Dialog } from '@/components/elements/dialog';
+import Portal from '@/components/elements/Portal';
+import Code from '@/components/elements/Code';
 
 interface Values {
     directoryName: string;
@@ -66,48 +68,57 @@ export default ({ className }: WithClassname) => {
 
     return (
         <>
-            <Formik
-                onSubmit={submit}
-                validationSchema={schema}
-                initialValues={{ directoryName: '' }}
-            >
-                {({ resetForm, isSubmitting, values }) => (
-                    <Modal
-                        visible={visible}
-                        dismissable={!isSubmitting}
-                        showSpinnerOverlay={isSubmitting}
-                        onDismissed={() => {
-                            setVisible(false);
-                            resetForm();
-                        }}
-                    >
-                        <FlashMessageRender key={'files:directory-modal'}/>
-                        <Form css={tw`m-0`}>
-                            <Field
-                                autoFocus
-                                id={'directoryName'}
-                                name={'directoryName'}
-                                label={'Directory Name'}
-                            />
-                            <p css={tw`text-xs mt-2 text-neutral-400 break-all`}>
-                                <span css={tw`text-neutral-200`}>This directory will be created as</span>
-                                &nbsp;/home/container/
-                                <span css={tw`text-cyan-200`}>
-                                    {join(directory, values.directoryName).replace(/^(\.\.\/|\/)+/, '')}
-                                </span>
-                            </p>
-                            <div css={tw`flex justify-end`}>
-                                <Button css={tw`mt-8`}>
-                                    Create Directory
-                                </Button>
-                            </div>
-                        </Form>
-                    </Modal>
-                )}
-            </Formik>
-            <Button isSecondary onClick={() => setVisible(true)} className={className}>
+            <Portal>
+                <Formik
+                    onSubmit={submit}
+                    validationSchema={schema}
+                    initialValues={{ directoryName: '' }}
+                >
+                    {({ resetForm, submitForm, isSubmitting: _, values }) => (
+                        <Dialog
+                            title={'Create Directory'}
+                            open={visible}
+                            onClose={() => {
+                                setVisible(false);
+                                resetForm();
+                            }}
+                        >
+                            <FlashMessageRender key={'files:directory-modal'}/>
+                            <Form css={tw`m-0`}>
+                                <Field
+                                    autoFocus
+                                    id={'directoryName'}
+                                    name={'directoryName'}
+                                    label={'Name'}
+                                />
+                                <p css={tw`mt-2 text-sm md:text-base break-all`}>
+                                    <span css={tw`text-neutral-200`}>This directory will be created as&nbsp;</span>
+                                    <Code>/home/container/
+                                        <span css={tw`text-cyan-200`}>
+                                            {join(directory, values.directoryName).replace(/^(\.\.\/|\/)+/, '')}
+                                        </span>
+                                    </Code>
+                                </p>
+                            </Form>
+                            <Dialog.Buttons>
+                                <Button.Text
+                                    className={'w-full sm:w-auto'}
+                                    onClick={() => {
+                                        setVisible(false);
+                                        resetForm();
+                                    }}
+                                >
+                                    Cancel
+                                </Button.Text>
+                                <Button className={'w-full sm:w-auto'} onClick={submitForm}>Create</Button>
+                            </Dialog.Buttons>
+                        </Dialog>
+                    )}
+                </Formik>
+            </Portal>
+            <Button.Text onClick={() => setVisible(true)} className={className}>
                 Create Directory
-            </Button>
+            </Button.Text>
         </>
     );
 };

resources/scripts/components/server/files/UploadButton.tsx

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
 import tw from 'twin.macro';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button/index';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components/macro';
 import { ModalMask } from '@/components/elements/Modal';
@@ -12,6 +12,7 @@ import useFlash from '@/plugins/useFlash';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import { ServerContext } from '@/state/server';
 import { WithClassname } from '@/components/types';
+import Portal from '@/components/elements/Portal';
 
 const InnerContainer = styled.div`
   max-width: 600px;
@@ -71,36 +72,38 @@ export default ({ className }: WithClassname) => {
 
     return (
         <>
-            <Fade
-                appear
-                in={visible}
-                timeout={75}
-                key={'upload_modal_mask'}
-                unmountOnExit
-            >
-                <ModalMask
-                    onClick={() => setVisible(false)}
-                    onDragOver={e => e.preventDefault()}
-                    onDrop={e => {
-                        e.preventDefault();
-                        e.stopPropagation();
-
-                        setVisible(false);
-                        if (!e.dataTransfer?.files.length) return;
-
-                        onFileSubmission(e.dataTransfer.files);
-                    }}
+            <Portal>
+                <Fade
+                    appear
+                    in={visible}
+                    timeout={75}
+                    key={'upload_modal_mask'}
+                    unmountOnExit
                 >
-                    <div css={tw`w-full flex items-center justify-center`} style={{ pointerEvents: 'none' }}>
-                        <InnerContainer>
-                            <p css={tw`text-lg text-neutral-200 text-center`}>
-                                Drag and drop files to upload.
-                            </p>
-                        </InnerContainer>
-                    </div>
-                </ModalMask>
-            </Fade>
-            <SpinnerOverlay visible={loading} size={'large'} fixed/>
+                    <ModalMask
+                        onClick={() => setVisible(false)}
+                        onDragOver={e => e.preventDefault()}
+                        onDrop={e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            setVisible(false);
+                            if (!e.dataTransfer?.files.length) return;
+
+                            onFileSubmission(e.dataTransfer.files);
+                        }}
+                    >
+                        <div css={tw`w-full flex items-center justify-center`} style={{ pointerEvents: 'none' }}>
+                            <InnerContainer>
+                                <p css={tw`text-lg text-neutral-200 text-center`}>
+                                    Drag and drop files to upload.
+                                </p>
+                            </InnerContainer>
+                        </div>
+                    </ModalMask>
+                </Fade>
+                <SpinnerOverlay visible={loading} size={'large'} fixed/>
+            </Portal>
             <input
                 type={'file'}
                 ref={fileUploadInput}

resources/scripts/components/server/files/style.module.css

@@ -0,0 +1,15 @@
+.manager_actions {
+    @apply grid grid-cols-2 sm:grid-cols-3 w-full gap-4 mb-4;
+
+    & button {
+        @apply w-full first:col-span-2 sm:first:col-span-1;
+    }
+
+    @screen md {
+        @apply flex flex-1 justify-end mb-0;
+
+        & button {
+            @apply w-auto;
+        }
+    }
+}