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.

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

[imagetool] Make imagetool responsive #590

Merged
merged 9 commits into from
Feb 14, 2018
Merged

Conversation

kristofferjs
Copy link
Contributor

  • Imagetool inside Fieldset
  • Nicer previews
  • Fixes bug where mousedown is locked when dragging outside window
  • Rearrange the listeners to support touch. Also using syntetic events
  • Keep cropbox inside boundries when dragging

Some bugs are still present:

  • moving hotspot still makes show incorrectly previews while moving
  • the code preventing drag crop outside seems to be choppy (should work on the axis that do not goes outside the boundries)

Copy link
Member

@bjoerge bjoerge left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A couple of comments, otherwise LGTM. I'm just gonna test this a bit locally before approving.

@@ -39,6 +40,7 @@ export default class HotspotImage extends React.PureComponent {
static defaultProps = {
alignX: 'center',
alignY: 'center',
className: undefined,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to specify undefined as default prop

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I get a warning from eslint if I don't.

@@ -136,7 +138,7 @@ export default class HotspotImage extends React.PureComponent {
}
})
return (
<div className={className} style={style} ref={this.setContainerElement}>
<div className={className || styles.root} style={style} ref={this.setContainerElement}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't we merge the classNames? That's the pattern we use elsewhere I think.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@@ -15,6 +16,41 @@ const MARGIN_PX = 8
const CROP_HANDLE_SIZE = 12
const HOTSPOT_HANDLE_SIZE = 10

function checkCropBounderies(value, delta) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo bounderies should be boundaries (or just bounds for short)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thx

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo still there?

return true
}

function limitToBounderies(value, delta) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same typo as mentioned above

@bjoerge bjoerge changed the title Responsive hotspot Responsive imagetool Feb 14, 2018
@bjoerge bjoerge changed the title Responsive imagetool [imagetool] Make imagetool responsive Feb 14, 2018
@kristofferjs kristofferjs merged commit 1c19ee3 into next Feb 14, 2018
@kristofferjs kristofferjs deleted the responsive-hotspot branch February 14, 2018 11:23
bjoerge pushed a commit that referenced this pull request Feb 15, 2018
* [form-builder] Styling imageToolInput

* [imagetool] Make sure the container takes all width

* [imgetool] Keep things inside boundries

* [imagetool] Touch support

* [imagetool] Canvas as block

* [imagetool] CSS-file and wrapper. fix position bug

* [form-builder] Not so high image tool input

* [imagetool] Changes requested in PR

* [imagetool] Typo
bjoerge pushed a commit that referenced this pull request Feb 15, 2018
* [form-builder] Styling imageToolInput

* [imagetool] Make sure the container takes all width

* [imgetool] Keep things inside boundries

* [imagetool] Touch support

* [imagetool] Canvas as block

* [imagetool] CSS-file and wrapper. fix position bug

* [form-builder] Not so high image tool input

* [imagetool] Changes requested in PR

* [imagetool] Typo
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants