From 44458c2b8ca87b43ead88a2d0c61fbb0603ae415 Mon Sep 17 00:00:00 2001 From: infiinte-persistence Date: Sun, 31 Jan 2021 22:05:05 +0800 Subject: [PATCH] Fix 5438: Keep floating player in view area ## Issue 5438: Keep floating player in view area ## Changes - Restore correct z-index - The bug came as a side effect of cbac2174. Redo cbac2174 to cover both close button and floating player. - Remove wobbling when dragging to bottom-right. - The extra gap introduced is fighting against react-draggable. If gaps are needed, handle it entire ourselves or do it somewhere in react-draggable; neither is worth the effort, so the gap was removed. --- ui/component/fileRenderFloating/view.jsx | 5 ++--- ui/scss/component/_content.scss | 1 + 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx index 3ce142df2..5783c6783 100644 --- a/ui/component/fileRenderFloating/view.jsx +++ b/ui/component/fileRenderFloating/view.jsx @@ -89,17 +89,16 @@ export default function FileRenderFloating(props: Props) { } function clampToScreen(pos) { - const GAP_PX = 10; const ESTIMATED_SCROLL_BAR_PX = 50; const FLOATING_PLAYER_CLASS = 'content__viewer--floating'; const fpPlayerElem = document.querySelector(`.${FLOATING_PLAYER_CLASS}`); if (fpPlayerElem) { if (pos.x + fpPlayerElem.getBoundingClientRect().width > getScreenWidth() - ESTIMATED_SCROLL_BAR_PX) { - pos.x = getScreenWidth() - fpPlayerElem.getBoundingClientRect().width - ESTIMATED_SCROLL_BAR_PX - GAP_PX; + pos.x = getScreenWidth() - fpPlayerElem.getBoundingClientRect().width - ESTIMATED_SCROLL_BAR_PX; } if (pos.y + fpPlayerElem.getBoundingClientRect().height > getScreenHeight()) { - pos.y = getScreenHeight() - fpPlayerElem.getBoundingClientRect().height - GAP_PX * 2; + pos.y = getScreenHeight() - fpPlayerElem.getBoundingClientRect().height; } } } diff --git a/ui/scss/component/_content.scss b/ui/scss/component/_content.scss index 1fd65cfab..cb96c5351 100644 --- a/ui/scss/component/_content.scss +++ b/ui/scss/component/_content.scss @@ -15,6 +15,7 @@ height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height)); overflow: hidden; left: calc(var(--spacing-l) + var(--spacing-s)); + z-index: 9999; &:hover { .content__floating-close {