icons and toolbars

src/components/panels/EditorPanel.jsx

@@ -46,15 +46,15 @@ export class EditorPanel extends React.PureComponent {
 
         <LogoPreview logo={logo} />
 
-        <div className={classnames('panel right', { active: editing })}>
-          <div className="control-dist">
-            {totalDistance} км
-            <Icon icon="icon-cycle" size={32} />
-            {
-              <span>{toHours(estimateTime)}</span>
-            }
-          </div>
+        <div className="control-dist">
+          {totalDistance} км
+          <Icon icon="icon-cycle" size={32} />
+          {
+            <span>{toHours(estimateTime)}</span>
+          }
+        </div>
 
+        <div className={classnames('panel right', { active: editing })}>
           <div className="control-bar">
             <button
               className={classnames({ active: mode === MODES.ROUTER })}
@@ -125,8 +125,8 @@ export class EditorPanel extends React.PureComponent {
 
         <div className={classnames('panel right', { active: !editing })}>
           <div className="control-bar">
-            <button className="success single" onClick={this.startEditing}>
-              <Icon icon="icon-router" />
+            <button className="primary single" onClick={this.startEditing}>
+              <Icon icon="icon-route-2" />
               <span>
                 РЕДАКТИРОВАТЬ
               </span>

src/modules/Editor.js

@@ -200,7 +200,8 @@ export class Editor {
     const { path } = getUrlData();
     pushPath(`/${path}/edit`);
 
-    this.poly.poly.enableEdit();
+    if (this.poly.latlngs && this.poly.latlngs.length > 1) this.poly.poly.enableEdit();
+
     this.stickers.startEditing();
     this.setEditing(true);
   };

src/styles/map.less

@@ -64,9 +64,9 @@
   width: 32px;
   height: 32px;
   position: fixed;
-  top: 80px;
+  top: 10px;
   left: 10px;
-  border-radius: 2px;
+  border-radius: 2px 0 0 2px;
   z-index: 3;
   box-shadow: @bar_shadow;
   cursor: pointer;
@@ -110,3 +110,7 @@
     position: absolute;
   }
 }
+
+.leaflet-top {
+  top: 42px;
+}

src/styles/panel.less

@@ -6,16 +6,20 @@
 }
 
 .control-dist {
-  height: 44px;
   background: #222222;
   padding: 0 10px;
   display: flex;
   align-items: center;
-  border-radius: 3px 0 0 3px;
   font-weight: 200;
   color: #cccccc;
   user-select: none;
   box-shadow: @bar_shadow;
+  position: fixed;
+  top: 10px;
+  left: 42px;
+  z-index: 2;
+  height: 32px;
+  border-radius: 0 3px 3px 0;
 
   svg {
     fill: #cccccc;
@@ -101,7 +105,7 @@
       background-size: 100% 100%;
     }
 
-    &.success {
+    &.danger {
       background: linear-gradient(150deg, @red_primary, @red_secondary) 50% 50% no-repeat;
       background-size: 100% 100%;
     }