Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(cp-frontend): show diff loading msg when provisioning

Browse Source
This commit is contained in:
Sérgio Ramos 2017-07-28 15:24:41 +01:00
parent 820dcfd728
commit 391267d609
3 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/cp-frontend/package.json
View File

@ -75,6 +75,7 @@
"jest-matcher-utils": "^20.0.3", "jest-matcher-utils": "^20.0.3",
"jest-snapshot": "^20.0.3", "jest-snapshot": "^20.0.3",
"jest-styled-components": "^4.2.2", "jest-styled-components": "^4.2.2",
"lodash.sortby": "^4.7.0",
"mz": "^2.6.0", "mz": "^2.6.0",
"react-scripts": "^1.0.7", "react-scripts": "^1.0.7",
"react-test-renderer": "^15.6.1", "react-test-renderer": "^15.6.1",

11
packages/cp-frontend/src/components/layout/container.js
View File

@ -1,6 +1,6 @@
import { Grid } from 'react-styled-flexboxgrid'; import { Grid } from 'react-styled-flexboxgrid';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import { isNot } from 'styled-is'; import is, { isNot } from 'styled-is';
export default Grid.extend` export default Grid.extend`
padding-top: ${remcalc(19)}; padding-top: ${remcalc(19)};
@ -10,4 +10,13 @@ export default Grid.extend`
display: flex; display: flex;
flex-flow: column; flex-flow: column;
`}; `};
${is('center')`
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
`};
`; `;

35
packages/cp-frontend/src/components/messaging/loader.js
View File

@ -1,7 +1,34 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components';
import { P } from 'joyent-ui-toolkit'; import { P, StatusLoader } from 'joyent-ui-toolkit';
export default () => { const Container = styled.div`
return <P>Loading...</P>; display: flex;
}; flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: center;
align-items: center;
flex: 1 1 auto;
align-self: stretch;
`;
const Loader = styled(StatusLoader)`
flex: 0 0 auto;
align-self: stretch;
`;
const Msg = P.extend`
flex: 0 0 auto;
align-self: stretch;
text-align: center;
`;
export default ({ msg }) =>
<Container>
<Loader />
<Msg>
{msg || 'Loading...'}
</Msg>
</Container>;