From 0c6dc387de49ed69b785e1a4b22b30a15a13ccf5 Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 27 Aug 2018 12:00:43 +0700 Subject: [PATCH] logo selecting --- src/components/logo/LogoDialog.jsx | 11 ++++++++++- src/components/logo/LogoPreview.jsx | 13 +++++++++++++ src/components/panels/EditorDialog.jsx | 4 ++-- src/components/panels/EditorPanel.jsx | 11 +++++++++-- src/constants/logos.js | 12 +++++++----- src/containers/App.jsx | 10 +++++++++- src/modules/Editor.js | 17 +++++++++++++---- src/styles/button.less | 1 + src/styles/colors.less | 2 ++ src/styles/logo.less | 19 +++++++++++++++++++ src/styles/main.less | 3 +++ src/styles/panel.less | 18 ++++++++++++++++-- 12 files changed, 104 insertions(+), 17 deletions(-) create mode 100644 src/components/logo/LogoPreview.jsx create mode 100644 src/styles/colors.less create mode 100644 src/styles/logo.less 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 (
@@ -11,7 +16,11 @@ export class LogoDialog extends React.Component {
{ Object.keys(LOGOS).map(logo => ( -
+
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; + } + } }