From ded45a53f376e9e05349869b38715535fd81fbd1 Mon Sep 17 00:00:00 2001 From: Qstick Date: Mon, 21 Nov 2022 19:45:19 -0600 Subject: [PATCH] Improve page scrollbar Fixed: Scrolling in Firefox in small window (requires refresh) New: Style scrollbar in Firefox Fixed: Scrolling with click and drag Fixes #3088 Fixes #2706 --- .../src/Components/Form/EnhancedSelectInput.js | 2 +- frontend/src/Components/Modal/Modal.js | 2 +- frontend/src/Components/Page/PageContentBody.js | 17 ++--------------- frontend/src/Components/Swipe/SwipeHeader.js | 2 +- frontend/src/Components/Tooltip/Tooltip.js | 2 +- frontend/src/Styles/Mixins/scroller.css | 3 +++ .../src/Utilities/{mobile.js => browser.js} | 4 ++++ 7 files changed, 13 insertions(+), 19 deletions(-) rename frontend/src/Utilities/{mobile.js => browser.js} (69%) diff --git a/frontend/src/Components/Form/EnhancedSelectInput.js b/frontend/src/Components/Form/EnhancedSelectInput.js index 8de415dba..ccfdb80dd 100644 --- a/frontend/src/Components/Form/EnhancedSelectInput.js +++ b/frontend/src/Components/Form/EnhancedSelectInput.js @@ -12,9 +12,9 @@ import ModalBody from 'Components/Modal/ModalBody'; import Portal from 'Components/Portal'; import Scroller from 'Components/Scroller/Scroller'; import { icons, scrollDirections, sizes } from 'Helpers/Props'; +import { isMobile as isMobileUtil } from 'Utilities/browser'; import * as keyCodes from 'Utilities/Constants/keyCodes'; import getUniqueElememtId from 'Utilities/getUniqueElementId'; -import { isMobile as isMobileUtil } from 'Utilities/mobile'; import HintedSelectInputOption from './HintedSelectInputOption'; import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue'; import TextInput from './TextInput'; diff --git a/frontend/src/Components/Modal/Modal.js b/frontend/src/Components/Modal/Modal.js index 0ba1690ff..22472ee0e 100644 --- a/frontend/src/Components/Modal/Modal.js +++ b/frontend/src/Components/Modal/Modal.js @@ -6,9 +6,9 @@ import ReactDOM from 'react-dom'; import FocusLock from 'react-focus-lock'; import ErrorBoundary from 'Components/Error/ErrorBoundary'; import { sizes } from 'Helpers/Props'; +import { isIOS } from 'Utilities/browser'; import * as keyCodes from 'Utilities/Constants/keyCodes'; import getUniqueElememtId from 'Utilities/getUniqueElementId'; -import { isIOS } from 'Utilities/mobile'; import { setScrollLock } from 'Utilities/scrollLock'; import ModalError from './ModalError'; import styles from './Modal.css'; diff --git a/frontend/src/Components/Page/PageContentBody.js b/frontend/src/Components/Page/PageContentBody.js index 5e238ae79..217431124 100644 --- a/frontend/src/Components/Page/PageContentBody.js +++ b/frontend/src/Components/Page/PageContentBody.js @@ -1,23 +1,12 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import OverlayScroller from 'Components/Scroller/OverlayScroller'; import Scroller from 'Components/Scroller/Scroller'; import { scrollDirections } from 'Helpers/Props'; -import { isMobile as isMobileUtil } from 'Utilities/mobile'; import { isLocked } from 'Utilities/scrollLock'; import styles from './PageContentBody.css'; class PageContentBody extends Component { - // - // Lifecycle - - constructor(props, context) { - super(props, context); - - this._isMobile = isMobileUtil(); - } - // // Listeners @@ -41,10 +30,8 @@ class PageContentBody extends Component { ...otherProps } = this.props; - const ScrollerComponent = this._isMobile ? Scroller : OverlayScroller; - return ( - {children} - + ); } } diff --git a/frontend/src/Components/Swipe/SwipeHeader.js b/frontend/src/Components/Swipe/SwipeHeader.js index 6b378783f..04419efd9 100644 --- a/frontend/src/Components/Swipe/SwipeHeader.js +++ b/frontend/src/Components/Swipe/SwipeHeader.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import Measure from 'Components/Measure'; -import { isMobile as isMobileUtil } from 'Utilities/mobile'; +import { isMobile as isMobileUtil } from 'Utilities/browser'; import styles from './SwipeHeader.css'; function cursorPosition(event) { diff --git a/frontend/src/Components/Tooltip/Tooltip.js b/frontend/src/Components/Tooltip/Tooltip.js index 461e96cce..cbe80ce04 100644 --- a/frontend/src/Components/Tooltip/Tooltip.js +++ b/frontend/src/Components/Tooltip/Tooltip.js @@ -5,7 +5,7 @@ import { Manager, Popper, Reference } from 'react-popper'; import Portal from 'Components/Portal'; import { kinds, tooltipPositions } from 'Helpers/Props'; import dimensions from 'Styles/Variables/dimensions'; -import { isMobile as isMobileUtil } from 'Utilities/mobile'; +import { isMobile as isMobileUtil } from 'Utilities/browser'; import styles from './Tooltip.css'; let maxWidth = null; diff --git a/frontend/src/Styles/Mixins/scroller.css b/frontend/src/Styles/Mixins/scroller.css index 7a296c27f..4edb462d7 100644 --- a/frontend/src/Styles/Mixins/scroller.css +++ b/frontend/src/Styles/Mixins/scroller.css @@ -1,4 +1,7 @@ @define-mixin scrollbar { + scrollbar-color: var(--scrollbarBackgroundColor) transparent; + scrollbar-width: thin; + &::-webkit-scrollbar { width: 10px; height: 10px; diff --git a/frontend/src/Utilities/mobile.js b/frontend/src/Utilities/browser.js similarity index 69% rename from frontend/src/Utilities/mobile.js rename to frontend/src/Utilities/browser.js index e52975963..ff896e801 100644 --- a/frontend/src/Utilities/mobile.js +++ b/frontend/src/Utilities/browser.js @@ -10,3 +10,7 @@ export function isMobile() { export function isIOS() { return mobileDetect.is('iOS'); } + +export function isFirefox() { + return window.navigator.userAgent.toLowerCase().indexOf('firefox/') >= 0; +}