Ivan - Implement loading on custom responses [skip ci]

This commit is contained in:
ivan 2016-10-11 17:42:10 -03:00
parent ec770b5223
commit a10aebfdf5
4 changed files with 58 additions and 11 deletions

View File

@ -12,15 +12,28 @@ class AdminPanelCustomResponses extends React.Component {
return ( return (
<div className="admin-panel-custom-responses"> <div className="admin-panel-custom-responses">
<Header title={i18n('CUSTOM_RESPONSES')} description={i18n('CUSTOM_RESPONSES_DESCRIPTION')} /> <Header title={i18n('CUSTOM_RESPONSES')} description={i18n('CUSTOM_RESPONSES_DESCRIPTION')} />
<div className="row"> {(this.props.loaded) ? this.renderContent() : this.renderLoading()}
<div className="col-md-3"> </div>
<Loading /> );
<Listing {...this.getListingProps()}/> }
</div>
<div className="col-md-9"> renderContent() {
Custom response form return (
</div> <div className="row">
<div className="col-md-3">
<Listing {...this.getListingProps()}/>
</div> </div>
<div className="col-md-9">
Custom response form
</div>
</div>
);
}
renderLoading() {
return (
<div className="admin-panel-custom-responses__loading">
<Loading backgrounded size="large"/>
</div> </div>
); );
} }

View File

@ -0,0 +1,5 @@
.admin-panel-custom-responses {
&__loading {
height: 300px;
}
}

View File

@ -2,18 +2,29 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
class Loading extends React.Component { class Loading extends React.Component {
static propTypes = {
backgrounded: React.PropTypes.bool,
size: React.PropTypes.oneOf(['small', 'medium', 'large'])
};
static defaultProps = {
size: 'small',
backgrounded: false
};
render() { render() {
return ( return (
<div className={this.getClass()}> <div className={this.getClass()}>
<span className="loading-icon" /> <span className="loading__icon" />
</div> </div>
); );
} }
getClass() { getClass() {
let classes = { let classes = {
'loading': true 'loading': true,
'loading_backgrounded': (this.props.backgrounded),
'loading_large': (this.props.size === 'large')
}; };
classes[this.props.className] = (this.props.className); classes[this.props.className] = (this.props.className);

View File

@ -6,7 +6,7 @@ $color: white;
height: 100%; height: 100%;
position: relative; position: relative;
&-icon { &__icon {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -32,6 +32,24 @@ $color: white;
} }
} }
&_large {
.loading__icon,
.loading__icon:after {
font-size: 7px;
width: 60px;
height: 60px;
}
}
&_backgrounded {
display: block;
width: 100%;
height: 100%;
border-radius: 4px;
background-color: rgba(black, 0.2);
}
@-webkit-keyframes turnAnimation { @-webkit-keyframes turnAnimation {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);