switching between modes :-)

src/components/panels/EditorPanel.jsx

@@ -23,9 +23,13 @@ export class EditorPanel extends React.PureComponent {
 
   startSaveMode = () => this.props.editor.changeMode(MODES.SAVE);
 
+  stopEditing = () => this.props.editor.stopEditing();
+
+  startEditing = () => this.props.editor.startEditing();
+
   render() {
     const {
-      mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, user
+      mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, user, editing,
     } = this.props;
 
     return (
@@ -42,7 +46,7 @@ export class EditorPanel extends React.PureComponent {
 
         <LogoPreview logo={logo} />
 
-        <div className="panel right">
+        <div className={classnames('panel right', { active: editing })}>
           <div className="control-dist">
             {totalDistance} км
             <Icon icon="icon-cycle" size={32} />
@@ -96,9 +100,20 @@ export class EditorPanel extends React.PureComponent {
             >
               <Icon icon="icon-logo" />
             </button>
+          </div>
 
+          <div className="control-sep" />
+
+          <div className="control-bar">
             <button
               className="highlighted"
+              onClick={this.stopEditing}
+            >
+              <span>ОТМЕНА</span>
+            </button>
+
+            <button
+              className="primary"
               onClick={this.startSaveMode}
             >
               <span>СХОРОНИТЬ</span>
@@ -107,6 +122,17 @@ export class EditorPanel extends React.PureComponent {
           </div>
 
         </div>
+
+        <div className={classnames('panel right', { active: !editing })}>
+          <div className="control-bar">
+            <button className="success" onClick={this.startEditing}>
+              <Icon icon="icon-router" />
+              <span>
+                РЕДАКТОРОВАТЬ
+              </span>
+            </button>
+          </div>
+        </div>
       </div>
     );
   }

src/components/panels/UserPanel.jsx

@@ -62,7 +62,7 @@ export class UserPanel extends React.PureComponent {
 
     return (
       <div>
-        <div className="panel">
+        <div className="panel active">
           <div className="user-panel">
             {
               !user || user.role === ROLES.guest
@@ -74,26 +74,6 @@ export class UserPanel extends React.PureComponent {
               <UserMenu user={user} userLogout={userLogout} />
             }
           </div>
-
-          <div className="control-sep" />
-
-          <div className="control-bar">
-            {
-              editing
-              ?
-                <button>
-                  <span>
-                    РЕДАКТОР
-                  </span>
-                </button>
-              : <button>
-                  <span>
-                    ПРОСМОТР
-                  </span>
-                </button>
-            }
-
-          </div>
         </div>
       </div>
     );

src/containers/App.jsx

@@ -175,7 +175,6 @@ export class App extends React.Component {
 
         <UserPanel
           editor={editor}
-          editing={editing}
           user={user}
           setUser={this.setUser}
           userLogout={this.userLogout}
@@ -190,6 +189,7 @@ export class App extends React.Component {
           activeSticker={activeSticker}
           logo={logo}
           user={user}
+          editing={editing}
         />
       </div>
     );

src/styles/panel.less

@@ -3,6 +3,8 @@
   border-radius: 3px;
   display: flex;
   box-shadow: @bar_shadow;
+
+
 }
 
 .control-dist {
@@ -36,6 +38,12 @@
   color: white;
   display: flex;
   align-items: center;
+  transform: translateY(100px);
+  transition: transform 500ms;
+
+  &.active {
+    transform: translateY(0);
+  }
 
   &.right {
     left: auto;
@@ -66,6 +74,10 @@
       margin-left: 8px;
     }
 
+    &:first-child {
+      border-radius: 4px 0 0 4px;
+    }
+
     &:last-child {
       border-radius: 0 4px 4px 0;
     }
@@ -78,10 +90,19 @@
     }
 
     &.highlighted {
+      background: #555555;
+    }
+
+    &.primary {
       background: linear-gradient(150deg, @blue_primary, @blue_secondary) 50% 50% no-repeat;
       background-size: 100% 100%;
     }
 
+    &.success {
+      background: linear-gradient(150deg, @green_primary, @green_secondary) 50% 50% no-repeat;
+      background-size: 100% 100%;
+    }
+
     svg {
       fill: white;
       stroke: white;