mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-21 15:56:10 +08:00
fix(popover): Unmount any fixed popover that's already rendered
- Fix input styles for fixed popover
This commit is contained in:
parent
1cd9fcf535
commit
a2311ce631
|
@ -20,15 +20,23 @@ class PopoverStore extends NylasStore {
|
||||||
this.container = createContainer(containerId);
|
this.container = createContainer(containerId);
|
||||||
React.render(<FixedPopover showing={false} />, this.container);
|
React.render(<FixedPopover showing={false} />, this.container);
|
||||||
|
|
||||||
this.listenTo(Actions.openPopover, this.onOpenPopover);
|
this.listenTo(Actions.openPopover, this.openPopover);
|
||||||
this.listenTo(Actions.closePopover, this.onClosePopover);
|
this.listenTo(Actions.closePopover, this.closePopover);
|
||||||
}
|
}
|
||||||
|
|
||||||
isPopoverOpen = ()=> {
|
isPopoverOpen = ()=> {
|
||||||
return this.isOpen;
|
return this.isOpen;
|
||||||
};
|
};
|
||||||
|
|
||||||
onOpenPopover = (element, originRect, direction)=> {
|
renderPopover = (popover, isOpen, callback)=> {
|
||||||
|
React.render(popover, this.container, ()=> {
|
||||||
|
this.isOpen = isOpen;
|
||||||
|
this.trigger();
|
||||||
|
callback()
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
openPopover = (element, originRect, direction, callback = ()=> {})=> {
|
||||||
const popover = (
|
const popover = (
|
||||||
<FixedPopover
|
<FixedPopover
|
||||||
showing
|
showing
|
||||||
|
@ -36,19 +44,20 @@ class PopoverStore extends NylasStore {
|
||||||
direction={direction}>
|
direction={direction}>
|
||||||
{element}
|
{element}
|
||||||
</FixedPopover>
|
</FixedPopover>
|
||||||
)
|
);
|
||||||
React.render(popover, this.container, ()=> {
|
|
||||||
this.isOpen = true;
|
if (this.isOpen) {
|
||||||
this.trigger();
|
this.closePopover(()=> {
|
||||||
})
|
this.renderPopover(popover, true, callback);
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.renderPopover(popover, true, callback);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
onClosePopover = ()=> {
|
closePopover = (callback = ()=>{})=> {
|
||||||
const popover = <FixedPopover showing={false} />;
|
const popover = <FixedPopover showing={false} />;
|
||||||
React.render(popover, this.container, ()=> {
|
this.renderPopover(popover, false, callback);
|
||||||
this.isOpen = false;
|
|
||||||
this.trigger();
|
|
||||||
})
|
|
||||||
};
|
};
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,6 +14,23 @@
|
||||||
background-color: @background-primary;
|
background-color: @background-primary;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 -0.5px 0 rgba(0, 0, 0, 0.15), 0.5px 0 0 rgba(0, 0, 0, 0.15), -0.5px 0 0 rgba(0, 0, 0, 0.15), 0 4px 7px rgba(0,0,0,0.15);
|
box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 -0.5px 0 rgba(0, 0, 0, 0.15), 0.5px 0 0 rgba(0, 0, 0, 0.15), -0.5px 0 0 rgba(0, 0, 0, 0.15), 0 4px 7px rgba(0,0,0,0.15);
|
||||||
|
|
||||||
|
input[type=text] {
|
||||||
|
border: 1px solid darken(@background-secondary, 10%);
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: @background-primary;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(0,0,0,0.05), 0 1px 0 rgba(0,0,0,0.05);
|
||||||
|
color: @text-color;
|
||||||
|
|
||||||
|
&.search {
|
||||||
|
padding-left: 0;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url("../static/images/search/searchloupe@2x.png");
|
||||||
|
background-size: 15px 15px;
|
||||||
|
background-position: 7px 4px;
|
||||||
|
text-indent: 31px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed-popover-pointer,.fixed-popover-pointer.shadow {
|
.fixed-popover-pointer,.fixed-popover-pointer.shadow {
|
||||||
|
|
Loading…
Reference in a new issue