#22: Remove hardcoded margins from Loader component

This commit is contained in:
SleepWalker 2019-01-14 22:52:42 +02:00
parent d7bd937b01
commit ed82188795
2 changed files with 54 additions and 51 deletions

View File

@ -1,6 +1,7 @@
// @flow // @flow
import type { OauthAppResponse } from 'services/api/oauth'; import type { OauthAppResponse } from 'services/api/oauth';
import React, { Component } from 'react'; import React, { Component } from 'react';
import classNames from 'classnames';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import { LinkButton } from 'components/ui/form'; import { LinkButton } from 'components/ui/form';
@ -85,11 +86,7 @@ export default class ApplicationsIndex extends Component<Props> {
resetClientId resetClientId
} = this.props; } = this.props;
if (displayForGuest) { if (applications.length > 0) {
return <Guest />;
} else if (isLoading) {
return <Loader />;
} else if (applications.length > 0) {
return ( return (
<ApplicationsList <ApplicationsList
applications={applications} applications={applications}
@ -99,16 +96,42 @@ export default class ApplicationsIndex extends Component<Props> {
resetClientId={resetClientId} resetClientId={resetClientId}
/> />
); );
} else if (displayForGuest) {
return <Guest />;
} }
return <NoApps />; return <Loader noApps={!isLoading} />;
} }
} }
function Loader() { function Loader({ noApps }: { noApps: bool }) {
return ( return (
<div className={styles.emptyState}> <div className={styles.emptyState} data-e2e={noApps ? 'noApps' : 'loading'}>
<img src={loadingCubeIcon} className={styles.loadingStateIcon} /> <img
src={noApps ? cubeIcon : loadingCubeIcon}
className={styles.emptyStateIcon}
/>
<div className={classNames(styles.noAppsContainer, {
[styles.noAppsAnimating]: noApps
})}>
<div className={styles.emptyStateText}>
<div>
<Message {...messages.youDontHaveAnyApplication} />
</div>
<div>
<Message {...messages.shallWeStart} />
</div>
</div>
<LinkButton
to="/dev/applications/new"
data-e2e="newApp"
label={messages.addNew}
color={COLOR_GREEN}
className={styles.emptyStateActionButton}
/>
</div>
</div> </div>
); );
} }
@ -135,27 +158,3 @@ function Guest() {
</div> </div>
); );
} }
function NoApps() {
return (
<div data-e2e="noApps" className={styles.emptyState}>
<img src={cubeIcon} className={styles.emptyStateIcon} />
<div className={styles.emptyStateText}>
<div>
<Message {...messages.youDontHaveAnyApplication} />
</div>
<div>
<Message {...messages.shallWeStart} />
</div>
</div>
<LinkButton
to="/dev/applications/new"
data-e2e="newApp"
label={messages.addNew}
color={COLOR_GREEN}
className={styles.emptyStateActionButton}
/>
</div>
);
}

View File

@ -72,7 +72,16 @@
font-size: 16px; font-size: 16px;
margin-bottom: 20px; margin-bottom: 20px;
line-height: 20px; line-height: 20px;
}
.noAppsContainer {
visibility: hidden;
}
.noAppsAnimating {
visibility: visible;
.emptyStateText {
> div { > div {
&:nth-child(1) { &:nth-child(1) {
@include emptyStateAnimation(0); @include emptyStateAnimation(0);
@ -87,6 +96,7 @@
.emptyStateActionButton { .emptyStateActionButton {
@include emptyStateAnimation(2); @include emptyStateAnimation(2);
} }
}
@keyframes slide-in-bottom { @keyframes slide-in-bottom {
0% { 0% {
@ -100,12 +110,6 @@
} }
} }
.loadingStateIcon {
composes: emptyStateIcon;
margin-bottom: 130px; // TODO: this is needed to render empty state without height jumping. Maybe it can be done more dynamically?
}
.appsListTitleContainer { .appsListTitleContainer {
display: flex; display: flex;
align-items: center; align-items: center;