lukechilds
/
ledger-live-desktop
mirror of https://github.com/lukechilds/ledger-live-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Smoother modals

master
meriadec 7 years ago
parent
07ccfceb4f
commit
31453dce75
No known key found for this signature in database GPG Key ID: 1D2FC2305E2CB399
4 changed files with 86 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 82
      src/components/base/Modal/ModalBody.js
  2. 46
      src/components/base/Modal/index.js
  3. 2
      src/components/modals/Receive/index.js
  4. 2
      src/components/modals/Send/index.js

82
src/components/base/Modal/ModalBody.js
View File

@ -0,0 +1,82 @@
// @flow
import React, { PureComponent } from 'react'
import styled, { keyframes } from 'styled-components'
import Box from 'components/base/Box'
import IconCross from 'icons/Cross'
export const Container = styled(Box).attrs({
px: 5,
pb: 5,
})``
type Props = {
deferHeight?: number,
onClose?: Function,
children: any,
}
type State = {
isHidden: boolean,
}
class ModalBody extends PureComponent<Props, State> {
state = {
isHidden: true,
}
componentDidMount() {
setTimeout(() => {
window.requestAnimationFrame(() => {
this.setState({ isHidden: false })
})
}, 150)
}
render() {
const { children, onClose, deferHeight, ...props } = this.props
const { isHidden } = this.state
return (
<Body style={{ height: isHidden && deferHeight ? deferHeight : undefined }}>
{onClose && (
<CloseContainer onClick={onClose}>
<IconCross height={16} width={16} />
</CloseContainer>
)}
{(!isHidden || !deferHeight) && <Inner {...props}>{children}</Inner>}
</Body>
)
}
}
const CloseContainer = styled(Box).attrs({
p: 4,
color: 'fog',
})`
cursor: pointer;
position: absolute;
top: 0;
right: 0;
&:hover {
color: ${p => p.theme.colors.grey};
}
`
const Body = styled(Box).attrs({
bg: p => p.theme.colors.white,
relative: true,
borderRadius: 1,
})``
const appear = keyframes`
from { opacity: 0; }
to { opacity: 1; }
`
const Inner = styled(Box)`
animation: ${appear} 80ms linear;
`
export default ModalBody

46
src/components/base/Modal/index.js
View File

@ -20,10 +20,10 @@ import Box, { Tabbable } from 'components/base/Box'
import GrowScroll from 'components/base/GrowScroll' import GrowScroll from 'components/base/GrowScroll'
import Defer from 'components/base/Defer' import Defer from 'components/base/Defer'
import IconCross from 'icons/Cross' export { default as ModalBody } from './ModalBody'
const springConfig = { const springConfig = {
stiffness: 380, stiffness: 320,
} }
const mapStateToProps: Function = ( const mapStateToProps: Function = (
@ -81,26 +81,6 @@ const Wrapper = styled(Tabbable).attrs({
z-index: 2; z-index: 2;
` `
const Body = styled(Box).attrs({
bg: p => p.theme.colors.white,
relative: true,
borderRadius: 1,
})``
const CloseContainer = styled(Box).attrs({
p: 4,
color: 'fog',
})`
cursor: pointer;
position: absolute;
top: 0;
right: 0;
&:hover {
color: ${p => p.theme.colors.grey};
}
`
class Pure extends Component<any> { class Pure extends Component<any> {
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
if (nextProps.isAnimated) { if (nextProps.isAnimated) {
@ -206,28 +186,6 @@ export class Modal extends Component<Props> {
} }
} }
export const ModalBody = ({
children,
onClose,
...props
}: {
children: any,
onClose?: Function,
}) => (
<Body>
{onClose && (
<CloseContainer onClick={onClose}>
<IconCross height={16} width={16} />
</CloseContainer>
)}
<Box {...props}>{children}</Box>
</Body>
)
ModalBody.defaultProps = {
onClose: undefined,
}
export const ModalTitle = styled(Box).attrs({ export const ModalTitle = styled(Box).attrs({
ff: 'Museo Sans|Regular', ff: 'Museo Sans|Regular',
fontSize: 6, fontSize: 6,

2
src/components/modals/Receive/index.js
View File

@ -74,7 +74,7 @@ class ReceiveModal extends PureComponent<Props, State> {
const account = this.getAccount(data) const account = this.getAccount(data)
return ( return (
<ModalBody onClose={onClose} flow={3}> <ModalBody onClose={onClose} flow={3} deferHeight={282}>
<ModalTitle>{t('receive:title')}</ModalTitle> <ModalTitle>{t('receive:title')}</ModalTitle>
<ModalContent> <ModalContent>
<Box flow={1}> <Box flow={1}>

2
src/components/modals/Send/index.js
View File

@ -112,7 +112,7 @@ class SendModal extends PureComponent<Props, State> {
const acc = account || get(data, 'account', null) const acc = account || get(data, 'account', null)
const canNext = this.canNext(acc) const canNext = this.canNext(acc)
return ( return (
<ModalBody onClose={onClose}> <ModalBody onClose={onClose} deferHeight={acc ? 595 : 355}>
<ModalTitle>{t('send:title')}</ModalTitle> <ModalTitle>{t('send:title')}</ModalTitle>
<ModalContent> <ModalContent>
<Breadcrumb mb={6} mt={2} currentStep={stepIndex} items={this._steps} /> <Breadcrumb mb={6} mt={2} currentStep={stepIndex} items={this._steps} />

Write Preview
Loading…
Cancel
Save