Show glow on ship-panel overflow

poooi · Mar 2, 2018 · abdd7d1 · abdd7d1
1 parent 639b5dc
commit abdd7d1
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 13 deletions.
diff --git a/views/components/etc/assets/scroll-shadow.css b/views/components/etc/assets/scroll-shadow.css
@@ -0,0 +1,17 @@
+.scroll-shadow {
+  transition: 0.35s;
+}
+
+.scroll-shadow.scroll-shadow-top {
+  box-shadow: inset 0 18px 15px -20px #217dbb;
+}
+
+.scroll-shadow.scroll-shadow-bottom {
+  box-shadow: inset 0 -18px 15px -20px #217dbb;
+}
+
+.scroll-shadow.scroll-shadow-top.scroll-shadow-bottom {
+  box-shadow:
+    inset 0 18px 15px -20px #217dbb,
+    inset 0 -18px 15px -20px #217dbb;
+}
diff --git a/views/components/etc/scroll-shadow.es b/views/components/etc/scroll-shadow.es
@@ -0,0 +1,61 @@
+import React, { PureComponent } from 'react'
+import classnames from 'classnames'
+import { observer, observe } from 'redux-observers'
+import { get } from 'lodash'
+import { store } from 'views/create-store'
+
+import './assets/scroll-shadow.css'
+
+export class ScrollShadow extends PureComponent {
+  state = {
+    top: true,
+    bottom: true,
+  }
+
+  onScroll = e => {
+    const { scrollTop, clientHeight, scrollHeight  } = this.r
+    const scrollBottom = scrollHeight - clientHeight - scrollTop
+    let { state } = this
+    const top = scrollTop < 5
+    const bottom = scrollBottom < 5
+    if (top !== state.top) {
+      state = {
+        ...state,
+        top,
+      }
+    }
+    if (bottom !== state.bottom) {
+      state = {
+        ...state,
+        bottom,
+      }
+    }
+    this.setState(state)
+  }
+
+  componentDidMount = e => {
+    this.onScroll()
+    const sizeObserver = new observer(
+      state => get(state, this.props.observerPath),
+      this.onScroll,
+    )
+    this.unobserve = observe(store, [ sizeObserver ])
+  }
+
+  componentWillUnmount = e => {
+    this.unobserve()
+  }
+
+  render () {
+    const { children, className } = this.props
+    const scrollClassName = classnames(className, 'scroll-shadow', {
+      'scroll-shadow-top': !this.state.top,
+      'scroll-shadow-bottom': !this.state.bottom,
+    })
+    return (
+      <div ref={r => this.r = r} className={scrollClassName} onScroll={this.onScroll}>
+        { children }
+      </div>
+    )
+  }
+}
diff --git a/views/components/main/parts/minishippane.es b/views/components/main/parts/minishippane.es
@@ -6,6 +6,7 @@ import { Alert } from 'react-bootstrap'
 import { translate } from 'react-i18next'
 
 import { TopAlert } from 'views/components/ship-parts/topalert'
+import { ScrollShadow } from 'views/components/etc/scroll-shadow'
 import {
   fleetShipsIdSelectorFactory,
 } from 'views/utils/selectors'
@@ -26,7 +27,7 @@ export const PaneBodyMini = connect(() => {
         isMini={true}
       />
     </div>
-    <div className={"ship-details-mini"}>
+    <ScrollShadow className="ship-details-mini" observerPath="layout.minishippane">
       {
         (shipsId || []).map((shipId, i) =>
           <MiniShipRow
@@ -37,15 +38,15 @@ export const PaneBodyMini = connect(() => {
           />
         )
       }
-    </div>
+    </ScrollShadow>
   </>
 )
 
 export const LBViewMini = translate(['resources'])(connect(state => ({
   areaIds: get(state, 'info.airbase', []).map(a => a.api_area_id),
   mapareas: get(state, 'const.$mapareas', {}),
 }))(({ areaIds, mapareas, t }) => (
-  <div className="ship-details-mini">
+  <ScrollShadow className="ship-details-mini" observerPath="layout.minishippane">
     {
       areaIds.map((id, i) => (
         mapareas[id] != null && (
@@ -66,5 +67,5 @@ export const LBViewMini = translate(['resources'])(connect(state => ({
         )
       ))
     }
-  </div>
+  </ScrollShadow>
 )))
diff --git a/views/components/ship/assets/ship-item.css b/views/components/ship/assets/ship-item.css
@@ -10,10 +10,6 @@
   white-space: nowrap;
 }
 
-.ShipView .ship-item:last-child {
-  margin-bottom: 7px;
-}
-
 .ShipView .ship-avatar-container {
   position: absolute;
   top: 9px;

diff --git a/views/components/ship/assets/ship.css b/views/components/ship/assets/ship.css
@@ -94,7 +94,7 @@
 }
 
 .ShipView .ship-details {
-  height: calc(100% - 25px);
+  height: calc(100% - 31px);
   overflow: scroll;
 }
 

diff --git a/views/components/ship/index.es b/views/components/ship/index.es
@@ -10,6 +10,7 @@ import { translate, Trans } from 'react-i18next'
 
 const { dispatch } = window
 
+import { ScrollShadow } from 'views/components/etc/scroll-shadow'
 import { ShipRow } from './shipitem'
 import { SquardRow } from './lbac-view'
 import { LandbaseButton } from '../ship-parts/landbase-button'
@@ -83,7 +84,7 @@ const FleetShipView = connect(
         isMini={false}
       />
     </div>
-    <div className="ship-details">
+    <ScrollShadow className="ship-details" observerPath="layout.shippane">
       {
         (shipsId || []).map((shipId, i) =>
           <ShipRow
@@ -94,15 +95,15 @@ const FleetShipView = connect(
           />
         )
       }
-    </div>
+    </ScrollShadow>
   </>
 )
 
 const LBView = translate(['resources'])(connect(state => ({
   areaIds: get(state, 'info.airbase', []).map(a => a.api_area_id),
   mapareas: get(state, 'const.$mapareas', {}),
 }))(({areaIds, mapareas, t}) => (
-  <div className="ship-details">
+  <ScrollShadow className="ship-details" observerPath="layout.shippane">
     {
       areaIds.map((id, i) => (
         mapareas[id] != null && (
@@ -123,7 +124,7 @@ const LBView = translate(['resources'])(connect(state => ({
         )
       ))
     }
-  </div>
+  </ScrollShadow>
 )))