Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-29 01:28:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

borders dropped from popup

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-07 12:53:17 +03:00
parent 50aea4b8a9
commit 1c2b2c1911
2 changed files with 2 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,18 +11,9 @@ class Popup extends React.Component {
super(props);
this.labelRef = React.createRef();
this.labelBorderTopRef = React.createRef();
this.labelBorderRightRef = React.createRef();
this.labelBorderBottomRef = React.createRef();
this.labelBorderLeftRef = React.createRef();
this.menuContainerRef = React.createRef();
this.menuScrollRef = React.createRef();
this.menuChildrenRef = React.createRef();
this.menuBorderTopRef = React.createRef();
this.menuBorderRightRef = React.createRef();
this.menuBorderBottomRef = React.createRef();
this.menuBorderLeftRef = React.createRef();
this.hiddenBorderRef = React.createRef();
this.popupMutationObserver = this.createPopupMutationObserver();
this.state = {
@ -104,21 +95,11 @@ class Popup extends React.Component {
this.menuContainerRef.current.removeAttribute('style');
this.menuScrollRef.current.removeAttribute('style');
this.menuBorderTopRef.current.removeAttribute('style');
this.menuBorderRightRef.current.removeAttribute('style');
this.menuBorderBottomRef.current.removeAttribute('style');
this.menuBorderLeftRef.current.removeAttribute('style');
this.labelBorderTopRef.current.removeAttribute('style');
this.labelBorderRightRef.current.removeAttribute('style');
this.labelBorderBottomRef.current.removeAttribute('style');
this.labelBorderLeftRef.current.removeAttribute('style');
const menuDirections = {};
const documentRect = document.documentElement.getBoundingClientRect();
const labelRect = this.labelRef.current.getBoundingClientRect();
const menuChildredRect = this.menuChildrenRef.current.getBoundingClientRect();
const borderSize = parseFloat(window.getComputedStyle(this.hiddenBorderRef.current).getPropertyValue('border-top-width'));
const borderColor = window.getComputedStyle(this.hiddenBorderRef.current).getPropertyValue('--border-color');
const labelPosition = {
left: labelRect.x - documentRect.x,
top: labelRect.y - documentRect.y,
@ -162,45 +143,6 @@ class Popup extends React.Component {
menuDirections.left = true;
}
if (borderColor.length > 0) {
this.menuBorderTopRef.current.style.height = `${borderSize}px`;
this.menuBorderRightRef.current.style.width = `${borderSize}px`;
this.menuBorderBottomRef.current.style.height = `${borderSize}px`;
this.menuBorderLeftRef.current.style.width = `${borderSize}px`;
this.labelBorderTopRef.current.style.height = `${borderSize}px`;
this.labelBorderTopRef.current.style.top = `${labelPosition.top}px`;
this.labelBorderTopRef.current.style.right = `${labelPosition.right}px`;
this.labelBorderTopRef.current.style.left = `${labelPosition.left}px`;
this.labelBorderRightRef.current.style.width = `${borderSize}px`;
this.labelBorderRightRef.current.style.top = `${labelPosition.top}px`;
this.labelBorderRightRef.current.style.right = `${labelPosition.right}px`;
this.labelBorderRightRef.current.style.bottom = `${labelPosition.bottom}px`;
this.labelBorderBottomRef.current.style.height = `${borderSize}px`;
this.labelBorderBottomRef.current.style.right = `${labelPosition.right}px`;
this.labelBorderBottomRef.current.style.bottom = `${labelPosition.bottom}px`;
this.labelBorderBottomRef.current.style.left = `${labelPosition.left}px`;
this.labelBorderLeftRef.current.style.width = `${borderSize}px`;
this.labelBorderLeftRef.current.style.top = `${labelPosition.top}px`;
this.labelBorderLeftRef.current.style.bottom = `${labelPosition.bottom}px`;
this.labelBorderLeftRef.current.style.left = `${labelPosition.left}px`;
}
if (menuDirections.top) {
this.labelBorderTopRef.current.style.left = `${labelPosition.left + menuChildredRect.width}px`;
if (menuDirections.left) {
this.menuBorderBottomRef.current.style.right = `${labelRect.width - borderSize}px`;
} else {
this.menuBorderBottomRef.current.style.left = `${labelRect.width - borderSize}px`;
}
} else {
this.labelBorderBottomRef.current.style.left = `${labelPosition.left + menuChildredRect.width}px`;
if (menuDirections.left) {
this.menuBorderTopRef.current.style.right = `${labelRect.width - borderSize}px`;
} else {
this.menuBorderTopRef.current.style.left = `${labelRect.width - borderSize}px`;
}
}
this.menuContainerRef.current.style.visibility = 'visible';
}
@ -239,23 +181,14 @@ class Popup extends React.Component {
return React.cloneElement(menuElement, {},
<Modal>
<div className={classnames(styles['modal-container'], menuElement.props.className)} onClick={this.modalBackgroundOnClick}>
<div className={classnames(styles['popup-modal-layer'], menuElement.props.className)} onClick={this.modalBackgroundOnClick}>
<div ref={this.menuContainerRef} className={styles['menu-container']} onClick={this.menuContainerOnClick}>
<div ref={this.menuScrollRef} className={styles['menu-scroll-container']} tabIndex={menuElement.props.tabIndex}>
<div ref={this.menuChildrenRef} className={styles['menu-scroll-content']}>
{menuElement.props.children}
</div>
</div>
<div ref={this.menuBorderTopRef} className={classnames(styles['border'], styles['border-top'])} />
<div ref={this.menuBorderRightRef} className={classnames(styles['border'], styles['border-right'])} />
<div ref={this.menuBorderBottomRef} className={classnames(styles['border'], styles['border-bottom'])} />
<div ref={this.menuBorderLeftRef} className={classnames(styles['border'], styles['border-left'])} />
</div>
<div ref={this.labelBorderTopRef} className={classnames(styles['border'], styles['border-top'])} />
<div ref={this.labelBorderRightRef} className={classnames(styles['border'], styles['border-right'])} />
<div ref={this.labelBorderBottomRef} className={classnames(styles['border'], styles['border-bottom'])} />
<div ref={this.labelBorderLeftRef} className={classnames(styles['border'], styles['border-left'])} />
<div ref={this.hiddenBorderRef} className={classnames(styles['border'], styles['border-hidden'])} />
</div>
</Modal>
);

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

@ -1,4 +1,4 @@
.modal-container {
.popup-modal-layer {
width: 100%;
height: 100%;
@ -16,39 +16,4 @@
}
}
}
.border {
position: absolute;
pointer-events: none;
background-color: var(--border-color);
&-top {
top: 0;
right: 0;
left: 0;
}
&-bottom {
right: 0;
bottom: 0;
left: 0;
}
&-left {
top: 0;
bottom: 0;
left: 0;
}
&-right {
top: 0;
right: 0;
bottom: 0;
}
&-hidden {
display: none;
border: 1px solid;
}
}
}