Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Popup border calculated more accurately

Browse source
This commit is contained in:
NikolaBorislavovHristov 2018-11-22 16:20:02 +02:00
parent c86793d7d7
commit 628ccf8499
2 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/common/Popup/Popup.js
View file

@ -24,9 +24,9 @@ class Popup extends Component {
}
componentDidMount() {
// window.addEventListener('blur', this.close);
// window.addEventListener('resize', this.close);
// window.addEventListener('keyup', this.onKeyUp);
window.addEventListener('blur', this.close);
window.addEventListener('resize', this.close);
window.addEventListener('keyup', this.onKeyUp);
}
componentWillUnmount() {
@ -105,24 +105,25 @@ class Popup extends Component {
}
if (!!this.props.borderColor) {
this.borderTopRef.current.style.backgroundColor = this.props.borderColor;
this.borderRightRef.current.style.backgroundColor = this.props.borderColor;
this.borderBottomRef.current.style.backgroundColor = this.props.borderColor;
this.borderLeftRef.current.style.backgroundColor = this.props.borderColor;
this.borderTopRef.current.style.borderTopColor = this.props.borderColor;
this.borderRightRef.current.style.borderRightColor = this.props.borderColor;
this.borderBottomRef.current.style.borderBottomColor = this.props.borderColor;
this.borderLeftRef.current.style.borderLeftColor = this.props.borderColor;
this.labelRef.current.style.border = `1px solid ${this.props.borderColor}`;
const borderWidth = 1 / window.devicePixelRatio;
if (menuDirections.top) {
this.labelRef.current.style.borderTop = 'none';
if (menuDirections.left) {
this.borderBottomRef.current.style.right = `${labelRect.width - 1}px`;
this.borderBottomRef.current.style.right = `${labelRect.width - borderWidth}px`;
} else {
this.borderBottomRef.current.style.left = `${labelRect.width - 1}px`;
this.borderBottomRef.current.style.left = `${labelRect.width - borderWidth}px`;
}
} else {
this.labelRef.current.style.borderBottom = 'none';
if (menuDirections.left) {
this.borderTopRef.current.style.right = `${labelRect.width - 1}px`;
this.borderTopRef.current.style.right = `${labelRect.width - borderWidth}px`;
} else {
this.borderTopRef.current.style.left = `${labelRect.width - 1}px`;
this.borderTopRef.current.style.left = `${labelRect.width - borderWidth}px`;
}
}
}

14
src/common/Popup/styles.less
View file

@ -8,34 +8,38 @@
.border {
position: absolute;
background-color: transparent;
border: 0 solid transparent;
&-top {
left: 0;
top: 0;
right: 0;
height: 1px;
height: 0;
border-top-width: 1px;
}
&-bottom {
left: 0;
bottom: 0;
right: 0;
height: 1px;
height: 0;
border-bottom-width: 1px;
}
&-left {
top: 0;
bottom: 0;
left: 0;
width: 1px;
width: 0;
border-left-width: 1px;
}
&-right {
top: 0;
bottom: 0;
right: 0;
width: 1px;
width: 0;
border-right-width: 1px;
}
}
}