logo selecting

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 (
       <div className="helper logo-helper">
@@ -11,7 +16,11 @@ export class LogoDialog extends React.Component {
         </div>
         {
           Object.keys(LOGOS).map(logo => (
-            <div className="helper-menu-item" key={logo}>
+            <div
+              className={classnames('helper-menu-item', { active: (logo === this.props.logo) })}
+              onClick={() => this.changeLogo(logo)}
+              key={logo}
+            >
               {LOGOS[logo][0]}
             </div>
           ))

src/components/logo/LogoPreview.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { LOGOS } from '$constants/logos';
+
+export const LogoPreview = ({ logo }) => (
+  <div
+    className="logo-preview"
+    style={{
+      backgroundImage: logo
+        ? `url(${LOGOS[logo][1]})`
+        : 'none'
+    }}
+  />
+);

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 && <RouterDialog routerPoints={routerPoints} editor={editor} /> }
         { mode === MODES.STICKERS && <StickersDialog editor={editor} /> }
         { mode === MODES.TRASH && <TrashDialog editor={editor} /> }
-        { mode === MODES.LOGO && <LogoDialog editor={editor} /> }
+        { mode === MODES.LOGO && <LogoDialog editor={editor} logo={logo} /> }
       </div>
   );
 };

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}
         />
 
+        <LogoPreview logo={logo} />
+
         <div className="panel">
           <div className="control-bar">
             <button
@@ -56,7 +60,10 @@ export class EditorPanel extends React.PureComponent {
                     (estimateTime > 0) && (estimateTime > 0) && <span>{toHours(estimateTime)}</span>
                   }
                 </React.Fragment>
-              : <div onClick={() => editor.changeMode(MODES.ROUTER)}>Начать рисовать</div>
+              :
+                <div onClick={() => editor.changeMode(MODES.ROUTER)}>
+                  <div className="button danger">Начать рисовать</div>
+                </div>
             }
           </div>
 

src/constants/logos.js

@@ -1,10 +1,12 @@
 export const LOGOS = {
   default: ['Без логотипа', null, 'bottom-right'],
-  nvs: ['НВС', '/misc/lgo.png', 'bottom-right'],
+  nvs: ['НВС', 'http://map.vault48.org/misc/lgo.png', 'bottom-right'],
-  pinmix: ['Пин-Микс', '/misc/pin-mix.png', 'top-right'],
+  pinmix: ['Пин-Микс', 'http://map.vault48.org/misc/pin-mix.png', 'top-right'],
-  jolly: ['Пин-Микс + JW', '/misc/jw.png', 'top-right'],
+  jolly: ['Пин-Микс + JW', 'http://map.vault48.org/misc/jw.png', 'top-right'],
-  pedals: ['Усталые Педальки', '/misc/pedals.png', 'bottom-right'],
+  pedals: ['Усталые Педальки', 'http://map.vault48.org/misc/pedals.png', 'bottom-right'],
-  rider: ['Райдер', '/misc/rider.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';

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}
         />
       </div>
     );

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);
   }
 }

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;

src/styles/colors.less

@@ -0,0 +1,2 @@
+@blue_primary: #55ddff;
+@blue_secondary: #7137c8;

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;
+  }
+}
+
+

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;

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;
+    }
+  }
 }