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

Support for Customizing Button Labels #58

Open
Kenobi-the-2nd opened this issue May 20, 2021 · 4 comments
Open

Support for Customizing Button Labels #58

Kenobi-the-2nd opened this issue May 20, 2021 · 4 comments
Labels
help wanted Extra attention is needed out-of-scope

Comments

@Kenobi-the-2nd
Copy link

Would it be possible to add functionality for setting the labels of the user defined buttons? For example, for my first user defined button, the label just reads "user action 1".

image

Thank-you for a great extension!

@kryptan
Copy link

kryptan commented Aug 3, 2021

How did you change icon for the user defined button? For me it just displays digits 1, 2, etc. and no way to change it. Issue for custom icons is still open. How did you do that?

@Kenobi-the-2nd
Copy link
Author

@kryptan The buttons that come with the extension are .svg files found under this path:

C:\Users\[user_name]\.vscode\extensions\jerrygoyal.shortcut-menu-bar-3.0.3\images

I simply replaced these with .svg files I downloaded. The .svg will need to be the correct size (16x16). Then just rename the original files and name your custom .svg files the same as the original files. For example, rename "userButton01.svg" to "userButton01_original.svg", then name your custom .svg "userButton01.svg". After reloading VS Code your new icons should show up.

A good place to find icons/buttons is https://primer.style/octicons/.

Also, if you want to update the button labels, you can just edit the title attribute of the command object in the package.json file under the extension's root folder. The entries in the json file look like this:

{
    "contributes": {
        "commands": [
            ...
            {
                "command": "ShortcutMenuBar.userButton01",
                "title": "Diff w/ Repository",
                "category": "ShortcutMenuBar",
                "icon": {
                    "light": "images/userButton01_light.svg",
                    "dark": "images/userButton01.svg"
                }
            },
            ...
        ]
    }
}

Note that you'll need to reload VS Code after making changes to this file.

@GorvGoyl
Copy link
Owner

@Kenobi-the-2nd I guess then you could also edit the package.json file of this installed extension and rename the title

image

@GorvGoyl GorvGoyl added help wanted Extra attention is needed out-of-scope labels Feb 13, 2022
@MikeWillis
Copy link

Note that just doing Developer: Reload Window after swapping the SVG files doesn't work. You have to close and re-open VS Code (at least in my case).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed out-of-scope
Projects
None yet
Development

No branches or pull requests

4 participants