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

Added 2 new devices for emulation #2

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

jeffersonsouza
Copy link

Added the iPhone 4 and Moto X for emulation and renamed the default device for iPhone 5

- Renamed the default device to ‘iPhone 5’
- added the Moto X device for emulation
- Added a space caracter on text ‘Ionic: Preview ‘
- Added the iPhone 4 device
@nickgartmann
Copy link
Contributor

Thanks for the PR @jeffersonsouza!

I think adding support for multiple types of emulators is a great idea. Probably the most maintainable way to go about this is to add a dictionary of emulation screen size / name pairs.

Something like:

devices: {
  "iphone-5": {
    width: 320,
    height: 568
  },
  "iphone-4": {
    width: 320,
    height: 480
  },
  "moto-x": {
    width: 360,
    height: 640
  }
}
module.exports = 
  activate: ->
    me = $(@)
    for device, dimensions in devices
      atom.workspaceView.command "ionic:preview-#{device}", =>
        me.dimensions = dimensions
        atom.workspace.open "ionic://localhost:8100", split: "right"
  # .. snip ..
  preview = new WebBrowserPreviewView(url: uri.format(), dimensions: me.dimensions)

Then in the WebBrowserPreviewView:

@content: (params) ->
  @iframe outlet: "frame", height: params.dimensions.height, width: params.dimensions.width, src: params.url, sandbox: "none"

thoughts?

@jeffersonsouza
Copy link
Author

Hum, interesting :)

Can I made these changes and re submit the pull request?

And, I can contribute with new devices sizes, is ok for you?

@nickgartmann
Copy link
Contributor

Sounds awesome :)

@mfdeveloper
Copy link

Hello @jeffersonsouza, Do you made this changes suggested by @nickgartmann ? I want so much use this feature. Additionally, my suggest is add a background-url into each css classes with a image of yours smartphones, what do you think?

@jeremiahholder
Copy link

Did anyone get this working? I'd love a dropdown within the Previewer to select the device/emulator/screensize desired. If it's as simple as the commentary above, I might try to hack it myself....but why re-invent the wheel if others have already done so?

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.

4 participants