File manager cleanup for mobile devices
This commit is contained in:
Dane Everitt
parent
6ec2ae9df8
commit
47283700a8
9 changed files with 53 additions and 40 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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 &&
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue