appearance: much more fixes

src/components/panels/EditorDialog.jsx

@@ -46,9 +46,19 @@ export const Component = (props: Props) => {
     || mode === MODES.CONFIRM_CANCEL
   );
 
+  const dialogIsSmall = (
+    mode === MODES.LOGO
+  );
+
   return (
     showDialog &&
-      <div id="control-dialog" style={{ width }}>
+      <div
+        id="control-dialog"
+        style={{
+          width: dialogIsSmall ? 201 : width,
+          right: dialogIsSmall ? 217 : 10,
+        }}
+      >
         { mode === MODES.ROUTER && <RouterDialog {...props} /> }
         { mode === MODES.STICKERS && <StickersDialog {...props} /> }
         { mode === MODES.TRASH && <TrashDialog {...props} /> }

src/components/panels/EditorPanel.jsx

@@ -150,10 +150,10 @@ class Component extends React.PureComponent<Props, void> {
         <div className={classnames('panel right', { active: !editing })}>
           <div className="control-bar">
             <button
-              className={classnames({ active: mode === MODES.SHOTTER })}
+              className={classnames('disabled', { active: mode === MODES.SHOTTER })}
               onClick={this.startShotterMode}
             >
-              <Icon icon="icon-shot-2" />
+              <Icon icon="icon-shot-3" />
               <span>
                 СНИМОК
               </span>

src/components/panels/UserPanel.jsx

@@ -87,6 +87,18 @@ export class Component extends React.PureComponent<Props, void> {
               <UserMenu user={user} userLogout={this.props.userLogout} />
             }
           </div>
+
+          <div className="control-sep" />
+
+          <div className="control-bar">
+            <button
+              className="disabled"
+              // className={classnames({ active: mode === MODES.SHOTTER })}
+              // onClick={this.startShotterMode}
+            >
+              <Icon icon="icon-shot-3" />
+            </button>
+          </div>
         </div>
       </div>
     );

src/components/save/CancelDialog.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { MODES } from '$constants/modes';
 import { editor } from '$modules/Editor';
+import { Icon } from '$components/panels/Icon';
 
 type Props = {
   stopEditing: Function,
@@ -24,12 +25,12 @@ export class CancelDialog extends React.Component<Props, void> {
   render() {
     return (
       <div className="helper cancel-helper">
-        <div className="helper__text">
+        <div className="helper__text danger">
-          <div className="big white">Изменения не сохранены!</div>
+          <Icon icon="icon-cancel-1" />
-          <div className="small gray">Закрыть редактор?</div>
+          <div className="big upper">Закрыть редактор?</div>
         </div>
         <div className="helper__buttons">
-          <div className="button danger router-helper__button" onClick={this.cancel}>
+          <div className="button router-helper__button" onClick={this.cancel}>
             Удалить измения
           </div>
 

src/components/trash/TrashDialog.jsx

@@ -14,7 +14,7 @@ export const TrashDialog = ({
   <div className="helper trash-helper">
     <div className="helper__text danger">
       <Icon icon="icon-trash-4" />
-      <div className="big upper">Уверены?</div>
+      <div className="big upper">Удалить:</div>
     </div>
     <div className="helper__buttons">
       <div className="button-group">

src/modules/Editor.js

@@ -44,10 +44,12 @@ export class Editor {
 
     this.switches = {
       [MODES.POLY]: {
-        start: this.poly.continue,
+        start: this.startPoly,
         stop: this.poly.stop,
+        toggle: this.clearMode,
       },
       [MODES.ROUTER]: {
+        toggle: this.clearMode,
         start: this.routerSetStart,
       },
       [MODES.SHOTTER]: {
@@ -57,10 +59,14 @@ export class Editor {
         toggle: this.clearSticker,
       },
       [MODES.TRASH]: {
-        toggle: this.clearAll,
+        // toggle: this.clearAll,
+        toggle: this.clearMode,
       },
       [MODES.CONFIRM_CANCEL]: {
         toggle: this.cancelEditing,
+      },
+      [MODES.LOGO]: {
+        toggle: this.clearMode,
       }
     };
 
@@ -88,18 +94,26 @@ export class Editor {
   getTitle = () => store.getState().user.title;
   getEditing = () => store.getState().user.editing;
   getChanged = () => store.getState().user.changed;
+  getRouterPoints = () => store.getState().user.routerPoints;
 
   setMode = value => store.dispatch(setMode(value));
   setDistance = value => store.dispatch(setDistance(value));
   setChanged = value => store.dispatch(setChanged(value));
   setRouterPoints = value => store.dispatch(setRouterPoints(value));
   setActiveSticker = value => store.dispatch(setActiveSticker(value));
-  setLogo = value => store.dispatch(setLogo(value));
   setTitle = value => store.dispatch(setTitle(value));
   setAddress = value => store.dispatch(setAddress(value));
 
+  clearMode = () => this.setMode(MODES.NONE);
   clearChanged = () => store.dispatch(setChanged(false));
 
+  startPoly = () => {
+    console.log(this.getRouterPoints());
+    if (this.getRouterPoints()) this.router.clearAll();
+
+    this.poly.continue();
+  };
+
   triggerOnChange = () => {
     if (!this.getEditing() || this.getChanged()) return;
 

src/styles/button.less

@@ -3,7 +3,7 @@
   padding: 4px 16px;
   height: 18px;
   line-height: 1em;
-  border-radius: 2px;
+  border-radius: @button_radius;
   font-family: inherit;
   font-size: 1em;
   display: inline-flex;
@@ -38,11 +38,11 @@
     margin: 0;
 
     &:first-child {
-      border-radius: 4px 0 0 4px;
+      border-radius: @button_radius 0 0 @button_radius;
     }
 
     &:last-child {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0 @button_radius @button_radius 0;
     }
   }
 }

src/styles/colors.less

@@ -16,6 +16,7 @@
 @red_secondary: #ff3344;
 
 @panel_radius: 0;
+@button_radius: 0;
 
 @color_primary: #4597d0;
 @color_success: #7cd766;

src/styles/map.less

@@ -9,6 +9,10 @@
   cursor: crosshair;
 }
 
+.leaflet-touch .leaflet-bar a {
+ border-radius: @panel_radius !important;
+}
+
 .leaflet-vertex-icon, .leaflet-middle-icon {
   outline: none !important;
   border-radius: 10px;
@@ -66,7 +70,7 @@
   position: fixed;
   top: 10px;
   left: 10px;
-  border-radius: 2px 0 0 2px;
+  border-radius: @panel_radius 0 0 @panel_radius;
   z-index: 3;
   box-shadow: @bar_shadow;
   cursor: pointer;

src/styles/panel.less

@@ -149,7 +149,7 @@
   position: absolute;
   right: 10px;
   bottom: 68px;
-  border-radius: 3px;
+  border-radius: @panel_radius;
   z-index: 3;
   color: white;
   box-sizing: border-box;
@@ -215,7 +215,7 @@
 .logo-helper {
   width: 200px;
   flex-direction: column;
-  padding: 16px 0 0 0;
+  padding: 16px 0 16px 0;
   position: relative;
   overflow: hidden;
 }

src/styles/user-button.less

@@ -56,7 +56,7 @@
   font-size: 12px;
   opacity: 0.5;
   padding-top: 2px;
-  font-weight: 200;
+  font-weight: 500;
 }
 
 
@@ -66,12 +66,12 @@
 
 .user-panel-menu {
   position: absolute;
-  bottom: 45px;
+  bottom: 58px;
   left: 0;
-  width: 100%;
+  width: 219px;
   background: @dialog_background;
-  border-radius: 3px;
+  border-radius: @panel_radius;
-  padding: 0 0 3px 0;
+  padding: 0;
   box-sizing: border-box;
   z-index: -1
 }
@@ -88,7 +88,6 @@
   display: block;
   border-bottom: 1px solid rgba(255,255,255,0.1);
   text-decoration: none;
-  font-weight: 200;
 
   &:first-child::after {
     border-radius: 3px 3px 0 0;