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

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