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); }; }