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

Add to clipboard button for cli commands/code #998

Merged
merged 9 commits into from Nov 23, 2016

Conversation

Projects
None yet
4 participants
@fredericmarx
Collaborator

fredericmarx commented Nov 23, 2016

Solves #987 πŸ“‹βœ¨

screen shot 2016-11-23 at 06 22 28

I added a clipboard.js button to all cli command and code fields as suggested in #987.

This probably needs a feedback mechanism like a tooltip or toast. I'm happy to take suggestions as to what would be the best approach here.

@xtuc

This comment has been minimized.

Show comment
Hide comment
@xtuc

xtuc Nov 23, 2016

Member

Seems cool but could you please remove the npm-debug.log file https://github.com/babel/babel.github.io/pull/998/files#diff-19511cd8dc1fd5bc732a2a9f1f4ee2e1.

Member

xtuc commented Nov 23, 2016

Seems cool but could you please remove the npm-debug.log file https://github.com/babel/babel.github.io/pull/998/files#diff-19511cd8dc1fd5bc732a2a9f1f4ee2e1.

@seedofjoy

This comment has been minimized.

Show comment
Hide comment
@seedofjoy

seedofjoy Nov 23, 2016

Collaborator

Seems like it also copies $ symbol, or I'm wrong?

Collaborator

seedofjoy commented Nov 23, 2016

Seems like it also copies $ symbol, or I'm wrong?

@fredericmarx

This comment has been minimized.

Show comment
Hide comment
@fredericmarx

fredericmarx Nov 23, 2016

Collaborator

@xtuc Ha, you're right. I'm also adding npm-debug.log to .gitignore, if ok; this should probably never be committed.

Collaborator

fredericmarx commented Nov 23, 2016

@xtuc Ha, you're right. I'm also adding npm-debug.log to .gitignore, if ok; this should probably never be committed.

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 23, 2016

Member

Awesome stuff @fredericmarx!

This probably needs a feedback mechanism like a tooltip or toast. I'm happy to take suggestions as to what would be the best approach here.

We have bootstrap enabled for scrollspy and other things so we should be able to use the tooltips from there? http://getbootstrap.com/javascript/#tooltips

As for the $ if there isn't an easy solution we should just remove it from the code snippets instead.

Also if it looks clearer we can add a background color to the code snippets: like react has

screen shot 2016-11-23 at 7 16 05 am

lodash

screen shot 2016-11-23 at 7 16 30 am

Member

hzoo commented Nov 23, 2016

Awesome stuff @fredericmarx!

This probably needs a feedback mechanism like a tooltip or toast. I'm happy to take suggestions as to what would be the best approach here.

We have bootstrap enabled for scrollspy and other things so we should be able to use the tooltips from there? http://getbootstrap.com/javascript/#tooltips

As for the $ if there isn't an easy solution we should just remove it from the code snippets instead.

Also if it looks clearer we can add a background color to the code snippets: like react has

screen shot 2016-11-23 at 7 16 05 am

lodash

screen shot 2016-11-23 at 7 16 30 am

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 23, 2016

Member

http://tutsplus.github.io/clipboard/ is pretty nice as well actually?

screen shot 2016-11-23 at 7 21 18 am

Member

hzoo commented Nov 23, 2016

http://tutsplus.github.io/clipboard/ is pretty nice as well actually?

screen shot 2016-11-23 at 7 21 18 am

@seedofjoy

This comment has been minimized.

Show comment
Hide comment
@seedofjoy

seedofjoy Nov 23, 2016

Collaborator

For example:

$ npm install --save-dev babel-plugin-check-es2015-constants

Would in this case $ will be copied to clipboard?

Collaborator

seedofjoy commented Nov 23, 2016

For example:

$ npm install --save-dev babel-plugin-check-es2015-constants

Would in this case $ will be copied to clipboard?

@fredericmarx

This comment has been minimized.

Show comment
Hide comment
@fredericmarx

fredericmarx Nov 23, 2016

Collaborator

Great feedback! I added a Copy label to the button to make it more obvious and changed the code background color to a light shade of Babel yellow.

This is what it looks like:

screen shot 2016-11-23 at 14 23 09

Collaborator

fredericmarx commented Nov 23, 2016

Great feedback! I added a Copy label to the button to make it more obvious and changed the code background color to a light shade of Babel yellow.

This is what it looks like:

screen shot 2016-11-23 at 14 23 09

@fredericmarx

This comment has been minimized.

Show comment
Hide comment
@fredericmarx

fredericmarx Nov 23, 2016

Collaborator

@seedofjoy At the moment the button also copies the $-symbol. I tend to leave it out altogether; having a character that’s opaquely omitted from copying is probably confusing.

Collaborator

fredericmarx commented Nov 23, 2016

@seedofjoy At the moment the button also copies the $-symbol. I tend to leave it out altogether; having a character that’s opaquely omitted from copying is probably confusing.

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 23, 2016

Member

Awesome - testing it out locally. looks like pages like http://127.0.0.1:4000/docs/plugins/preset-latest/ aren't rendering the clipboard but the main page is (difference between .highlight pre/code?

Member

hzoo commented Nov 23, 2016

Awesome - testing it out locally. looks like pages like http://127.0.0.1:4000/docs/plugins/preset-latest/ aren't rendering the clipboard but the main page is (difference between .highlight pre/code?

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 23, 2016

Member

another nice thing about http://tutsplus.github.io/clipboard/ is that it changes the text to "copied" after clicking

copyCode.on('success', function(event) {
    event.clearSelection();
    event.trigger.textContent = 'Copied';
    window.setTimeout(function() {
        event.trigger.textContent = 'Copy';
    }, 2000);
});
Member

hzoo commented Nov 23, 2016

another nice thing about http://tutsplus.github.io/clipboard/ is that it changes the text to "copied" after clicking

copyCode.on('success', function(event) {
    event.clearSelection();
    event.trigger.textContent = 'Copied';
    window.setTimeout(function() {
        event.trigger.textContent = 'Copy';
    }, 2000);
});
@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 23, 2016

Member

Also weird (might just be me but chrome + osx) that the text is being selected

copy

Member

hzoo commented Nov 23, 2016

Also weird (might just be me but chrome + osx) that the text is being selected

copy

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 23, 2016

Member

Ok we can modify the docs and remove $ if necessary

Member

hzoo commented Nov 23, 2016

Ok we can modify the docs and remove $ if necessary

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 23, 2016

Member

Ok made a change ^ copy

we should also try to restyle that particular buttons focus instead of the blue line?

Member

hzoo commented Nov 23, 2016

Ok made a change ^ copy

we should also try to restyle that particular buttons focus instead of the blue line?

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 23, 2016

Member

Yeah the differences of the main page and the docs pages http://127.0.0.1:4000/docs/plugins/transform-react-jsx-source/

screen shot 2016-11-23 at 9 14 35 am

The button doesn't seem to show up without removing xs-small? And the styling might need to be applied to .highlight rather than pre for the docs pages since specificity

screen shot 2016-11-23 at 9 15 25 am

Member

hzoo commented Nov 23, 2016

Yeah the differences of the main page and the docs pages http://127.0.0.1:4000/docs/plugins/transform-react-jsx-source/

screen shot 2016-11-23 at 9 14 35 am

The button doesn't seem to show up without removing xs-small? And the styling might need to be applied to .highlight rather than pre for the docs pages since specificity

screen shot 2016-11-23 at 9 15 25 am

@fredericmarx

This comment has been minimized.

Show comment
Hide comment
@fredericmarx

fredericmarx Nov 23, 2016

Collaborator

I really like the solution with the changing button label!

I've also added clipboard buttons to the docs pages. The lower one in the screenshot is focused.

screen shot 2016-11-23 at 15 48 17

Collaborator

fredericmarx commented Nov 23, 2016

I really like the solution with the changing button label!

I've also added clipboard buttons to the docs pages. The lower one in the screenshot is focused.

screen shot 2016-11-23 at 15 48 17

@fredericmarx

This comment has been minimized.

Show comment
Hide comment
@fredericmarx

fredericmarx Nov 23, 2016

Collaborator

The button doesn't seem to show up without removing xs-small?

I decided to hide the button on small screens because it was overlapping with one-liners of code: ffab056

Collaborator

fredericmarx commented Nov 23, 2016

The button doesn't seem to show up without removing xs-small?

I decided to hide the button on small screens because it was overlapping with one-liners of code: ffab056

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 23, 2016

Member

Awesome looks good! Might be cool if we could remove comments from the text when copying haha.

We can make another issue to remove $ since there's a bunch of those

Will check a few more pages

Member

hzoo commented Nov 23, 2016

Awesome looks good! Might be cool if we could remove comments from the text when copying haha.

We can make another issue to remove $ since there's a bunch of those

Will check a few more pages

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 23, 2016

Member

also add's it to learn es2015 which is interesting! anything else? LGTM just need to start updating the docs

Member

hzoo commented Nov 23, 2016

also add's it to learn es2015 which is interesting! anything else? LGTM just need to start updating the docs

@hzoo hzoo merged commit 52e4b85 into babel:master Nov 23, 2016

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 23, 2016

Member

I'l make another issue for the $ and formatting, thanks a lot @fredericmarx!! πŸŽ‰

Member

hzoo commented Nov 23, 2016

I'l make another issue for the $ and formatting, thanks a lot @fredericmarx!! πŸŽ‰

@fredericmarx fredericmarx deleted the fredericmarx:clipboard-button branch Nov 23, 2016

@hzoo hzoo referenced this pull request Nov 23, 2016

Closed

Cleanup code snippets after #1002

1 of 3 tasks complete
@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 29, 2016

Member

@fredericmarx I can add you as a collab for this repo if you'd like as well!

Member

hzoo commented Nov 29, 2016

@fredericmarx I can add you as a collab for this repo if you'd like as well!

@fredericmarx

This comment has been minimized.

Show comment
Hide comment
@fredericmarx

fredericmarx Nov 29, 2016

Collaborator

That'd be awesome! Thanks, @hzoo πŸŽ‰

Collaborator

fredericmarx commented Nov 29, 2016

That'd be awesome! Thanks, @hzoo πŸŽ‰

@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

@hzoo hzoo referenced this pull request Nov 30, 2016

Closed

Open in REPL button? #1017

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