show fade edges for scrollable areas (closes #34)

Author: buzz

packages/client/src/components/FeedBox/Body/Tabs/index.js

@@ -4,13 +4,13 @@ import classNames from 'classnames'
 import Tabs, { TabPane } from 'rc-tabs'
 import TabContent from 'rc-tabs/lib/TabContent'
 import ScrollableTabBar from 'rc-tabs/lib/ScrollableTabBar'
-import Scrollbar from 'react-custom-scrollbars'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faExclamationTriangle, faSync } from '@fortawesome/free-solid-svg-icons'
 import 'rc-tabs/assets/index.css'
 
 import { feedBoxType, feedType } from 'newsdash/components/propTypes'
 import { FEED_STATUS } from 'newsdash/constants'
+import Scrollbar from 'newsdash/components/Scrollbar'
 import Feed from 'newsdash/components/Feed'
 import css from './Tabs.sss'
 
@@ -63,7 +63,7 @@ const FeedTabs = ({
             )
             return (
               <TabPane key={feed.id.toString()} tab={tabContent}>
-                <Scrollbar autoHide>
+                <Scrollbar bgColor={feedBox.colors.bg}>
                   <Feed feed={feed} />
                 </Scrollbar>
               </TabPane>

packages/client/src/components/FeedBox/Body/index.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useDispatch } from 'react-redux'
-import Scrollbar from 'react-custom-scrollbars'
 
 import { deleteFeedBox } from 'newsdash/store/actions/feedBox'
 import { feedBoxType } from 'newsdash/components/propTypes'
 import Feed from 'newsdash/components/Feed'
+import Scrollbar from 'newsdash/components/Scrollbar'
 import Edit from './Edit'
 import Tabs from './Tabs'
 import css from './Body.sss'
@@ -51,7 +51,7 @@ const Body = ({
 
   if (feeds.length === 1) {
     return (
-      <Scrollbar autoHide>
+      <Scrollbar bgColor={feedBox.colors.bg}>
         <Feed feed={feeds[0]} />
       </Scrollbar>
     )

packages/client/src/components/Scrollbar/Scrollbar.sss

@@ -0,0 +1,31 @@
+@import 'newsdash/style/common.sss'
+
+%fader
+  height: 30px
+  pointer-events: none
+  position: absolute
+  transition: opacity $transition-speed-fast ease-in
+  width: 100%
+  z-index: 1
+
+.scrollWrapper
+  position: relative
+  height: 100%
+  width: 100%
+
+  .track
+    $w: 8px
+    border-radius: calc($w / 2)
+    bottom: 2px
+    right: 2px
+    top: 2px
+    width: $w !important
+    z-index: 5
+
+  .faderTop
+    @extend %fader
+    top: 0
+
+  .faderBottom
+    @extend %fader
+    bottom: 0

packages/client/src/components/Scrollbar/index.js

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import ReactCustomScrollbars from 'react-custom-scrollbars'
+
+import css from './Scrollbar.sss'
+
+const getFaderStyle = (type, bgColor, top) => ({
+  background: `linear-gradient(to ${type}, transparent, ${bgColor} 90%)`,
+  opacity: (type === 'top' && top === 0.0)
+        || (type === 'bottom' && top === 1.0)
+    ? '0.0' : '1.0',
+})
+
+const Track = ({ style }) => <div className={css.track} style={style} />
+
+Track.propTypes = {
+  style: PropTypes.shape({
+    opacity: PropTypes.number.isRequired,
+    position: PropTypes.string.isRequired,
+    transition: PropTypes.string.isRequired,
+    width: PropTypes.number.isRequired,
+  }).isRequired,
+}
+
+const Scrollbar = ({ bgColor, children }) => {
+  const [top, setTop] = useState(0.0)
+
+  return (
+    <div className={css.scrollWrapper}>
+      <ReactCustomScrollbars
+        autoHide
+        onScrollFrame={({ top: newTop }) => setTop(newTop)}
+        renderTrackVertical={Track}
+      >
+        {children}
+      </ReactCustomScrollbars>
+      <div
+        className={css.faderTop}
+        style={getFaderStyle('top', bgColor, top)}
+      />
+      <div
+        className={css.faderBottom}
+        style={getFaderStyle('bottom', bgColor, top)}
+      />
+    </div>
+  )
+}
+
+Scrollbar.propTypes = {
+  bgColor: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+}
+
+export default Scrollbar

packages/client/src/style/common.sss

@@ -38,6 +38,7 @@ $padding-lg: 12px
 
 $tooltip-opacity: 0.95
 
+$transition-speed-fast: 100ms
 $transition-speed: 200ms
 
 %text-shadow

packages/client/src/style/index.sss

@@ -41,5 +41,8 @@ select
   background-color: grey !important
   border-radius: $border-radius
 
+:global(.react-resizable-handle)
+  z-index: 10
+
 :global(.lazyload):not([src])
   visibility: hidden