mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 19:16:41 +07:00
fixed some dialogs
This commit is contained in:
parent
39d950d5c5
commit
8c3ce1d1a5
4 changed files with 74 additions and 38 deletions
|
@ -12,9 +12,6 @@ type Props = {
|
||||||
export class CancelDialog extends React.Component<Props, void> {
|
export class CancelDialog extends React.Component<Props, void> {
|
||||||
cancel = () => {
|
cancel = () => {
|
||||||
this.props.stopEditing();
|
this.props.stopEditing();
|
||||||
// editor.cancelEditing();
|
|
||||||
// this.props.setEditing(false);
|
|
||||||
// this.props.setMode(MODES.NONE);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
proceed = () => {
|
proceed = () => {
|
||||||
|
@ -31,6 +28,9 @@ export class CancelDialog extends React.Component<Props, void> {
|
||||||
<Icon icon="icon-cancel-1" />
|
<Icon icon="icon-cancel-1" />
|
||||||
<div className="big upper">Закрыть редактор?</div>
|
<div className="big upper">Закрыть редактор?</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="helper cancel-helper">
|
||||||
|
<div className="helper__text" />
|
||||||
<div className="helper__buttons">
|
<div className="helper__buttons">
|
||||||
<div className="button router-helper__button" onClick={this.cancel}>
|
<div className="button router-helper__button" onClick={this.cancel}>
|
||||||
Удалить измения
|
Удалить измения
|
||||||
|
|
|
@ -9,6 +9,7 @@ type Props = {
|
||||||
}
|
}
|
||||||
|
|
||||||
const noPoints = ({ routerCancel }: Props) => (
|
const noPoints = ({ routerCancel }: Props) => (
|
||||||
|
<React.Fragment>
|
||||||
<div className="helper router-helper">
|
<div className="helper router-helper">
|
||||||
<div className="helper__text">
|
<div className="helper__text">
|
||||||
<Icon icon="icon-pin-1" />
|
<Icon icon="icon-pin-1" />
|
||||||
|
@ -16,35 +17,48 @@ const noPoints = ({ routerCancel }: Props) => (
|
||||||
Укажите первую точку на карте
|
Укажите первую точку на карте
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="helper__buttons">
|
</div>
|
||||||
|
<div className="helper router-helper">
|
||||||
|
<div className="helper__buttons flex_1">
|
||||||
|
<div className="flex_1" />
|
||||||
<div className="button router-helper__button" onClick={routerCancel}>
|
<div className="button router-helper__button" onClick={routerCancel}>
|
||||||
Отмена
|
Отмена
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
|
|
||||||
const firstPoint = ({ routerCancel }: Props) => (
|
const firstPoint = ({ routerCancel }: Props) => (
|
||||||
|
<React.Fragment>
|
||||||
<div className="helper router-helper">
|
<div className="helper router-helper">
|
||||||
<div className="helper__text">
|
<div className="helper__text">
|
||||||
<Icon icon="icon-pin-1" />
|
<Icon icon="icon-pin-1" />
|
||||||
<div className="big white upper">УКАЖИТЕ СЛЕДУЮЩУЮ ТОЧКУ</div>
|
<div className="big white upper">УКАЖИТЕ СЛЕДУЮЩУЮ ТОЧКУ</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="helper__buttons">
|
</div>
|
||||||
|
<div className="helper router-helper">
|
||||||
|
<div className="helper__buttons flex_1">
|
||||||
|
<div className="flex_1" />
|
||||||
<div className="button router-helper__button" onClick={routerCancel}>
|
<div className="button router-helper__button" onClick={routerCancel}>
|
||||||
Отмена
|
Отмена
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
|
|
||||||
const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
|
const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
|
||||||
<div className="helper router-helper">
|
<React.Fragment>
|
||||||
|
<div className="helper">
|
||||||
<div className="helper__text success">
|
<div className="helper__text success">
|
||||||
<Icon icon="icon-check-1" />
|
<Icon icon="icon-check-1" />
|
||||||
<div className="big upper">Продолжайте маршрут</div>
|
<div className="big upper">Продолжайте маршрут</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="helper__buttons button-group">
|
</div>
|
||||||
|
<div className="helper router-helper">
|
||||||
|
<div className="helper__buttons button-group flex_1">
|
||||||
|
<div className="flex_1" />
|
||||||
<div className="button button_red router-helper__button" onClick={routerCancel}>
|
<div className="button button_red router-helper__button" onClick={routerCancel}>
|
||||||
Отмена
|
Отмена
|
||||||
</div>
|
</div>
|
||||||
|
@ -53,10 +67,13 @@ const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const RouterDialog = ({ routerPoints, routerCancel, routerSubmit, width }: Props) => (
|
export const RouterDialog = ({
|
||||||
<div className="control-dialog control-dialog-big" style={{ width }}>
|
routerPoints, routerCancel, routerSubmit, width
|
||||||
|
}: Props) => (
|
||||||
|
<div className="control-dialog" style={{ width }}>
|
||||||
{!routerPoints && noPoints({ routerCancel })}
|
{!routerPoints && noPoints({ routerCancel })}
|
||||||
{routerPoints === 1 && firstPoint({ routerCancel })}
|
{routerPoints === 1 && firstPoint({ routerCancel })}
|
||||||
{routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })}
|
{routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })}
|
||||||
|
|
|
@ -13,13 +13,15 @@ type Props = {
|
||||||
export const TrashDialog = ({
|
export const TrashDialog = ({
|
||||||
clearPoly, clearStickers, clearAll, clearCancel, width,
|
clearPoly, clearStickers, clearAll, clearCancel, width,
|
||||||
}: Props) => (
|
}: Props) => (
|
||||||
<div className="control-dialog control-dialog-big" style={{ width }}>
|
<div className="control-dialog" style={{ width }}>
|
||||||
<div className="helper trash-helper">
|
<div className="helper trash-helper">
|
||||||
<div className="helper__text danger">
|
<div className="helper__text danger">
|
||||||
<Icon icon="icon-trash-4" />
|
<Icon icon="icon-trash-4" />
|
||||||
<div className="big upper desktop-only">Удалить:</div>
|
<div className="big upper desktop-only">Удалить:</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="helper__buttons">
|
</div>
|
||||||
|
<div className="helper trash-helper">
|
||||||
|
<div className="helper__buttons flex_1">
|
||||||
<div className="button-group">
|
<div className="button-group">
|
||||||
<div className="button router-helper__button" onClick={clearPoly}>
|
<div className="button router-helper__button" onClick={clearPoly}>
|
||||||
Маршрут
|
Маршрут
|
||||||
|
@ -31,6 +33,7 @@ export const TrashDialog = ({
|
||||||
ВСЕ
|
ВСЕ
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex_1" />
|
||||||
<div className="button primary router-helper__button" onClick={clearCancel}>
|
<div className="button primary router-helper__button" onClick={clearCancel}>
|
||||||
Отмена
|
Отмена
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -235,6 +235,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.helper:first-child {
|
||||||
|
border-radius: @panel_radius @panel_radius 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper:last-child {
|
||||||
|
border-radius: 0 0 @panel_radius @panel_radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper:only-child {
|
||||||
|
border-radius: @panel_radius;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-dialog-provider {
|
.control-dialog-provider {
|
||||||
|
@ -255,7 +267,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
background: #222222;
|
background: #222222;
|
||||||
border-radius: @panel_radius;
|
//border-radius: @panel_radius;
|
||||||
box-shadow: @bar_shadow;
|
box-shadow: @bar_shadow;
|
||||||
|
|
||||||
@media (max-width: @mobile_breakpoint) {
|
@media (max-width: @mobile_breakpoint) {
|
||||||
|
@ -304,6 +316,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex_1 {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.helper__buttons {
|
.helper__buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue