From cb3fabaf7477dcecd831f70040be29fda9b6e5de Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Fri, 24 Aug 2018 17:48:42 +0700
Subject: [PATCH] delete dialog

---
 src/components/panels/EditorDialog.jsx     |  7 +++-
 src/components/panels/EditorPanel.jsx      |  4 +-
 src/components/router/RouterHelper.jsx     | 18 ++++----
 src/components/stickers/StickersHelper.jsx |  2 +-
 src/components/trash/TrashHelper.jsx       | 48 ++++++++++++++++++++++
 src/styles/button.less                     |  1 +
 src/styles/panel.less                      | 18 ++++++++
 src/styles/router.less                     | 14 -------
 src/styles/stickers.less                   |  2 -
 9 files changed, 85 insertions(+), 29 deletions(-)
 create mode 100644 src/components/trash/TrashHelper.jsx

diff --git a/src/components/panels/EditorDialog.jsx b/src/components/panels/EditorDialog.jsx
index 16726be..d9a1aeb 100644
--- a/src/components/panels/EditorDialog.jsx
+++ b/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>
   );
 };
diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx
index 77dc92f..b0f2d45 100644
--- a/src/components/panels/EditorPanel.jsx
+++ b/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>
diff --git a/src/components/router/RouterHelper.jsx b/src/components/router/RouterHelper.jsx
index 1ea49c0..80578f7 100644
--- a/src/components/router/RouterHelper.jsx
+++ b/src/components/router/RouterHelper.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
 const noPoints = ({ cancelDrawing }) => (
-  <div className="router-helper">
-    <div className="router-helper__text">
+  <div className="helper router-helper">
+    <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="router-helper__text">
+  <div className="helper router-helper">
+    <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="router-helper__text">
+  <div className="helper router-helper">
+    <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>
diff --git a/src/components/stickers/StickersHelper.jsx b/src/components/stickers/StickersHelper.jsx
index e6be5d7..26a5b5e 100644
--- a/src/components/stickers/StickersHelper.jsx
+++ b/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}>
diff --git a/src/components/trash/TrashHelper.jsx b/src/components/trash/TrashHelper.jsx
new file mode 100644
index 0000000..0d3592d
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/styles/button.less b/src/styles/button.less
index eb4153a..86883f8 100644
--- a/src/styles/button.less
+++ b/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;
diff --git a/src/styles/panel.less b/src/styles/panel.less
index 10ae681..2230bde 100644
--- a/src/styles/panel.less
+++ b/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;
+}
diff --git a/src/styles/router.less b/src/styles/router.less
index 41ff47e..db82cdc 100644
--- a/src/styles/router.less
+++ b/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;
 }
diff --git a/src/styles/stickers.less b/src/styles/stickers.less
index 5b11554..457adbf 100644
--- a/src/styles/stickers.less
+++ b/src/styles/stickers.less
@@ -101,8 +101,6 @@
 }
 
 .stickers-helper {
-  width: 500px;
-  padding: 10px;
 }
 
 .sticker-preview {