diff --git a/src/components/panels/EditorDialog.jsx b/src/components/panels/EditorDialog.jsx index 820a64f..ec8cc34 100644 --- a/src/components/panels/EditorDialog.jsx +++ b/src/components/panels/EditorDialog.jsx @@ -29,11 +29,12 @@ import { type Props = { mode: String, activeSticker: String, + windth: Number, } export const Component = (props: Props) => { const { - mode, activeSticker, + mode, activeSticker, width } = props; const showDialog = ( @@ -47,7 +48,7 @@ export const Component = (props: Props) => { return ( showDialog && -
+
{ mode === MODES.ROUTER && } { mode === MODES.STICKERS && } { mode === MODES.TRASH && } diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index 7da8738..e55c7d9 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/src/components/panels/EditorPanel.jsx @@ -33,6 +33,17 @@ type Props = { } class Component extends React.PureComponent { + componentDidMount() { + const obj = document.getElementById('control-dialog'); + const { width } = this.panel.getBoundingClientRect(); + + console.log(obj, this.panel); + + if (!this.panel || !obj) return; + + obj.style.width = width; + } + startPolyMode = () => this.props.setMode(MODES.POLY); startStickerMode = () => this.props.setMode(MODES.STICKERS); startRouterMode = () => this.props.setMode(MODES.ROUTER); @@ -40,45 +51,15 @@ class Component extends React.PureComponent { startTrashMode = () => this.props.setMode(MODES.TRASH); startLogoMode = () => this.props.setMode(MODES.LOGO); startSaveMode = () => this.props.setMode(MODES.SAVE); - // startPolyMode = () => this.props.editor.changeMode(MODES.POLY); - // startStickerMode = () => this.props.editor.changeMode(MODES.STICKERS); - // startRouterMode = () => this.props.editor.changeMode(MODES.ROUTER); - // startShotterMode = () => this.props.editor.changeMode(MODES.SHOTTER); - // startTrashMode = () => this.props.editor.changeMode(MODES.TRASH); - // startLogoMode = () => this.props.editor.changeMode(MODES.LOGO); - // startSaveMode = () => this.props.editor.changeMode(MODES.SAVE); - - // stopEditing = () => { - // if (!this.props.changed) { - // editor.cancelEditing(); - // } else { - // // editor.changeMode(MODES.CONFIRM_CANCEL); - // this.props.setMode(MODES.CONFIRM_CANCEL); - // } - // }; - - // startEditing = () => editor.startEditing(); render() { const { - mode, routerPoints, distance, estimated, activeSticker, logo, user, editing, title, address, changed, + mode, routerPoints, distance, estimated, activeSticker, logo, user, editing, title, address, } = this.props; return (
- -
@@ -91,7 +72,7 @@ class Component extends React.PureComponent { }
-
+
{ this.panel = el; }}>
+
+ +
+ +
+
+ + +
); } diff --git a/src/components/panels/UserPanel.jsx b/src/components/panels/UserPanel.jsx index a689aeb..e5be7fe 100644 --- a/src/components/panels/UserPanel.jsx +++ b/src/components/panels/UserPanel.jsx @@ -9,6 +9,9 @@ import { setUser, userLogout } from '$redux/user/actions'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import type { UserType } from '$constants/types'; +import { MODES } from '$constants/modes'; +import classnames from 'classnames'; +import { Icon } from '$components/panels/Icon'; type Props = { user: UserType, diff --git a/src/components/save/CancelDialog.jsx b/src/components/save/CancelDialog.jsx index 613945f..46c969e 100644 --- a/src/components/save/CancelDialog.jsx +++ b/src/components/save/CancelDialog.jsx @@ -28,8 +28,8 @@ export class CancelDialog extends React.Component {
Изменения не сохранены!
Закрыть редактор?
-
-
+
+
Удалить все
diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 0cb2e19..87b3875 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,7 +1,6 @@ // @flow import React from 'react'; -import { editor } from '$modules/Editor'; import { EditorPanel } from '$components/panels/EditorPanel'; import { Fills } from '$components/Fills'; import { UserLocation } from '$components/UserLocation'; @@ -10,244 +9,17 @@ import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { hot } from 'react-hot-loader'; -import type { UserType } from '$constants/types'; -type Props = { - user: UserType, -} +const Component = () => ( +
+ + + + +
+); -class Component extends React.Component { - // state = { - // // mode: 'none', - // // editing: false, - // logo: DEFAULT_LOGO, - // routerPoints: 0, - // totalDistance: 0, - // estimateTime: 0, - // activeSticker: null, - // // user: { - // // ...DEFAULT_USER, - // // }, - // // title: '', - // // address: '', - // // changed: false, - // }; - - componentDidMount() { - // this.authInit(); - window.editor = editor; - } - // - // mapInit = () => { - // const { path, mode } = getUrlData(); - // if (path) { - // getStoredMap({ name: path }) - // .then(this.setDataOnLoad) - // .then(() => { - // if (mode && mode === 'edit') { - // editor.startEditing(); - // } else { - // editor.stopEditing(); - // } - // }) - // .catch(this.startEmptyEditor); - // } else { - // // this.hideLoader(); - // this.startEmptyEditor(); - // } - // }; - // - // startEmptyEditor = () => { - // const { user } = this.state; - // if (!user || !user.random_url || !user.id) return; - // - // pushPath(`/${user.random_url}/edit`); - // - // editor.owner = user.id; - // editor.startEditing(); - // - // this.hideLoader(); - // - // this.clearChanged(); - // }; - // - // setTitle = title => this.setState({ title }); - // setAddress = address => { - // this.setState({ address }); - // }; - // - // getTitle = () => this.state.title; - // - // setDataOnLoad = data => { - // this.clearChanged(); - // editor.setData(data); - // this.hideLoader(); - // }; - // - // hideLoader = () => { - // document.getElementById('loader').style.opacity = 0; - // document.getElementById('loader').style.pointerEvents = 'none'; - // }; - // - // setMode = mode => { - // this.setState({ mode }); - // }; - // - // setRouterPoints = routerPoints => { - // this.setState({ routerPoints }); - // }; - // - // setTotalDist = totalDistance => { - // const time = (totalDistance && (totalDistance / 15)) || 0; - // const estimateTime = (time && parseFloat(time.toFixed(1))); - // this.setState({ totalDistance, estimateTime }); - // }; - // - // setActiveSticker = activeSticker => { - // this.setState({ activeSticker }); - // }; - // - // setLogo = logo => { - // this.setState({ logo }); - // }; - // - // setEditing = editing => { - // this.setState({ editing }); - // }; - // - // getUser = () => this.state.user; - // // - // // triggerOnChange = () => { - // // if (!this.state.editing) return; - // // - // // this.setState({ changed: true }); - // // }; - // - // clearChanged = () => { - // this.setState({ changed: false }); - // }; - - // editor = new Editor({ - // container: 'map', - // mode: this.state.mode, - // setMode: this.setMode, - // setRouterPoints: this.setRouterPoints, - // setTotalDist: this.setTotalDist, - // setActiveSticker: this.setActiveSticker, - // setLogo: this.setLogo, - // setEditing: this.setEditing, - // setTitle: this.setTitle, - // setAddress: this.setAddress, - // getUser: this.getUser, - // triggerOnChange: this.triggerOnChange, - // clearChanged: this.clearChanged, - // getTitle: this.getTitle, - // }); - - // authInit = () => { - // const user = this.getUserData(); - // - // const { id, token } = (user || {}); - // - // if (id && token) { - // checkUserToken({ - // id, - // token - // }) - // .then(this.setUser) - // .then(this.mapInit); - // } else { - // getGuestToken() - // .then(this.setUser) - // .then(this.mapInit); - // } - // }; - - // setUser = user => { - // if (!user.token || !user.id) return; - // - // if (this.state.user.id === editor.owner) { - // editor.owner = user.id; - // } - // - // this.setState({ - // user: { - // ...DEFAULT_USER, - // ...user, - // } - // }); - // - // this.storeUserData(); - // }; - - // storeUserData = () => { - // storeData('user', this.state.user); - // }; - - // getUserData = () => getData('user') || null; - // - // userLogout = () => { - // if (this.state.user.id === editor.owner) { - // editor.owner = null; - // } - // // - // this.setState({ - // user: DEFAULT_USER, - // }); - // - // setTimeout(this.storeUserData, 0); - // }; - - render() { - return ( -
- - - - -
- ); - } -} - -function mapStateToProps(state) { - const { - user: { - user, - editing, - mode, - routerPoints, - totalDistance, - estimated, - activeSticker, - logo, - title, - address, - changed, - }, - } = state; - - return { - user, - editing, - mode, - routerPoints, - totalDistance, - estimated, - activeSticker, - logo, - title, - address, - changed, - }; -} - -const mapDispatchToProps = dispatch => bindActionCreators({ - -}, dispatch); - -export const App = connect( - mapStateToProps, - mapDispatchToProps -)(hot(module)(Component)); +const mapStateToProps = () => ({}); +const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch); +export const App = connect(mapStateToProps, mapDispatchToProps)(hot(module)(Component)); diff --git a/src/modules/Editor.js b/src/modules/Editor.js index ce34bd4..86935ed 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -219,8 +219,6 @@ export class Editor { } if (owner) this.owner = owner; - - // if (!route || route.length <= 1) return; }; fitDrawing = () => { diff --git a/src/styles/button.less b/src/styles/button.less index f358e21..e1e2c14 100644 --- a/src/styles/button.less +++ b/src/styles/button.less @@ -29,6 +29,7 @@ .button-group { .button { border-radius: 0; + margin: 0; &:first-child { border-radius: 4px 0 0 4px; diff --git a/src/styles/panel.less b/src/styles/panel.less index 6b01ad7..810880d 100644 --- a/src/styles/panel.less +++ b/src/styles/panel.less @@ -135,21 +135,21 @@ } #control-dialog { - background: #222222; + background: rgba(30, 30, 30, 0.95); position: absolute; right: 10px; - bottom: 12px; + bottom: 68px; border-radius: 3px; z-index: 3; color: white; box-sizing: border-box; - padding-bottom: 48px; + // padding-bottom: 48px; box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px; } .helper { - width: 500px; - padding: 10px; + // width: 500px; + padding: 12px; font-weight: 200; font-size: 14px; display: flex; @@ -163,6 +163,10 @@ .helper__buttons { display: flex; align-items: center; + + .button { + margin-left: 10px; + } } .logo-helper {