added notifications for hidden markers

src/components/dialogs/MapListDialog.jsx

@@ -122,9 +122,7 @@ class Component extends React.Component<Props, State> {
               value={title}
               onChange={this.setTitle}
             />
-
             <br />
-
             {
               ready
                 ?

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) => (
   <div className="status-panel top right">
-    <div className="status-bar pointer top-control padded" onClick={startProviderMode}>
+    {
+      editing && !markers_shown &&
+      <div className="status-bar pointer top-control padded warning icon-only">
+        <Icon icon="icon-eye-1" size={24} />
+        <div className="status-bar-tip">Приблизьте, чтобы редактировать кривую</div>
+      </div>
+    }
+    <div className="status-bar pointer top-control padded" onFocus={startProviderMode} onBlur={clearMode} tabIndex={-1}>
       <Icon icon="icon-map-1" size={24} />
       <div className="status-bar-sep" />
       <span>{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}</span>
     </div>
 
-    <div className="status-bar pointer top-control padded" onClick={startLogoMode}>
+    <div className="status-bar pointer top-control padded" onFocus={startLogoMode} onBlur={clearMode} tabIndex={-1}>
       <Icon icon="icon-logo-3" size={24} />
       <div className="status-bar-sep" />
       <span>{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'}</span>
@@ -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(

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 => {

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

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

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

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,

src/sprites/icon.svg

@@ -364,6 +364,11 @@
                 <path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)"/>
             </g>
 
+            <g id="icon-eye-1" stroke="none">
+                <path stroke="none" fill="black"/>
+                <path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)"/>
+            </g>
+
             <g id="icon-sad-1" stroke="none">
                 <path stroke="none" fill="black"/>
                 <g transform="translate(4 4)">

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;

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

src/styles/stickers.less

@@ -1,3 +1,7 @@
+.leaflet-dragging .sticker-container {
+  transition: none !important;
+}
+
 .sticker-container {
   outline: none;
   position: relative;

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