muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-24 18:46:40 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed dialog witdths

Browse source
This commit is contained in:
Fedor Katurov 2020-01-10 14:32:12 +07:00
parent 65885acb75
commit afc9654200
13 changed files with 115 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/dialogs/CancelDialog.tsx
View file

@ -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" />

2
src/components/dialogs/RouterDialog.tsx
View file

@ -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 })}

24
src/components/dialogs/SaveDialog.tsx
View file

@ -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>

2
src/components/dialogs/StickersDialog.tsx
View file

@ -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}>

2
src/components/dialogs/TrashDialog.tsx
View file

@ -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>

2
src/containers/map/Stickers/index.tsx
View file

@ -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}

23
src/redux/editor/actions.ts
View file

@ -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']) => ({
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<IEditorState['save']>) => ({
type: EDITOR_ACTIONS.SET_SAVE,
save,
})
export const editorHideRenderer = () => ({ type: EDITOR_ACTIONS.HIDE_RENDERER });
export const editorSetRenderer = payload => ({ type: EDITOR_ACTIONS.SET_RENDERER, payload });

4
src/redux/editor/constants.ts
View file

@ -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`,

45
src/redux/editor/handlers.ts
View file

@ -68,41 +68,12 @@ const sendSaveRequest = (state): IEditorState => ({
save_processing: true,
});
const setSaveError = (
state,
{ save_error }: ReturnType<typeof ACTIONS.editorSetSaveError>
): IEditorState => ({
const setSave = (state, { save }: ReturnType<typeof ACTIONS.editorSetSave>): IEditorState => ({
...state,
save_error,
save_finished: false,
save_processing: false,
});
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,
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,

28
src/redux/editor/index.ts
View file

@ -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);

1
src/redux/editor/selectors.ts
View file

@ -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;

107
src/redux/map/sagas.ts
View file

@ -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<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(
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<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 },
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<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(
[

5
src/styles/panel.less
View file

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