mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 02:56:41 +07:00
dialogs: scrollbars
This commit is contained in:
muerwre
parent
78216ee94e
commit
b108b1abc9
7 changed files with 206 additions and 30 deletions
130
package-lock.json
generated
130
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
15
src/components/Scroll.jsx
Normal file
15
src/components/Scroll.jsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue