dialogs: scrollbars

package-lock.json

@@ -1111,6 +1111,11 @@
         }
       }
     },
+    "add-px-to-style": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/add-px-to-style/-/add-px-to-style-1.0.0.tgz",
+      "integrity": "sha1-0ME1RB+oAUqBN5BFMQlvZ/KPJjo="
+    },
     "ajv": {
       "version": "5.5.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
@@ -3704,6 +3709,11 @@
         }
       }
     },
+    "computed-style": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/computed-style/-/computed-style-0.1.4.tgz",
+      "integrity": "sha1-fzRP2FhLLkJb7cpKGvwOMAuwXXQ="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3721,6 +3731,29 @@
         "typedarray": "^0.0.6"
       }
     },
+    "config": {
+      "version": "1.31.0",
+      "resolved": "https://registry.npmjs.org/config/-/config-1.31.0.tgz",
+      "integrity": "sha512-Ep/l9Rd1J9IPueztJfpbOqVzuKHQh4ZODMNt9xqTYdBBNRXbV4oTu34kCkkfdRVcDq0ohtpaeXGgb+c0LQxFRA==",
+      "requires": {
+        "json5": "^1.0.1"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "http://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+        }
+      }
+    },
     "connect-history-api-fallback": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz",
@@ -4112,11 +4145,6 @@
         "assert-plus": "^1.0.0"
       }
     },
-    "date-fns": {
-      "version": "2.0.0-alpha.25",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.0.0-alpha.25.tgz",
-      "integrity": "sha512-iQzJkHF0L4wah9Ae9PkvwemwFz6qmRLuNZcghmvf2t+ptLs1qXzONLiGtjmPQzL6+JpC01JjlTopY2AEy4NFAg=="
-    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
@@ -4395,6 +4423,16 @@
         }
       }
     },
+    "dom-css": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/dom-css/-/dom-css-2.1.0.tgz",
+      "integrity": "sha1-/bwtWgFdCj4YcuEUcrvQ57nmogI=",
+      "requires": {
+        "add-px-to-style": "1.0.0",
+        "prefix-style": "2.0.1",
+        "to-camel-case": "1.0.0"
+      }
+    },
     "dom-serializer": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
@@ -8247,6 +8285,14 @@
         "type-check": "~0.3.2"
       }
     },
+    "line-height": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/line-height/-/line-height-0.1.1.tgz",
+      "integrity": "sha1-6GcF+/Cm9QYHrtZVANadstnbN+I=",
+      "requires": {
+        "computed-style": "~0.1.3"
+      }
+    },
     "listr": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/listr/-/listr-0.14.1.tgz",
@@ -10100,8 +10146,7 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
-      "optional": true
     },
     "pify": {
       "version": "3.0.0",
@@ -10686,6 +10731,11 @@
         "uniqs": "^2.0.0"
       }
     },
+    "prefix-style": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/prefix-style/-/prefix-style-2.0.1.tgz",
+      "integrity": "sha1-ZrupqHDP2jCKXcIOhekSCTLJWgY="
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -11069,6 +11119,14 @@
       "integrity": "sha512-eTPo5t/4bgaMNZxyjWx6N2a6AuE0mq51KWvpc7nU/MAqixcI6v6KrGUKES0HaomdnolQBBXU/++X6/QQ9KL4tw==",
       "dev": true
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "raleway-cyrillic": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/raleway-cyrillic/-/raleway-cyrillic-4.0.2.tgz",
@@ -11186,6 +11244,23 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-motion": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
+      "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
+      "requires": {
+        "performance-now": "^0.2.0",
+        "prop-types": "^15.5.8",
+        "raf": "^3.1.0"
+      },
+      "dependencies": {
+        "performance-now": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+          "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
+        }
+      }
+    },
     "react-redux": {
       "version": "5.0.7",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz",
@@ -11236,6 +11311,16 @@
         }
       }
     },
+    "react-scrollbar": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/react-scrollbar/-/react-scrollbar-0.5.4.tgz",
+      "integrity": "sha512-6t9ztrXipoJJcdS7qXOOXfdnuN16Y862Sy5m0vSDFG8hwmiaJ7JDSkRW4VGaYfgnIcYi7HGvCn/mimDz6uVgXQ==",
+      "requires": {
+        "config": "^1.24.0",
+        "line-height": "^0.1.1",
+        "react-motion": "^0.5.2"
+      }
+    },
     "read-chunk": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-2.1.0.tgz",
@@ -12798,12 +12883,25 @@
       "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=",
       "dev": true
     },
+    "to-camel-case": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-camel-case/-/to-camel-case-1.0.0.tgz",
+      "integrity": "sha1-GlYFSy+daWKYzmamCJcyK29CPkY=",
+      "requires": {
+        "to-space-case": "^1.0.0"
+      }
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
       "dev": true
     },
+    "to-no-case": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/to-no-case/-/to-no-case-1.0.2.tgz",
+      "integrity": "sha1-xyKQcWTvaxeBMsjmmTAhLRtKoWo="
+    },
     "to-object-path": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
@@ -12846,6 +12944,14 @@
         "repeat-string": "^1.6.1"
       }
     },
+    "to-space-case": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-space-case/-/to-space-case-1.0.0.tgz",
+      "integrity": "sha1-sFLar7Gysp3HcM6gFj5ewOvJ/Bc=",
+      "requires": {
+        "to-no-case": "^1.0.0"
+      }
+    },
     "token-stream": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-0.0.1.tgz",
@@ -12885,6 +12991,16 @@
       "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==",
       "dev": true
     },
+    "tt-react-custom-scrollbars": {
+      "version": "4.2.1-tt2",
+      "resolved": "https://registry.npmjs.org/tt-react-custom-scrollbars/-/tt-react-custom-scrollbars-4.2.1-tt2.tgz",
+      "integrity": "sha512-gMEVHHOClNJXM1d/p4PrLdXtCU2JzWRtcZdzUkXgck8sgzkxwFwSDNc3scnTk21sSKG2GSgf7G54sboXwsMVlg==",
+      "requires": {
+        "dom-css": "^2.0.0",
+        "prop-types": "^15.5.10",
+        "raf": "^3.1.0"
+      }
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",

package.json

@@ -56,7 +56,6 @@
     "clean-webpack-plugin": "^0.1.9",
     "cookie-parser": "~1.4.3",
     "croppr": "^2.3.1",
-    "date-fns": "^2.0.0-alpha.25",
     "debug": "~2.6.9",
     "express": "~4.16.0",
     "file-saver": "^2.0.0",
@@ -80,6 +79,7 @@
     "react-hot-loader": "^4.1.1",
     "react-redux": "^5.0.7",
     "react-router": "^4.3.1",
+    "react-scrollbar": "^0.5.4",
     "redux": "^4.0.1",
     "redux-persist": "^5.10.0",
     "redux-saga": "^0.16.2",
@@ -87,6 +87,7 @@
     "scrypt": "^6.0.3",
     "styled-components": "^3.2.6",
     "styled-theming": "^2.2.0",
+    "tt-react-custom-scrollbars": "^4.2.1-tt2",
     "typeface-pt-sans": "0.0.54",
     "webpack-git-hash": "^1.0.2"
   },

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">
+  <Scroll
-    {
+    className="dialog-content"
-      routes_sorted.map(id => (
+  >
-        <RouteRow
+    <div className="dialog-maplist">
-          editing={editing}
+      {
-          {...routes[id]}
+          routes_sorted.map(id => (
-          key={id}
+            <RouteRow
-        />
+              editing={editing}
-      ))
+              {...routes[id]}
-    }
+              key={id}
-  </div>
+            />
+          ))
+        }
+    </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)(Component);
-
-export const MapListDialog = connect(mapStateToProps, mapDispatchToProps)(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;
+@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 2px 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;

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);
+  }
+}