Skip to content

Commit 43fbefb

Browse files
DaneEverittDaneEveritt
committed
Fix up file manager
1 parent 7e8a5f1 commit 43fbefb

File tree

11 files changed

+108
-104
lines changed

11 files changed

+108
-104
lines changed

‎resources/scripts/components/elements/AceEditor.tsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import React, { useCallback, useEffect, useState, lazy } from 'react';
2-
import useRouter from 'use-react-router';
3-
import { ServerContext } from '@/state/server';
1+
import React, { useCallback, useEffect, useState } from 'react';
42
import ace, { Editor } from 'brace';
5-
import getFileContents from '@/api/server/files/getFileContents';
63
import styled from 'styled-components/macro';
4+
import tw from 'twin.macro';
5+
import Select from '@/components/elements/Select';
76

87
// @ts-ignore
98
require('brace/ext/modelist');
109
require('ayu-ace/mirage');
1110

1211
const EditorContainer = styled.div`
1312
min-height: 16rem;
14-
height: calc(100vh - 16rem);
13+
height: calc(100vh - 20rem);
1514
${tw`relative`};
1615
1716
#editor {
@@ -20,9 +19,7 @@ const EditorContainer = styled.div`
2019
`;
2120

2221
const modes: { [k: string]: string } = {
23-
// eslint-disable-next-line @typescript-eslint/camelcase
2422
assembly_x86: 'Assembly (x86)',
25-
// eslint-disable-next-line @typescript-eslint/camelcase
2623
c_cpp: 'C++',
2724
coffee: 'Coffeescript',
2825
css: 'CSS',
@@ -40,7 +37,6 @@ const modes: { [k: string]: string } = {
4037
properties: 'Properties',
4138
python: 'Python',
4239
ruby: 'Ruby',
43-
// eslint-disable-next-line @typescript-eslint/camelcase
4440
plain_text: 'Plaintext',
4541
toml: 'TOML',
4642
typescript: 'Typescript',
@@ -70,7 +66,7 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
7066

7167
useEffect(() => {
7268
editor && editor.session.setMode(mode);
73-
}, [editor, mode]);
69+
}, [ editor, mode ]);
7470

7571
useEffect(() => {
7672
editor && editor.session.setValue(initialContent || '');
@@ -113,10 +109,9 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
113109
return (
114110
<EditorContainer style={style}>
115111
<div id={'editor'} ref={ref}/>
116-
<div className={'absolute right-0 bottom-0 z-50'}>
117-
<div className={'m-3 rounded bg-neutral-900 border border-black'}>
118-
<select
119-
className={'input-dark'}
112+
<div css={tw`absolute right-0 bottom-0 z-50`}>
113+
<div css={tw`m-3 rounded bg-neutral-900 border border-black`}>
114+
<Select
120115
value={mode.split('/').pop()}
121116
onChange={e => setMode(`ace/mode/${e.currentTarget.value}`)}
122117
>
@@ -125,7 +120,7 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
125120
<option key={key} value={key}>{modes[key]}</option>
126121
))
127122
}
128-
</select>
123+
</Select>
129124
</div>
130125
</div>
131126
</EditorContainer>

‎resources/scripts/components/elements/DropdownMenu.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,7 @@ const DropdownMenu = ({ renderToggle, children }: Props) => {
6969
e.stopPropagation();
7070
setVisible(false);
7171
}}
72-
css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500`}
73-
style={{ minWidth: '12rem' }}
72+
css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48`}
7473
>
7574
{children}
7675
</div>

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

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import Can from '@/components/elements/Can';
1818
import getFileDownloadUrl from '@/api/server/files/getFileDownloadUrl';
1919
import useServer from '@/plugins/useServer';
2020
import useFlash from '@/plugins/useFlash';
21+
import tw from 'twin.macro';
22+
import Fade from '@/components/elements/Fade';
2123

2224
type ModalType = 'rename' | 'move';
2325

@@ -113,7 +115,7 @@ export default ({ uuid }: { uuid: string }) => {
113115
<div key={`dropdown:${file.uuid}`}>
114116
<div
115117
ref={menuButton}
116-
className={'p-3 hover:text-white'}
118+
css={tw`p-3 hover:text-white`}
117119
onClick={e => {
118120
e.preventDefault();
119121
if (!menuVisible) {
@@ -133,60 +135,60 @@ export default ({ uuid }: { uuid: string }) => {
133135
setMenuVisible(false);
134136
}}
135137
/>
136-
<SpinnerOverlay visible={showSpinner} fixed={true} size={'large'}/>
138+
<SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
137139
</div>
138-
<CSSTransition timeout={250} in={menuVisible} unmountOnExit={true} classNames={'fade'}>
140+
<Fade timeout={250} in={menuVisible} unmountOnExit classNames={'fade'}>
139141
<div
140142
ref={menu}
141143
onClick={e => {
142144
e.stopPropagation();
143145
setMenuVisible(false);
144146
}}
145-
className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
147+
css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48`}
146148
>
147149
<Can action={'file.update'}>
148150
<div
149151
onClick={() => setModal('rename')}
150-
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
152+
css={tw`hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded`}
151153
>
152-
<FontAwesomeIcon icon={faPencilAlt} className={'text-xs'}/>
153-
<span className={'ml-2'}>Rename</span>
154+
<FontAwesomeIcon icon={faPencilAlt} css={tw`text-xs`}/>
155+
<span css={tw`ml-2`}>Rename</span>
154156
</div>
155157
<div
156158
onClick={() => setModal('move')}
157-
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
159+
css={tw`hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded`}
158160
>
159-
<FontAwesomeIcon icon={faLevelUpAlt} className={'text-xs'}/>
160-
<span className={'ml-2'}>Move</span>
161+
<FontAwesomeIcon icon={faLevelUpAlt} css={tw`text-xs`}/>
162+
<span css={tw`ml-2`}>Move</span>
161163
</div>
162164
</Can>
163165
<Can action={'file.create'}>
164166
<div
165167
onClick={() => doCopy()}
166-
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
168+
css={tw`hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded`}
167169
>
168-
<FontAwesomeIcon icon={faCopy} className={'text-xs'}/>
169-
<span className={'ml-2'}>Copy</span>
170+
<FontAwesomeIcon icon={faCopy} css={tw`text-xs`}/>
171+
<span css={tw`ml-2`}>Copy</span>
170172
</div>
171173
</Can>
172174
<div
173-
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
175+
css={tw`hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded`}
174176
onClick={() => doDownload()}
175177
>
176-
<FontAwesomeIcon icon={faFileDownload} className={'text-xs'}/>
177-
<span className={'ml-2'}>Download</span>
178+
<FontAwesomeIcon icon={faFileDownload} css={tw`text-xs`}/>
179+
<span css={tw`ml-2`}>Download</span>
178180
</div>
179181
<Can action={'file.delete'}>
180182
<div
181183
onClick={() => doDeletion()}
182-
className={'hover:text-red-700 p-2 flex items-center hover:bg-red-100 rounded'}
184+
css={tw`hover:text-red-700 p-2 flex items-center hover:bg-red-100 rounded`}
183185
>
184-
<FontAwesomeIcon icon={faTrashAlt} className={'text-xs'}/>
185-
<span className={'ml-2'}>Delete</span>
186+
<FontAwesomeIcon icon={faTrashAlt} css={tw`text-xs`}/>
187+
<span css={tw`ml-2`}>Delete</span>
186188
</div>
187189
</Can>
188190
</div>
189-
</CSSTransition>
191+
</Fade>
190192
</div>
191193
);
192194
};

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

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import Can from '@/components/elements/Can';
1414
import FlashMessageRender from '@/components/FlashMessageRender';
1515
import PageContentBlock from '@/components/elements/PageContentBlock';
1616
import ServerError from '@/components/screens/ServerError';
17+
import tw from 'twin.macro';
18+
import Button from '@/components/elements/Button';
1719

1820
const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
1921

@@ -81,16 +83,17 @@ export default () => {
8183

8284
return (
8385
<PageContentBlock>
84-
<FlashMessageRender byKey={'files:view'} className={'mb-4'}/>
85-
<FileManagerBreadcrumbs withinFileEditor={true} isNewFile={action !== 'edit'}/>
86-
{(name || hash.replace(/^#/, '')).endsWith('.pteroignore') &&
87-
<div className={'mb-4 p-4 border-l-4 bg-neutral-900 rounded border-cyan-400'}>
88-
<p className={'text-neutral-300 text-sm'}>
89-
You're editing a <code className={'font-mono bg-black rounded py-px px-1'}>.pteroignore</code> file.
86+
<FlashMessageRender byKey={'files:view'} css={tw`mb-4`}/>
87+
<FileManagerBreadcrumbs withinFileEditor isNewFile={action !== 'edit'}/>
88+
{hash.replace(/^#/, '').endsWith('.pteroignore') &&
89+
<div css={tw`mb-4 p-4 border-l-4 bg-neutral-900 rounded border-cyan-400`}>
90+
<p css={tw`text-neutral-300 text-sm`}>
91+
You&apos;re editing
92+
a <code css={tw`font-mono bg-black rounded py-px px-1`}>.pteroignore</code> file.
9093
Any files or directories listed in here will be excluded from backups. Wildcards are supported by
91-
using an asterisk (<code className={'font-mono bg-black rounded py-px px-1'}>*</code>). You can
94+
using an asterisk (<code css={tw`font-mono bg-black rounded py-px px-1`}>*</code>). You can
9295
negate a prior rule by prepending an exclamation point
93-
(<code className={'font-mono bg-black rounded py-px px-1'}>!</code>).
96+
(<code css={tw`font-mono bg-black rounded py-px px-1`}>!</code>).
9497
</p>
9598
</div>
9699
}
@@ -102,7 +105,7 @@ export default () => {
102105
save(name);
103106
}}
104107
/>
105-
<div className={'relative'}>
108+
<div css={tw`relative`}>
106109
<SpinnerOverlay visible={loading}/>
107110
<LazyAceEditor
108111
initialModePath={hash.replace(/^#/, '') || 'plain_text'}
@@ -113,18 +116,18 @@ export default () => {
113116
onContentSaved={() => save()}
114117
/>
115118
</div>
116-
<div className={'flex justify-end mt-4'}>
119+
<div css={tw`flex justify-end mt-4`}>
117120
{action === 'edit' ?
118121
<Can action={'file.update'}>
119-
<button className={'btn btn-primary btn-sm'} onClick={() => save()}>
122+
<Button onClick={() => save()}>
120123
Save Content
121-
</button>
124+
</Button>
122125
</Can>
123126
:
124127
<Can action={'file.create'}>
125-
<button className={'btn btn-primary btn-sm'} onClick={() => setModalVisible(true)}>
128+
<Button onClick={() => setModalVisible(true)}>
126129
Create File
127-
</button>
130+
</Button>
128131
</Can>
129132
}
130133
</div>

‎resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
22
import { ServerContext } from '@/state/server';
33
import { NavLink } from 'react-router-dom';
44
import { cleanDirectoryPath } from '@/helpers';
5+
import tw from 'twin.macro';
56

67
interface Props {
78
withinFileEditor?: boolean;
@@ -32,11 +33,11 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
3233
});
3334

3435
return (
35-
<div className={'flex items-center text-sm mb-4 text-neutral-500'}>
36-
/<span className={'px-1 text-neutral-300'}>home</span>/
36+
<div css={tw`flex items-center text-sm mb-4 text-neutral-500`}>
37+
/<span css={tw`px-1 text-neutral-300`}>home</span>/
3738
<NavLink
3839
to={`/server/${id}/files`}
39-
className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}
40+
css={tw`px-1 text-neutral-200 no-underline hover:text-neutral-100`}
4041
>
4142
container
4243
</NavLink>/
@@ -46,18 +47,18 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
4647
<React.Fragment key={index}>
4748
<NavLink
4849
to={`/server/${id}/files#${crumb.path}`}
49-
className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}
50+
css={tw`px-1 text-neutral-200 no-underline hover:text-neutral-100`}
5051
>
5152
{crumb.name}
5253
</NavLink>/
5354
</React.Fragment>
5455
:
55-
<span key={index} className={'px-1 text-neutral-300'}>{crumb.name}</span>
56+
<span key={index} css={tw`px-1 text-neutral-300`}>{crumb.name}</span>
5657
))
5758
}
5859
{file &&
5960
<React.Fragment>
60-
<span className={'px-1 text-neutral-300'}>{decodeURIComponent(file)}</span>
61+
<span css={tw`px-1 text-neutral-300`}>{decodeURIComponent(file)}</span>
6162
</React.Fragment>
6263
}
6364
</div>

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import { Link } from 'react-router-dom';
1414
import Can from '@/components/elements/Can';
1515
import PageContentBlock from '@/components/elements/PageContentBlock';
1616
import ServerError from '@/components/screens/ServerError';
17-
import useRouter from 'use-react-router';
17+
import tw from 'twin.macro';
18+
import Button from '@/components/elements/Button';
1819

1920
const sortFiles = (files: FileObject[]): FileObject[] => {
2021
return files.sort((a, b) => a.name.localeCompare(b.name))
@@ -24,7 +25,7 @@ const sortFiles = (files: FileObject[]): FileObject[] => {
2425
export default () => {
2526
const [ error, setError ] = useState('');
2627
const [ loading, setLoading ] = useState(true);
27-
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
28+
const { clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
2829
const { id } = ServerContext.useStoreState(state => state.server.data!);
2930
const { contents: files } = ServerContext.useStoreState(state => state.files);
3031
const { getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files);
@@ -56,16 +57,16 @@ export default () => {
5657

5758
return (
5859
<PageContentBlock>
59-
<FlashMessageRender byKey={'files'} className={'mb-4'}/>
60+
<FlashMessageRender byKey={'files'} css={tw`mb-4`}/>
6061
<React.Fragment>
6162
<FileManagerBreadcrumbs/>
6263
{
6364
loading ?
64-
<Spinner size={'large'} centered={true}/>
65+
<Spinner size={'large'} centered/>
6566
:
6667
<React.Fragment>
6768
{!files.length ?
68-
<p className={'text-sm text-neutral-400 text-center'}>
69+
<p css={tw`text-sm text-neutral-400 text-center`}>
6970
This directory seems to be empty.
7071
</p>
7172
:
@@ -74,8 +75,8 @@ export default () => {
7475
<div>
7576
{files.length > 250 ?
7677
<React.Fragment>
77-
<div className={'rounded bg-yellow-400 mb-px p-3'}>
78-
<p className={'text-yellow-900 text-sm text-center'}>
78+
<div css={tw`rounded bg-yellow-400 mb-px p-3`}>
79+
<p css={tw`text-yellow-900 text-sm text-center`}>
7980
This directory is too large to display in the browser,
8081
limiting the output to the first 250 files.
8182
</p>
@@ -96,14 +97,15 @@ export default () => {
9697
</CSSTransition>
9798
}
9899
<Can action={'file.create'}>
99-
<div className={'flex justify-end mt-8'}>
100+
<div css={tw`flex justify-end mt-8`}>
100101
<NewDirectoryButton/>
101-
<Link
102+
<Button
103+
// @ts-ignore
104+
as={Link}
102105
to={`/server/${id}/files/new${window.location.hash}`}
103-
className={'btn btn-sm btn-primary'}
104106
>
105107
New File
106-
</Link>
108+
</Button>
107109
</div>
108110
</Can>
109111
</React.Fragment>

‎resources/scripts/components/server/files/FileNameModal.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { object, string } from 'yup';
55
import Field from '@/components/elements/Field';
66
import { ServerContext } from '@/state/server';
77
import { join } from 'path';
8+
import tw from 'twin.macro';
9+
import Button from '@/components/elements/Button';
810

911
type Props = RequiredModalProps & {
1012
onFileNamed: (name: string) => void;
@@ -44,12 +46,10 @@ export default ({ onFileNamed, onDismissed, ...props }: Props) => {
4446
name={'fileName'}
4547
label={'File Name'}
4648
description={'Enter the name that this file should be saved as.'}
47-
autoFocus={true}
49+
autoFocus
4850
/>
49-
<div className={'mt-6 text-right'}>
50-
<button className={'btn btn-primary btn-sm'}>
51-
Create File
52-
</button>
51+
<div css={tw`mt-6 text-right`}>
52+
<Button>Create File</Button>
5353
</div>
5454
</Form>
5555
</Modal>

0 commit comments

Comments
 (0)