Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-09-21 15:56:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(popover): Unmount any fixed popover that's already rendered

Browse source 
- Fix input styles for fixed popover
This commit is contained in:
Juan Tejada 2016-02-24 16:21:19 -08:00
parent 1cd9fcf535
commit a2311ce631
2 changed files with 39 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/flux/stores/popover-store.jsx
View file

@ -20,15 +20,23 @@ class PopoverStore extends NylasStore {
this.container = createContainer(containerId);
React.render(<FixedPopover showing={false} />, this.container);
this.listenTo(Actions.openPopover, this.onOpenPopover);
this.listenTo(Actions.closePopover, this.onClosePopover);
this.listenTo(Actions.openPopover, this.openPopover);
this.listenTo(Actions.closePopover, this.closePopover);
}
isPopoverOpen = ()=> {
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 = (
<FixedPopover
showing
@ -36,19 +44,20 @@ class PopoverStore extends NylasStore {
direction={direction}>
{element}
</FixedPopover>
)
React.render(popover, this.container, ()=> {
this.isOpen = true;
this.trigger();
})
);
if (this.isOpen) {
this.closePopover(()=> {
this.renderPopover(popover, true, callback);
})
} else {
this.renderPopover(popover, true, callback);
}
};
onClosePopover = ()=> {
closePopover = (callback = ()=>{})=> {
const popover = <FixedPopover showing={false} />;
React.render(popover, this.container, ()=> {
this.isOpen = false;
this.trigger();
})
this.renderPopover(popover, false, callback);
};
}

17
static/components/fixed-popover.less
View file

@ -14,6 +14,23 @@
background-color: @background-primary;
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);
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 {