File manager cleanup for mobile devices

Author: DaneEveritt

resources/scripts/components/dashboard/ServerRow.tsx

@@ -155,7 +155,6 @@ export default ({ server, className }: { server: Server; className?: string }) =
                             </div>
                             <p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {disklimit}</p>
                         </div>
-                        
                         <div css={tw`flex-1 flex justify-end sm:hidden`}>
                             <div css={tw`flex items-end text-right`}>
                                 <div

resources/scripts/components/elements/ConfirmationModal.tsx

@@ -19,11 +19,11 @@ const ConfirmationModal = ({ title, children, buttonText, onConfirmed }: Props)
         <>
             <h2 css={tw`text-2xl mb-6`}>{title}</h2>
             <p css={tw`text-sm`}>{children}</p>
-            <div css={tw`flex items-center justify-end mt-8`}>
-                <Button isSecondary onClick={() => dismiss()}>
+            <div css={tw`flex flex-wrap items-center justify-end mt-8`}>
+                <Button isSecondary onClick={() => dismiss()} css={tw`w-full sm:w-auto`}>
                     Cancel
                 </Button>
-                <Button color={'red'} css={tw`ml-4`} onClick={() => onConfirmed()}>
+                <Button color={'red'} css={tw`w-full sm:w-auto mt-4 sm:mt-0 sm:ml-4`} onClick={() => onConfirmed()}>
                     {buttonText}
                 </Button>
             </div>

resources/scripts/components/elements/Modal.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import Spinner from '@/components/elements/Spinner';
 import tw from 'twin.macro';
-import styled from 'styled-components/macro';
+import styled, { css } from 'styled-components/macro';
 import { breakpoint } from '@/theme';
 import Fade from '@/components/elements/Fade';
 
@@ -26,25 +24,27 @@ export const ModalMask = styled.div`
     background: rgba(0, 0, 0, 0.70);
 `;
 
-const ModalContainer = styled.div<{ alignTop?: boolean }>`
-    ${breakpoint('xs')`
-        max-width: 95%;
-    `};
-
-    ${breakpoint('md')`
-        max-width: 50%;
-    `};
+const ModalContainer = styled.div<{ alignTop?: boolean }>`    
+    max-width: 95%;
+    max-height: calc(100vh - 8rem);
+    ${breakpoint('md')`max-width: 75%`};
+    ${breakpoint('lg')`max-width: 50%`};
 
     ${tw`relative flex flex-col w-full m-auto`};
-    max-height: calc(100vh - 8rem);
-    // @todo max-w-screen-lg perhaps?
-    ${props => props.alignTop && 'margin-top: 10%'};
+    ${props => props.alignTop && css`
+        margin-top: 20%;
+        ${breakpoint('md')`margin-top: 10%`};
+    `};
     
     & > .close-icon {
         ${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};
-        top: -2rem;
+        top: -2.5rem;
         
         &:hover {${tw`transform rotate-90`}}
+        
+        & > svg {
+            ${tw`w-6 h-6`};
+        }
     }
 `;
 
@@ -80,6 +80,7 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
         >
             <ModalMask
                 onClick={e => e.stopPropagation()}
+                onContextMenu={e => e.stopPropagation()}
                 onMouseDown={e => {
                     if (isDismissable && closeOnBackground) {
                         e.stopPropagation();
@@ -92,7 +93,14 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
                 <ModalContainer alignTop={top}>
                     {isDismissable &&
                     <div className={'close-icon'} onClick={() => setRender(false)}>
-                        <FontAwesomeIcon icon={faTimes}/>
+                        <svg xmlns={'http://www.w3.org/2000/svg'} fill={'none'} viewBox={'0 0 24 24'} stroke={'currentColor'}>
+                            <path
+                                strokeLinecap={'round'}
+                                strokeLinejoin={'round'}
+                                strokeWidth={'2'}
+                                d={'M6 18L18 6M6 6l12 12'}
+                            />
+                        </svg>
                     </div>
                     }
                     {showSpinnerOverlay &&

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

@@ -120,7 +120,7 @@ export default () => {
                 />
             </div>
             <div css={tw`flex justify-end mt-4`}>
-                <div css={tw`rounded bg-neutral-900 mr-4`}>
+                <div css={tw`flex-1 sm:flex-none rounded bg-neutral-900 mr-4`}>
                     <Select value={mode} onChange={e => setMode(e.currentTarget.value)}>
                         {Object.keys(modes).map(key => (
                             <option key={key} value={key}>{modes[key]}</option>
@@ -129,13 +129,13 @@ export default () => {
                 </div>
                 {action === 'edit' ?
                     <Can action={'file.update'}>
-                        <Button onClick={() => save()}>
+                        <Button css={tw`flex-1 sm:flex-none`} onClick={() => save()}>
                             Save Content
                         </Button>
                     </Can>
                     :
                     <Can action={'file.create'}>
-                        <Button onClick={() => setModalVisible(true)}>
+                        <Button css={tw`flex-1 sm:flex-none`} onClick={() => setModalVisible(true)}>
                             Create File
                         </Button>
                     </Can>

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

@@ -6,7 +6,7 @@ import FileObjectRow from '@/components/server/files/FileObjectRow';
 import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
-import { Link, useLocation } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import Can from '@/components/elements/Can';
 import ServerError from '@/components/screens/ServerError';
 import tw from 'twin.macro';
@@ -81,16 +81,17 @@ export default () => {
                             </CSSTransition>
                         }
                         <Can action={'file.create'}>
-                            <div css={tw`flex justify-end mt-8`}>
-                                <NewDirectoryButton/>
-                                <UploadButton/>
-                                <Button
-                                    // @ts-ignore
-                                    as={Link}
+                            <div css={tw`flex flex-wrap-reverse justify-end mt-4`}>
+                                <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`}
                                 >
-                                    New File
-                                </Button>
+                                    <Button css={tw`w-full`}>
+                                        New File
+                                    </Button>
+                                </NavLink>
                             </div>
                         </Can>
                     </>

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

@@ -11,6 +11,7 @@ import Button from '@/components/elements/Button';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import useFlash from '@/plugins/useFlash';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
+import { WithClassname } from '@/components/types';
 
 interface Values {
     directoryName: string;
@@ -34,7 +35,7 @@ const generateDirectoryData = (name: string): FileObject => ({
     isEditable: () => false,
 });
 
-export default () => {
+export default ({ className }: WithClassname) => {
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { clearAndAddHttpError } = useFlash();
     const [ visible, setVisible ] = useState(false);
@@ -95,7 +96,7 @@ export default () => {
                     </Modal>
                 )}
             </Formik>
-            <Button isSecondary css={tw`mr-2`} onClick={() => setVisible(true)}>
+            <Button isSecondary onClick={() => setVisible(true)} className={className}>
                 Create Directory
             </Button>
         </>

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

@@ -62,11 +62,11 @@ const RenameFileModal = ({ files, useMoveTerminology, ...props }: OwnProps) => {
                     <Form css={tw`m-0`}>
                         <div
                             css={[
-                                tw`flex`,
+                                tw`flex flex-wrap`,
                                 useMoveTerminology ? tw`items-center` : tw`items-end`,
                             ]}
                         >
-                            <div css={tw`flex-1 mr-6`}>
+                            <div css={tw`w-full sm:flex-1 sm:mr-4`}>
                                 <Field
                                     type={'string'}
                                     id={'file_name'}
@@ -79,8 +79,8 @@ const RenameFileModal = ({ files, useMoveTerminology, ...props }: OwnProps) => {
                                     autoFocus
                                 />
                             </div>
-                            <div>
-                                <Button>{useMoveTerminology ? 'Move' : 'Rename'}</Button>
+                            <div css={tw`w-full sm:w-auto mt-4 sm:mt-0`}>
+                                <Button css={tw`w-full`}>{useMoveTerminology ? 'Move' : 'Rename'}</Button>
                             </div>
                         </div>
                         {useMoveTerminology &&

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

@@ -11,13 +11,14 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import useFlash from '@/plugins/useFlash';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import { ServerContext } from '@/state/server';
+import { WithClassname } from '@/components/types';
 
 const InnerContainer = styled.div`
   max-width: 600px;
   ${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`}
 `;
 
-export default () => {
+export default ({ className }: WithClassname) => {
     const fileUploadInput = useRef<HTMLInputElement>(null);
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const [ visible, setVisible ] = useState(false);
@@ -114,7 +115,7 @@ export default () => {
                 }}
             />
             <Button
-                css={tw`mr-2`}
+                className={className}
                 onClick={() => {
                     fileUploadInput.current
                         ? fileUploadInput.current.click()

resources/scripts/components/types.ts

@@ -0,0 +1,3 @@
+export interface WithClassname {
+    className?: string;
+}