Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Background image settings #169

Merged
merged 19 commits into from
Jan 23, 2018
Merged

Background image settings #169

Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
cbb4d84
Implement drag-n-drop image for backgrounds
mfix22 Jan 18, 2018
1f5e5e6
In progress
jakedex Jan 18, 2018
e9e72e5
Merge branch 'frosted-glass' into bg-img-settings
jakedex Jan 18, 2018
4e833a1
Add background-size, background-position settings
jakedex Jan 20, 2018
55f997c
Add ReactCrop
jakedex Jan 21, 2018
dea305d
Remove old bg sizing sliders
jakedex Jan 21, 2018
15cf775
Add resize observer
jakedex Jan 22, 2018
7e404d2
Fix typo
jakedex Jan 22, 2018
753af2b
Disable select on sliders
jakedex Jan 22, 2018
2f135f7
onAspectRatioChange hook
jakedex Jan 22, 2018
9bf5fe9
Rename to backgroundColor
jakedex Jan 22, 2018
3052012
Fix state issues
jakedex Jan 22, 2018
084ae6b
Add backgroundMode toggle
jakedex Jan 22, 2018
2fffa0a
Rename ColorPicker
jakedex Jan 22, 2018
a91daef
Merge branch 'master' into bg-img-settings
jakedex Jan 22, 2018
e50c5d5
Add upload-image margin
jakedex Jan 23, 2018
151b976
Merge branch 'master' into bg-img-settings
jakedex Jan 23, 2018
37fcedc
Minor font-size change
jakedex Jan 23, 2018
8ce3621
Fix build
mfix22 Jan 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
onAspectRatioChange hook
  • Loading branch information
@jakedex
jakedex committed Jan 22, 2018
commit 2f135f794eb0b1fdb60c816b92dd44a5461e6b41
21 changes: 13 additions & 8 deletions pages/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,7 @@ class Editor extends React.Component {
paddingHorizontal: '32px',
uploading: false,
backgroundImage: null,
backgroundImageSize: '100%',
backgroundImagePositionX: '0%',
backgroundImagePositionY: '0%',
backgroundImageSelection: null,
code: props.content,
_initialState: this.props.initialState
},
Expand All @@ -81,6 +79,7 @@ class Editor extends React.Component {
this.save = this.save.bind(this)
this.upload = this.upload.bind(this)
this.updateCode = this.updateCode.bind(this)
this.updateAspectRatio = this.updateAspectRatio.bind(this)
}

componentDidMount() {
Expand All @@ -98,6 +97,7 @@ class Editor extends React.Component {
const s = { ...this.state }
delete s.code
delete s.backgroundImage
delete s.backgroundImageSelection
saveState(localStorage, s)
}

Expand All @@ -121,6 +121,10 @@ class Editor extends React.Component {
this.setState({ code })
}

updateAspectRatio(aspectRatio) {
this.setState({ aspectRatio })
}

save() {
this.getCarbonImage().then(dataUrl => {
const link = document.createElement('a')
Expand Down Expand Up @@ -166,10 +170,7 @@ class Editor extends React.Component {
list={LANGUAGES}
onChange={language => this.setState({ language: language.mime || language.mode })}
/>
<ColorPicker
onChange={(key, value) => this.setState({ [key]: value })}
config={this.state}
/>
<ColorPicker onChange={changes => this.setState(changes)} config={this.state} />
<Settings
onChange={(key, value) => this.setState({ [key]: value })}
enabled={this.state}
Expand Down Expand Up @@ -206,7 +207,11 @@ class Editor extends React.Component {
isOver={isOver || canDrop}
title={`Drop your file here to import ${isOver ? '✋' : '✊'}`}
>
<Carbon config={this.state} updateCode={code => this.updateCode(code)}>
<Carbon
config={this.state}
updateCode={code => this.updateCode(code)}
onAspectRatioChange={this.updateAspectRatio}
>
{this.state.code || DEFAULT_CODE}
</Carbon>
</Overlay>
Expand Down