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

Speed up animations throughout the panel

Browse source
This commit is contained in:
Dane Everitt 2020-07-05 13:56:04 -07:00
parent cbdede75a7
commit 28992c5e43
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
12 changed files with 13 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/TransitionRouter.tsx
View file

@ -17,7 +17,7 @@ const TransitionRouter: React.FC = ({ children }) => (
<Route
render={({ location }) => (
<StyledSwitchTransition>
<Fade timeout={250} key={location.key} in appear unmountOnExit>
<Fade timeout={150} key={location.key} in appear unmountOnExit>
<section>
{children}
</section>

3
resources/scripts/components/dashboard/search/SearchModal.tsx
View file

@ -22,8 +22,7 @@ interface Values {
}
const ServerResult = styled(Link)`
${tw`flex items-center bg-neutral-900 p-4 rounded border-l-4 border-neutral-900 no-underline`};
transition: all 250ms linear;
${tw`flex items-center bg-neutral-900 p-4 rounded border-l-4 border-neutral-900 no-underline transition-all duration-150`};
&:hover {
${tw`shadow border-cyan-500`};

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

@ -61,7 +61,7 @@ const DropdownMenu = ({ renderToggle, children }: Props) => {
return (
<div>
{renderToggle(onClickHandler)}
<Fade timeout={250} in={visible} unmountOnExit>
<Fade timeout={150} in={visible} unmountOnExit>
<div
ref={menu}
onClick={e => {

2
resources/scripts/components/elements/InputSpinner.tsx
View file

@ -9,7 +9,7 @@ const InputSpinner = ({ visible, children }: { visible: boolean, children: React
appear
unmountOnExit
in={visible}
timeout={250}
timeout={150}
>
<div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
<Spinner size={'small'}/>

4
resources/scripts/components/elements/Modal.tsx
View file

@ -62,7 +62,7 @@ const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverl
}, [ render ]);
return (
<Fade timeout={250} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
<Fade timeout={150} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
<ModalMask
onClick={e => {
if (isDismissable && closeOnBackground) {
@ -87,7 +87,7 @@ const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverl
<Spinner/>
</div>
}
<div css={tw`bg-neutral-800 p-6 rounded shadow-md overflow-y-scroll transition-all duration-250`}>
<div css={tw`bg-neutral-800 p-6 rounded shadow-md overflow-y-scroll transition-all duration-150`}>
{children}
</div>
</ModalContainer>

2
resources/scripts/components/elements/PageContentBlock.tsx
View file

@ -4,7 +4,7 @@ import { CSSTransition } from 'react-transition-group';
import tw from 'twin.macro';
const PageContentBlock: React.FC<{ className?: string }> = ({ children, className }) => (
<CSSTransition timeout={250} classNames={'fade'} appear in>
<CSSTransition timeout={150} classNames={'fade'} appear in>
<>
<ContentContainer css={tw`my-10`} className={className}>
{children}

2
resources/scripts/components/elements/ProgressBar.tsx
View file

@ -61,7 +61,7 @@ export default () => {
return (
<div className={'w-full fixed'} style={{ height: '2px' }}>
<CSSTransition
timeout={250}
timeout={150}
appear
in={visible}
unmountOnExit

2
resources/scripts/components/server/WebsocketHandler.tsx
View file

@ -67,7 +67,7 @@ export default () => {
return (
error ?
<CSSTransition timeout={250} in appear classNames={'fade'}>
<CSSTransition timeout={150} in appear classNames={'fade'}>
<div css={tw`bg-red-500 py-2`}>
<ContentContainer css={tw`flex items-center justify-center`}>
<Spinner size={'small'}/>

2
resources/scripts/components/server/databases/DatabasesContainer.tsx
View file

@ -40,7 +40,7 @@ export default () => {
{(!databases.length && loading) ?
<Spinner size={'large'} centered/>
:
<Fade timeout={250}>
<Fade timeout={150}>
<>
{databases.length > 0 ?
databases.map((database, index) => (

2
resources/scripts/components/server/files/FileDropdownMenu.tsx
View file

@ -138,7 +138,7 @@ export default ({ uuid }: { uuid: string }) => {
/>
<SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
</div>
<Fade timeout={250} in={menuVisible} unmountOnExit classNames={'fade'}>
<Fade timeout={150} in={menuVisible} unmountOnExit classNames={'fade'}>
<div
ref={menu}
onClick={e => {

2
resources/scripts/components/server/files/FileManagerContainer.tsx
View file

@ -70,7 +70,7 @@ export default () => {
This directory seems to be empty.
</p>
:
<CSSTransition classNames={'fade'} timeout={250} appear in>
<CSSTransition classNames={'fade'} timeout={150} appear in>
<React.Fragment>
<div>
{files.length > 250 ?

2
resources/scripts/routers/ServerRouter.tsx
View file

@ -69,7 +69,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
<Spinner size={'large'} centered/>
:
<>
<CSSTransition timeout={250} classNames={'fade'} appear in>
<CSSTransition timeout={150} classNames={'fade'} appear in>
<SubNavigation>
<div>
<NavLink to={`${match.url}`} exact>Console</NavLink>