chore: electron default window height
refactor: modal background overlay rgba change refactor: fix transitions on all relevant components
This commit is contained in:
parent
21d20110a2
commit
291e011eb7
|
@ -64,12 +64,13 @@ export class LoadingScreen extends PureComponent<Props, State> {
|
||||||
<Transition
|
<Transition
|
||||||
native
|
native
|
||||||
items={start}
|
items={start}
|
||||||
enter={[{ height: 'auto' }]}
|
enter={[{ height: 'auto', opacity: 1 }]}
|
||||||
leave={{ height: 0 }}
|
leave={{ height: 0, opacity: 0 }}
|
||||||
from={{
|
from={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
height: 0,
|
height: 0,
|
||||||
|
opacity: 0,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{() => props => (
|
{() => props => (
|
||||||
|
|
|
@ -13,7 +13,7 @@ const ModalWrapper = styled.div`
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ChildrenWrapper = styled.div`
|
const ChildrenWrapper = styled.div`
|
||||||
|
|
|
@ -67,6 +67,8 @@ const RevealsMain = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
height: ${props => (props.isVisible ? '178px' : 0)}
|
||||||
|
transition: all 0.25s ease-in-out;
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -92,7 +94,7 @@ export class WalletAddress extends PureComponent<Props, State> {
|
||||||
constructor(props: Props) {
|
constructor(props: Props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
this.state = { isVisible: props.isVisible };
|
this.state = { isVisible: Boolean(props.isVisible) };
|
||||||
}
|
}
|
||||||
|
|
||||||
show = () => this.setState(() => ({ isVisible: true }));
|
show = () => this.setState(() => ({ isVisible: true }));
|
||||||
|
@ -121,17 +123,20 @@ export class WalletAddress extends PureComponent<Props, State> {
|
||||||
isVisible={isVisible}
|
isVisible={isVisible}
|
||||||
/>
|
/>
|
||||||
</AddressWrapper>
|
</AddressWrapper>
|
||||||
<RevealsMain>
|
<RevealsMain isVisible={isVisible}>
|
||||||
<Transition
|
<Transition
|
||||||
native
|
native
|
||||||
items={isVisible}
|
items={isVisible}
|
||||||
enter={[{ height: 'auto' }]}
|
enter={[{
|
||||||
leave={{ height: 0 }}
|
height: 'auto',
|
||||||
|
opacity: 1,
|
||||||
|
}]}
|
||||||
|
leave={{ height: 0, opacity: 0 }}
|
||||||
from={{
|
from={{
|
||||||
// TODO: fix this
|
position: 'absolute',
|
||||||
// position: 'absolute',
|
overflow: 'hidden',
|
||||||
// overflow: 'hidden',
|
opacity: 0,
|
||||||
// height: 0,
|
height: 0,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{show => show && (props => (
|
{show => show && (props => (
|
||||||
|
|
|
@ -97,10 +97,7 @@ export class ReceiveView extends PureComponent<Props, State> {
|
||||||
alignItems='center'
|
alignItems='center'
|
||||||
justifyContent='space-between'
|
justifyContent='space-between'
|
||||||
>
|
>
|
||||||
<WalletAddress
|
<WalletAddress address={address} />
|
||||||
address={address}
|
|
||||||
isVisible
|
|
||||||
/>
|
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
<ShowMoreButton
|
<ShowMoreButton
|
||||||
|
@ -127,17 +124,14 @@ export class ReceiveView extends PureComponent<Props, State> {
|
||||||
<Transition
|
<Transition
|
||||||
native
|
native
|
||||||
items={showAdditionalOptions}
|
items={showAdditionalOptions}
|
||||||
leave={{ height: 0 }}
|
enter={[{ height: 'auto', opacity: 1 }]}
|
||||||
|
leave={{ height: 0, opacity: 0 }}
|
||||||
from={{
|
from={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
// TODO: fix this as we need the overflow but need the
|
overflow: 'hidden',
|
||||||
// overflow: 'hidden',
|
|
||||||
height: 0,
|
height: 0,
|
||||||
|
opacity: 0,
|
||||||
}}
|
}}
|
||||||
enter={[{
|
|
||||||
height: 'auto',
|
|
||||||
width: 'auto',
|
|
||||||
}]}
|
|
||||||
>
|
>
|
||||||
{show => show && (props => (
|
{show => show && (props => (
|
||||||
<animated.div style={props}>
|
<animated.div style={props}>
|
||||||
|
|
|
@ -258,7 +258,7 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
if (field === 'to') {
|
if (field === 'to') {
|
||||||
// eslint-disable-next-line max-len
|
// eslint-disable-next-line max-len
|
||||||
this.setState(() => ({ [field]: value }),
|
this.setState(() => ({ [field]: value }),
|
||||||
() => validateAddress({ address: value }) );
|
() => validateAddress({ address: value }));
|
||||||
} else {
|
} else {
|
||||||
this.setState(() => ({ [field]: value }));
|
this.setState(() => ({ [field]: value }));
|
||||||
}
|
}
|
||||||
|
@ -517,16 +517,18 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
<Transition
|
<Transition
|
||||||
native
|
native
|
||||||
items={showFee}
|
items={showFee}
|
||||||
leave={{ height: 0 }}
|
enter={[{
|
||||||
|
height: 'auto',
|
||||||
|
opacity: 1,
|
||||||
|
overflow: 'visible',
|
||||||
|
}]}
|
||||||
|
leave={{ height: 0, opacity: 0 }}
|
||||||
from={{
|
from={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
|
opacity: 0,
|
||||||
height: 0,
|
height: 0,
|
||||||
}}
|
}}
|
||||||
enter={[{
|
|
||||||
height: 'auto',
|
|
||||||
width: 'auto',
|
|
||||||
}]}
|
|
||||||
>
|
>
|
||||||
{show => show && (props => (
|
{show => show && (props => (
|
||||||
<animated.div style={props}>
|
<animated.div style={props}>
|
||||||
|
|
|
@ -53,7 +53,7 @@ const createWindow = () => {
|
||||||
|
|
||||||
mainWindow = new BrowserWindow({
|
mainWindow = new BrowserWindow({
|
||||||
width: 1000,
|
width: 1000,
|
||||||
height: 600,
|
height: 660,
|
||||||
transparent: false,
|
transparent: false,
|
||||||
frame: true,
|
frame: true,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
|
|
Loading…
Reference in New Issue