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 <Route
render={({ location }) => ( render={({ location }) => (
<StyledSwitchTransition> <StyledSwitchTransition>
<Fade timeout={250} key={location.key} in appear unmountOnExit> <Fade timeout={150} key={location.key} in appear unmountOnExit>
<section> <section>
{children} {children}
</section> </section>

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

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

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

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

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

@ -9,7 +9,7 @@ const InputSpinner = ({ visible, children }: { visible: boolean, children: React
appear appear
unmountOnExit unmountOnExit
in={visible} in={visible}
timeout={250} timeout={150}
> >
<div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}> <div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
<Spinner size={'small'}/> <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 ]); }, [ render ]);
return ( return (
<Fade timeout={250} appear={appear} in={render} unmountOnExit onExited={onDismissed}> <Fade timeout={150} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
<ModalMask <ModalMask
onClick={e => { onClick={e => {
if (isDismissable && closeOnBackground) { if (isDismissable && closeOnBackground) {
@ -87,7 +87,7 @@ const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverl
<Spinner/> <Spinner/>
</div> </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} {children}
</div> </div>
</ModalContainer> </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'; import tw from 'twin.macro';
const PageContentBlock: React.FC<{ className?: string }> = ({ children, className }) => ( 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}> <ContentContainer css={tw`my-10`} className={className}>
{children} {children}

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

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

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

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

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

@ -40,7 +40,7 @@ export default () => {
{(!databases.length && loading) ? {(!databases.length && loading) ?
<Spinner size={'large'} centered/> <Spinner size={'large'} centered/>
: :
<Fade timeout={250}> <Fade timeout={150}>
<> <>
{databases.length > 0 ? {databases.length > 0 ?
databases.map((database, index) => ( 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'}/> <SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
</div> </div>
<Fade timeout={250} in={menuVisible} unmountOnExit classNames={'fade'}> <Fade timeout={150} in={menuVisible} unmountOnExit classNames={'fade'}>
<div <div
ref={menu} ref={menu}
onClick={e => { onClick={e => {

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

@ -70,7 +70,7 @@ export default () => {
This directory seems to be empty. This directory seems to be empty.
</p> </p>
: :
<CSSTransition classNames={'fade'} timeout={250} appear in> <CSSTransition classNames={'fade'} timeout={150} appear in>
<React.Fragment> <React.Fragment>
<div> <div>
{files.length > 250 ? {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/> <Spinner size={'large'} centered/>
: :
<> <>
<CSSTransition timeout={250} classNames={'fade'} appear in> <CSSTransition timeout={150} classNames={'fade'} appear in>
<SubNavigation> <SubNavigation>
<div> <div>
<NavLink to={`${match.url}`} exact>Console</NavLink> <NavLink to={`${match.url}`} exact>Console</NavLink>