mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 11:06:40 +07:00
panels: fixed them
This commit is contained in:
muerwre
parent
d248b679ed
commit
b8ba50517b
13 changed files with 171 additions and 182 deletions
|
|
@ -1,13 +1,12 @@
|
|||
import React from 'react';
|
||||
|
||||
import { MODES } from '$constants/modes';
|
||||
import { editor } from '$modules/Editor';
|
||||
import { Icon } from '$components/panels/Icon';
|
||||
|
||||
type Props = {
|
||||
stopEditing: Function,
|
||||
setMode: Function,
|
||||
setEditing: Function,
|
||||
width: Number,
|
||||
};
|
||||
|
||||
export class CancelDialog extends React.Component<Props, void> {
|
||||
|
|
@ -23,19 +22,23 @@ export class CancelDialog extends React.Component<Props, void> {
|
|||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="helper cancel-helper">
|
||||
<div className="helper__text danger">
|
||||
<Icon icon="icon-cancel-1" />
|
||||
<div className="big upper">Закрыть редактор?</div>
|
||||
</div>
|
||||
<div className="helper__buttons">
|
||||
<div className="button router-helper__button" onClick={this.cancel}>
|
||||
Удалить измения
|
||||
</div>
|
||||
const { width } = this.props;
|
||||
|
||||
<div className="button primary router-helper__button" onClick={this.proceed}>
|
||||
Вернуться
|
||||
return (
|
||||
<div className="control-dialog" style={{ width }}>
|
||||
<div className="helper cancel-helper">
|
||||
<div className="helper__text danger">
|
||||
<Icon icon="icon-cancel-1" />
|
||||
<div className="big upper">Закрыть редактор?</div>
|
||||
</div>
|
||||
<div className="helper__buttons">
|
||||
<div className="button router-helper__button" onClick={this.cancel}>
|
||||
Удалить измения
|
||||
</div>
|
||||
|
||||
<div className="button primary router-helper__button" onClick={this.proceed}>
|
||||
Вернуться
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,20 +9,22 @@ type Props = {
|
|||
}
|
||||
|
||||
export const LogoDialog = ({ logo, setLogo }: Props) => (
|
||||
<div className="helper logo-helper">
|
||||
<div className="helper-back">
|
||||
<Icon icon="icon-logo" size={200} />
|
||||
<div className="control-dialog top">
|
||||
<div className="helper logo-helper">
|
||||
<div className="helper-back">
|
||||
<Icon icon="icon-logo" size={200} />
|
||||
</div>
|
||||
{
|
||||
Object.keys(LOGOS).map(item => (
|
||||
<div
|
||||
className={classnames('helper-menu-item', { active: (item === logo) })}
|
||||
onClick={() => setLogo(item)}
|
||||
key={item}
|
||||
>
|
||||
{LOGOS[item][0]}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
{
|
||||
Object.keys(LOGOS).map(item => (
|
||||
<div
|
||||
className={classnames('helper-menu-item', { active: (item === logo) })}
|
||||
onClick={() => setLogo(item)}
|
||||
key={item}
|
||||
>
|
||||
{LOGOS[item][0]}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export class ProviderDialog extends React.Component<Props, void> {
|
|||
const { provider, setProvider } = this.props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="control-dialog top right control-dialog-provider">
|
||||
<div className="helper provider-helper">
|
||||
{
|
||||
Object.keys(PROVIDERS).map(item => (
|
||||
|
|
@ -39,16 +39,7 @@ export class ProviderDialog extends React.Component<Props, void> {
|
|||
))
|
||||
}
|
||||
</div>
|
||||
<div className="helper">
|
||||
<div className="helper__text">
|
||||
<Icon icon="icon-map-1" />
|
||||
<div className="big upper">ВЫБЕРИТЕ СТИЛЬ КАРТЫ</div>
|
||||
</div>
|
||||
<div className="helper__buttons button-group" onClick={this.closeDialog}>
|
||||
<Icon icon="icon-cancel-1" />
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ type Props = {
|
|||
routerCancel: Function,
|
||||
routerSubmit: Function,
|
||||
routerPoints: Number,
|
||||
width: Number,
|
||||
}
|
||||
|
||||
const noPoints = ({ routerCancel }: Props) => (
|
||||
|
|
@ -54,8 +55,8 @@ const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
|
|||
</div>
|
||||
);
|
||||
|
||||
export const RouterDialog = ({ routerPoints, routerCancel, routerSubmit }: Props) => (
|
||||
<div>
|
||||
export const RouterDialog = ({ routerPoints, routerCancel, routerSubmit, width }: Props) => (
|
||||
<div className="control-dialog" style={{ width }}>
|
||||
{!routerPoints && noPoints({ routerCancel })}
|
||||
{routerPoints === 1 && firstPoint({ routerCancel })}
|
||||
{routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { getUrlData, pushPath } from '$utils/history';
|
||||
import { getUrlData } from '$utils/history';
|
||||
import { toTranslit } from '$utils/format';
|
||||
import { TIPS } from '$constants/tips';
|
||||
import { MODES } from '$constants/modes';
|
||||
|
|
@ -11,7 +11,8 @@ type Props = {
|
|||
save_error: String,
|
||||
save_finished: Boolean,
|
||||
save_overwriting: Boolean,
|
||||
save_processing: Boolean,
|
||||
|
||||
width: Number,
|
||||
|
||||
setMode: Function,
|
||||
sendSaveRequest: Function,
|
||||
|
|
@ -59,50 +60,50 @@ export class SaveDialog extends React.Component<Props, State> {
|
|||
|
||||
render() {
|
||||
const { title } = this.state;
|
||||
const { save_error, save_finished, save_overwriting } = this.props;
|
||||
const { save_error, save_finished, save_overwriting, width } = this.props;
|
||||
const { host } = getUrlData();
|
||||
|
||||
return (
|
||||
<div className="helper save-helper">
|
||||
<div className="save-title">
|
||||
<div className="save-title-input">
|
||||
<div className="save-title-label">Название</div>
|
||||
<input type="text" value={title} onChange={this.setTitle} autoFocus readOnly={save_finished} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="save-description">
|
||||
<div className="save-address-input">
|
||||
<label className="save-address-label">http://{host}/</label>
|
||||
<input type="text" value={this.getAddress().substr(0, 32)} onChange={this.setAddress} readOnly={save_finished} />
|
||||
<div className="control-dialog" style={{ width }}>
|
||||
<div className="helper save-helper">
|
||||
<div className="save-title">
|
||||
<div className="save-title-input">
|
||||
<div className="save-title-label">Название</div>
|
||||
<input type="text" value={title} onChange={this.setTitle} autoFocus readOnly={save_finished} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="save-text">
|
||||
{ save_error || TIPS.SAVE_INFO }
|
||||
</div>
|
||||
<div className="save-description">
|
||||
<div className="save-address-input">
|
||||
<label className="save-address-label">http://{host}/</label>
|
||||
<input type="text" value={this.getAddress().substr(0, 32)} onChange={this.setAddress} readOnly={save_finished} />
|
||||
</div>
|
||||
|
||||
<div className="save-buttons">
|
||||
<div className="save-buttons-text" />
|
||||
<div>
|
||||
{ !save_finished &&
|
||||
<div className="button" onClick={this.cancelSaving}>Отмена</div>
|
||||
}
|
||||
{
|
||||
!save_finished && !save_overwriting &&
|
||||
<div className="button primary" onClick={this.sendSaveRequest}>Сохранить</div>
|
||||
}
|
||||
{
|
||||
save_overwriting &&
|
||||
<div className="button danger" onClick={this.forceSaveRequest}>Перезаписать</div>
|
||||
}
|
||||
{ save_finished &&
|
||||
<div className="button success" onClick={this.cancelSaving}>Отлично, спасибо!</div>
|
||||
}
|
||||
<div className="save-text">
|
||||
{ save_error || TIPS.SAVE_INFO }
|
||||
</div>
|
||||
|
||||
<div className="save-buttons">
|
||||
<div className="save-buttons-text" />
|
||||
<div>
|
||||
{ !save_finished &&
|
||||
<div className="button" onClick={this.cancelSaving}>Отмена</div>
|
||||
}
|
||||
{
|
||||
!save_finished && !save_overwriting &&
|
||||
<div className="button primary" onClick={this.sendSaveRequest}>Сохранить</div>
|
||||
}
|
||||
{
|
||||
save_overwriting &&
|
||||
<div className="button danger" onClick={this.forceSaveRequest}>Перезаписать</div>
|
||||
}
|
||||
{ save_finished &&
|
||||
<div className="button success" onClick={this.cancelSaving}>Отлично, спасибо!</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,32 +4,35 @@ import React from 'react';
|
|||
import { STICKERS } from '$constants/stickers';
|
||||
|
||||
type Props = {
|
||||
setActiveSticker: Function
|
||||
setActiveSticker: Function,
|
||||
width: Number,
|
||||
};
|
||||
|
||||
export const StickersDialog = ({ setActiveSticker }: Props) => (
|
||||
<div className="helper stickers-helper">
|
||||
{
|
||||
Object.keys(STICKERS).map(set => (
|
||||
<div key={set}>
|
||||
<div className="stickers-set-title">{STICKERS[set].title || null}</div>
|
||||
<div className="stickers-grid">
|
||||
{
|
||||
Object.keys(STICKERS[set].layers).map(sticker => (
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(${STICKERS[set].url})`,
|
||||
backgroundPosition: `${-STICKERS[set].layers[sticker].off * 48}px 50%`,
|
||||
}}
|
||||
className="sticker-preview"
|
||||
key={`${set}-${sticker}`}
|
||||
onClick={() => setActiveSticker({ set, sticker })}
|
||||
/>
|
||||
))
|
||||
}
|
||||
export const StickersDialog = ({ setActiveSticker, width }: Props) => (
|
||||
<div className="control-dialog" style={{ width }}>
|
||||
<div className="helper stickers-helper">
|
||||
{
|
||||
Object.keys(STICKERS).map(set => (
|
||||
<div key={set}>
|
||||
<div className="stickers-set-title">{STICKERS[set].title || null}</div>
|
||||
<div className="stickers-grid">
|
||||
{
|
||||
Object.keys(STICKERS[set].layers).map(sticker => (
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(${STICKERS[set].url})`,
|
||||
backgroundPosition: `${-STICKERS[set].layers[sticker].off * 48}px 50%`,
|
||||
}}
|
||||
className="sticker-preview"
|
||||
key={`${set}-${sticker}`}
|
||||
onClick={() => setActiveSticker({ set, sticker })}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,30 +6,34 @@ type Props = {
|
|||
clearStickers: Function,
|
||||
clearAll: Function,
|
||||
clearCancel: Function,
|
||||
|
||||
width: Number,
|
||||
}
|
||||
|
||||
export const TrashDialog = ({
|
||||
clearPoly, clearStickers, clearAll, clearCancel
|
||||
clearPoly, clearStickers, clearAll, clearCancel, width,
|
||||
}: Props) => (
|
||||
<div className="helper trash-helper">
|
||||
<div className="helper__text danger">
|
||||
<Icon icon="icon-trash-4" />
|
||||
<div className="big upper">Удалить:</div>
|
||||
</div>
|
||||
<div className="helper__buttons">
|
||||
<div className="button-group">
|
||||
<div className="button router-helper__button" onClick={clearPoly}>
|
||||
Маршрут
|
||||
</div>
|
||||
<div className="button router-helper__button" onClick={clearStickers}>
|
||||
Стикеры
|
||||
</div>
|
||||
<div className="button router-helper__button" onClick={clearAll}>
|
||||
Удалить все
|
||||
</div>
|
||||
<div className="control-dialog" style={{ width }}>
|
||||
<div className="helper trash-helper">
|
||||
<div className="helper__text danger">
|
||||
<Icon icon="icon-trash-4" />
|
||||
<div className="big upper">Удалить:</div>
|
||||
</div>
|
||||
<div className="button primary router-helper__button" onClick={clearCancel}>
|
||||
Отмена
|
||||
<div className="helper__buttons">
|
||||
<div className="button-group">
|
||||
<div className="button router-helper__button" onClick={clearPoly}>
|
||||
Маршрут
|
||||
</div>
|
||||
<div className="button router-helper__button" onClick={clearStickers}>
|
||||
Стикеры
|
||||
</div>
|
||||
<div className="button router-helper__button" onClick={clearAll}>
|
||||
Удалить все
|
||||
</div>
|
||||
</div>
|
||||
<div className="button primary router-helper__button" onClick={clearCancel}>
|
||||
Отмена
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,42 +34,24 @@ type Props = {
|
|||
width: Number,
|
||||
}
|
||||
|
||||
const DIALOG_CONTENTS = {
|
||||
[MODES.ROUTER]: RouterDialog,
|
||||
[MODES.STICKERS]: StickersDialog,
|
||||
[MODES.TRASH]: TrashDialog,
|
||||
[MODES.LOGO]: LogoDialog,
|
||||
[MODES.SAVE]: SaveDialog,
|
||||
[MODES.CONFIRM_CANCEL]: CancelDialog,
|
||||
[MODES.PROVIDER]: ProviderDialog,
|
||||
};
|
||||
|
||||
export const Component = (props: Props) => {
|
||||
const {
|
||||
mode, activeSticker, width
|
||||
mode
|
||||
} = props;
|
||||
|
||||
const showDialog = (
|
||||
mode === MODES.ROUTER
|
||||
|| (mode === MODES.STICKERS && !activeSticker.set)
|
||||
|| mode === MODES.TRASH
|
||||
|| mode === MODES.LOGO
|
||||
|| mode === MODES.SAVE
|
||||
|| mode === MODES.CONFIRM_CANCEL
|
||||
|| mode === MODES.PROVIDER
|
||||
);
|
||||
|
||||
const dialogIsSmall = (
|
||||
mode === MODES.LOGO
|
||||
);
|
||||
|
||||
return (
|
||||
showDialog &&
|
||||
<div
|
||||
id="control-dialog"
|
||||
style={{
|
||||
width: dialogIsSmall ? 201 : width,
|
||||
right: dialogIsSmall ? 217 : 10,
|
||||
}}
|
||||
>
|
||||
{ mode === MODES.ROUTER && <RouterDialog {...props} /> }
|
||||
{ mode === MODES.STICKERS && <StickersDialog {...props} /> }
|
||||
{ mode === MODES.TRASH && <TrashDialog {...props} /> }
|
||||
{ mode === MODES.LOGO && <LogoDialog {...props} /> }
|
||||
{ mode === MODES.SAVE && <SaveDialog {...props} /> }
|
||||
{ mode === MODES.CONFIRM_CANCEL && <CancelDialog {...props} /> }
|
||||
{ mode === MODES.PROVIDER && <ProviderDialog {...props} /> }
|
||||
</div>
|
||||
(mode && DIALOG_CONTENTS[mode] && React.createElement(DIALOG_CONTENTS[mode], { ...props }))
|
||||
|| <div>null</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -75,16 +75,16 @@ class Component extends React.PureComponent<Props, void> {
|
|||
</div>
|
||||
|
||||
<div className="status-panel top right">
|
||||
<div className="status-bar pointer top-control padded">
|
||||
<div className="status-bar pointer top-control padded" onClick={this.startProviderMode}>
|
||||
<Icon icon="icon-map-1" size={24} />
|
||||
<div className="status-bar-sep" />
|
||||
{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}
|
||||
<span>{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}</span>
|
||||
</div>
|
||||
|
||||
<div className="status-bar pointer top-control padded">
|
||||
<div className="status-bar pointer top-control padded" onClick={this.startLogoMode}>
|
||||
<Icon icon="icon-logo-3" size={24} />
|
||||
<div className="status-bar-sep" />
|
||||
{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'}
|
||||
<span>{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -122,24 +122,10 @@ class Component extends React.PureComponent<Props, void> {
|
|||
</button>
|
||||
|
||||
<button
|
||||
className={classnames({ active: mode === MODES.TRASH })}
|
||||
className={classnames({ active: false })}
|
||||
onClick={this.props.takeAShot}
|
||||
>
|
||||
<Icon icon="icon-shot-3" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={classnames({ active: mode === MODES.PROVIDER })}
|
||||
onClick={this.startProviderMode}
|
||||
>
|
||||
<Icon icon="icon-map-1" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={classnames({ active: mode === MODES.LOGO })}
|
||||
onClick={this.startLogoMode}
|
||||
>
|
||||
<Icon icon="icon-logo-3" />
|
||||
<Icon icon="icon-shot-2" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -157,7 +143,6 @@ class Component extends React.PureComponent<Props, void> {
|
|||
className={classnames({ primary: changed, disabled: !changed })}
|
||||
onClick={this.startSaveMode}
|
||||
>
|
||||
<span>СХОРОНИТЬ</span>
|
||||
<Icon icon="icon-check-1" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue