added notifications for hidden markers

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(