Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(admin): consistency tweaks, add egg pages

Browse source
This commit is contained in:
Matthew Penner 2021-09-17 13:06:31 -06:00
parent db4fb3ac53
commit 107cf72269
No known key found for this signature in database
GPG key ID: 030E4AB751DC756F
9 changed files with 91 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/components/admin/databases/NewDatabaseContainer.tsx
View file

@ -30,7 +30,7 @@ export default () => {
<AdminContentBlock title={'New Database'}>
<div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Database Host</h2>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Database Host</h2>
<p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new database host to the panel.</p>
</div>
</div>

2
resources/scripts/components/admin/mounts/NewMountContainer.tsx
View file

@ -30,7 +30,7 @@ export default () => {
<AdminContentBlock title={'New Mount'}>
<div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Mount</h2>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Mount</h2>
<p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new mount to the panel.</p>
</div>
</div>

53
resources/scripts/components/admin/nests/ImportEggButton.tsx Normal file
View file

@ -0,0 +1,53 @@
import { jsonLanguage } from '@codemirror/lang-json';
import Editor from '@/components/elements/Editor';
import React, { useState } from 'react';
import Button from '@/components/elements/Button';
import Modal from '@/components/elements/Modal';
import FlashMessageRender from '@/components/FlashMessageRender';
import tw from 'twin.macro';
export default ({ className }: { className?: string }) => {
const [ visible, setVisible ] = useState(false);
return (
<>
<Modal
visible={visible}
onDismissed={() => {
setVisible(false);
}}
>
<FlashMessageRender byKey={'egg:import'} css={tw`mb-6`}/>
<h2 css={tw`mb-6 text-2xl text-neutral-100`}>Import Egg</h2>
<Editor overrides={tw`h-64 rounded`} initialContent={''} mode={jsonLanguage}/>
<div css={tw`flex flex-wrap justify-end mt-4 sm:mt-6`}>
<Button
type={'button'}
isSecondary
css={tw`w-full sm:w-auto sm:mr-2`}
onClick={() => setVisible(false)}
>
Cancel
</Button>
<Button css={tw`w-full sm:w-auto mt-4 sm:mt-0`}>
Import Egg
</Button>
</div>
</Modal>
<Button
type={'button'}
size={'large'}
css={tw`h-10 px-4 py-0 whitespace-nowrap`}
className={className}
onClick={() => setVisible(true)}
isSecondary
>
Import
</Button>
</>
);
};

15
resources/scripts/components/admin/nests/NestEditContainer.tsx
View file

@ -1,6 +1,7 @@
import ImportEggButton from '@/components/admin/nests/ImportEggButton';
import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router';
import { useRouteMatch } from 'react-router-dom';
import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import Spinner from '@/components/elements/Spinner';
@ -245,10 +246,14 @@ const NestEditContainer = () => {
}
</div>
<div css={tw`flex ml-auto pl-4`}>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
New Egg
</Button>
<div css={tw`flex flex-row ml-auto pl-4`}>
<ImportEggButton css={tw`mr-4`}/>
<NavLink to={`${match.url}/new`}>
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
New Egg
</Button>
</NavLink>
</div>
</div>

16
resources/scripts/components/admin/nests/NewEggContainer.tsx Normal file
View file

@ -0,0 +1,16 @@
import React from 'react';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
export default () => {
return (
<AdminContentBlock title={'New Egg'}>
<div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Egg</h2>
<p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new egg to the panel.</p>
</div>
</div>
</AdminContentBlock>
);
};

2
resources/scripts/components/admin/nodes/NewNodeContainer.tsx
View file

@ -59,7 +59,7 @@ export default () => {
<AdminContentBlock title={'New Node'}>
<div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Node</h2>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Node</h2>
<p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new node to the panel.</p>
</div>
</div>

2
resources/scripts/components/admin/servers/NewServerContainer.tsx
View file

@ -7,7 +7,7 @@ export default () => {
<AdminContentBlock title={'New Server'}>
<div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create Server</h2>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Server</h2>
<p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new server to the panel.</p>
</div>
</div>

2
resources/scripts/components/admin/users/NewUserContainer.tsx
View file

@ -30,7 +30,7 @@ export default () => {
<AdminContentBlock title={'New User'}>
<div css={tw`w-full flex flex-row items-center mb-8`}>
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Create User</h2>
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New User</h2>
<p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new user to the panel.</p>
</div>
</div>

12
resources/scripts/routers/AdminRouter.tsx
View file

@ -2,9 +2,6 @@ import { State, useStoreState } from 'easy-peasy';
import React from 'react';
import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
import tw, { styled } from 'twin.macro';
import { ApplicationStore } from '@/state';
import { AdminContext } from '@/state/admin';
import { breakpoint } from '@/theme';
import OverviewContainer from '@/components/admin/overview/OverviewContainer';
import SettingsContainer from '@/components/admin/settings/SettingsContainer';
import DatabasesContainer from '@/components/admin/databases/DatabasesContainer';
@ -17,6 +14,7 @@ import LocationsContainer from '@/components/admin/locations/LocationsContainer'
import LocationEditContainer from '@/components/admin/locations/LocationEditContainer';
import ServersContainer from '@/components/admin/servers/ServersContainer';
import NewServerContainer from '@/components/admin/servers/NewServerContainer';
import ServerRouter from '@/components/admin/servers/ServerRouter';
import UsersContainer from '@/components/admin/users/UsersContainer';
import NewUserContainer from '@/components/admin/users/NewUserContainer';
import UserRouter from '@/components/admin/users/UserRouter';
@ -24,13 +22,16 @@ import RolesContainer from '@/components/admin/roles/RolesContainer';
import RoleEditContainer from '@/components/admin/roles/RoleEditContainer';
import NestsContainer from '@/components/admin/nests/NestsContainer';
import NestEditContainer from '@/components/admin/nests/NestEditContainer';
import NewEggContainer from '@/components/admin/nests/NewEggContainer';
import EggRouter from '@/components/admin/nests/eggs/EggRouter';
import MountsContainer from '@/components/admin/mounts/MountsContainer';
import NewMountContainer from '@/components/admin/mounts/NewMountContainer';
import MountEditContainer from '@/components/admin/mounts/MountEditContainer';
import EggRouter from '@/components/admin/nests/eggs/EggRouter';
import ServerRouter from '@/components/admin/servers/ServerRouter';
import { NotFound } from '@/components/elements/ScreenBlock';
import { usePersistedState } from '@/plugins/usePersistedState';
import { ApplicationStore } from '@/state';
import { AdminContext } from '@/state/admin';
import { breakpoint } from '@/theme';
const Sidebar = styled.div<{ collapsed?: boolean }>`
${tw`fixed h-screen hidden md:flex flex-col items-center flex-shrink-0 bg-neutral-900 overflow-x-hidden transition-all duration-250 ease-linear`};
@ -251,6 +252,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
component={NestEditContainer}
exact
/>
<Route path={`${match.path}/nests/:nestId/new`} component={NewEggContainer} exact/>
<Route
path={`${match.path}/nests/:nestId/eggs/:id`}
component={EggRouter}