diff --git a/package-lock.json b/package-lock.json index 28b9b04..98bde73 100644 --- a/package-lock.json +++ b/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=", - "optional": true + "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" }, "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", diff --git a/package.json b/package.json index 75a3377..dbe9025 100644 --- a/package.json +++ b/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" }, diff --git a/src/components/Scroll.jsx b/src/components/Scroll.jsx new file mode 100644 index 0000000..704a72b --- /dev/null +++ b/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 =>
} +
} + renderTrackVertical={prop =>
} + renderThumbHorizontal={prop =>
} + renderThumbVertical={prop =>
} + {...props} + > + {props.children} + +); diff --git a/src/components/dialogs/MapListDialog.jsx b/src/components/dialogs/MapListDialog.jsx index 345275c..89cde18 100644 --- a/src/components/dialogs/MapListDialog.jsx +++ b/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) => ( -
- { - routes_sorted.map(id => ( - - )) - } -
+ +
+ { + routes_sorted.map(id => ( + + )) + } +
+ ); 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); diff --git a/src/styles/colors.less b/src/styles/colors.less index da1b740..ee53887 100644 --- a/src/styles/colors.less +++ b/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; diff --git a/src/styles/dialogs.less b/src/styles/dialogs.less index 7a639c6..a8a77af 100644 --- a/src/styles/dialogs.less +++ b/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; diff --git a/src/styles/main.less b/src/styles/main.less index 17bc296..0758343 100644 --- a/src/styles/main.less +++ b/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); + } +}