File manager cleanup for mobile devices

This commit is contained in:
Dane Everitt 2020-09-13 10:33:12 -07:00
parent 6ec2ae9df8
commit 47283700a8
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
9 changed files with 53 additions and 40 deletions

View file

@ -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

View file

@ -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>

View file

@ -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 &&

View file

@ -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>

View file

@ -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>
</>

View file

@ -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>
</>

View file

@ -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 &&

View file

@ -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()

View file

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