Skip to content

Commit 2e32df9

Browse files
DaneEverittDaneEveritt
committed
First iteration of a file manager
1 parent ac52810 commit 2e32df9

File tree

8 files changed

+169
-28
lines changed

8 files changed

+169
-28
lines changed

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
"@fortawesome/react-fontawesome": "^0.1.4",
77
"@hot-loader/react-dom": "^16.8.6",
88
"axios": "^0.18.0",
9+
"ayu-ace": "^2.0.4",
10+
"brace": "^0.11.1",
911
"chart.js": "^2.8.0",
1012
"classnames": "^2.2.6",
1113
"date-fns": "^1.29.0",
@@ -70,6 +72,7 @@
7072
"eslint-plugin-import": "^2.17.3",
7173
"eslint-plugin-node": "^9.1.0",
7274
"eslint-plugin-promise": "^4.1.1",
75+
"eslint-plugin-react-hooks": "^2.1.2",
7376
"eslint-plugin-standard": "^4.0.0",
7477
"fork-ts-checker-webpack-plugin": "^1.5.0",
7578
"glob-all": "^3.1.0",

‎resources/scripts/.eslintrc.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ env:
88
es6: true
99
plugins:
1010
- "@typescript-eslint"
11+
- "react-hooks"
1112
extends:
1213
- "standard"
1314
- "plugin:@typescript-eslint/recommended"
@@ -20,6 +21,10 @@ rules:
2021
comma-dangle:
2122
- error
2223
- always-multiline
24+
"react-hooks/rules-of-hooks":
25+
- error
26+
"react-hooks/exhaustive-deps":
27+
- warn
2328
"@typescript-eslint/explicit-function-return-type": 0
2429
"@typescript-eslint/explicit-member-accessibility": 0
2530
"@typescript-eslint/no-unused-vars": 0

‎resources/scripts/components/dashboard/DesignElementsContainer.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,13 @@ export default class DesignElementsContainer extends React.PureComponent {
3636
<label className={'uppercase text-neutral-200'}>Disabled Field</label>
3737
<input type={'text'} className={'input-dark'} disabled={true}/>
3838
<div className={'mt-6'}/>
39+
<label className={'uppercase text-neutral-200'}>Select</label>
40+
<select className={'input-dark'}>
41+
<option>Option 1</option>
42+
<option>Option 2</option>
43+
<option>Option 3</option>
44+
</select>
45+
<div className={'mt-6'}/>
3946
<label className={'uppercase text-neutral-200'}>Textarea</label>
4047
<textarea className={'input-dark h-32'}></textarea>
4148
<div className={'mt-6'}/>

‎resources/scripts/components/server/ServerConsole.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import TitledGreyBox from '@/components/elements/TitledGreyBox';
1212

1313
type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
1414

15-
const ChunkedConsole = lazy(() => import('@/components/server/Console'));
16-
const ChunkedStatGraphs = lazy(() => import('@/components/server/StatGraphs'));
15+
const ChunkedConsole = lazy(() => import(/* webpackChunkName: "console" */'@/components/server/Console'));
16+
const ChunkedStatGraphs = lazy(() => import(/* webpackChunkName: "graphs" */'@/components/server/StatGraphs'));
1717

1818
const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void }) => {
1919
const [ clicked, setClicked ] = useState(false);

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

Lines changed: 97 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,115 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useCallback, useEffect, useState } from 'react';
22
import useRouter from 'use-react-router';
33
import { ServerContext } from '@/state/server';
44
import getFileContents from '@/api/server/files/getFileContents';
5+
import ace, { Editor } from 'brace';
6+
import styled from 'styled-components';
7+
8+
const EditorContainer = styled.div`
9+
height: calc(100vh - 16rem);
10+
${tw`relative`};
11+
12+
#editor {
13+
${tw`rounded h-full`};
14+
}
15+
`;
16+
17+
const modes: { [k: string]: string } = {
18+
// eslint-disable-next-line @typescript-eslint/camelcase
19+
assembly_x86: 'Assembly (x86)',
20+
// eslint-disable-next-line @typescript-eslint/camelcase
21+
c_cpp: 'C++',
22+
coffee: 'Coffeescript',
23+
css: 'CSS',
24+
dockerfile: 'Dockerfile',
25+
golang: 'Go',
26+
html: 'HTML',
27+
ini: 'Ini',
28+
java: 'Java',
29+
javascript: 'Javascript',
30+
json: 'JSON',
31+
kotlin: 'Kotlin',
32+
lua: 'Luascript',
33+
perl: 'Perl',
34+
php: 'PHP',
35+
properties: 'Properties',
36+
python: 'Python',
37+
ruby: 'Ruby',
38+
text: 'Plaintext',
39+
toml: 'TOML',
40+
typescript: 'Typescript',
41+
xml: 'XML',
42+
yaml: 'YAML',
43+
};
544

645
export default () => {
746
const { location: { hash } } = useRouter();
8-
const [content, setContent] = useState('');
47+
const [ content, setContent ] = useState('');
948
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
1049

50+
const [ editor, setEditor ] = useState<Editor>();
51+
const ref = useCallback(node => {
52+
if (node) {
53+
setEditor(ace.edit('editor'));
54+
}
55+
}, []);
56+
57+
useEffect(() => {
58+
Object.keys(modes).forEach(mode => {
59+
import(/* webpackMode: "lazy-once", webpackChunkName: "ace_mode" */`brace/mode/${mode}`);
60+
});
61+
}, []);
62+
1163
useEffect(() => {
1264
getFileContents(uuid, hash.replace(/^#/, ''))
1365
.then(setContent)
1466
.catch(error => console.error(error));
15-
}, []);
67+
}, [ uuid, hash ]);
68+
69+
useEffect(() => {
70+
editor && editor.session.setValue(content);
71+
}, [ editor, content ]);
72+
73+
useEffect(() => {
74+
if (!editor) {
75+
return;
76+
}
77+
78+
require('ayu-ace/mirage');
79+
editor.setTheme('ace/theme/ayu-mirage');
80+
81+
editor.$blockScrolling = Infinity;
82+
editor.container.style.lineHeight = '1.375rem';
83+
editor.container.style.fontWeight = '500';
84+
editor.renderer.updateFontSize();
85+
editor.renderer.setShowPrintMargin(false);
86+
editor.session.setTabSize(4);
87+
editor.session.setUseSoftTabs(true);
88+
}, [ editor ]);
1689

1790
return (
1891
<div className={'my-10'}>
19-
<textarea
20-
value={content}
21-
className={'rounded bg-black h-32 w-full text-neutral-100 text-sm font-mono'}
22-
/>
92+
<EditorContainer>
93+
<div id={'editor'} ref={ref}/>
94+
<div className={'absolute pin-r pin-t z-50'}>
95+
<div className={'m-3 rounded bg-neutral-900 border border-black'}>
96+
<select
97+
className={'input-dark'}
98+
onChange={e => {
99+
if (editor) {
100+
editor.session.setMode(`ace/mode/${e.currentTarget.value}`);
101+
}
102+
}}
103+
>
104+
{
105+
Object.keys(modes).map(key => (
106+
<option key={key} value={key}>{modes[key]}</option>
107+
))
108+
}
109+
</select>
110+
</div>
111+
</div>
112+
</EditorContainer>
23113
</div>
24114
);
25115
};

‎resources/scripts/routers/ServerRouter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { CSSTransition } from 'react-transition-group';
1313
import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
1414

1515
const LazyFileEditContainer = lazy<React.ComponentType<RouteComponentProps<any>>>(
16-
() => import('@/components/server/files/FileEditContainer')
16+
() => import(/* webpackChunkName: "editor" */'@/components/server/files/FileEditContainer')
1717
);
1818

1919
const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {

‎resources/styles/components/forms.css‎

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ input[type=number] {
1515
/**
1616
* Styling for other forms throughout the Panel.
1717
*/
18-
.input, .input-dark {
18+
.input:not(select), .input-dark:not(select) {
1919
@apply .appearance-none .w-full;
2020
min-width: 0;
2121

@@ -24,7 +24,7 @@ input[type=number] {
2424
}
2525
}
2626

27-
.input {
27+
.input:not(select) {
2828
@apply .p-3 .rounded .border .border-neutral-200 .text-neutral-800;
2929
transition: border 150ms linear;
3030

@@ -35,21 +35,21 @@ input[type=number] {
3535
&.error {
3636
@apply .text-red-600 .border-red-500;
3737
}
38-
}
3938

40-
.input:disabled {
41-
@apply .bg-neutral-100 .border-neutral-200;
42-
}
39+
&:disabled {
40+
@apply .bg-neutral-100 .border-neutral-200;
41+
}
4342

44-
.input + .input-help {
45-
@apply .text-xs .text-neutral-400 .pt-2;
43+
& + .input-help {
44+
@apply .text-xs .text-neutral-400 .pt-2;
4645

47-
&.error {
48-
@apply .text-red-600;
46+
&.error {
47+
@apply .text-red-600;
48+
}
4949
}
5050
}
5151

52-
.input-dark {
52+
.input-dark:not(select) {
5353
@apply .p-3 .bg-neutral-600 .border .border-neutral-500 .text-sm .rounded .text-neutral-200 .shadow-none;
5454
transition: border 150ms linear, box-shaodw 150ms ease-in;
5555

@@ -83,23 +83,47 @@ label {
8383
}
8484

8585
select:not(.appearance-none) {
86-
@apply .outline-none .appearance-none .block .bg-white .border .border-neutral-200 .text-neutral-400 .p-3 .pr-8 rounded;
87-
transition: border-color 150ms linear, color 150ms linear;
86+
@apply .shadow-none .block .p-3 .pr-8 .rounded .border .w-full .text-sm;
87+
transition: border-color 150ms linear;
8888

89-
&:hover:not(:disabled), &:focus {
90-
@apply .outline-none .border-primary-500 .text-neutral-700;
89+
&, &:hover:not(:disabled), &:focus {
90+
@apply .outline-none;
9191
}
9292

9393
-webkit-appearance: none;
9494
-moz-appearance: none;
95+
background-size: 1rem;
96+
background-repeat: no-repeat;
97+
background-position-x: calc(100% - 0.75rem);
98+
background-position-y: center;
9599

96100
&::-ms-expand {
97101
display: none;
98102
}
103+
}
99104

100-
background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ") no-repeat center center;
101-
background-size: 1rem;
102-
background-position-x: calc(100% - 0.75rem);
105+
select.input:not(.appearance-none) {
106+
@apply .bg-white .border-neutral-200 .text-neutral-400;
107+
transition: color 150ms linear;
108+
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
109+
110+
&:hover:not(:disabled), &:focus {
111+
@apply .border-primary-500 .text-neutral-700;
112+
}
113+
}
114+
115+
select.input-dark:not(.appearance-none) {
116+
@apply .bg-neutral-600 .border-neutral-500 .text-neutral-200;
117+
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
118+
119+
&:hover:not(:disabled), &:focus {
120+
@apply .border-neutral-400;
121+
}
122+
123+
/* fix for Firefox trying to be cool with dark colors */
124+
&:focus {
125+
@apply .bg-white .text-neutral-800;
126+
}
103127
}
104128

105129
.input-dark-label {

‎yarn.lock‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1662,6 +1662,10 @@ axios@^0.18.0:
16621662
follow-redirects "^1.3.0"
16631663
is-buffer "^1.1.5"
16641664

1665+
ayu-ace@^2.0.4:
1666+
version "2.0.4"
1667+
resolved "https://registry.yarnpkg.com/ayu-ace/-/ayu-ace-2.0.4.tgz#3877d4cbf8668e639de6f67e34c2a88c1589b082"
1668+
16651669
babel-code-frame@^6.22.0:
16661670
version "6.26.0"
16671671
resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -1850,6 +1854,10 @@ brace-expansion@^1.1.7:
18501854
balanced-match "^1.0.0"
18511855
concat-map "0.0.1"
18521856

1857+
brace@^0.11.1:
1858+
version "0.11.1"
1859+
resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
1860+
18531861
braces@^2.3.0, braces@^2.3.1, braces@^2.3.2:
18541862
version "2.3.2"
18551863
resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -3283,6 +3291,10 @@ eslint-plugin-promise@^4.1.1:
32833291
version "4.1.1"
32843292
resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.1.1.tgz#1e08cb68b5b2cd8839f8d5864c796f56d82746db"
32853293

3294+
eslint-plugin-react-hooks@^2.1.2:
3295+
version "2.1.2"
3296+
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.1.2.tgz#1358d2acb2c5e02b7e90c37e611ac258a488e3a7"
3297+
32863298
eslint-plugin-standard@^4.0.0:
32873299
version "4.0.0"
32883300
resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-4.0.0.tgz#f845b45109c99cd90e77796940a344546c8f6b5c"

0 commit comments

Comments
 (0)