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

Make REPL editors resizable by width. #1003

Merged
merged 4 commits into from Nov 29, 2016

Conversation

Projects
None yet
4 participants
@seedofjoy
Collaborator

seedofjoy commented Nov 23, 2016

Solves #825

Makes resizable editor columns (10px transparent zone).
Size set in percent, panel minimum size - 20%.
repl-resize

@brigand

This comment has been minimized.

Show comment
Hide comment
@brigand

brigand Nov 23, 2016

Contributor

Does this have any issues if you move the mouse too fast? I remember having issues with that on a past project.

Contributor

brigand commented Nov 23, 2016

Does this have any issues if you move the mouse too fast? I remember having issues with that on a past project.

@seedofjoy

This comment has been minimized.

Show comment
Hide comment
@seedofjoy

seedofjoy Nov 23, 2016

Collaborator

Only that cursor may change from col-resize to text. I can fix this by adding class to parent component with cursor: col-resize during resize phase. But actually this almost imperceptible.

Please, feel free to try it.

Collaborator

seedofjoy commented Nov 23, 2016

Only that cursor may change from col-resize to text. I can fix this by adding class to parent component with cursor: col-resize during resize phase. But actually this almost imperceptible.

Please, feel free to try it.

@brigand

This comment has been minimized.

Show comment
Hide comment
@brigand

brigand Nov 23, 2016

Contributor

Cool, this is much nicer than the implementation I went with (an invisible fixed position div). TIL

Contributor

brigand commented Nov 23, 2016

Cool, this is much nicer than the implementation I went with (an invisible fixed position div). TIL

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 23, 2016

Member

Awesome! - might be ok to make 90-10 if it still works. Thoughts on adding a different color or signal on hover? astexplorer.net has this

Member

hzoo commented Nov 23, 2016

Awesome! - might be ok to make 90-10 if it still works. Thoughts on adding a different color or signal on hover? astexplorer.net has this

@seedofjoy

This comment has been minimized.

Show comment
Hide comment
@seedofjoy

seedofjoy Nov 23, 2016

Collaborator

Forgot about babel-repl-errors and babel-repl-console panels. I think they should resize with inputs (errors = input and console=output width).
In next commit will add colors, hover, 90-10, (and resizing errors and console?)

Collaborator

seedofjoy commented Nov 23, 2016

Forgot about babel-repl-errors and babel-repl-console panels. I think they should resize with inputs (errors = input and console=output width).
In next commit will add colors, hover, 90-10, (and resizing errors and console?)

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 23, 2016

Member

yeah looks like there was an earlier similar issue about that as well #90

Member

hzoo commented Nov 23, 2016

yeah looks like there was an earlier similar issue about that as well #90

@seedofjoy

This comment has been minimized.

Show comment
Hide comment
@seedofjoy

seedofjoy Nov 24, 2016

Collaborator

2016-11-24 21 59 06

2016-11-24 21 58 36

What do you think about this? It's work nice (`errors` and `console` panels resize well), but unfortunately add visual styles with resize bar to bottom panel without major changes in layout very hard.
Collaborator

seedofjoy commented Nov 24, 2016

2016-11-24 21 59 06

2016-11-24 21 58 36

What do you think about this? It's work nice (`errors` and `console` panels resize well), but unfortunately add visual styles with resize bar to bottom panel without major changes in layout very hard.
@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 24, 2016

Member

Lgtm - there are some layout issues with those anyway - if necessary we should change then?

Member

hzoo commented Nov 24, 2016

Lgtm - there are some layout issues with those anyway - if necessary we should change then?

@seedofjoy

This comment has been minimized.

Show comment
Hide comment
@seedofjoy

seedofjoy Nov 28, 2016

Collaborator

out
Made some minor layout changes to fit resize bar over the entire height

Collaborator

seedofjoy commented Nov 28, 2016

out
Made some minor layout changes to fit resize bar over the entire height

@xtuc

This comment has been minimized.

Show comment
Hide comment
@xtuc

xtuc Nov 28, 2016

Member

Awsome 👍. LGTM also.

I tried on latest Firefox. I assume someone tested on Chrome.

@hzoo We could maybe test on IE or Safari ?

Member

xtuc commented Nov 28, 2016

Awsome 👍. LGTM also.

I tried on latest Firefox. I assume someone tested on Chrome.

@hzoo We could maybe test on IE or Safari ?

@seedofjoy

This comment has been minimized.

Show comment
Hide comment
@seedofjoy

seedofjoy Nov 28, 2016

Collaborator

I have tested on Chrome and Safari. In IE I can check tomorrow

Collaborator

seedofjoy commented Nov 28, 2016

I have tested on Chrome and Safari. In IE I can check tomorrow

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 28, 2016

Member

We can merge now too

Looks like the logs don't show up for me on the bottom right anymore?

test:

  • resize
  • syntax errors on the left console
  • output on the right console
Member

hzoo commented Nov 28, 2016

We can merge now too

Looks like the logs don't show up for me on the bottom right anymore?

test:

  • resize
  • syntax errors on the left console
  • output on the right console
@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 29, 2016

Member

actually I tried it again and it works fine? dono what happened before

Member

hzoo commented Nov 29, 2016

actually I tried it again and it works fine? dono what happened before

@hzoo hzoo merged commit b7eb6a0 into babel:master Nov 29, 2016

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 29, 2016

Member

Awesome stuff! Thanks @seedofjoy (will add you to the repo if you'd like)

Member

hzoo commented Nov 29, 2016

Awesome stuff! Thanks @seedofjoy (will add you to the repo if you'd like)

@seedofjoy seedofjoy deleted the seedofjoy:resizable-repl branch Nov 29, 2016

@seedofjoy

This comment has been minimized.

Show comment
Hide comment
@seedofjoy

seedofjoy Nov 29, 2016

Collaborator

@hzoo Great, thank you! :octocat:

Collaborator

seedofjoy commented Nov 29, 2016

@hzoo Great, thank you! :octocat:

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 30, 2016

Member

and feel free to join our https://slack.babeljs.io if you haven't already

Member

hzoo commented Nov 30, 2016

and feel free to join our https://slack.babeljs.io if you haven't already

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment