delete dialog

src/components/panels/EditorDialog.jsx

@@ -3,11 +3,15 @@ import { MODES } from '$constants/modes';
 
 import { RouterHelper } from '$components/router/RouterHelper';
 import { StickersHelper } from '$components/stickers/StickersHelper';
+import { TrashHelper } from '$components/trash/TrashHelper';
 
-export const EditorDialog = ({ mode, routerPoints, editor, activeSticker }) => {
+export const EditorDialog = ({
+  mode, routerPoints, editor, activeSticker
+}) => {
   const showDialog = (
     mode === MODES.ROUTER
     || (mode === MODES.STICKERS && !activeSticker)
+    || mode === MODES.TRASH
   );
 
   return (
@@ -15,6 +19,7 @@ export const EditorDialog = ({ mode, routerPoints, editor, activeSticker }) => {
       <div id="control-dialog">
         { mode === MODES.ROUTER && <RouterHelper routerPoints={routerPoints} editor={editor} /> }
         { mode === MODES.STICKERS && <StickersHelper editor={editor} /> }
+        { mode === MODES.TRASH && <TrashHelper editor={editor} /> }
       </div>
   );
 };

src/components/panels/EditorPanel.jsx

@@ -16,7 +16,7 @@ export class EditorPanel extends React.PureComponent {
 
   startShotterMode = () => this.props.editor.changeMode(MODES.SHOTTER);
 
-  clearAll = () => this.props.editor.clearAll();
+  startTrashMode = () =>  this.props.editor.changeMode(MODES.TRASH);
 
   render() {
     const {
@@ -92,7 +92,7 @@ export class EditorPanel extends React.PureComponent {
 
             <button
               className={classnames({ active: mode === MODES.TRASH })}
-              onClick={this.clearAll}
+              onClick={this.startTrashMode}
             >
               <Icon icon="icon-trash" />
             </button>

src/components/router/RouterHelper.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
 const noPoints = ({ cancelDrawing }) => (
-  <div className="router-helper">
+  <div className="helper router-helper">
-    <div className="router-helper__text">
+    <div className="helper__text">
       <div className="big white">Укажите на карте первую точку маршрута</div>
       <div className="small gray">Путь прокладывается по улицам, тротуарам и тропинкам</div>
     </div>
-    <div className="router-helper__buttons">
+    <div className="helper__buttons">
       <div className="button router-helper__button" onClick={cancelDrawing}>
         Отмена
       </div>
@@ -15,12 +15,12 @@ const noPoints = ({ cancelDrawing }) => (
 );
 
 const firstPoint = ({ cancelDrawing }) => (
-  <div className="router-helper">
+  <div className="helper router-helper">
-    <div className="router-helper__text">
+    <div className="helper__text">
       <div className="big white">Укажите на карте конечную точку маршрута</div>
       <div className="small gray"> Вы сможете добавить уточняющие точки</div>
     </div>
-    <div className="router-helper__buttons">
+    <div className="helper__buttons">
       <div className="button router-helper__button" onClick={cancelDrawing}>
         Отмена
       </div>
@@ -29,12 +29,12 @@ const firstPoint = ({ cancelDrawing }) => (
 );
 
 const draggablePoints = ({ cancelDrawing, submitDrawing }) => (
-  <div className="router-helper">
+  <div className="helper router-helper">
-    <div className="router-helper__text">
+    <div className="helper__text">
       <div className="big white">Продолжите маршрут, щелкая по карте</div>
       <div className="small gray">Потяните линию, чтобы указать промежуточные точки</div>
     </div>
-    <div className="router-helper__buttons button-group">
+    <div className="helper__buttons button-group">
       <div className="button button_red router-helper__button" onClick={cancelDrawing}>
         Отмена
       </div>

src/components/stickers/StickersHelper.jsx

@@ -6,7 +6,7 @@ import sprite from '$sprites/stickers.svg';
 export class StickersHelper extends React.Component {
   render() {
     return (
-      <div className="stickers-helper">
+      <div className="helper stickers-helper">
         {
           stickers.map(sticker => (
             <div className="sticker-preview" key={sticker}>

src/components/trash/TrashHelper.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { MODES } from '$constants/modes';
+
+export class TrashHelper extends React.Component {
+  clearPoly = () => {
+    this.props.editor.poly.clearAll();
+    this.props.editor.changeMode(MODES.NONE);
+  };
+
+  clearStickers = () => {
+    this.props.editor.stickers.clearAll();
+    this.props.editor.changeMode(MODES.NONE);
+  };
+
+  clearAll = () => {
+    this.props.editor.clearAll();
+  };
+
+  cancel = () => {
+    this.props.editor.changeMode(MODES.NONE);
+  };
+
+  render() {
+    return (
+      <div className="helper trash-helper">
+        <div className="helper__text">
+          <div className="big white">Уверены?</div>
+          <div className="small gray">Мы все удалим</div>
+        </div>
+        <div className="helper__buttons button-group">
+          <div className="button router-helper__button" onClick={this.clearStickers}>
+            Стикеры
+          </div>
+          <div className="button router-helper__button" onClick={this.clearPoly}>
+            Маршрут
+          </div>
+          <div className="button danger router-helper__button" onClick={this.clearAll}>
+            Очистить
+          </div>
+          <div className="button primary router-helper__button" onClick={this.cancel}>
+            Отмена
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/styles/button.less

@@ -10,6 +10,7 @@
   align-items: center;
   cursor: pointer;
   user-select: none;
+  box-shadow: inset rgba(100,100,100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
 
   &.primary {
     background: #3c78db;

src/styles/panel.less

@@ -113,3 +113,21 @@
   padding-bottom: 48px;
   box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px;
 }
+
+.helper {
+  width: 500px;
+  padding: 10px;
+  font-weight: 200;
+  font-size: 14px;
+  display: flex;
+}
+
+
+.helper__text {
+  width: 100%;
+}
+
+.helper__buttons {
+  display: flex;
+  align-items: center;
+}

src/styles/router.less

@@ -19,18 +19,4 @@
 }
 
 .router-helper {
-  width: 500px;
-  padding: 10px;
-  font-weight: 200;
-  font-size: 14px;
-  display: flex;
-}
-
-.router-helper__text {
-  width: 100%;
-}
-
-.router-helper__buttons {
-  display: flex;
-  align-items: center;
 }

src/styles/stickers.less

@@ -101,8 +101,6 @@
 }
 
 .stickers-helper {
-  width: 500px;
-  padding: 10px;
 }
 
 .sticker-preview {