MrUnknownDE/panel
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/panel.git synced 2026-04-20 23:33:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

File manager cleanup for mobile devices

Browse Source
This commit is contained in:
Dane Everitt
2020-09-13 10:33:12 -07:00
parent 6ec2ae9df8
commit 47283700a8
9 changed files with 53 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/scripts/components/server/files/FileEditContainer.tsx
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>

19
resources/scripts/components/server/files/FileManagerContainer.tsx
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>
</>

5
resources/scripts/components/server/files/NewDirectoryButton.tsx
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>
</>

8
resources/scripts/components/server/files/RenameFileModal.tsx
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 &&

5
resources/scripts/components/server/files/UploadButton.tsx
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()