redux: got rid of dialogs

src/components/panels/EditorDialog.jsx

@@ -29,11 +29,12 @@ import {
 type Props = {
   mode: String,
   activeSticker: String,
+  windth: Number,
 }
 
 export const Component = (props: Props) => {
   const {
-    mode, activeSticker,
+    mode, activeSticker, width
   } = props;
 
   const showDialog = (
@@ -47,7 +48,7 @@ export const Component = (props: Props) => {
 
   return (
     showDialog &&
-      <div id="control-dialog">
+      <div id="control-dialog" style={{ width }}>
         { mode === MODES.ROUTER && <RouterDialog {...props} /> }
         { mode === MODES.STICKERS && <StickersDialog {...props} /> }
         { mode === MODES.TRASH && <TrashDialog {...props} /> }

src/components/panels/EditorPanel.jsx

@@ -33,6 +33,17 @@ type Props = {
 }
 
 class Component extends React.PureComponent<Props, void> {
+  componentDidMount() {
+    const obj = document.getElementById('control-dialog');
+    const { width } = this.panel.getBoundingClientRect();
+
+    console.log(obj, this.panel);
+
+    if (!this.panel || !obj) return;
+
+    obj.style.width = width;
+  }
+
   startPolyMode = () => this.props.setMode(MODES.POLY);
   startStickerMode = () => this.props.setMode(MODES.STICKERS);
   startRouterMode = () => this.props.setMode(MODES.ROUTER);
@@ -40,45 +51,15 @@ class Component extends React.PureComponent<Props, void> {
   startTrashMode = () => this.props.setMode(MODES.TRASH);
   startLogoMode = () => this.props.setMode(MODES.LOGO);
   startSaveMode = () => this.props.setMode(MODES.SAVE);
-  // startPolyMode = () => this.props.editor.changeMode(MODES.POLY);
-  // startStickerMode = () => this.props.editor.changeMode(MODES.STICKERS);
-  // startRouterMode = () => this.props.editor.changeMode(MODES.ROUTER);
-  // startShotterMode = () => this.props.editor.changeMode(MODES.SHOTTER);
-  // startTrashMode = () =>  this.props.editor.changeMode(MODES.TRASH);
-  // startLogoMode = () => this.props.editor.changeMode(MODES.LOGO);
-  // startSaveMode = () => this.props.editor.changeMode(MODES.SAVE);
-
-  // stopEditing = () => {
-  //   if (!this.props.changed) {
-  //     editor.cancelEditing();
-  //   } else {
-  //     // editor.changeMode(MODES.CONFIRM_CANCEL);
-  //     this.props.setMode(MODES.CONFIRM_CANCEL);
-  //   }
-  // };
-
-  // startEditing = () => editor.startEditing();
 
   render() {
     const {
-      mode, routerPoints, distance, estimated, activeSticker, logo, user, editing, title, address, changed,
+      mode, routerPoints, distance, estimated, activeSticker, logo, user, editing, title, address,
     } = this.props;
 
     return (
       <div>
 
-        <EditorDialog
-          mode={mode}
-          routerPoints={routerPoints}
-          activeSticker={activeSticker}
-          editor={editor}
-          logo={logo}
-          user={user}
-          title={title}
-          address={address}
-          setLogo={this.props.setLogo}
-        />
-
         <LogoPreview logo={logo} />
 
         <div className="control-dist">
@@ -91,7 +72,7 @@ class Component extends React.PureComponent<Props, void> {
           }
         </div>
 
-        <div className={classnames('panel right', { active: editing })}>
+        <div className={classnames('panel right', { active: editing })} ref={el => { this.panel = el; }}>
           <div className="control-bar">
             <button
               className={classnames({ active: mode === MODES.ROUTER })}
@@ -161,6 +142,20 @@ class Component extends React.PureComponent<Props, void> {
         </div>
 
         <div className={classnames('panel right', { active: !editing })}>
+          <div className="control-bar">
+            <button
+              className={classnames({ active: mode === MODES.SHOTTER })}
+              onClick={this.startShotterMode}
+            >
+              <Icon icon="icon-shot-2" />
+              <span>
+                СНИМОК
+              </span>
+            </button>
+          </div>
+
+          <div className="control-sep" />
+
           <div className="control-bar">
             <button className="primary single" onClick={this.props.startEditing}>
               <Icon icon="icon-route-2" />
@@ -170,6 +165,11 @@ class Component extends React.PureComponent<Props, void> {
             </button>
           </div>
         </div>
+
+        <EditorDialog
+          width={((this.panel && this.panel.getBoundingClientRect().width) || 0)}
+        />
+
       </div>
     );
   }

src/components/panels/UserPanel.jsx

@@ -9,6 +9,9 @@ import { setUser, userLogout } from '$redux/user/actions';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import type { UserType } from '$constants/types';
+import { MODES } from '$constants/modes';
+import classnames from 'classnames';
+import { Icon } from '$components/panels/Icon';
 
 type Props = {
   user: UserType,

src/components/save/CancelDialog.jsx

@@ -28,8 +28,8 @@ export class CancelDialog extends React.Component<Props, void> {
           <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.cancel}>
+        <div className="helper__buttons">
+          <div className="button danger router-helper__button" onClick={this.cancel}>
             Удалить все
           </div>
           <div className="button primary router-helper__button" onClick={this.proceed}>