muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 02:56:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

delete dialog

Browse source
This commit is contained in:
muerwre 2018-08-24 17:48:42 +07:00
parent 21532ba240
commit cb3fabaf74
9 changed files with 85 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/panels/EditorDialog.jsx
View file

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

4
src/components/panels/EditorPanel.jsx
View file

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

18
src/components/router/RouterHelper.jsx
View file

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

2
src/components/stickers/StickersHelper.jsx
View file

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

48
src/components/trash/TrashHelper.jsx Normal file
View file

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

1
src/styles/button.less
View file

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

18
src/styles/panel.less
View file

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

14
src/styles/router.less
View file

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

2
src/styles/stickers.less
View file

@ -101,8 +101,6 @@
}
.stickers-helper {
width: 500px;
padding: 10px;
}
.sticker-preview {