diff --git a/src/containers/App.jsx b/src/containers/App.jsx index eb4d00d..ffd0335 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -63,14 +63,14 @@ export class App extends React.Component { this.hideLoader(); - this.setState({ changed: false }); + this.clearChanged(); }; setTitle = title => this.setState({ title }); setAddress = address => this.setState({ address }); setDataOnLoad = data => { - this.setState({ changed: false }); + this.clearChanged(); this.editor.setData(data); this.hideLoader(); }; @@ -114,6 +114,11 @@ export class App extends React.Component { this.setState({ changed: true }); }; + clearChanged = () => { + console.log('clearing'); + this.setState({ changed: false }); + }; + editor = new Editor({ container: 'map', mode: this.state.mode, @@ -127,6 +132,7 @@ export class App extends React.Component { setAddress: this.setAddress, getUser: this.getUser, triggerOnChange: this.triggerOnChange, + clearChanged: this.clearChanged, }); authInit = () => { diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 4874bcb..700be4f 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -23,6 +23,7 @@ export class Editor { setAddress, getUser, triggerOnChange, + clearChanged, }) { this.logo = DEFAULT_LOGO; this.owner = null; @@ -57,6 +58,9 @@ export class Editor { }, [MODES.TRASH]: { toggle: this.clearAll, + }, + [MODES.CONFIRM_CANCEL]: { + toggle: this.stopEditing, } }; @@ -66,6 +70,7 @@ export class Editor { }; this.activeSticker = null; + this.clearChanged = clearChanged; this.setActiveSticker = setActiveSticker; this.setLogo = setLogo; this.setMode = setMode; @@ -170,6 +175,8 @@ export class Editor { this.setSticker(null); this.changeMode(MODES.NONE); + + this.clearChanged(); }; changeLogo = logo => { diff --git a/src/styles/stickers.less b/src/styles/stickers.less index 58cab10..2e871f7 100644 --- a/src/styles/stickers.less +++ b/src/styles/stickers.less @@ -10,7 +10,6 @@ &:before { content: ' '; - box-shadow: 0 0 10px 1px @red_secondary; background: @red_secondary; width: 48px; height: 48px; @@ -19,8 +18,8 @@ position: absolute; border-radius: 40px; opacity: 0; + transform: scale(0.5); transition: opacity 250ms, transform 500ms; - transform: scale(0); } &:hover, &:active { @@ -30,7 +29,7 @@ } &:before { - opacity: 1; + opacity: 0.3; transform: scale(1); } }