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

panels: fixed them

Browse source
This commit is contained in:
muerwre 2018-12-07 14:32:35 +07:00
parent d248b679ed
commit b8ba50517b
13 changed files with 171 additions and 182 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/components/dialogs/CancelDialog.jsx
View file

@ -1,13 +1,12 @@
import React from 'react'; import React from 'react';
import { MODES } from '$constants/modes'; import { MODES } from '$constants/modes';
import { editor } from '$modules/Editor';
import { Icon } from '$components/panels/Icon'; import { Icon } from '$components/panels/Icon';
type Props = { type Props = {
stopEditing: Function, stopEditing: Function,
setMode: Function, setMode: Function,
setEditing: Function, width: Number,
}; };
export class CancelDialog extends React.Component<Props, void> { export class CancelDialog extends React.Component<Props, void> {
@ -23,19 +22,23 @@ export class CancelDialog extends React.Component<Props, void> {
}; };
render() { render() {
return ( const { width } = this.props;
<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}> 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> </div>
</div> </div>

30
src/components/dialogs/LogoDialog.jsx
View file

@ -9,20 +9,22 @@ type Props = {
} }
export const LogoDialog = ({ logo, setLogo }: Props) => ( export const LogoDialog = ({ logo, setLogo }: Props) => (
<div className="helper logo-helper"> <div className="control-dialog top">
<div className="helper-back"> <div className="helper logo-helper">
<Icon icon="icon-logo" size={200} /> <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> </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> </div>
); );

13
src/components/dialogs/ProviderDialog.jsx
View file

@ -17,7 +17,7 @@ export class ProviderDialog extends React.Component<Props, void> {
const { provider, setProvider } = this.props; const { provider, setProvider } = this.props;
return ( return (
<React.Fragment> <div className="control-dialog top right control-dialog-provider">
<div className="helper provider-helper"> <div className="helper provider-helper">
{ {
Object.keys(PROVIDERS).map(item => ( Object.keys(PROVIDERS).map(item => (
@ -39,16 +39,7 @@ export class ProviderDialog extends React.Component<Props, void> {
)) ))
} }
</div> </div>
<div className="helper"> </div>
<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>
); );
} }
} }

5
src/components/dialogs/RouterDialog.jsx
View file

@ -5,6 +5,7 @@ type Props = {
routerCancel: Function, routerCancel: Function,
routerSubmit: Function, routerSubmit: Function,
routerPoints: Number, routerPoints: Number,
width: Number,
} }
const noPoints = ({ routerCancel }: Props) => ( const noPoints = ({ routerCancel }: Props) => (
@ -54,8 +55,8 @@ const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
</div> </div>
); );
export const RouterDialog = ({ routerPoints, routerCancel, routerSubmit }: Props) => ( export const RouterDialog = ({ routerPoints, routerCancel, routerSubmit, width }: Props) => (
<div> <div className="control-dialog" style={{ width }}>
{!routerPoints && noPoints({ routerCancel })} {!routerPoints && noPoints({ routerCancel })}
{routerPoints === 1 && firstPoint({ routerCancel })} {routerPoints === 1 && firstPoint({ routerCancel })}
{routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })} {routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })}

75
src/components/dialogs/SaveDialog.jsx
View file

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { getUrlData, pushPath } from '$utils/history'; import { getUrlData } from '$utils/history';
import { toTranslit } from '$utils/format'; import { toTranslit } from '$utils/format';
import { TIPS } from '$constants/tips'; import { TIPS } from '$constants/tips';
import { MODES } from '$constants/modes'; import { MODES } from '$constants/modes';
@ -11,7 +11,8 @@ type Props = {
save_error: String, save_error: String,
save_finished: Boolean, save_finished: Boolean,
save_overwriting: Boolean, save_overwriting: Boolean,
save_processing: Boolean,
width: Number,
setMode: Function, setMode: Function,
sendSaveRequest: Function, sendSaveRequest: Function,
@ -59,50 +60,50 @@ export class SaveDialog extends React.Component<Props, State> {
render() { render() {
const { title } = this.state; 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(); const { host } = getUrlData();
return ( return (
<div className="helper save-helper"> <div className="control-dialog" style={{ width }}>
<div className="save-title"> <div className="helper save-helper">
<div className="save-title-input"> <div className="save-title">
<div className="save-title-label">Название</div> <div className="save-title-input">
<input type="text" value={title} onChange={this.setTitle} autoFocus readOnly={save_finished} /> <div className="save-title-label">Название</div>
</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> </div>
<div className="save-text"> <div className="save-description">
{ save_error || TIPS.SAVE_INFO } <div className="save-address-input">
</div> <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-text">
<div className="save-buttons-text" /> { save_error || TIPS.SAVE_INFO }
<div> </div>
{ !save_finished &&
<div className="button" onClick={this.cancelSaving}>Отмена</div> <div className="save-buttons">
} <div className="save-buttons-text" />
{ <div>
!save_finished && !save_overwriting && { !save_finished &&
<div className="button primary" onClick={this.sendSaveRequest}>Сохранить</div> <div className="button" onClick={this.cancelSaving}>Отмена</div>
} }
{ {
save_overwriting && !save_finished && !save_overwriting &&
<div className="button danger" onClick={this.forceSaveRequest}>Перезаписать</div> <div className="button primary" onClick={this.sendSaveRequest}>Сохранить</div>
} }
{ save_finished && {
<div className="button success" onClick={this.cancelSaving}>Отлично, спасибо!</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>
</div> </div>
</div> </div>
); );
} }

51
src/components/dialogs/StickersDialog.jsx
View file

@ -4,32 +4,35 @@ import React from 'react';
import { STICKERS } from '$constants/stickers'; import { STICKERS } from '$constants/stickers';
type Props = { type Props = {
setActiveSticker: Function setActiveSticker: Function,
width: Number,
}; };
export const StickersDialog = ({ setActiveSticker }: Props) => ( export const StickersDialog = ({ setActiveSticker, width }: Props) => (
<div className="helper stickers-helper"> <div className="control-dialog" style={{ width }}>
{ <div className="helper stickers-helper">
Object.keys(STICKERS).map(set => ( {
<div key={set}> Object.keys(STICKERS).map(set => (
<div className="stickers-set-title">{STICKERS[set].title || null}</div> <div key={set}>
<div className="stickers-grid"> <div className="stickers-set-title">{STICKERS[set].title || null}</div>
{ <div className="stickers-grid">
Object.keys(STICKERS[set].layers).map(sticker => ( {
<div Object.keys(STICKERS[set].layers).map(sticker => (
style={{ <div
backgroundImage: `url(${STICKERS[set].url})`, style={{
backgroundPosition: `${-STICKERS[set].layers[sticker].off * 48}px 50%`, backgroundImage: `url(${STICKERS[set].url})`,
}} backgroundPosition: `${-STICKERS[set].layers[sticker].off * 48}px 50%`,
className="sticker-preview" }}
key={`${set}-${sticker}`} className="sticker-preview"
onClick={() => setActiveSticker({ set, sticker })} key={`${set}-${sticker}`}
/> onClick={() => setActiveSticker({ set, sticker })}
)) />
} ))
}
</div>
</div> </div>
</div> ))
)) }
} </div>
</div> </div>
); );

42
src/components/dialogs/TrashDialog.jsx
View file

@ -6,30 +6,34 @@ type Props = {
clearStickers: Function, clearStickers: Function,
clearAll: Function, clearAll: Function,
clearCancel: Function, clearCancel: Function,
width: Number,
} }
export const TrashDialog = ({ export const TrashDialog = ({
clearPoly, clearStickers, clearAll, clearCancel clearPoly, clearStickers, clearAll, clearCancel, width,
}: Props) => ( }: Props) => (
<div className="helper trash-helper"> <div className="control-dialog" style={{ width }}>
<div className="helper__text danger"> <div className="helper trash-helper">
<Icon icon="icon-trash-4" /> <div className="helper__text danger">
<div className="big upper">Удалить:</div> <Icon icon="icon-trash-4" />
</div> <div className="big upper">Удалить:</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> </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> </div>
</div> </div>

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

@ -34,42 +34,24 @@ type Props = {
width: Number, 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) => { export const Component = (props: Props) => {
const { const {
mode, activeSticker, width mode
} = props; } = 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 ( return (
showDialog && (mode && DIALOG_CONTENTS[mode] && React.createElement(DIALOG_CONTENTS[mode], { ...props }))
<div || <div>null</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>
); );
}; };

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

@ -75,16 +75,16 @@ class Component extends React.PureComponent<Props, void> {
</div> </div>
<div className="status-panel top right"> <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} /> <Icon icon="icon-map-1" size={24} />
<div className="status-bar-sep" /> <div className="status-bar-sep" />
{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'} <span>{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}</span>
</div> </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} /> <Icon icon="icon-logo-3" size={24} />
<div className="status-bar-sep" /> <div className="status-bar-sep" />
{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'} <span>{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'}</span>
</div> </div>
</div> </div>
@ -122,24 +122,10 @@ class Component extends React.PureComponent<Props, void> {
</button> </button>
<button <button
className={classnames({ active: mode === MODES.TRASH })} className={classnames({ active: false })}
onClick={this.props.takeAShot} onClick={this.props.takeAShot}
> >
<Icon icon="icon-shot-3" /> <Icon icon="icon-shot-2" />
</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" />
</button> </button>
</div> </div>
@ -157,7 +143,6 @@ class Component extends React.PureComponent<Props, void> {
className={classnames({ primary: changed, disabled: !changed })} className={classnames({ primary: changed, disabled: !changed })}
onClick={this.startSaveMode} onClick={this.startSaveMode}
> >
<span>СХОРОНИТЬ</span>
<Icon icon="icon-check-1" /> <Icon icon="icon-check-1" />
</button> </button>
</div> </div>

2
src/constants/logos.js
View file

@ -1,5 +1,5 @@
export const LOGOS = { export const LOGOS = {
default: ['Без логотипа', null, 'bottom-right'], default: ['Без лого', null, 'bottom-right'],
nvs: ['НВС', 'http://map.vault48.org/misc/lgo.png', 'bottom-right'], nvs: ['НВС', 'http://map.vault48.org/misc/lgo.png', 'bottom-right'],
pinmix: ['Пин-Микс', 'http://map.vault48.org/misc/pin-mix.png', 'top-right'], pinmix: ['Пин-Микс', 'http://map.vault48.org/misc/pin-mix.png', 'top-right'],
jolly: ['Пин-Микс + JW', 'http://map.vault48.org/misc/jw.png', 'top-right'], jolly: ['Пин-Микс + JW', 'http://map.vault48.org/misc/jw.png', 'top-right'],

3
src/index.js
View file

@ -11,10 +11,10 @@
todo map search todo map search
todo map lazy loading todo map lazy loading
todo map preview on save
todo tooltips todo tooltips
todo better poly editor https://github.com/SupriyaSudhindra/leaflet-editable-polyline todo better poly editor https://github.com/SupriyaSudhindra/leaflet-editable-polyline
todo network operations notify todo network operations notify
todo delayed notify (delay(2000).then(showLoadingMsg)) todo delayed notify (delay(2000).then(showLoadingMsg))
todo network error notifications todo network error notifications
@ -24,6 +24,7 @@
todo better loader screen todo better loader screen
todo network errors handling on startup todo network errors handling on startup
todo map preview on save
*/ */
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';

4
src/modules/Editor.js
View file

@ -263,7 +263,7 @@ export class Editor {
setInitialData = () => { setInitialData = () => {
const { path } = getUrlData(); const { path } = getUrlData();
const { id } = this.getUser(); const { id } = this.getUser();
const { route, stickers } = this.dumpData(); const { route, stickers, provider } = this.dumpData();
this.initialData = { this.initialData = {
version: 2, version: 2,
@ -273,6 +273,7 @@ export class Editor {
path, path,
route, route,
stickers, stickers,
provider,
}; };
}; };
@ -321,6 +322,7 @@ export class Editor {
dumpData = () => ({ dumpData = () => ({
route: this.poly.dumpData(), route: this.poly.dumpData(),
stickers: this.stickers.dumpData(), stickers: this.stickers.dumpData(),
provider: this.provider,
}); });
setProvider = provider => { setProvider = provider => {

26
src/styles/panel.less
View file

@ -153,7 +153,7 @@
background: #222222; background: #222222;
} }
#control-dialog { .control-dialog {
background: rgba(30, 30, 30, 0.95); background: rgba(30, 30, 30, 0.95);
position: absolute; position: absolute;
right: 10px; right: 10px;
@ -164,6 +164,15 @@
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;
&.top {
bottom: auto;
top: 52px;
}
}
.control-dialog-provider {
width: 500px;
} }
.helper { .helper {
@ -284,7 +293,6 @@
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 10px; grid-column-gap: 10px;
grid-row-gap: 10px; grid-row-gap: 10px;
padding-bottom: 0;
.provider-helper-thumb { .provider-helper-thumb {
height: 100px; height: 100px;
@ -351,6 +359,15 @@
justify-content: center; justify-content: center;
box-shadow: @bar_shadow; box-shadow: @bar_shadow;
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
text-transform: uppercase;
font-size: 0.9em;
}
&.square { &.square {
width: 32px; width: 32px;
} }
@ -360,11 +377,8 @@
} }
&.top-control { &.top-control {
width: 120px; width: 150px;
justify-content: flex-start; justify-content: flex-start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
svg { svg {