ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-06-26 02:12:02 +05:30
Code Issues Packages Projects Releases Wiki Activity

#22: Remove hardcoded margins from Loader component

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/dev/apps/ApplicationsIndex.js
View File

@ -1,6 +1,7 @@
// @flow
import type { OauthAppResponse } from 'services/api/oauth';
import React, { Component } from 'react';
import classNames from 'classnames';
import { FormattedMessage as Message } from 'react-intl';
import { Helmet } from 'react-helmet';
import { LinkButton } from 'components/ui/form';
@ -85,11 +86,7 @@ export default class ApplicationsIndex extends Component<Props> {
resetClientId
} = this.props;
if (displayForGuest) {
return <Guest />;
} else if (isLoading) {
return <Loader />;
} else if (applications.length > 0) {
if (applications.length > 0) {
return (
<ApplicationsList
applications={applications}
@ -99,16 +96,42 @@ export default class ApplicationsIndex extends Component<Props> {
resetClientId={resetClientId}
/>
);
} else if (displayForGuest) {
return <Guest />;
}
return <NoApps />;
return <Loader noApps={!isLoading} />;
}
}
function Loader() {
function Loader({ noApps }: { noApps: bool }) {
return (
<div className={styles.emptyState}>
<img src={loadingCubeIcon} className={styles.loadingStateIcon} />
<div className={styles.emptyState} data-e2e={noApps ? 'noApps' : 'loading'}>
<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>
);
}
@ -135,27 +158,3 @@ function Guest() {
</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>
);
}

40
src/components/dev/apps/applicationsIndex.scss
View File

@ -72,20 +72,30 @@
font-size: 16px;
margin-bottom: 20px;
line-height: 20px;
> div {
&:nth-child(1) {
@include emptyStateAnimation(0);
}
&:nth-child(2) {
@include emptyStateAnimation(1);
}
}
}
.emptyStateActionButton {
@include emptyStateAnimation(2);
.noAppsContainer {
visibility: hidden;
}
.noAppsAnimating {
visibility: visible;
.emptyStateText {
> div {
&:nth-child(1) {
@include emptyStateAnimation(0);
}
&:nth-child(2) {
@include emptyStateAnimation(1);
}
}
}
.emptyStateActionButton {
@include emptyStateAnimation(2);
}
}
@keyframes slide-in-bottom {
@ -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 {
display: flex;
align-items: center;