dialogs: scrollbars

src/components/Scroll.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Scrollbars } from 'tt-react-custom-scrollbars';
+
+export const Scroll = props => (
+  // renderTrackVertical={props => <div {...props} className="track-vertical"/>}
+  <Scrollbars
+    renderTrackHorizontal={prop => <div {...prop} className="track-horizontal" />}
+    renderTrackVertical={prop => <div {...prop} className="track-vertical" />}
+    renderThumbHorizontal={prop => <div {...prop} className="thumb-horizontal" />}
+    renderThumbVertical={prop => <div {...prop} className="thumb-vertical" />}
+    {...props}
+  >
+    {props.children}
+  </Scrollbars>
+);

src/components/dialogs/MapListDialog.jsx

@@ -1,10 +1,10 @@
 // @flow
 import React from 'react';
-import { bindActionCreators } from 'redux';
+// import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { RouteRow } from '$components/maps/RouteRow';
 import type { Route } from '$constants/types';
-import { compareDesc } from 'date-fns';
+import { Scroll } from '$components/Scroll';
 
 type Props = {
   routes: { [id: String]: Route },
@@ -13,27 +13,29 @@ type Props = {
 };
 
 const Component = ({ routes, editing, routes_sorted }: Props) => (
-  <div className="dialog-content dialog-maplist">
-    {
-      routes_sorted.map(id => (
-        <RouteRow
-          editing={editing}
-          {...routes[id]}
-          key={id}
-        />
-      ))
-    }
-  </div>
+  <Scroll
+    className="dialog-content"
+  >
+    <div className="dialog-maplist">
+      {
+          routes_sorted.map(id => (
+            <RouteRow
+              editing={editing}
+              {...routes[id]}
+              key={id}
+            />
+          ))
+        }
+    </div>
+  </Scroll>
 );
 
 const mapStateToProps = ({ user: { editing, user: { routes } } }) => ({
   routes,
   editing,
-  routes_sorted: Object.keys(routes).sort((a, b) => compareDesc(routes[a].updated_at, routes[b].updated_at)),
+  routes_sorted: Object.keys(routes).sort((a, b) => (Date.parse(routes[b].updated_at) - Date.parse(routes[a].updated_at))),
 });
 
-const mapDispatchToProps = dispatch => bindActionCreators({
+// const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
 
-}, dispatch);
-
-export const MapListDialog = connect(mapStateToProps, mapDispatchToProps)(Component);
+export const MapListDialog = connect(mapStateToProps)(Component);

src/styles/colors.less

@@ -21,7 +21,5 @@
 @color_success: #7cd766;
 @color_danger: #ff3344;
 
-// @bar_shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px;
-// @dialog_shadow: rgba(0,0,0,0.3) 2px 0 0;
-@dialog_shadow: rgba(0,0,0,0.3) 0 0 0 2px;
-@bar_shadow: rgba(0,0,0,0.3) 0 0 0 2px, inset rgba(255, 255, 255, 0.05) 1px 1px;
+@bar_shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px;
+@dialog_shadow: rgba(0,0,0,0.3) 0 2px 0;

src/styles/dialogs.less

@@ -32,6 +32,19 @@
   border-radius: @panel_radius;
   box-shadow: @dialog_shadow;
 
+  &::before {
+    content: ' ';
+    height: 40px;
+    width: 100%;
+    left: 0;
+    top: 0;
+    // background: linear-gradient(0deg, rgba(2, 13, 43, 1) 50%, rgba(2,13,43,0));
+    // background: linear-gradient(0deg, rgba(34, 34, 34, 1) 50%, rgba(34, 34, 34, 0));
+    background: linear-gradient(180deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0));
+    position: absolute;
+    z-index: 5;
+  }
+
   &::after {
     content: ' ';
     height: 40px;

src/styles/main.less

@@ -69,3 +69,34 @@ body {
     fill: @blue_secondary;
   }
 }
+
+.track-vertical {
+  position: absolute;
+  right: 0;
+  height: 100%;
+  width: 10px !important;
+}
+
+.thumb-vertical {
+  position: absolute;
+  width: 20px !important;
+  left: -10px;
+  border-radius: 4px 0 0 4px;
+  transition: background 250ms;
+  cursor: grab;
+
+  &:hover, &:active {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  &::after {
+    content: ' ';
+    width: 7px;
+    height: 100%;
+    display: block;
+    right: 0;
+    position: absolute;
+    border-radius: 4px 0 0 4px;
+    background: rgba(255, 255, 255, 0.5);
+  }
+}