StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix up file manager

Browse source
This commit is contained in:
Dane Everitt 2020-07-04 17:57:24 -07:00
parent 7e8a5f1271
commit 43fbefbdb6
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
11 changed files with 108 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

23
resources/scripts/components/elements/AceEditor.tsx
View file

@ -1,9 +1,8 @@
import React, { useCallback, useEffect, useState, lazy } from 'react';
import useRouter from 'use-react-router';
import { ServerContext } from '@/state/server';
import React, { useCallback, useEffect, useState } from 'react';
import ace, { Editor } from 'brace';
import getFileContents from '@/api/server/files/getFileContents';
import styled from 'styled-components/macro';
import tw from 'twin.macro';
import Select from '@/components/elements/Select';
// @ts-ignore
require('brace/ext/modelist');
@ -11,7 +10,7 @@ require('ayu-ace/mirage');
const EditorContainer = styled.div`
min-height: 16rem;
height: calc(100vh - 16rem);
height: calc(100vh - 20rem);
${tw`relative`};
#editor {
@ -20,9 +19,7 @@ const EditorContainer = styled.div`
`;
const modes: { [k: string]: string } = {
// eslint-disable-next-line @typescript-eslint/camelcase
assembly_x86: 'Assembly (x86)',
// eslint-disable-next-line @typescript-eslint/camelcase
c_cpp: 'C++',
coffee: 'Coffeescript',
css: 'CSS',
@ -40,7 +37,6 @@ const modes: { [k: string]: string } = {
properties: 'Properties',
python: 'Python',
ruby: 'Ruby',
// eslint-disable-next-line @typescript-eslint/camelcase
plain_text: 'Plaintext',
toml: 'TOML',
typescript: 'Typescript',
@ -70,7 +66,7 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
useEffect(() => {
editor && editor.session.setMode(mode);
}, [editor, mode]);
}, [ editor, mode ]);
useEffect(() => {
editor && editor.session.setValue(initialContent || '');
@ -113,10 +109,9 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
return (
<EditorContainer style={style}>
<div id={'editor'} ref={ref}/>
<div className={'absolute right-0 bottom-0 z-50'}>
<div className={'m-3 rounded bg-neutral-900 border border-black'}>
<select
className={'input-dark'}
<div css={tw`absolute right-0 bottom-0 z-50`}>
<div css={tw`m-3 rounded bg-neutral-900 border border-black`}>
<Select
value={mode.split('/').pop()}
onChange={e => setMode(`ace/mode/${e.currentTarget.value}`)}
>
@ -125,7 +120,7 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
<option key={key} value={key}>{modes[key]}</option>
))
}
</select>
</Select>
</div>
</div>
</EditorContainer>

3
resources/scripts/components/elements/DropdownMenu.tsx
View file

@ -69,8 +69,7 @@ const DropdownMenu = ({ renderToggle, children }: Props) => {
e.stopPropagation();
setVisible(false);
}}
css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500`}
style={{ minWidth: '12rem' }}
css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48`}
>
{children}
</div>