Alex/Pterodactyl-Panel
1
1
Fork 1
mirror of https://github.com/pterodactyl/panel.git synced 2024-11-22 00:52:43 +01:00
Code Issues Releases Wiki Activity

ui(editor): fix editor child styling

Browse Source
This commit is contained in:
Matthew Penner 2023-01-12 12:08:11 -07:00
parent 76b67cb889
commit bc7737840a
No known key found for this signature in database
8 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/scripts/components/admin/nests/ImportEggButton.tsx
View File

@ -48,7 +48,7 @@ export default ({ className }: { className?: string }) => {
<h2 css={tw`mb-6 text-2xl text-neutral-100`}>Import Egg</h2>
<Editor
className="h-64 overflow-hidden rounded"
childClassName={tw`h-64 rounded`}
initialContent={''}
fetchContent={value => {
fetchFileContent = value;

2
resources/scripts/components/admin/nests/NestsContainer.tsx
View File

@ -33,7 +33,7 @@ const RowCheckbox = ({ id }: { id: number }) => {
<AdminCheckbox
name={id.toString()}
checked={isChecked}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
onChange={(e: ChangeEvent<HTMLInputElement>) => {
if (e.currentTarget.checked) {
appendSelectedNest(id);
} else {

2
resources/scripts/components/admin/nests/eggs/EggExportButton.tsx
View File

@ -49,7 +49,7 @@ export default ({ className }: { className?: string }) => {
<FlashMessageRender byKey={'egg:export'} css={tw`mb-6`} />
<Editor
className="h-[32rem] overflow-scroll rounded"
childClassName={tw`h-[32rem] rounded`}
initialContent={content ?? ''}
language={LanguageDescription.of({ name: 'json', support: json() })}
/>

3
resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx
View File

@ -64,7 +64,8 @@ export default function EggInstallContainer() {
<Form>
<Editor
className="mb-4 h-96 overflow-scroll"
className="mb-4"
childClassName={tw`h-96`}
initialContent={egg.scriptInstall || ''}
fetchContent={value => {
fetchFileContent = value;

2
resources/scripts/components/admin/nests/eggs/EggRouter.tsx
View File

@ -19,7 +19,7 @@ const EggRouter = () => {
const { data: egg, error, isValidating, mutate } = useEggFromRoute();
useEffect(() => {
mutate();
void mutate();
}, []);
useEffect(() => {

29
resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx
View File

@ -135,7 +135,7 @@ export const EggProcessContainer = forwardRef<any, EggProcessContainerProps>(fun
<div css={tw`mb-5`}>
<Label>Startup Configuration</Label>
<Editor
className="h-32 overflow-scroll rounded"
childClassName={tw`h-32 rounded`}
initialContent={values.configStartup}
fetchContent={value => {
fetchStartupConfiguration = value;
@ -147,7 +147,7 @@ export const EggProcessContainer = forwardRef<any, EggProcessContainerProps>(fun
<div css={tw`mb-1`}>
<Label>Configuration Files</Label>
<Editor
className="h-48 overflow-scroll rounded"
childClassName={tw`h-48 rounded`}
initialContent={values.configFiles}
fetchContent={value => {
fetchFilesConfiguration = value;
@ -185,13 +185,23 @@ export default function EggSettingsContainer() {
const submit = async (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('egg');
values.configStartup = (await ref.current?.getStartupConfiguration()) || '';
values.configFiles = (await ref.current?.getFilesConfiguration()) || '';
values.configStartup = (await ref.current?.getStartupConfiguration()) ?? '';
values.configFiles = (await ref.current?.getFilesConfiguration()) ?? '';
const dockerImages: Record<string, string> = {};
for (const v of values.dockerImages.split('\n')) {
const parts = v.trim().split('|');
const image = parts[0] ?? '';
const alias = parts[1] ?? image;
dockerImages[alias] = image;
}
console.log(dockerImages);
updateEgg(egg.id, {
...values,
// TODO
dockerImages: {},
dockerImages,
})
.catch(error => {
console.error(error);
@ -207,8 +217,11 @@ export default function EggSettingsContainer() {
name: egg.name,
description: egg.description || '',
startup: egg.startup,
// TODO
dockerImages: egg.dockerImages.toString(),
dockerImages: Object.keys(egg.dockerImages)
.map(key => {
return `${egg.dockerImages[key]}|${key}`;
})
.join('\n'),
configStop: egg.configStop || '',
configStartup: JSON.stringify(egg.configStartup, null, '\t') || '',
configFiles: JSON.stringify(egg.configFiles, null, '\t') || '',

20
resources/scripts/components/elements/editor/Editor.tsx
View File

@ -30,6 +30,8 @@ import {
} from '@codemirror/view';
import type { CSSProperties } from 'react';
import { useEffect, useRef, useState } from 'react';
import type { TwStyle } from 'twin.macro';
import tw, { styled } from 'twin.macro';
import { ayuMirageHighlightStyle, ayuMirageTheme } from './theme';
@ -78,10 +80,24 @@ const defaultExtensions: Extension = [
indentUnit.of('\t'),
];
const EditorContainer = styled.div<{ overrides?: TwStyle }>`
//min-height: 12rem;
${tw`relative`};
& > div {
${props => props.overrides};
&.cm-focused {
outline: none;
}
}
`;
export interface EditorProps {
// DOM
className?: string;
style?: CSSProperties;
childClassName?: TwStyle;
// CodeMirror Config
extensions?: Extension[];
@ -211,5 +227,7 @@ export function Editor(props: EditorProps) {
props.fetchContent(async () => view.state.doc.toJSON().join('\n'));
}, [view, props.fetchContent, props.onContentSaved]);
return <div ref={ref} className={`relative ${props.className ?? ''}`.trimEnd()} style={props.style} />;
return (
<EditorContainer ref={ref} className={props.className} style={props.style} overrides={props.childClassName} />
);
}

2
resources/scripts/components/server/files/FileEditContainer.tsx
View File

@ -130,6 +130,8 @@ export default () => {
<div css={tw`relative`}>
<SpinnerOverlay visible={loading} />
<Editor
style={{ height: 'calc(100vh - 20rem)' }}
childClassName={tw`rounded-md h-full`}
filename={filename}
initialContent={content}
language={language}