chore: contributing update (#210)
This commit is contained in:
parent
c242d9a4b1
commit
06e4f33313
1 changed files with 81 additions and 3 deletions
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
## Requirements:
|
## Requirements:
|
||||||
|
|
||||||
* Nodejs ^6.x
|
* Nodejs ^8.x
|
||||||
* Visual Studio Code
|
* Visual Studio Code
|
||||||
* GPG Tool
|
* GPG Tool
|
||||||
|
|
||||||
|
@ -32,7 +32,7 @@ yarn install
|
||||||
|
|
||||||
To compile to the source code, you have to execute the build task through visual studio code.
|
To compile to the source code, you have to execute the build task through visual studio code.
|
||||||
First you need to invoke to quick command (on MacOS `⌘P`, while on Linux/windows is `ctrl+p`)
|
First you need to invoke to quick command (on MacOS `⌘P`, while on Linux/windows is `ctrl+p`)
|
||||||
then type `task build` and wait until vsc will have finished the task.
|
then type `task build` and wait until VSC will have finished the task.
|
||||||
|
|
||||||
### Testing the theme
|
### Testing the theme
|
||||||
|
|
||||||
|
@ -40,6 +40,82 @@ To test the theme, you will have to go to the debug section, select the *Launch
|
||||||
|
|
||||||
### Adding new Material Theme commands
|
### Adding new Material Theme commands
|
||||||
|
|
||||||
|
Material Theme commands are located inside the `extensions/commands` directory. They are split by folders so you can find a single specific `index.ts` file inside a `command` folder. This is a patter choice: so you can add related command helpers inside that folder.
|
||||||
|
|
||||||
|
#### index.ts
|
||||||
|
|
||||||
|
The main file must return a `function`. The `function` can be `async` or `sync`.
|
||||||
|
|
||||||
|
We want to make this clear, so the `async` declaration must be present even if you want to use `then()` for chaining inside the `function`.
|
||||||
|
|
||||||
|
##### Example of `async` exported `function`
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default async (): Promise<boolean> => {
|
||||||
|
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Example of `sync` exported `function`
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default (): boolean => {
|
||||||
|
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Using external "mini" modules
|
||||||
|
|
||||||
|
We encourage you to split up your command in other small modules so they can be **tested** more easily and outside of the context.
|
||||||
|
|
||||||
|
#### Register the command
|
||||||
|
|
||||||
|
You must register the new command to execute it when it's called by the user.
|
||||||
|
|
||||||
|
Firstly add the command to our commands `extensions/commands/index.ts`
|
||||||
|
|
||||||
|
```js
|
||||||
|
export {default as awesomeCommand} from './awesome-command';
|
||||||
|
```
|
||||||
|
|
||||||
|
Commands are registered within the `extensions/material.theme.config.ts` file.
|
||||||
|
|
||||||
|
Just add a new registration after the others that will run your command:
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
Commands.registerCommand('materialTheme.awesomeCommand', () => ThemeCommands.awesomeCommand());
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Add to package.json
|
||||||
|
|
||||||
|
When you are ready to test your new command you must add its declaration within the `package.json`. The command **must be prefixed with** `materialTheme.` prefix.
|
||||||
|
|
||||||
|
As the others your command will look like this:
|
||||||
|
|
||||||
|
Level: `contribute.commands -> Array`
|
||||||
|
```json
|
||||||
|
|
||||||
|
{
|
||||||
|
"command": "materialTheme.awesomeCommand",
|
||||||
|
"title": "Awesome Title For Command",
|
||||||
|
"category": "🎨 Material Theme"
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Build and run
|
||||||
|
|
||||||
|
Now you can re-build the theme and just run the debug, you will see your command in the command list of VSCode just searching for its title.
|
||||||
|
|
||||||
|
#### Test your command
|
||||||
|
|
||||||
|
A test suite is currently in developing. Update soon.
|
||||||
|
|
||||||
|
|
||||||
|
### Adding new custom setting
|
||||||
|
|
||||||
Soon(ish)®
|
Soon(ish)®
|
||||||
|
|
||||||
### Adding new icons
|
### Adding new icons
|
||||||
|
@ -48,10 +124,12 @@ Soon(ish)®
|
||||||
|
|
||||||
* Add the reference to that icon to the `~/src/icons/partials/fileNames.js` or if your icon is referred to a directory adds the reference to the `~/src/icons/partials/folderNames.js` file, otherwise to `~/src/icons/partials/fileExtensions.js` if is referred to a file extension.
|
* Add the reference to that icon to the `~/src/icons/partials/fileNames.js` or if your icon is referred to a directory adds the reference to the `~/src/icons/partials/folderNames.js` file, otherwise to `~/src/icons/partials/fileExtensions.js` if is referred to a file extension.
|
||||||
|
|
||||||
* If you want to make the icon sensitive to be accented, modify the `~/extensions/defaults.json` file, adding the icon definition to the `accentableIcons` array (e.g. ["_folder_open", "_folder_open_build"]) and the path to the `icons.theme.iconDefinitions` object. The same applies to variants (the variant icons array is called "variantsIcons")
|
* If you want to make the icon sensitive to be accented, modify the `~/extensions/defaults.json` file, adding the icon definition to the `accentableIcons` array (e.g. ["_folder_open", "_folder_open_build"]) and the path to the `icons.theme.iconDefinitions` object. **The same applies to variants (the variant icons array is called "variantsIcons")**
|
||||||
|
|
||||||
* Execute the build command.
|
* Execute the build command.
|
||||||
|
|
||||||
|
* Start the debug
|
||||||
|
|
||||||
* Enjoy your new icons in Material Theme, and don't forget to pull request!
|
* Enjoy your new icons in Material Theme, and don't forget to pull request!
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue