diff --git a/src/components/dialogs/MapListDialog.jsx b/src/components/dialogs/MapListDialog.jsx index 36047cc..4596e86 100644 --- a/src/components/dialogs/MapListDialog.jsx +++ b/src/components/dialogs/MapListDialog.jsx @@ -122,9 +122,7 @@ class Component extends React.Component { value={title} onChange={this.setTitle} /> -
- { ready ? diff --git a/src/components/panels/TopRightPanel.jsx b/src/components/panels/TopRightPanel.jsx index 3c9a852..83952ac 100644 --- a/src/components/panels/TopRightPanel.jsx +++ b/src/components/panels/TopRightPanel.jsx @@ -10,21 +10,31 @@ import { MODES } from '$constants/modes'; type Props = { provider: string, logo: string, + markers_shown: boolean, + editing: boolean, startProviderMode: Function, startLogoMode: Function, + clearMode: Function, }; const Component = ({ - provider, logo, startProviderMode, startLogoMode + provider, logo, startProviderMode, startLogoMode, clearMode, editing, markers_shown, }: Props) => (
-
+ { + editing && !markers_shown && +
+ +
Приблизьте, чтобы редактировать кривую
+
+ } +
{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}
-
+
{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'} @@ -34,15 +44,20 @@ const Component = ({ function mapStateToProps(state) { const { - user: { provider, logo }, + user: { + provider, logo, markers_shown, editing + }, } = state; - return { provider, logo }; + return { + provider, logo, markers_shown, editing + }; } const mapDispatchToProps = dispatch => ({ startProviderMode: () => dispatch(setMode(MODES.PROVIDER)), startLogoMode: () => dispatch(setMode(MODES.LOGO)), + clearMode: () => dispatch(setMode(MODES.NONE)), }); export const TopRightPanel = connect( diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 65cddd9..918f1b7 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -15,7 +15,7 @@ import { setAddress, setChanged, setDistance, - setLogo, + setLogo, setMarkersShown, setMode, setPublic, setRouterPoints, @@ -115,6 +115,10 @@ export class Editor { setAddress = value => store.dispatch(setAddress(value)); setPublic = value => store.dispatch(setPublic(value)); + setMarkersShown = value => { + if (store.getState().user.markers_shown !== value) store.dispatch(setMarkersShown(value)); + }; + resetSaveDialog = () => store.dispatch(resetSaveDialog()); setDistance = value => { diff --git a/src/modules/NewPoly.js b/src/modules/NewPoly.js index 9d13602..ee5777e 100644 --- a/src/modules/NewPoly.js +++ b/src/modules/NewPoly.js @@ -20,7 +20,7 @@ export class NewPoly { this.poly = L.Polyline.PolylineEditor(coordinates, { ...polyStyle, - maxMarkers: 50, + maxMarkers: 100, onPointsSet: this.updateMarks, onMarkerDragEnd: this.updateMarks, @@ -28,8 +28,8 @@ export class NewPoly { onPointDropped: this.updateMarks, onContinueDrawing: this.setModeOnDrawing, - onMarkersHide: () => console.log('all markers are hidden'), - onMarkersShow: () => console.log('all markers are visible'), + onMarkersHide: () => editor.setMarkersShown(false), + onMarkersShow: () => editor.setMarkersShown(true), }).addTo(map); this.poly.addTo(map); diff --git a/src/redux/user/actions.js b/src/redux/user/actions.js index 8f46f2a..537b498 100644 --- a/src/redux/user/actions.js +++ b/src/redux/user/actions.js @@ -60,3 +60,5 @@ export const searchSetLoading = loading => ({ type: ACTIONS.SEARCH_SET_LOADING, export const searchPutRoutes = payload => ({ type: ACTIONS.SEARCH_PUT_ROUTES, ...payload }); +export const setMarkersShown = markers_shown => ({ type: ACTIONS.SET_MARKERS_SHOWN, markers_shown }); + diff --git a/src/redux/user/constants.js b/src/redux/user/constants.js index 75553ec..835d78e 100644 --- a/src/redux/user/constants.js +++ b/src/redux/user/constants.js @@ -63,4 +63,6 @@ export const ACTIONS = ({ OPEN_MAP_DIALOG: 'OPEN_MAP_DIALOG', SET_SPEED: 'SET_SPEED', + + SET_MARKERS_SHOWN: 'SET_MARKERS_SHOWN', }: { [key: String]: String }); diff --git a/src/redux/user/reducer.js b/src/redux/user/reducer.js index 63be2ee..abee429 100644 --- a/src/redux/user/reducer.js +++ b/src/redux/user/reducer.js @@ -159,6 +159,8 @@ const setSpeed = (state, { speed = 15 }) => ({ estimated: getEstimated(state.distance, speed), }); +const setMarkersShown = (state, { markers_shown = true }) => ({ ...state, markers_shown }); + const HANDLERS = ({ [ACTIONS.SET_USER]: setUser, [ACTIONS.SET_EDITING]: setEditing, @@ -195,6 +197,8 @@ const HANDLERS = ({ [ACTIONS.SEARCH_SET_LOADING]: searchSetLoading, [ACTIONS.SET_PUBLIC]: setPublic, [ACTIONS.SET_SPEED]: setSpeed, + + [ACTIONS.SET_MARKERS_SHOWN]: setMarkersShown, }: { [key: String]: Function }); export const INITIAL_STATE = { @@ -214,6 +218,7 @@ export const INITIAL_STATE = { changed: false, provider: DEFAULT_PROVIDER, is_public: false, + markers_shown: true, save_error: '', save_finished: false, diff --git a/src/sprites/icon.svg b/src/sprites/icon.svg index 6e38daa..c1f9ef0 100644 --- a/src/sprites/icon.svg +++ b/src/sprites/icon.svg @@ -364,6 +364,11 @@ + + + + + diff --git a/src/styles/dialogs.less b/src/styles/dialogs.less index 3217deb..d1b0f18 100644 --- a/src/styles/dialogs.less +++ b/src/styles/dialogs.less @@ -232,10 +232,12 @@ transform-origin: 0 0; padding: 0 5px; box-sizing: border-box; - display: flex; + // display: flex; align-items: center; fill: white; + display: none; + & > div { display: flex; align-items: center; diff --git a/src/styles/panel.less b/src/styles/panel.less index 4f3c1b0..28059ed 100644 --- a/src/styles/panel.less +++ b/src/styles/panel.less @@ -457,6 +457,8 @@ align-items: center; justify-content: center; box-shadow: @bar_shadow; + outline: none; + position: relative; @media (max-width: @mobile_breakpoint) { box-shadow: none; @@ -479,8 +481,21 @@ padding: 0 10px; } + &.warning { + background-color: shade(@red_secondary, 10%); + + svg { + //fill: @red_secondary; + fill: black; + } + } + + &.icon-only { + padding: 0 10px 0 15px; + } + &.top-control { - width: 150px; + //width: 150px; justify-content: flex-start; @media (max-width: @mobile_breakpoint) { @@ -492,12 +507,32 @@ fill: #cccccc; margin-left: -5px; } + + &:hover { + .status-bar-tip { + opacity: 1; + } + } +} + +.status-bar-tip { + position: absolute; + background: @bar_background; + top: 100%; + padding: 10px; + margin-top: 10px; + right: 0; + border-radius: @panel_radius; + touch-action: none; + pointer-events: none; + opacity: 0; + transition: opacity 250ms; } .status-bar-sep { height: 24px; width: 1px; - background: #444444; + background: rgba(255, 255, 255, 0.2); margin: 0 8px 0 5px; } diff --git a/src/styles/stickers.less b/src/styles/stickers.less index fdf82e7..0353be4 100644 --- a/src/styles/stickers.less +++ b/src/styles/stickers.less @@ -1,3 +1,7 @@ +.leaflet-dragging .sticker-container { + transition: none !important; +} + .sticker-container { outline: none; position: relative; diff --git a/src/utils/EditablePolyline.js b/src/utils/EditablePolyline.js index f21dfb0..fc56ec1 100644 --- a/src/utils/EditablePolyline.js +++ b/src/utils/EditablePolyline.js @@ -244,9 +244,7 @@ L.Polyline.polylineEditor = L.Polyline.extend({ * bounds. */ this._showBoundMarkers = () => { - if (!this._map) { - return; - } + if (!this._map) return; this._setBusy(false); @@ -266,9 +264,9 @@ L.Polyline.polylineEditor = L.Polyline.extend({ } if (found < that._options.maxMarkers) { - // console.log('shown'); // todo: onHide + if (this._options.onMarkersShow) this._options.onMarkersShow(); } else { - // console.log('hidden'); // todo: onShow + if (this._options.onMarkersHide) this._options.onMarkersHide(); } // todo: optimise this