diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..0dffaf7 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,11 @@ +root = true + +[*] +end_of_line = crlf +insert_final_newline = true +trim_trailing_whitespace = true +charset = utf-8 + +[*.{py, json}] +indent_style = space +indent_size = 4 \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..83a2cd1 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,65 @@ +# 0.2.2 +More updated directives including datepicker +- better contact chips +- simple md-content +- datepicker and divider +- md-grid list and tile +- md-highlight-text updated +- new md-icons snippets +- input container + +# 0.2.1 +- Three snippets for md-chips are consolidated into one super md-chips snippet +- added some commits +- more options for md-card +- updated autocomplete directive with options +- updated md-checkbox snippet +- certain pieces are required + consolidating chips directive + +# 0.2.0 +- all options for md-button covered +- more md-button options +- placeholder py file for versioning +- added a CHANGELOG and a CONTRIBUTING file +- enforce editor line spacing + +# 0.1.1 +**New Snippets:** + +Reference: https://material.angularjs.org/latest/ + +- md-autocomplete +- md-button +- md-card +- md-checkbox +- md-chip +- md-chip-remove +- md-chips +- md-contact-chips +- md-content +- md-divider +- md-grid-list +- md-grid-tile +- md-highlight-text +- md-icon +- md-input +- md-input-container +- md-list +- md-list-item +- md-menu +- md-progress-circular +- md-progress-linear +- md-radio-button +- md-radio-group +- md-select +- md-sidenav +- md-sidenav-focus +- md-slider +- md-subheader +- md-swipe-left +- md-swipe-right +- md-switch +- md-tab +- md-tabs +- md-toolbar +- md-tooltip diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..1bb6d21 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,64 @@ +Contributing to Angular-Material-Snippets +--- + +Thank you for considering to help contribute to our source code and to make Angular-Material-Snippets even better than it is today! Here are some of the guidelines we would like you to follow: + +- [Issues and Bugs](#issues) +- [Feature Request](#feature-request) +- [Submission Guidelines](#submission) +- [Submitting a Pull Request](#pull-request) + +## Found an Issue? + +If you find a bug in the source code or a mistake in the documentation/wikis, you can help remedy it by submitting an issue to [Github Repository](https://github.com/devotis/sublime-angular-material-snippets) + +***Please see the Submission Guidelines below*** + +## Want a feature? + +You can request a new feature by submitting an issue to our [Github Repository](https://github.com/devotis/sublime-angular-material-snippets). If you would like to implement a new feature yourself then consider what kind of change it is: + +- ***Major Changes***: that can dramatically change the core functionality of the plugin +- ***Small Changes***: can be crafted and submitted to the [Github Repository](https://github.com/devotis/sublime-angular-material-snippets) as a Pull Request + +## Submission Guidelines: + +_Before you submit an issue, search the archive. Your question may have already been answered._ + +If your issue appears to be a bug, and hasn't been reported, open a new issue. Help us to maximize the effort we can spend fixing issues and adding new features by not reporting duplicate issues. Providing the following information will increase the chances of your issue being dealt with quickly: + +- **Overview of the Issue** - if an error is being thrown, a _non minified_ stack trace helps +- **Motivation for or Use Case** - explain why this is a bug for you +- **Versioning** - is this issue being caused because of an outdated plugin? +- **Operating Systems** - is this a problem that is unique to your Operating System? +- **Reproduce the Error** - provide steps on how to re-create the error +- **Related Issues** - has a similar issue been reported before? +- **Suggest a fix** - if you can't fix the bug yourself, perhaps you can point to what might be causing the problem (i.e. line of code or commit) + +## Submitting a Pull Request + +Before you submit a pull request consider the following guidelines: + +- Search [Github](https://github.com/devotis/sublime-angular-material-snippets/pulls) for an open or closed PR that relates to your submission. You do not want to duplicate effort. +- Make your changes in a new git branch: +```bash +git checkout -b my-fix-branch master +``` +- Commit your changes using a descriptive commit message that easily describes the resolution. Please note that providing a further description can be made in the PR submission form +```bash +git commit -a +``` +- Push your branch to Github +```bash +git push origin my-fix-branch +``` +- In Github, submit a PR to ```Angular-Material-Snippets-for-Sublime``` +- If we suggest changes then: + - Make the required updates + - Rebase your branch and force push to your Github Repo _(this will update your PR)_: + ```bash + git rebase master -i + git push origin my-fix-branch -f + ``` + +**That's it! Thank you for your contribution** diff --git a/Default.py b/Default.py new file mode 100644 index 0000000..4bc26f3 --- /dev/null +++ b/Default.py @@ -0,0 +1,4 @@ +import os +import sys + +__version__ = '0.2.2' diff --git a/README.md b/README.md index 38992bb..23d4106 100644 --- a/README.md +++ b/README.md @@ -2,66 +2,31 @@ A Sublime Text 2/3 snippet to generate Angular Material snippets for <md-button>, <md-input>, <md-icon>, etc -Work in progress here. Collaborators are welcome to add snippets for directives! - +Collaborators are welcome to add and improve snippets for directives. All snippets should be based on the directives described in this documentation: https://material.angularjs.org/latest/#/ ## Install -### Option 1: Manual +### Option 1: Package Control -Copy the files to your Packages directory. +On Mac press Cmd+Shift+P or on PC press Ctrl+Shift+P. Then type 'Install' then press enter to see a list of packages. Search for 'Angular Material Snippets' then press enter to install. -### Option 2: Package Control +### Option 2: Manual -In the command pallette (Cmd-Shift+P on Mac) type 'Install' then press enter to see a list of packages. Search for 'AngularMaterial' then press enter to install. +Copy the files to your Packages directory. ## Usage -Start typing `Ctrl+Space to autocomplete. ##Snippets -TODO: build support for these snipperts - -All snippest are and should be based on the directives described in this documentation - -https://material.angularjs.org/latest/#/ +See the [directives](https://github.com/devotis/sublime-angular-material-snippets/tree/master/directives) directory for supported snippets. - md-autocomplete -- md-button (DONE) +- md-button - md-card -- md-checkbox -- md-chip -- md-chip-remove -- md-chips -- md-contact-chips -- md-content -- md-divider -- md-grid-list -- md-grid-tile -- md-highlight-text -- md-icon -- md-input -- md-input-container -- md-list -- md-list-item -- md-progress-circular -- md-progress-linear -- md-radio-button -- md-radio-group -- md-select -- md-sidenav -- md-sidenav-focus -- md-slider -- md-subheader -- md-swipe-left -- md-swipe-right -- md-switch -- md-tab -- md-tabs -- md-toolbar -- md-tooltip +etc... ## License -[MIT Licensed](http://sloria.mit-license.org/). \ No newline at end of file +[MIT Licensed](http://sloria.mit-license.org/). diff --git a/directives/md-autocomplete.sublime-snippet b/directives/md-autocomplete.sublime-snippet new file mode 100644 index 0000000..856b013 --- /dev/null +++ b/directives/md-autocomplete.sublime-snippet @@ -0,0 +1,15 @@ + + + ${5: + ${6:\{\{ ${8:item.display} \}\}} + } + ${9: + ${10:No Matches Found.} + } + +]]> + md-autocomplete + Angular Material - Autocomplete directive with options + text.html + diff --git a/directives/md-button.sublime-snippet b/directives/md-button.sublime-snippet index fb19ec5..87706d8 100644 --- a/directives/md-button.sublime-snippet +++ b/directives/md-button.sublime-snippet @@ -1,6 +1,6 @@ - $1]]> + ${12:content}]]> md-button - Angular Material - button directive with optional ink ripples (default enabled). + Angular Material - Button directive with options text.html - \ No newline at end of file + diff --git a/directives/md-card.sublime-snippet b/directives/md-card.sublime-snippet new file mode 100644 index 0000000..31a4a2a --- /dev/null +++ b/directives/md-card.sublime-snippet @@ -0,0 +1,20 @@ + + + ${1:${3:image caption}} + +

${4:Card headline}

+

${5:Card content}

+ + ${6: + ${7:Card footer} + } + ${8:
+ ${12:${13:content}} +
} + +]]> + md-card + Angular Material - Card directive with options + text.html + diff --git a/directives/md-checkbox.sublime-snippet b/directives/md-checkbox.sublime-snippet new file mode 100644 index 0000000..4d6141a --- /dev/null +++ b/directives/md-checkbox.sublime-snippet @@ -0,0 +1,10 @@ + + + ${13:content} + +]]> + md-checkbox + Angular Material - Checkbox directive with options + text.html + diff --git a/directives/md-chips.sublime-snippet b/directives/md-chips.sublime-snippet new file mode 100644 index 0000000..a542875 --- /dev/null +++ b/directives/md-chips.sublime-snippet @@ -0,0 +1,16 @@ + + + ${19: + ${20:content} + } + ${21:} + ${24:${25:content}} + +]]> + md-chips + Angular Material - md-chips with full options and templating + text.html + diff --git a/directives/md-contact-chips.sublime-snippet b/directives/md-contact-chips.sublime-snippet new file mode 100644 index 0000000..558605b --- /dev/null +++ b/directives/md-contact-chips.sublime-snippet @@ -0,0 +1,9 @@ + + + +]]> + md-contact-chips + Angular Material - md-contact-chips with full options + text.html + diff --git a/directives/md-content.sublime-snippet b/directives/md-content.sublime-snippet new file mode 100644 index 0000000..03d7c8f --- /dev/null +++ b/directives/md-content.sublime-snippet @@ -0,0 +1,10 @@ + + + ${3:Lorem ipsum dolor sit amet, ne quod novum mei} + +]]> + md-content + Angular Material - md-content + text.html + diff --git a/directives/md-datepicker.sublime-snippet b/directives/md-datepicker.sublime-snippet new file mode 100644 index 0000000..0ecfcc3 --- /dev/null +++ b/directives/md-datepicker.sublime-snippet @@ -0,0 +1,8 @@ + + +]]> + md-datepicker + Angular Material - md-date-picker + text.html + diff --git a/directives/md-divider.sublime-snippet b/directives/md-divider.sublime-snippet new file mode 100644 index 0000000..c6a3225 --- /dev/null +++ b/directives/md-divider.sublime-snippet @@ -0,0 +1,8 @@ + + +]]> + md-divider + Angular Material - md-divider + text.html + diff --git a/directives/md-grid-list.sublime-snippet b/directives/md-grid-list.sublime-snippet new file mode 100644 index 0000000..786290a --- /dev/null +++ b/directives/md-grid-list.sublime-snippet @@ -0,0 +1,10 @@ + + + ${5:$6} + +]]> + md-grid-list + Angular Material - md-grid-list + text.html + diff --git a/directives/md-grid-tile.sublime-snippet b/directives/md-grid-tile.sublime-snippet new file mode 100644 index 0000000..101d7c9 --- /dev/null +++ b/directives/md-grid-tile.sublime-snippet @@ -0,0 +1,15 @@ + + + ${5: + ${6:

$7

} + } + ${8: + ${9:

$10

} + } + +]]> + md-grid-tile + Angular Material - md-grid-tile + text.html + diff --git a/directives/md-highlight-text.sublime-snippet b/directives/md-highlight-text.sublime-snippet new file mode 100644 index 0000000..2c005c9 --- /dev/null +++ b/directives/md-highlight-text.sublime-snippet @@ -0,0 +1,11 @@ + + +
    +
  • $5
    • +
+]]> + md-highlight-text + Angular Material - md-highlight-text + text.html + diff --git a/directives/md-icon-ligature.sublime-snippet b/directives/md-icon-ligature.sublime-snippet new file mode 100644 index 0000000..f5449a3 --- /dev/null +++ b/directives/md-icon-ligature.sublime-snippet @@ -0,0 +1,8 @@ + + ${3:font-name} +]]> + md-icon-ligature + Angular Material - md-icon using Ligatures + text.html + diff --git a/directives/md-icon-svg.sublime-snippet b/directives/md-icon-svg.sublime-snippet new file mode 100644 index 0000000..315a95d --- /dev/null +++ b/directives/md-icon-svg.sublime-snippet @@ -0,0 +1,8 @@ + + +]]> + md-icon-svg + Angular Material - md-icon using SVG + text.html + diff --git a/directives/md-icon-url.sublime-snippet b/directives/md-icon-url.sublime-snippet new file mode 100644 index 0000000..b1e4537 --- /dev/null +++ b/directives/md-icon-url.sublime-snippet @@ -0,0 +1,8 @@ + + +]]> + md-icon-class + Angular Material - md-icon using Classnames + text.html + diff --git a/directives/md-input-container.sublime-snippet b/directives/md-input-container.sublime-snippet new file mode 100644 index 0000000..3e73cf3 --- /dev/null +++ b/directives/md-input-container.sublime-snippet @@ -0,0 +1,11 @@ + + + ${1: + } + +]]> + md-input-container + Angular Material - md-input-container + text.html + diff --git a/directives/md-input.sublime-snippet b/directives/md-input.sublime-snippet new file mode 100644 index 0000000..20d1421 --- /dev/null +++ b/directives/md-input.sublime-snippet @@ -0,0 +1,9 @@ + + $1 + +]]> + md-chip-remove + Angular Material - input Use as a child of an md-input-container. + text.html + diff --git a/directives/md-list-item.sublime-snippet b/directives/md-list-item.sublime-snippet new file mode 100644 index 0000000..fa2ba3e --- /dev/null +++ b/directives/md-list-item.sublime-snippet @@ -0,0 +1,9 @@ + + + $2 +]]> + md-list-item + Angular Material - The md-list-item directive is a container intended for row items in a md-list container. + text.html + diff --git a/directives/md-list.sublime-snippet b/directives/md-list.sublime-snippet new file mode 100644 index 0000000..0e912bd --- /dev/null +++ b/directives/md-list.sublime-snippet @@ -0,0 +1,9 @@ + + + $1 +]]> + md-list + Angular Material - The md-list directive is a list container for 1..n md-list-item tags. + text.html + diff --git a/directives/md-menu.sublime-snippet b/directives/md-menu.sublime-snippet new file mode 100644 index 0000000..ed60dfe --- /dev/null +++ b/directives/md-menu.sublime-snippet @@ -0,0 +1,15 @@ + + + + + + + + Do Something + +]]> + md-menu + Angular Material - Menus are elements that open when clicked. They are useful for displaying additional options within the context of an action. + text.html + diff --git a/directives/md-progress-circular.sublime-snippet b/directives/md-progress-circular.sublime-snippet new file mode 100644 index 0000000..f5fd663 --- /dev/null +++ b/directives/md-progress-circular.sublime-snippet @@ -0,0 +1,8 @@ + + +]]> + md-progress-circular + Angular Material - The circular progress directive is used to make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content. + text.html + diff --git a/directives/md-progress-linear.sublime-snippet b/directives/md-progress-linear.sublime-snippet new file mode 100644 index 0000000..fd13dcc --- /dev/null +++ b/directives/md-progress-linear.sublime-snippet @@ -0,0 +1,9 @@ + + + +]]> + md-progress-linear + Angular Material - The linear progress directive is used to make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content. + text.html + diff --git a/directives/md-radio-button.sublime-snippet b/directives/md-radio-button.sublime-snippet new file mode 100644 index 0000000..91f5360 --- /dev/null +++ b/directives/md-radio-button.sublime-snippet @@ -0,0 +1,6 @@ + + $4]]> + md-radio-button + Angular Material - The md-radio-button directive is the child directive required to be used within md-radio-group elements. + text.html + diff --git a/directives/md-radio-group.sublime-snippet b/directives/md-radio-group.sublime-snippet new file mode 100644 index 0000000..43c6dff --- /dev/null +++ b/directives/md-radio-group.sublime-snippet @@ -0,0 +1,10 @@ + + + $2 + +]]> + md-list + Angular Material - The md-radio-group directive identifies a grouping container for the 1..n grouped radio buttons; specified using nested md-radio-button tags. + text.html + diff --git a/directives/md-select.sublime-snippet b/directives/md-select.sublime-snippet new file mode 100644 index 0000000..6559c97 --- /dev/null +++ b/directives/md-select.sublime-snippet @@ -0,0 +1,11 @@ + + + Select a state + {{ opt }} + +]]> + md-select + Angular Material - Displays a select box, bound to an ng-model. + text.html + diff --git a/directives/md-sidenav.sublime-snippet b/directives/md-sidenav.sublime-snippet new file mode 100644 index 0000000..9a0e8f5 --- /dev/null +++ b/directives/md-sidenav.sublime-snippet @@ -0,0 +1,26 @@ + + + + Left Nav! + + + Center Content + + Open Left Menu + + + +
+ + + + +
+ + +]]> + md-sidenav + Angular Material - A Sidenav component that can be opened and closed programatically. + text.html + diff --git a/directives/md-slider.sublime-snippet b/directives/md-slider.sublime-snippet new file mode 100644 index 0000000..4ebe1ea --- /dev/null +++ b/directives/md-slider.sublime-snippet @@ -0,0 +1,6 @@ + + ]]> + md-slider + Angular Material - The md-slider component allows the user to choose from a range of values. + text.html + diff --git a/directives/md-subheader.sublime-snippet b/directives/md-subheader.sublime-snippet new file mode 100644 index 0000000..6ef7db9 --- /dev/null +++ b/directives/md-subheader.sublime-snippet @@ -0,0 +1,6 @@ + + $1]]> + md-subheader + Angular Material - The md-subheader directive is a subheader for a section. By default it is sticky. + text.html + diff --git a/directives/md-swipe-left.sublime-snippet b/directives/md-swipe-left.sublime-snippet new file mode 100644 index 0000000..9cd23f6 --- /dev/null +++ b/directives/md-swipe-left.sublime-snippet @@ -0,0 +1,6 @@ + + $1]]> + md-swipe-left + Angular Material - The md-swipe-left directives allows you to specify custom behavior when an element is swiped left. + text.html + diff --git a/directives/md-swipe-right.sublime-snippet b/directives/md-swipe-right.sublime-snippet new file mode 100644 index 0000000..01426cb --- /dev/null +++ b/directives/md-swipe-right.sublime-snippet @@ -0,0 +1,6 @@ + + $1]]> + md-swipe-right + Angular Material - The md-swipe-right directives allows you to specify custom behavior when an element is swiped right. + text.html + diff --git a/directives/md-switch.sublime-snippet b/directives/md-switch.sublime-snippet new file mode 100644 index 0000000..f39dac0 --- /dev/null +++ b/directives/md-switch.sublime-snippet @@ -0,0 +1,10 @@ + + + $3 + +]]> + md-switch + Angular Material - The md-switch can also use md-no-ink, ng-true-value="", ng-false-value="", ng-change="" attributes. + text.html + diff --git a/directives/md-tab.sublime-snippet b/directives/md-tab.sublime-snippet new file mode 100644 index 0000000..d475868 --- /dev/null +++ b/directives/md-tab.sublime-snippet @@ -0,0 +1,17 @@ + + + +

$1

+ + +

+ $2 +

+ + +]]> + md-tab + Angular Material - Use the md-tab a nested directive used within md-tabs to specify a tab with a label and optional view content. + text.html + diff --git a/directives/md-tabs.sublime-snippet b/directives/md-tabs.sublime-snippet new file mode 100644 index 0000000..3acb457 --- /dev/null +++ b/directives/md-tabs.sublime-snippet @@ -0,0 +1,24 @@ + + + $1 + + + +]]> + md-tab + Angular Material - The md-tabs directive serves as the container for 1..n md-tab child directives to produces a Tabs components. + text.html + diff --git a/directives/md-toolbar.sublime-snippet b/directives/md-toolbar.sublime-snippet new file mode 100644 index 0000000..e3f7ea0 --- /dev/null +++ b/directives/md-toolbar.sublime-snippet @@ -0,0 +1,28 @@ + + + + + + +

+ Toolbar with Icon Buttons +

+ + + + + + + + + + + Hello! + + +]]> + md-toolbar + Angular Material - Toolbars are usually used above a content area to display the title of the current page, and show relevant action buttons for that page. + text.html + diff --git a/directives/md-tooltip.sublime-snippet b/directives/md-tooltip.sublime-snippet new file mode 100644 index 0000000..beb4621 --- /dev/null +++ b/directives/md-tooltip.sublime-snippet @@ -0,0 +1,10 @@ + + + $1 + +]]> + md-tooltip + Angular Material - Place a md-tooltip as a child of the element it describes. + text.html + diff --git a/directives/md-whiteframe.sublime-snippet b/directives/md-whiteframe.sublime-snippet new file mode 100644 index 0000000..18a0193 --- /dev/null +++ b/directives/md-whiteframe.sublime-snippet @@ -0,0 +1,9 @@ + + + $1 +]]> + md-whiteframe + Angular Material - whiteframe for content can use z1-z5 class. + text.html + diff --git a/messages/install.txt b/messages/install.txt index 45075f9..96a2341 100644 --- a/messages/install.txt +++ b/messages/install.txt @@ -10,11 +10,12 @@ the directives described in this documentation https://material.angularjs.org/latest/#/ -Collaborators are urged to ccontribute. To do so: +Collaborators are encouraged to ccontribute. To do so: 1. Fork this repo https://github.com/devotis/sublime-angular-material-snippets 2. Add your contribution and 3. Make a pull request. +4. I'll verify and make sure it'll become available to ST within 24 hours This package is compatible with both Sublime Text versions 2 & 3. diff --git a/services/$mdSidenav.sublime-snippet b/services/$mdSidenav.sublime-snippet new file mode 100644 index 0000000..8ec90c1 --- /dev/null +++ b/services/$mdSidenav.sublime-snippet @@ -0,0 +1,14 @@ + + + $mdSidenav + Angular Material - $mdSidenav makes it easy to interact with multiple sidenavs in an app. + source.js +