fixed dialog witdths

src/components/dialogs/CancelDialog.tsx

@@ -25,7 +25,7 @@ export class CancelDialog extends React.Component<Props, void> {
     const { width } = this.props;
 
     return (
-      <div className="control-dialog" style={{ width }}>
+      <div className="control-dialog bottom right" style={{ width }}>
         <div className="helper cancel-helper">
           <div className="helper__text danger">
             <Icon icon="icon-cancel-1" />

src/components/dialogs/RouterDialog.tsx

@@ -100,7 +100,7 @@ const RouterDialogUnconnected: FC<Props> = ({
   editorRouterSubmit,
   width,
 }) => (
-  <div className="control-dialog" style={{ width }}>
+  <div className="control-dialog bottom right" style={{ width }}>
     <div className={classnames('save-loader', { active: is_routing })} />
 
     {!waypoints.length && noPoints({ editorRouterCancel })}

src/components/dialogs/SaveDialog.tsx

@@ -11,11 +11,11 @@ import ExpandableTextarea from 'react-expandable-textarea';
 import { connect } from 'react-redux';
 import { selectMap } from '~/redux/map/selectors';
 import * as EDITOR_ACTIONS from '~/redux/editor/actions';
-import { selectEditor } from '~/redux/editor/selectors';
+import { selectEditorSave } from '~/redux/editor/selectors';
 
 const mapStateToProps = state => ({
   map: selectMap(state),
-  editor: selectEditor(state),
+  save: selectEditorSave(state),
 });
 
 const mapDispatchToProps = {
@@ -94,7 +94,7 @@ class SaveDialogUnconnected extends React.Component<Props, State> {
   render() {
     const { title, is_public, description } = this.state;
     const {
-      editor: { save_error, save_finished, save_overwriting, save_loading },
+      save: { error, finished, overwriting, loading },
       width,
     } = this.props;
     const { host, protocol } = getUrlData();
@@ -102,7 +102,7 @@ class SaveDialogUnconnected extends React.Component<Props, State> {
     return (
       <div className="control-dialog control-dialog-medium" style={{ width }}>
         <div className="helper save-helper">
-          <div className={classnames('save-loader', { active: save_loading })} />
+          <div className={classnames('save-loader', { active: loading })} />
 
           <div className="save-title">
             <div className="save-title-input">
@@ -112,7 +112,7 @@ class SaveDialogUnconnected extends React.Component<Props, State> {
                 value={title}
                 onChange={this.setTitle}
                 autoFocus
-                readOnly={save_finished}
+                readOnly={finished}
               />
             </div>
           </div>
@@ -126,7 +126,7 @@ class SaveDialogUnconnected extends React.Component<Props, State> {
                 type="text"
                 value={this.getAddress()}
                 onChange={this.setAddress}
-                readOnly={save_finished}
+                readOnly={finished}
                 onCopy={this.onCopy}
               />
               <div className="save-address-copy" onClick={this.onCopy}>
@@ -143,7 +143,7 @@ class SaveDialogUnconnected extends React.Component<Props, State> {
                 onChange={this.setDescription}
               />
             </div>
-            <div className="save-text">{save_error || TIPS.SAVE_INFO}</div>
+            <div className="save-text">{error || TIPS.SAVE_INFO}</div>
 
             <div className="save-buttons">
               <div
@@ -154,27 +154,27 @@ class SaveDialogUnconnected extends React.Component<Props, State> {
                 {is_public ? ' В каталоге карт' : ' Только по ссылке'}
               </div>
               <div>
-                {!save_finished && (
+                {!finished && (
                   <div className="button" onClick={this.cancelSaving}>
                     Отмена
                   </div>
                 )}
-                {!save_finished && !save_overwriting && (
+                {!finished && !overwriting && (
                   <div className="button primary" onClick={this.editorSendSaveRequest}>
                     Сохранить
                   </div>
                 )}
-                {save_overwriting && (
+                {overwriting && (
                   <div className="button danger" onClick={this.forceSaveRequest}>
                     Перезаписать
                   </div>
                 )}
-                {save_finished && (
+                {finished && (
                   <div className="button" onClick={this.onCopy}>
                     Скопировать
                   </div>
                 )}
-                {save_finished && (
+                {finished && (
                   <div className="button success" onClick={this.cancelSaving}>
                     Отлично!
                   </div>

src/components/dialogs/StickersDialog.tsx

@@ -15,7 +15,7 @@ type Props = ReturnType<typeof mapStateToProps> &
   };
 
 const StickersDialogUnconnected = ({ editorSetActiveSticker, width }: Props) => (
-  <div className="control-dialog control-dialog-big" style={{ width }}>
+  <div className="control-dialog control-dialog-big bottom right" style={{ width }}>
     <div className="helper stickers-helper">
       {Object.keys(STICKERS).map(set => (
         <div key={set}>

src/components/dialogs/TrashDialog.tsx

@@ -22,7 +22,7 @@ const TrashDialogUnconnected: FC<Props> = ({
   editorClearCancel,
   width,
 }) => (
-  <div className="control-dialog" style={{ width }}>
+  <div className="control-dialog bottom right" style={{ width }}>
     <div className="helper trash-helper desktop-only">
       <div className="helper__text danger">
         <div className="big upper desktop-only">Удалить:</div>

src/containers/map/Stickers/index.tsx

@@ -30,7 +30,7 @@ const Stickers: React.FC<IProps> = React.memo(
             <Sticker
               map={map}
               sticker={sticker}
-              key={`${sticker.set}.${sticker.sticker}.${index}`}
+              key={`${index}`}
               index={index}
               is_editing={is_editing}
               mapSetSticker={mapSetSticker}

src/redux/editor/actions.ts

@@ -45,25 +45,10 @@ export const editorSendSaveRequest = (payload: {
 
 export const editorResetSaveDialog = () => ({ type: EDITOR_ACTIONS.RESET_SAVE_DIALOG });
 
-export const editorSetSaveLoading = (save_loading: IEditorState['save_loading']) => ({
+export const editorSetSave = (save: Partial<IEditorState['save']>) => ({
-  type: EDITOR_ACTIONS.SET_SAVE_LOADING,
+  type: EDITOR_ACTIONS.SET_SAVE,
-  save_loading,
+  save,
-});
+})
-
-export const editorSetSaveSuccess = (payload: {
-  address: IRoute['address'];
-  title: IRoute['address'];
-  is_public: IRoute['is_public'];
-  description: IRoute['description'];
-
-  save_error: string;
-}) => ({ type: EDITOR_ACTIONS.SET_SAVE_SUCCESS, ...payload });
-
-export const editorSetSaveError = (save_error: IEditorState['save_error']) => ({
-  type: EDITOR_ACTIONS.SET_SAVE_ERROR,
-  save_error,
-});
-export const editorSetSaveOverwrite = () => ({ type: EDITOR_ACTIONS.SET_SAVE_OVERWRITE });
 
 export const editorHideRenderer = () => ({ type: EDITOR_ACTIONS.HIDE_RENDERER });
 export const editorSetRenderer = payload => ({ type: EDITOR_ACTIONS.SET_RENDERER, payload });

src/redux/editor/constants.ts

@@ -23,9 +23,7 @@ export const EDITOR_ACTIONS = {
   CANCEL_SAVE_REQUEST: `${P}-CANCEL_SAVE_REQUEST`,
   RESET_SAVE_DIALOG: `${P}-RESET_SAVE_DIALOG`,
 
-  SET_SAVE_SUCCESS: `${P}-SET_SAVE_SUCCESS`,
+  SET_SAVE: `${P}-SET_SAVE`,
-  SET_SAVE_ERROR: `${P}-SET_SAVE_ERROR`,
-  SET_SAVE_OVERWRITE: `${P}-SET_SAVE_OVERWRITE`,
 
   SHOW_RENDERER: `${P}-SHOW_RENDERER`,
   HIDE_RENDERER: `${P}-HIDE_RENDERER`,

src/redux/editor/handlers.ts

@@ -68,41 +68,12 @@ const sendSaveRequest = (state): IEditorState => ({
   save_processing: true,
 });
 
-const setSaveError = (
+const setSave = (state, { save }: ReturnType<typeof ACTIONS.editorSetSave>): IEditorState => ({
-  state,
-  { save_error }: ReturnType<typeof ACTIONS.editorSetSaveError>
-): IEditorState => ({
   ...state,
-  save_error,
+  save: {
-  save_finished: false,
+    ...state.save,
-  save_processing: false,
+    ...save,
-});
+  },
-
-const setSaveLoading = (
-  state,
-  { save_loading }: ReturnType<typeof ACTIONS.editorSetSaveLoading>
-): IEditorState => ({
-  ...state,
-  save_loading,
-});
-
-const setSaveOverwrite = (state): IEditorState => ({
-  ...state,
-  save_overwriting: true,
-  save_finished: false,
-  save_processing: false,
-  save_error: TIPS.SAVE_OVERWRITE,
-});
-
-const setSaveSuccess = (
-  state,
-  { save_error }: ReturnType<typeof ACTIONS.editorSetSaveSuccess>
-): IEditorState => ({
-  ...state,
-  save_overwriting: false,
-  save_finished: true,
-  save_processing: false,
-  save_error,
 });
 
 const resetSaveDialog = (state): IEditorState => ({
@@ -194,10 +165,8 @@ export const EDITOR_HANDLERS = {
   [EDITOR_ACTIONS.SET_ROUTER_POINTS]: setRouterPoints,
   [EDITOR_ACTIONS.SET_ACTIVE_STICKER]: setActiveSticker,
 
-  [EDITOR_ACTIONS.SET_SAVE_ERROR]: setSaveError,
+  [EDITOR_ACTIONS.SET_SAVE]: setSave,
-  [EDITOR_ACTIONS.SET_SAVE_LOADING]: setSaveLoading,
+
-  [EDITOR_ACTIONS.SET_SAVE_OVERWRITE]: setSaveOverwrite,
-  [EDITOR_ACTIONS.SET_SAVE_SUCCESS]: setSaveSuccess,
   [EDITOR_ACTIONS.SEND_SAVE_REQUEST]: sendSaveRequest,
   [EDITOR_ACTIONS.RESET_SAVE_DIALOG]: resetSaveDialog,
 

src/redux/editor/index.ts

@@ -29,12 +29,6 @@ export interface IEditorState {
   is_published: boolean;
   is_routing: boolean;
 
-  save_error: string;
-  save_finished: boolean;
-  save_overwriting: boolean;
-  save_processing: boolean;
-  save_loading: boolean;
-
   features: {
     routing: boolean;
   };
@@ -47,6 +41,14 @@ export interface IEditorState {
     info: string;
     progress: number;
   };
+
+  save: {
+    error: string;
+    finished: boolean;
+    overwriting: boolean;
+    processing: boolean;
+    loading: boolean;
+  };
 }
 
 const EDITOR_INITIAL_STATE = {
@@ -72,12 +74,6 @@ const EDITOR_INITIAL_STATE = {
   is_empty: true,
   is_routing: false,
 
-  save_error: '',
-  save_finished: false,
-  save_overwriting: false,
-  save_processing: false,
-  save_loading: false,
-
   features: {
     routing: false,
   },
@@ -90,6 +86,14 @@ const EDITOR_INITIAL_STATE = {
     info: '',
     progress: 0,
   },
+
+  save: {
+    error: null,
+    finished: false,
+    overwriting: false,
+    processing: false,
+    loading: false,
+  },
 };
 
 export const editor = createReducer(EDITOR_INITIAL_STATE, EDITOR_HANDLERS);

src/redux/editor/selectors.ts

@@ -1,6 +1,7 @@
 import { IState } from "../store";
 
 export const selectEditor = (state: IState) => state.editor;
+export const selectEditorSave = (state: IState) => state.editor.save;
 export const selectEditorEditing = (state: IState) => state.editor.editing;
 export const selectEditorMode = (state: IState) => state.editor.mode;
 export const selectEditorActiveSticker = (state: IState) => state.editor.activeSticker;

src/redux/map/sagas.ts

@@ -25,11 +25,8 @@ import {
   editorSetEditing,
   editorSetReady,
   editorSetActiveSticker,
-  editorSetSaveError,
-  editorSetSaveLoading,
   editorSendSaveRequest,
-  editorSetSaveSuccess,
+  editorSetSave,
-  editorSetSaveOverwrite,
   editorClearAll,
 } from '~/redux/editor/actions';
 import { pushLoaderState, getUrlData, pushPath, replacePath } from '~/utils/history';
@@ -51,7 +48,7 @@ function* onMapClick({ latlng }: ReturnType<typeof mapClicked>) {
 
   switch (mode) {
     case MODES.STICKERS:
-      yield put(mapAddSticker({ latlng, set, sticker, text: '', angle: 0 }));
+      yield put(mapAddSticker({ latlng, set, sticker, text: '', angle: 2.11 }));
       yield put(editorSetMode(MODES.NONE));
       break;
 
@@ -119,7 +116,7 @@ export function* loadMapFromPath() {
 
     if (!map) {
       yield call(startEmptyEditorSaga);
-      return
+      return;
     }
 
     yield put(editorSetEditing(mode && mode === 'edit'));
@@ -228,14 +225,16 @@ function* sendSaveRequestSaga({
   const { route, stickers, provider }: ReturnType<typeof selectMap> = yield select(selectMap);
 
   if (!route.length && !stickers.length) {
-    return yield put(editorSetSaveError(TIPS.SAVE_EMPTY));
+    return yield put(
+      editorSetSave({ error: TIPS.SAVE_EMPTY, loading: false, overwriting: false, finished: false })
+    );
   }
 
   const { logo }: ReturnType<typeof selectMap> = yield select(selectMap);
   const { distance }: ReturnType<typeof selectEditor> = yield select(selectEditor);
   const { token }: ReturnType<typeof selectUserUser> = yield select(selectUserUser);
 
-  yield put(editorSetSaveLoading(true));
+  yield put(editorSetSave({ loading: true }));
 
   const {
     result,
@@ -263,58 +262,80 @@ function* sendSaveRequestSaga({
     cancel: take(EDITOR_ACTIONS.RESET_SAVE_DIALOG),
   });
 
-  yield put(editorSetSaveLoading(false));
+  yield put(editorSetSave({ loading: false }));
 
   if (cancel) return yield put(editorSetMode(MODES.NONE));
 
-  if (result && result.data.code === 'already_exist') return yield put(editorSetSaveOverwrite());
+  if (result && result.data.code === 'already_exist')
+    return yield put(editorSetSave({ overwriting: true }));
   if (result && result.data.code === 'conflict')
-    return yield put(editorSetSaveError(TIPS.SAVE_EXISTS));
+    return yield put(
+      editorSetSave({
+        error: TIPS.SAVE_EXISTS,
+        loading: false,
+        overwriting: false,
+        finished: false,
+      })
+    );
   if (timeout || !result || !result.data.route || !result.data.route.address)
-    return yield put(editorSetSaveError(TIPS.SAVE_TIMED_OUT));
+    return yield put(
+      editorSetSave({
+        error: TIPS.SAVE_TIMED_OUT,
+        loading: false,
+        overwriting: false,
+        finished: false,
+      })
+    );
 
-  return yield put(
+  yield put(
-    editorSetSaveSuccess({
+    mapSet({
       address: result.data.route.address,
       title: result.data.route.title,
       is_public: result.data.route.is_public,
       description: result.data.route.description,
-
-      save_error: TIPS.SAVE_SUCCESS,
     })
   );
-}
-
-function* setSaveSuccessSaga({
-  address,
-  title,
-  is_public,
-  description,
-}: ReturnType<typeof editorSetSaveSuccess>) {
-  const { id }: ReturnType<typeof selectUserUser> = yield select(selectUserUser);
-  const { dialog_active }: ReturnType<typeof selectEditor> = yield select(selectEditor);
-
-  replacePath(`/${address}/edit`);
 
   yield put(
-    mapSet({
+    editorSetSave({
-      title,
+      error: TIPS.SAVE_SUCCESS,
-      address,
+      loading: false,
-      is_public,
+      overwriting: false,
-      description,
+      finished: true,
-      owner: { id },
     })
   );
-
-  yield put(editorSetChanged(false));
-
-  if (dialog_active) {
-    yield call(searchSetSagaWorker);
-  }
-
-  return;
 }
 
+// function* setSaveSuccessSaga({
+//   address,
+//   title,
+//   is_public,
+//   description,
+// }: ReturnType<typeof editorSetSaveSuccess>) {
+//   const { id }: ReturnType<typeof selectUserUser> = yield select(selectUserUser);
+//   const { dialog_active }: ReturnType<typeof selectEditor> = yield select(selectEditor);
+
+//   replacePath(`/${address}/edit`);
+
+//   yield put(
+//     mapSet({
+//       title,
+//       address,
+//       is_public,
+//       description,
+//       owner: { id },
+//     })
+//   );
+
+//   yield put(editorSetChanged(false));
+
+//   if (dialog_active) {
+//     yield call(searchSetSagaWorker);
+//   }
+
+//   return;
+// }
+
 export function* mapSaga() {
   // TODO: setChanged on set route, logo, provider, stickers
   yield takeEvery(EDITOR_ACTIONS.START_EDITING, startEditingSaga);
@@ -322,7 +343,7 @@ export function* mapSaga() {
   yield takeEvery(MAP_ACTIONS.MAP_CLICKED, onMapClick);
   yield takeEvery(MAP_ACTIONS.SET_TITLE, setTitleSaga);
   yield takeLatest(EDITOR_ACTIONS.SEND_SAVE_REQUEST, sendSaveRequestSaga);
-  yield takeLatest(EDITOR_ACTIONS.SET_SAVE_SUCCESS, setSaveSuccessSaga);
+  // yield takeLatest(EDITOR_ACTIONS.SET_SAVE_SUCCESS, setSaveSuccessSaga);
 
   yield takeEvery(
     [

src/styles/panel.less

@@ -247,6 +247,11 @@
   background: #222222;
   border-radius: @panel_radius;
 
+  &.bottom.right {
+    width: 100%;
+    max-width: 500px;
+  }
+  
   &.top {
     bottom: auto;
     top: 52px;