docs icon indicating copy to clipboard operation
docs copied to clipboard

feat: update API/SFC preference using shortcuts

Open edimitchel opened this issue 2 years ago • 14 comments

Description of Problem

Easy the switch without using mouse and keep focus on content

Proposed Solution

Add keyup event listener for API and SFC preference. firefox_ZIBbwDdyPO

Ctrl+(Alt/Option)+A: toggle Options/Composition API Ctrl+(Alt/Option)+T: toggle template (SFC or HTML)

Additional Information

Externalize logic into a composable

edimitchel avatar Jan 20 '22 21:01 edimitchel

✔️ Deploy Preview for vue-docs-preview ready!

🔨 Explore the source changes: 91136840625bf846f83782498b72edb39c1e0b33

🔍 Inspect the deploy log: https://app.netlify.com/sites/vue-docs-preview/deploys/61f1291fc3d6000007ca34a6

😎 Browse the preview: https://deploy-preview-1449--vue-docs-preview.netlify.app

netlify[bot] avatar Jan 20 '22 21:01 netlify[bot]

@skirtles-code, this one!

edimitchel avatar Jan 20 '22 22:01 edimitchel

Can we get rid of the dotted underline? It looks a bit out of place. We can mention the shortcut at the end of the "Introduction - API Styles" section .

yyx990803 avatar Jan 21 '22 08:01 yyx990803

Can we get rid of the dotted underline? It looks a bit out of place. We can mention the shortcut at the end of the "Introduction - API Styles" section .

Yes, I'll do that

edimitchel avatar Jan 21 '22 09:01 edimitchel

I just tried on OSX, and shortcut doesn't work for an unknown reason..

edimitchel avatar Jan 26 '22 10:01 edimitchel

I just tried on OSX, and shortcut doesn't work for an unknown reason..

Fixed!

edimitchel avatar Jan 26 '22 12:01 edimitchel

@edimitchel Great 👍

dammy001 avatar Jan 26 '22 13:01 dammy001

Deploy Preview for vuejs ready!

Name Link
Latest commit 8ff55a7487cf15666db7a88b0b125b9a7acc6989
Latest deploy log https://app.netlify.com/sites/vuejs/deploys/6317e09f41ec890008030dc7
Deploy Preview https://deploy-preview-1449--vuejs.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] avatar Feb 08 '22 11:02 netlify[bot]

I use keyCode as key doesn't result to a or t but Dead and a cross symbol.

edimitchel avatar Feb 11 '22 20:02 edimitchel

Any news here @yyx990803 ?

edimitchel avatar Apr 05 '22 16:04 edimitchel

@NataliaTepluhina can we bring this into Vue docs?

edimitchel avatar Jun 07 '22 14:06 edimitchel

@edimitchel will take a look this week when I am back from the conference! @skirtles-code do you have any comments on this one?

NataliaTepluhina avatar Jun 08 '22 11:06 NataliaTepluhina

Preview URL: https://deploy-preview-1449--vuejs.netlify.app/ Netlify url in the comment above is not good

edimitchel avatar Jun 08 '22 12:06 edimitchel

I'd also note that I'm on Ubuntu, which uses Ctrl+Alt+T to launch a terminal window, so I can't actually use that shortcut to toggle the API. But I'm not sure whether that's worth addressing for the relatively smaller number of people affected.

Decided to remove the SFC Preference shortcut which don't making sense, unlink the API Preference shortcut

edimitchel avatar Sep 07 '22 00:09 edimitchel

@edimitchel I'd like to get this over the line. Could you take a look at my latest comments above? There are also merge conflicts with the current main branch. Thanks.

skirtles-code avatar Mar 11 '23 19:03 skirtles-code

Closing this PR as it's not adding as much functionality as I thought

edimitchel avatar Jul 06 '23 08:07 edimitchel