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

redux: got rid of dialogs

Browse source
This commit is contained in:
muerwre 2018-11-26 18:10:05 +07:00
parent 2f4029bbd8
commit 53e8205643
8 changed files with 61 additions and 282 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/panels/EditorDialog.jsx
View file

@ -29,11 +29,12 @@ import {
type Props = { type Props = {
mode: String, mode: String,
activeSticker: String, activeSticker: String,
windth: Number,
} }
export const Component = (props: Props) => { export const Component = (props: Props) => {
const { const {
mode, activeSticker, mode, activeSticker, width
} = props; } = props;
const showDialog = ( const showDialog = (
@ -47,7 +48,7 @@ export const Component = (props: Props) => {
return ( return (
showDialog && showDialog &&
<div id="control-dialog"> <div id="control-dialog" style={{ width }}>
{ mode === MODES.ROUTER && <RouterDialog {...props} /> } { mode === MODES.ROUTER && <RouterDialog {...props} /> }
{ mode === MODES.STICKERS && <StickersDialog {...props} /> } { mode === MODES.STICKERS && <StickersDialog {...props} /> }
{ mode === MODES.TRASH && <TrashDialog {...props} /> } { mode === MODES.TRASH && <TrashDialog {...props} /> }

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

@ -33,6 +33,17 @@ type Props = {
} }
class Component extends React.PureComponent<Props, void> { class Component extends React.PureComponent<Props, void> {
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); startPolyMode = () => this.props.setMode(MODES.POLY);
startStickerMode = () => this.props.setMode(MODES.STICKERS); startStickerMode = () => this.props.setMode(MODES.STICKERS);
startRouterMode = () => this.props.setMode(MODES.ROUTER); startRouterMode = () => this.props.setMode(MODES.ROUTER);
@ -40,45 +51,15 @@ class Component extends React.PureComponent<Props, void> {
startTrashMode = () => this.props.setMode(MODES.TRASH); startTrashMode = () => this.props.setMode(MODES.TRASH);
startLogoMode = () => this.props.setMode(MODES.LOGO); startLogoMode = () => this.props.setMode(MODES.LOGO);
startSaveMode = () => this.props.setMode(MODES.SAVE); 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() { render() {
const { const {
mode, routerPoints, distance, estimated, activeSticker, logo, user, editing, title, address, changed, mode, routerPoints, distance, estimated, activeSticker, logo, user, editing, title, address,
} = this.props; } = this.props;
return ( return (
<div> <div>
<EditorDialog
mode={mode}
routerPoints={routerPoints}
activeSticker={activeSticker}
editor={editor}
logo={logo}
user={user}
title={title}
address={address}
setLogo={this.props.setLogo}
/>
<LogoPreview logo={logo} /> <LogoPreview logo={logo} />
<div className="control-dist"> <div className="control-dist">
@ -91,7 +72,7 @@ class Component extends React.PureComponent<Props, void> {
} }
</div> </div>
<div className={classnames('panel right', { active: editing })}> <div className={classnames('panel right', { active: editing })} ref={el => { this.panel = el; }}>
<div className="control-bar"> <div className="control-bar">
<button <button
className={classnames({ active: mode === MODES.ROUTER })} className={classnames({ active: mode === MODES.ROUTER })}
@ -161,6 +142,20 @@ class Component extends React.PureComponent<Props, void> {
</div> </div>
<div className={classnames('panel right', { active: !editing })}> <div className={classnames('panel right', { active: !editing })}>
<div className="control-bar">
<button
className={classnames({ active: mode === MODES.SHOTTER })}
onClick={this.startShotterMode}
>
<Icon icon="icon-shot-2" />
<span>
СНИМОК
</span>
</button>
</div>
<div className="control-sep" />
<div className="control-bar"> <div className="control-bar">
<button className="primary single" onClick={this.props.startEditing}> <button className="primary single" onClick={this.props.startEditing}>
<Icon icon="icon-route-2" /> <Icon icon="icon-route-2" />
@ -170,6 +165,11 @@ class Component extends React.PureComponent<Props, void> {
</button> </button>
</div> </div>
</div> </div>
<EditorDialog
width={((this.panel && this.panel.getBoundingClientRect().width) || 0)}
/>
</div> </div>
); );
} }

3
src/components/panels/UserPanel.jsx
View file

@ -9,6 +9,9 @@ import { setUser, userLogout } from '$redux/user/actions';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import type { UserType } from '$constants/types'; import type { UserType } from '$constants/types';
import { MODES } from '$constants/modes';
import classnames from 'classnames';
import { Icon } from '$components/panels/Icon';
type Props = { type Props = {
user: UserType, user: UserType,

4
src/components/save/CancelDialog.jsx
View file

@ -28,8 +28,8 @@ export class CancelDialog extends React.Component<Props, void> {
<div className="big white">Изменения не сохранены!</div> <div className="big white">Изменения не сохранены!</div>
<div className="small gray">Закрыть редактор?</div> <div className="small gray">Закрыть редактор?</div>
</div> </div>
<div className="helper__buttons button-group"> <div className="helper__buttons">
<div className="button router-helper__button" onClick={this.cancel}> <div className="button danger router-helper__button" onClick={this.cancel}>
Удалить все Удалить все
</div> </div>
<div className="button primary router-helper__button" onClick={this.proceed}> <div className="button primary router-helper__button" onClick={this.proceed}>

250
src/containers/App.jsx
View file

@ -1,7 +1,6 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { editor } from '$modules/Editor';
import { EditorPanel } from '$components/panels/EditorPanel'; import { EditorPanel } from '$components/panels/EditorPanel';
import { Fills } from '$components/Fills'; import { Fills } from '$components/Fills';
import { UserLocation } from '$components/UserLocation'; import { UserLocation } from '$components/UserLocation';
@ -10,244 +9,17 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { hot } from 'react-hot-loader'; import { hot } from 'react-hot-loader';
import type { UserType } from '$constants/types';
type Props = { const Component = () => (
user: UserType, <div>
} <Fills />
<UserLocation />
<UserPanel />
<EditorPanel />
</div>
);
class Component extends React.Component<Props, void> { const mapStateToProps = () => ({});
// state = { const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
// // mode: 'none', export const App = connect(mapStateToProps, mapDispatchToProps)(hot(module)(Component));
// // 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 (
<div>
<Fills />
<UserLocation />
<UserPanel />
<EditorPanel />
</div>
);
}
}
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));

2
src/modules/Editor.js
View file

@ -219,8 +219,6 @@ export class Editor {
} }
if (owner) this.owner = owner; if (owner) this.owner = owner;
// if (!route || route.length <= 1) return;
}; };
fitDrawing = () => { fitDrawing = () => {

1
src/styles/button.less
View file

@ -29,6 +29,7 @@
.button-group { .button-group {
.button { .button {
border-radius: 0; border-radius: 0;
margin: 0;
&:first-child { &:first-child {
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;

14
src/styles/panel.less
View file

@ -135,21 +135,21 @@
} }
#control-dialog { #control-dialog {
background: #222222; background: rgba(30, 30, 30, 0.95);
position: absolute; position: absolute;
right: 10px; right: 10px;
bottom: 12px; bottom: 68px;
border-radius: 3px; border-radius: 3px;
z-index: 3; z-index: 3;
color: white; color: white;
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 48px; // padding-bottom: 48px;
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px; box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px;
} }
.helper { .helper {
width: 500px; // width: 500px;
padding: 10px; padding: 12px;
font-weight: 200; font-weight: 200;
font-size: 14px; font-size: 14px;
display: flex; display: flex;
@ -163,6 +163,10 @@
.helper__buttons { .helper__buttons {
display: flex; display: flex;
align-items: center; align-items: center;
.button {
margin-left: 10px;
}
} }
.logo-helper { .logo-helper {