Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-09-09 22:24:27 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix(fixed-popover): Reposition when overflowing on left direction

Browse source 
- This is a temporary solution
This commit is contained in:
Juan Tejada 2016-02-24 15:01:44 -08:00
parent 9ad088f899
commit 9c2a05ba3f
2 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
internal_packages/thread-snooze/lib/quick-action-snooze-button.jsx
View file

@ -25,10 +25,10 @@ class QuickActionSnoozeButton extends Component {
// Grab the parent node because of the zoom applied to this button. If we
// took this element directly, we'd have to divide everything by 2
const element = React.findDOMNode(this).parentNode;
const {height, width, top, left} = element.getBoundingClientRect()
const {height, width, top, bottom, left, right} = element.getBoundingClientRect()
// The parent node is a bit too much to the left, lets adjust this.
const rect = {height, width, top, left: left + 5}
const rect = {height, width, top, bottom, right, left: left + 5}
Actions.openPopover(
<SnoozePopoverBody threads={[thread]}/>,
rect,

28
src/components/fixed-popover.jsx
View file

@ -2,6 +2,11 @@ import _ from 'underscore';
import React, {Component, PropTypes} from 'react';
// TODO
// This is a temporary hack for the snooze popover
// This should be the actual dimensions of the rendered popover body
const OVERFLOW_LIMIT = 50;
/**
* Renders a popover absultely positioned in the window next to the provided
* rect.
@ -69,12 +74,8 @@ class FixedPopover extends Component {
}
};
_getNewDirection = (direction, originRect, windowDimensions)=> {
// TODO
// This is a temporary solution for the snooze popover.
// This should grab the actual dimensions of the rendered popover body
const limit = 50;
_getNewDirection = (direction, originRect, windowDimensions, limit = OVERFLOW_LIMIT)=> {
// TODO this is a hack. Implement proper repositioning
switch (direction) {
case 'right':
if (
@ -93,7 +94,6 @@ class FixedPopover extends Component {
}
break;
default:
// TODO implement missing
break;
}
return null;
@ -145,9 +145,19 @@ class FixedPopover extends Component {
top: originRect.top,
right: (windowDimensions.width - originRect.left) + 10,
}
// TODO This is a hack for the snooze popover. Fix this
let popoverTop = originRect.height / 2;
let popoverTransform = 'translate(-100%, -50%)';
if (originRect.top < OVERFLOW_LIMIT * 2) {
popoverTop = 0;
popoverTransform = 'translate(-100%, 0)';
} else if (windowDimensions.height - originRect.bottom < OVERFLOW_LIMIT * 2) {
popoverTop = -190;
popoverTransform = 'translate(-100%, 0)';
}
popoverStyle = {
transform: 'translate(-100%, -50%)',
top: originRect.height / 2,
transform: popoverTransform,
top: popoverTop,
}
pointerStyle = {
transform: 'translate(-13px, -50%) rotate(270deg)',