IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

restored transition

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-10-31 12:50:44 +01:00
parent 1a65046b64
commit 95a8a59845
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/core/components/Animations/SlideDown.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React from 'react';
import Transition from 'react-transition-group/Transition'; import Transition from 'react-transition-group/Transition';
interface Style { interface Style {
@ -6,9 +6,11 @@ interface Style {
overflow?: string; overflow?: string;
} }
const defaultMaxHeight = '200px'; // When animating using max-height we need to use a static value. // When animating using max-height we need to use a static value.
// If this is not enough, pass in <SlideDown maxHeight=".... // If this is not enough, pass in <SlideDown maxHeight="....
const defaultMaxHeight = '200px';
const defaultDuration = 200; const defaultDuration = 200;
export const defaultStyle: Style = { export const defaultStyle: Style = {
transition: `max-height ${defaultDuration}ms ease-in-out`, transition: `max-height ${defaultDuration}ms ease-in-out`,
overflow: 'hidden', overflow: 'hidden',

20
public/app/features/api-keys/ApiKeysPage.tsx
View File

@ -8,7 +8,7 @@ import { getApiKeys, getApiKeysCount } from './state/selectors';
import { loadApiKeys, deleteApiKey, setSearchQuery, addApiKey } from './state/actions'; import { loadApiKeys, deleteApiKey, setSearchQuery, addApiKey } from './state/actions';
import PageHeader from 'app/core/components/PageHeader/PageHeader'; import PageHeader from 'app/core/components/PageHeader/PageHeader';
import PageLoader from 'app/core/components/PageLoader/PageLoader'; import PageLoader from 'app/core/components/PageLoader/PageLoader';
import SlideDown, { defaultStyle as slideDownDefaultStyle } from 'app/core/components/Animations/SlideDown'; import SlideDown from 'app/core/components/Animations/SlideDown';
import ApiKeysAddedModal from './ApiKeysAddedModal'; import ApiKeysAddedModal from './ApiKeysAddedModal';
import config from 'app/core/config'; import config from 'app/core/config';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
@ -85,6 +85,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
return { return {
...prevState, ...prevState,
newApiKey: initialApiKeyState, newApiKey: initialApiKeyState,
isAdding: false,
}; };
}); });
}; };
@ -130,10 +131,9 @@ export class ApiKeysPage extends PureComponent<Props, any> {
renderAddApiKeyForm() { renderAddApiKeyForm() {
const { newApiKey, isAdding } = this.state; const { newApiKey, isAdding } = this.state;
const slideDownStyle = isAdding ? slideDownDefaultStyle : { ...slideDownDefaultStyle, transition: 'unset' };
return ( return (
<SlideDown in={isAdding} style={slideDownStyle}> <SlideDown in={isAdding}>
<div className="cta-form"> <div className="cta-form">
<button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}> <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
<i className="fa fa-close" /> <i className="fa fa-close" />
@ -242,9 +242,15 @@ export class ApiKeysPage extends PureComponent<Props, any> {
return ( return (
<div> <div>
<PageHeader model={navModel} /> <PageHeader model={navModel} />
{hasFetched ? {hasFetched ? (
(apiKeysCount > 0 ? this.renderApiKeyList() : this.renderEmptyList()) apiKeysCount > 0 ? (
: <PageLoader pageName="Api keys" />} this.renderApiKeyList()
) : (
this.renderEmptyList()
)
) : (
<PageLoader pageName="Api keys" />
)}
</div> </div>
); );
} }
@ -256,7 +262,7 @@ function mapStateToProps(state) {
apiKeys: getApiKeys(state.apiKeys), apiKeys: getApiKeys(state.apiKeys),
searchQuery: state.apiKeys.searchQuery, searchQuery: state.apiKeys.searchQuery,
apiKeysCount: getApiKeysCount(state.apiKeys), apiKeysCount: getApiKeysCount(state.apiKeys),
hasFetched: state.apiKeys.hasFetched hasFetched: state.apiKeys.hasFetched,
}; };
} }