Ivan - Implement loading on custom responses [skip ci]
This commit is contained in:
parent
ec770b5223
commit
a10aebfdf5
client/src
app/admin/panel/tickets
core-components
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
.admin-panel-custom-responses {
|
||||||
|
&__loading {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue