diff --git a/src/components/dev/apps/applicationsIndex.scss b/src/components/dev/apps/applicationsIndex.scss
index f2ccb3e..18ce542 100644
--- a/src/components/dev/apps/applicationsIndex.scss
+++ b/src/components/dev/apps/applicationsIndex.scss
@@ -182,6 +182,8 @@
background: #F5F5F5;
border-top: 1px solid #eee;
padding: 5px 30px;
+ position: relative;
+ transition: transform 0.2s ease-in;
}
.appDetailsInfoField {
@@ -226,6 +228,11 @@
}
}
+.appActionContainer {
+ position: absolute;
+ top: 100%;
+}
+
.appActionDescription {
composes: appDetailsDescription;
diff --git a/src/components/dev/apps/list/ApplicationItem.js b/src/components/dev/apps/list/ApplicationItem.js
index c238cab..33d8de1 100644
--- a/src/components/dev/apps/list/ApplicationItem.js
+++ b/src/components/dev/apps/list/ApplicationItem.js
@@ -41,18 +41,22 @@ export default class ApplicationItem extends Component<
{
selectedAction: ?string,
isActionPerforming: bool,
- detailsHeight: number
+ detailsHeight: number,
+ translateY: number
}
> {
state = {
selectedAction: null,
isActionPerforming: false,
+ translateY: 0,
detailsHeight: 0
};
+ actionContainer: ?HTMLDivElement;
+
render() {
const { application: app, expand } = this.props;
- const { selectedAction } = this.state;
+ const { selectedAction, translateY } = this.state;
return (
-
+
- {this.getActionContent()}
+
{
+ this.actionContainer = el;
+ }}
+ >
+ {this.getActionContent()}
+
@@ -238,42 +252,63 @@ export default class ApplicationItem extends Component<
}
}
+ setActiveAction = (type: ?string) => {
+ const { actionContainer } = this;
+
+ if (!actionContainer) {
+ return;
+ }
+
+ this.setState(
+ {
+ selectedAction: type
+ },
+ () => {
+ const translateY = actionContainer.offsetHeight;
+
+ this.setState({ translateY });
+ }
+ );
+ };
+
onTileToggle = () => {
const { onTileClick, application } = this.props;
+
onTileClick(application.clientId);
};
onCollapseRest = () => {
if (!this.props.expand && this.state.selectedAction) {
- this.setState({
- selectedAction: null
- });
+ this.setActiveAction(null);
}
};
onActionButtonClick = (type: ?string) => () => {
- this.setState({
- selectedAction: type === this.state.selectedAction ? null : type
- });
+ this.setActiveAction(type === this.state.selectedAction ? null : type);
};
onResetSubmit = (resetClientSecret: bool) => async () => {
const { onResetSubmit, application } = this.props;
+
this.setState({
isActionPerforming: true
});
+
await onResetSubmit(application.clientId, resetClientSecret);
+
this.setState({
- isActionPerforming: false,
- selectedAction: null
+ isActionPerforming: false
});
+ this.setActiveAction(null);
};
onSubmitDelete = () => {
const { onDeleteSubmit, application } = this.props;
+
this.setState({
isActionPerforming: true
});
+
onDeleteSubmit(application.clientId);
};
}