From afc965420027a25c08c9ed57e61348fec7294e89 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 10 Jan 2020 14:32:12 +0700 Subject: [PATCH] fixed dialog witdths --- src/components/dialogs/CancelDialog.tsx | 2 +- src/components/dialogs/RouterDialog.tsx | 2 +- src/components/dialogs/SaveDialog.tsx | 24 ++--- src/components/dialogs/StickersDialog.tsx | 2 +- src/components/dialogs/TrashDialog.tsx | 2 +- src/containers/map/Stickers/index.tsx | 2 +- src/redux/editor/actions.ts | 23 +---- src/redux/editor/constants.ts | 4 +- src/redux/editor/handlers.ts | 45 ++------- src/redux/editor/index.ts | 28 +++--- src/redux/editor/selectors.ts | 1 + src/redux/map/sagas.ts | 107 +++++++++++++--------- src/styles/panel.less | 5 + 13 files changed, 115 insertions(+), 132 deletions(-) diff --git a/src/components/dialogs/CancelDialog.tsx b/src/components/dialogs/CancelDialog.tsx index ef01f87..153645d 100644 --- a/src/components/dialogs/CancelDialog.tsx +++ b/src/components/dialogs/CancelDialog.tsx @@ -25,7 +25,7 @@ export class CancelDialog extends React.Component { const { width } = this.props; return ( -
+
diff --git a/src/components/dialogs/RouterDialog.tsx b/src/components/dialogs/RouterDialog.tsx index aa9510d..0718ab5 100644 --- a/src/components/dialogs/RouterDialog.tsx +++ b/src/components/dialogs/RouterDialog.tsx @@ -100,7 +100,7 @@ const RouterDialogUnconnected: FC = ({ editorRouterSubmit, width, }) => ( -
+
{!waypoints.length && noPoints({ editorRouterCancel })} diff --git a/src/components/dialogs/SaveDialog.tsx b/src/components/dialogs/SaveDialog.tsx index 22ef43a..3262905 100644 --- a/src/components/dialogs/SaveDialog.tsx +++ b/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 { 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 { return (
-
+
@@ -112,7 +112,7 @@ class SaveDialogUnconnected extends React.Component { value={title} onChange={this.setTitle} autoFocus - readOnly={save_finished} + readOnly={finished} />
@@ -126,7 +126,7 @@ class SaveDialogUnconnected extends React.Component { type="text" value={this.getAddress()} onChange={this.setAddress} - readOnly={save_finished} + readOnly={finished} onCopy={this.onCopy} />
@@ -143,7 +143,7 @@ class SaveDialogUnconnected extends React.Component { onChange={this.setDescription} />
-
{save_error || TIPS.SAVE_INFO}
+
{error || TIPS.SAVE_INFO}
{ {is_public ? ' В каталоге карт' : ' Только по ссылке'}
- {!save_finished && ( + {!finished && (
Отмена
)} - {!save_finished && !save_overwriting && ( + {!finished && !overwriting && (
Сохранить
)} - {save_overwriting && ( + {overwriting && (
Перезаписать
)} - {save_finished && ( + {finished && (
Скопировать
)} - {save_finished && ( + {finished && (
Отлично!
diff --git a/src/components/dialogs/StickersDialog.tsx b/src/components/dialogs/StickersDialog.tsx index 9506678..be9dede 100644 --- a/src/components/dialogs/StickersDialog.tsx +++ b/src/components/dialogs/StickersDialog.tsx @@ -15,7 +15,7 @@ type Props = ReturnType & }; const StickersDialogUnconnected = ({ editorSetActiveSticker, width }: Props) => ( -
+
{Object.keys(STICKERS).map(set => (
diff --git a/src/components/dialogs/TrashDialog.tsx b/src/components/dialogs/TrashDialog.tsx index e22abab..4779091 100644 --- a/src/components/dialogs/TrashDialog.tsx +++ b/src/components/dialogs/TrashDialog.tsx @@ -22,7 +22,7 @@ const TrashDialogUnconnected: FC = ({ editorClearCancel, width, }) => ( -
+
Удалить:
diff --git a/src/containers/map/Stickers/index.tsx b/src/containers/map/Stickers/index.tsx index 6756bec..ee40980 100644 --- a/src/containers/map/Stickers/index.tsx +++ b/src/containers/map/Stickers/index.tsx @@ -30,7 +30,7 @@ const Stickers: React.FC = React.memo( ({ type: EDITOR_ACTIONS.RESET_SAVE_DIALOG }); -export const editorSetSaveLoading = (save_loading: IEditorState['save_loading']) => ({ - type: EDITOR_ACTIONS.SET_SAVE_LOADING, - save_loading, -}); - -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 editorSetSave = (save: Partial) => ({ + type: EDITOR_ACTIONS.SET_SAVE, + save, +}) export const editorHideRenderer = () => ({ type: EDITOR_ACTIONS.HIDE_RENDERER }); export const editorSetRenderer = payload => ({ type: EDITOR_ACTIONS.SET_RENDERER, payload }); diff --git a/src/redux/editor/constants.ts b/src/redux/editor/constants.ts index 542b432..7a749b6 100644 --- a/src/redux/editor/constants.ts +++ b/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_ERROR: `${P}-SET_SAVE_ERROR`, - SET_SAVE_OVERWRITE: `${P}-SET_SAVE_OVERWRITE`, + SET_SAVE: `${P}-SET_SAVE`, SHOW_RENDERER: `${P}-SHOW_RENDERER`, HIDE_RENDERER: `${P}-HIDE_RENDERER`, diff --git a/src/redux/editor/handlers.ts b/src/redux/editor/handlers.ts index a3f8910..1266457 100644 --- a/src/redux/editor/handlers.ts +++ b/src/redux/editor/handlers.ts @@ -68,41 +68,12 @@ const sendSaveRequest = (state): IEditorState => ({ save_processing: true, }); -const setSaveError = ( - state, - { save_error }: ReturnType -): IEditorState => ({ +const setSave = (state, { save }: ReturnType): IEditorState => ({ ...state, - save_error, - save_finished: false, - save_processing: false, -}); - -const setSaveLoading = ( - state, - { save_loading }: ReturnType -): 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 -): IEditorState => ({ - ...state, - save_overwriting: false, - save_finished: true, - save_processing: false, - save_error, + save: { + ...state.save, + ...save, + }, }); 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_LOADING]: setSaveLoading, - [EDITOR_ACTIONS.SET_SAVE_OVERWRITE]: setSaveOverwrite, - [EDITOR_ACTIONS.SET_SAVE_SUCCESS]: setSaveSuccess, + [EDITOR_ACTIONS.SET_SAVE]: setSave, + [EDITOR_ACTIONS.SEND_SAVE_REQUEST]: sendSaveRequest, [EDITOR_ACTIONS.RESET_SAVE_DIALOG]: resetSaveDialog, diff --git a/src/redux/editor/index.ts b/src/redux/editor/index.ts index 1024174..e188c53 100644 --- a/src/redux/editor/index.ts +++ b/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); diff --git a/src/redux/editor/selectors.ts b/src/redux/editor/selectors.ts index 144a089..bd87246 100644 --- a/src/redux/editor/selectors.ts +++ b/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; diff --git a/src/redux/map/sagas.ts b/src/redux/map/sagas.ts index 37950ee..816dca5 100644 --- a/src/redux/map/sagas.ts +++ b/src/redux/map/sagas.ts @@ -25,11 +25,8 @@ import { editorSetEditing, editorSetReady, editorSetActiveSticker, - editorSetSaveError, - editorSetSaveLoading, editorSendSaveRequest, - editorSetSaveSuccess, - editorSetSaveOverwrite, + editorSetSave, editorClearAll, } from '~/redux/editor/actions'; import { pushLoaderState, getUrlData, pushPath, replacePath } from '~/utils/history'; @@ -51,7 +48,7 @@ function* onMapClick({ latlng }: ReturnType) { 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 = 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 = yield select(selectMap); const { distance }: ReturnType = yield select(selectEditor); const { token }: ReturnType = 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( - editorSetSaveSuccess({ + yield put( + 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) { - const { id }: ReturnType = yield select(selectUserUser); - const { dialog_active }: ReturnType = yield select(selectEditor); - - replacePath(`/${address}/edit`); yield put( - mapSet({ - title, - address, - is_public, - description, - owner: { id }, + editorSetSave({ + error: TIPS.SAVE_SUCCESS, + loading: false, + overwriting: false, + finished: true, }) ); - - yield put(editorSetChanged(false)); - - if (dialog_active) { - yield call(searchSetSagaWorker); - } - - return; } +// function* setSaveSuccessSaga({ +// address, +// title, +// is_public, +// description, +// }: ReturnType) { +// const { id }: ReturnType = yield select(selectUserUser); +// const { dialog_active }: ReturnType = 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( [ diff --git a/src/styles/panel.less b/src/styles/panel.less index af1b513..16ca071 100644 --- a/src/styles/panel.less +++ b/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;