muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-26 11:36: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

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

9
src/components/panels/Icon.jsx Normal file
View file

@ -0,0 +1,9 @@
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">
<use xlinkHref={`${sprite}#${icon}`} x={0} y={0} />
</svg>
);