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

styled panels

Browse source
This commit is contained in:
muerwre 2018-08-22 15:20:39 +07:00
parent 7229a48297
commit d17a7b6aef
24 changed files with 470 additions and 421 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Fills.jsx
View file

@ -11,7 +11,7 @@ export const Fills = () => (
<defs>
<linearGradient id="activePathGradient" x1="-20%" x2="50%" y1="0%" y2="140%">
<stop offset="0%" stopColor="#ff9900" />
<stop offset="0%" stopColor="#ff7700" />
<stop offset="100%" stopColor="#ff3344" />
</linearGradient>
</defs>

14
src/components/panels/EditorDialog.jsx Normal file
View file

@ -0,0 +1,14 @@
import React from 'react';
import { MODES } from '$constants/modes';
import { RouterHelper } from '$components/router/RouterHelper';
export const EditorDialog = ({ mode, routerPoints }) => {
const showDialog = (mode === MODES.ROUTER);
return (
showDialog &&
<div id="control-dialog">
{ mode === MODES.ROUTER && <RouterHelper routerPoints={routerPoints} /> }
</div>
);
};

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

@ -2,7 +2,8 @@ import React from 'react';
import { MODES } from '$constants/modes';
import classnames from 'classnames';
import { Icon } from '$components/Icon';
import { Icon } from '$components/panels/Icon';
import { EditorDialog } from '$components/panels/EditorDialog';
export class EditorPanel extends React.PureComponent {
startPolyMode = () => this.props.editor.changeMode(MODES.POLY);
@ -14,35 +15,69 @@ export class EditorPanel extends React.PureComponent {
startShotterMode = () => this.props.editor.changeMode(MODES.SHOTTER);
render() {
const { mode } = this.props;
const { mode, routerPoints } = this.props;
return (
<div id="control-screen">
<button
className={classnames({ active: mode === MODES.ROUTER })}
onClick={this.startRouterMode}
>
<Icon icon="icon-router" />
</button>
<button
className={classnames({ active: mode === MODES.POLY })}
onClick={this.startPolyMode}
>
<Icon icon="icon-poly" />
</button>
<button
className={classnames({ active: mode === MODES.STICKERS })}
onClick={this.startStickerMode}
>
<Icon icon="icon-sticker" />
</button>
<div>
<button
className={classnames({ active: mode === MODES.SHOTTER })}
onClick={this.startShotterMode}
>
<Icon icon="icon-shooter" />
</button>
<EditorDialog
mode={mode}
routerPoints={routerPoints}
/>
<div className="panel">
<div className="control-bar">
<button
onClick={this.startShotterMode}
>
<span>РЕДАКТОР</span>
</button>
</div>
</div>
<div className="panel right">
<div className="control-bar">
<button
className={classnames({ active: mode === MODES.ROUTER })}
onClick={this.startRouterMode}
>
<Icon icon="icon-router" />
</button>
<button
className={classnames({ active: mode === MODES.POLY })}
onClick={this.startPolyMode}
>
<Icon icon="icon-poly" />
</button>
<button
className={classnames({ active: mode === MODES.STICKERS })}
onClick={this.startStickerMode}
>
<Icon icon="icon-sticker" />
</button>
</div>
<div className="control-sep" />
<div className="control-bar">
<button
className={classnames({ active: mode === MODES.SHOTTER })}
onClick={this.startShotterMode}
>
<Icon icon="icon-shooter" />
</button>
<button
className={classnames('highlighted', { active: mode === MODES.SHOTTER })}
onClick={this.startShotterMode}
>
<span>СХОРОНИТЬ</span>
<Icon icon="icon-shooter" />
</button>
</div>
</div>
</div>
);
}

2
src/components/Icon.jsx → src/components/panels/Icon.jsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import sprite from '$sprites/icon.svg';
export const Icon = ({ icon, size = 32 }) => (
<svg width={size} height={size} viewBox="0 0 32 32" preserveAspectRatio="midXmidY meet">
<svg width={size} height={size} viewBox="0 0 32 32">
<use xlinkHref={`${sprite}#${icon}`} x={0} y={0} />
</svg>
);

54
src/components/router/RouterHelper.jsx Normal file
View file

@ -0,0 +1,54 @@
import React from 'react';
const noPoints = () => (
<div className="router-helper">
<div className="router-helper__text">
<div className="big white">Укажите на карте первую точку маршрута</div>
<div className="small gray">Путь прокладывается по улицам, тротуарам и тропинкам</div>
</div>
<div className="router-helper__buttons">
<div className="button router-helper__button">
Отмена
</div>
</div>
</div>
);
const firstPoint = () => (
<div className="router-helper">
<div className="router-helper__text">
<div className="big white">Укажите на карте конечную точку маршрута</div>
<div className="small gray"> Вы сможете добавить уточняющие точки</div>
</div>
<div className="router-helper__buttons">
<div className="button router-helper__button">
Отмена
</div>
</div>
</div>
);
const draggablePoints = () => (
<div className="router-helper">
<div className="router-helper__text">
<div className="big white">Продолжите маршрут, щелкая по карте</div>
<div className="small gray">Потяните линию, чтобы указать промежуточные точки</div>
</div>
<div className="router-helper__buttons button-group">
<div className="button button_red router-helper__button">
Отмена
</div>
<div className="button primary router-helper__button">
Применить
</div>
</div>
</div>
);
export const RouterHelper = ({ routerPoints }) => (
<div>
{ !routerPoints && noPoints() }
{ routerPoints === 1 && firstPoint() }
{ routerPoints >= 2 && draggablePoints() }
</div>
);