diff --git a/src/components/logo/LogoDialog.jsx b/src/components/logo/LogoDialog.jsx
index a9ce296..4b7bdf6 100644
--- a/src/components/logo/LogoDialog.jsx
+++ b/src/components/logo/LogoDialog.jsx
@@ -1,8 +1,13 @@
import React from 'react';
import { LOGOS } from '$constants/logos';
import { Icon } from '$components/panels/Icon';
+import classnames from 'classnames';
export class LogoDialog extends React.Component {
+ changeLogo = logo => {
+ this.props.editor.changeLogo(logo);
+ };
+
render() {
return (
+
this.changeLogo(logo)}
+ key={logo}
+ >
{LOGOS[logo][0]}
))
diff --git a/src/components/logo/LogoPreview.jsx b/src/components/logo/LogoPreview.jsx
new file mode 100644
index 0000000..bf0778d
--- /dev/null
+++ b/src/components/logo/LogoPreview.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { LOGOS } from '$constants/logos';
+
+export const LogoPreview = ({ logo }) => (
+
+);
diff --git a/src/components/panels/EditorDialog.jsx b/src/components/panels/EditorDialog.jsx
index 72db22e..e8a4565 100644
--- a/src/components/panels/EditorDialog.jsx
+++ b/src/components/panels/EditorDialog.jsx
@@ -7,7 +7,7 @@ import { TrashDialog } from '$components/trash/TrashDialog';
import { LogoDialog } from '$components/logo/LogoDialog';
export const EditorDialog = ({
- mode, routerPoints, editor, activeSticker
+ mode, routerPoints, editor, activeSticker, logo
}) => {
const showDialog = (
mode === MODES.ROUTER
@@ -22,7 +22,7 @@ export const EditorDialog = ({
{ mode === MODES.ROUTER &&
}
{ mode === MODES.STICKERS &&
}
{ mode === MODES.TRASH &&
}
- { mode === MODES.LOGO &&
}
+ { mode === MODES.LOGO &&
}
);
};
diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx
index 94c1e28..0f72da9 100644
--- a/src/components/panels/EditorPanel.jsx
+++ b/src/components/panels/EditorPanel.jsx
@@ -6,6 +6,7 @@ import { toHours } from '$utils/time';
import { Icon } from '$components/panels/Icon';
import { EditorDialog } from '$components/panels/EditorDialog';
+import { LogoPreview } from '$components/logo/LogoPreview';
export class EditorPanel extends React.PureComponent {
startPolyMode = () => this.props.editor.changeMode(MODES.POLY);
@@ -22,7 +23,7 @@ export class EditorPanel extends React.PureComponent {
render() {
const {
- mode, routerPoints, editor, totalDistance, estimateTime, activeSticker
+ mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo,
} = this.props;
return (
@@ -33,8 +34,11 @@ export class EditorPanel extends React.PureComponent {
routerPoints={routerPoints}
activeSticker={activeSticker}
editor={editor}
+ logo={logo}
/>
+
diff --git a/src/constants/logos.js b/src/constants/logos.js
index ff67af0..5aadb2a 100644
--- a/src/constants/logos.js
+++ b/src/constants/logos.js
@@ -1,10 +1,12 @@
export const LOGOS = {
default: ['Без логотипа', null, 'bottom-right'],
- nvs: ['НВС', '/misc/lgo.png', 'bottom-right'],
- pinmix: ['Пин-Микс', '/misc/pin-mix.png', 'top-right'],
- jolly: ['Пин-Микс + JW', '/misc/jw.png', 'top-right'],
- pedals: ['Усталые Педальки', '/misc/pedals.png', 'bottom-right'],
- rider: ['Райдер', '/misc/rider.png', 'bottom-right'],
+ nvs: ['НВС', 'http://map.vault48.org/misc/lgo.png', 'bottom-right'],
+ pinmix: ['Пин-Микс', 'http://map.vault48.org/misc/pin-mix.png', 'top-right'],
+ jolly: ['Пин-Микс + JW', 'http://map.vault48.org/misc/jw.png', 'top-right'],
+ pedals: ['Усталые Педальки', 'http://map.vault48.org/misc/pedals.png', 'bottom-right'],
+ rider: ['Райдер', 'http://map.vault48.org/misc/rider.png', 'bottom-right'],
// rider_evening: ['Вечерние городские', '/misc/rider_evening.png', 'top-right'],
// fas: ['Алкоспорт', '/misc/fas.png', 'bottom-right'],
};
+
+export const DEFAULT_LOGO = 'nvs';
diff --git a/src/containers/App.jsx b/src/containers/App.jsx
index 6da5939..dd6dfcc 100644
--- a/src/containers/App.jsx
+++ b/src/containers/App.jsx
@@ -3,10 +3,12 @@ import React from 'react';
import { Editor } from '$modules/Editor';
import { EditorPanel } from '$components/panels/EditorPanel';
import { Fills } from '$components/Fills';
+import { DEFAULT_LOGO } from '$constants/logos';
export class App extends React.Component {
state = {
mode: 'none',
+ logo: DEFAULT_LOGO,
routerPoints: 0,
totalDistance: 0,
estimateTime: 0,
@@ -31,6 +33,10 @@ export class App extends React.Component {
this.setState({ activeSticker });
};
+ setLogo = logo => {
+ this.setState({ logo });
+ };
+
editor = new Editor({
container: 'map',
mode: this.state.mode,
@@ -38,13 +44,14 @@ export class App extends React.Component {
setRouterPoints: this.setRouterPoints,
setTotalDist: this.setTotalDist,
setActiveSticker: this.setActiveSticker,
+ setLogo: this.setLogo,
});
render() {
const {
editor,
state: {
- mode, routerPoints, totalDistance, estimateTime, activeSticker
+ mode, routerPoints, totalDistance, estimateTime, activeSticker, logo,
},
} = this;
@@ -59,6 +66,7 @@ export class App extends React.Component {
totalDistance={totalDistance}
estimateTime={estimateTime}
activeSticker={activeSticker}
+ logo={logo}
/>
);
diff --git a/src/modules/Editor.js b/src/modules/Editor.js
index 09cdc3c..29a0a9c 100644
--- a/src/modules/Editor.js
+++ b/src/modules/Editor.js
@@ -4,7 +4,7 @@ import { MODES } from '$constants/modes';
import { Stickers } from '$modules/Stickers';
import { Router } from '$modules/Router';
import { Shotter } from '$modules/Shotter';
-import { LOGOS } from '$constants/logos';
+import { DEFAULT_LOGO } from '$constants/logos';
export class Editor {
constructor({
@@ -14,7 +14,10 @@ export class Editor {
setRouterPoints,
setTotalDist,
setActiveSticker,
+ setLogo,
}) {
+ this.logo = DEFAULT_LOGO;
+
this.map = new Map({ container });
const {
@@ -30,9 +33,6 @@ export class Editor {
});
this.shotter = new Shotter({ map });
- this.setMode = setMode;
- this.mode = mode;
-
this.switches = {
[MODES.POLY]: {
start: this.poly.continue,
@@ -56,6 +56,9 @@ export class Editor {
this.activeSticker = null;
this.setActiveSticker = setActiveSticker;
+ this.setLogo = setLogo;
+ this.setMode = setMode;
+ this.mode = mode;
map.addEventListener('mouseup', this.onClick);
map.addEventListener('dragstart', () => lockMapClicks(true));
@@ -152,5 +155,11 @@ export class Editor {
this.setSticker(null);
this.changeMode(MODES.NONE);
+ };
+
+ changeLogo = logo => {
+ this.logo = logo;
+ this.setLogo(logo);
+ this.changeMode(MODES.NONE);
}
}
diff --git a/src/styles/button.less b/src/styles/button.less
index 86883f8..28a4383 100644
--- a/src/styles/button.less
+++ b/src/styles/button.less
@@ -11,6 +11,7 @@
cursor: pointer;
user-select: none;
box-shadow: inset rgba(100,100,100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
+ color: white;
&.primary {
background: #3c78db;
diff --git a/src/styles/colors.less b/src/styles/colors.less
new file mode 100644
index 0000000..6fd6db4
--- /dev/null
+++ b/src/styles/colors.less
@@ -0,0 +1,2 @@
+@blue_primary: #55ddff;
+@blue_secondary: #7137c8;
diff --git a/src/styles/logo.less b/src/styles/logo.less
new file mode 100644
index 0000000..b16cbd0
--- /dev/null
+++ b/src/styles/logo.less
@@ -0,0 +1,19 @@
+.logo-preview {
+ position: fixed;
+ right: 0;
+ bottom: 58px;
+
+ width: 400px;
+ height: 100%;
+
+ opacity: 0.5;
+ pointer-events: none;
+ z-index: 2;
+ background: 100% 100% no-repeat;
+
+ &.top {
+ background-position: 100% 0;
+ }
+}
+
+
diff --git a/src/styles/main.less b/src/styles/main.less
index 45ada3c..ec5bedb 100644
--- a/src/styles/main.less
+++ b/src/styles/main.less
@@ -1,8 +1,11 @@
+@import 'colors.less';
+
@import 'map.less';
@import 'panel.less';
@import 'router.less';
@import 'stickers.less';
@import 'button.less';
+@import 'logo.less';
body {
font-family: sans-serif;
diff --git a/src/styles/panel.less b/src/styles/panel.less
index d6667d4..be81a76 100644
--- a/src/styles/panel.less
+++ b/src/styles/panel.less
@@ -78,7 +78,8 @@
}
&.highlighted {
- background: linear-gradient(150deg, #05a4ff, #7137c8);
+ background: linear-gradient(150deg, @blue_primary, @blue_secondary) 50% 50% no-repeat;
+ background-size: 100% 100%;
}
svg {
@@ -107,7 +108,7 @@
right: 10px;
bottom: 12px;
border-radius: 3px;
- z-index: 2;
+ z-index: 3;
color: white;
box-sizing: border-box;
padding-bottom: 48px;
@@ -157,8 +158,21 @@
padding: 8px 20px;
user-select: none;
cursor: pointer;
+ position: relative;
&:hover {
background: rgba(255, 255, 255, 0.1);
}
+
+ &.active {
+ &::after {
+ content: ' ';
+ width: 16px;
+ height: 4px;
+ left: 0;
+ top: 14px;
+ position: absolute;
+ background: white;
+ }
+ }
}