├── .DS_Store ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── keymaps └── ionic-framework-snippets.cson ├── lib ├── ionic-framework-snippets-view.coffee └── ionic-framework-snippets.coffee ├── menus └── ionic-framework-snippets.cson ├── package.json ├── snippets ├── button.cson ├── card.cson ├── checkbox.cson ├── footer.cson ├── form.cson ├── header.cson ├── jsactioinsheet.cson ├── jsbackdrop.cson ├── jspopover.cson ├── jspopup.cson ├── list.cson ├── ngcontent.cson ├── ngform.cson ├── ngheaderfooter.cson ├── nglist.cson ├── ngnavigation.cson ├── ngpopover.cson ├── ngscroll.cson ├── ngsidemenu.cson ├── ngslidebox.cson ├── ngtabs.cson ├── radiobuttons.cson ├── range.cson ├── select.cson ├── tabs.cson └── toggle.cson ├── spec ├── ionic-framework-snippets-spec.coffee └── ionic-framework-snippets-view-spec.coffee └── styles └── ionic-framework-snippets.less /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imsingh/ionic-atom-plugin/24084d61b105e5e1a439b49baa1c3306f5992a8e/.DS_Store -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 0.1.0 - First Release 2 | * Every feature added 3 | * Every bug fixed 4 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Deprecated - I am no longer maintaing the project. 2 | 3 | Ionic - Atom Snippet Plugin 4 | ==================== 5 | 6 | [![Join the chat at https://gitter.im/imsingh/ionic-atom-plugin](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/imsingh/ionic-atom-plugin?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 7 | 8 | A Simple Atom Package for Ionic Framework Code Snippets 9 | 10 | Feel Free to let me know about issues via : 11 | 12 | * [Issues](https://github.com/imsingh/ionic-atom-plugin/issues) 13 | 14 | ## What's Included - Content 15 | 16 | ### AngularJS Directive based Ionic Snippets 17 | #### These snippets will work only in HTML Files 18 | 19 | * [Tabs](#tabs) 20 | * [Side Menu](#sidemenu) 21 | * [Navigation](#navigation) 22 | * [Header Bar/Footer Bar](https://github.com/imsingh/ionic-sublime-plugin#header) 23 | * [Content](#content) 24 | * [Scroll](#scroll) 25 | * [List](#list) 26 | * [Forms](#forms) 27 | * [Slide Box](#slide-box) 28 | * [Popover](#popover) 29 | 30 | ### Simple HTML Ionic Snippets 31 | #### These snippets will work only in HTML Files 32 | 33 | #### If you don't want or don't need to use AngularJS directives and only want to use Ionic's CSS than you should use following snippets. 34 | 35 | * [Header Bar & Footer Bar](#cssheader) 36 | * [Buttons](#cssbuttons) 37 | * [List](#csslist) 38 | * [Cards](#csscards) 39 | * [Forms](#cssforms) 40 | * [Toggle](#csstoggle) 41 | * [Checkbox](#csscheckbox) 42 | * [Radio Buttons](#cssradio) 43 | * [Range](#cssrange) 44 | * [Select](#cssselect) 45 | * [Tabs](#csstabs) 46 | 47 | ### Javascript based snippets 48 | #### Following snippets will only work in javascript file. 49 | 50 | * [Actionsheet](#jsactionsheet) 51 | * [Backdrop](#jsbackdrop) 52 | * [Popover](#jspopover) 53 | * [Popup](#jspopup) 54 | 55 | 56 | ## AngularJS Directive based Ionic Snippets 57 | 58 |

Tabs

59 | 60 | 61 | | Component | Snippet Code | 62 | |---------- | :-----------:| 63 | | ion-tabs | ionic-tabs | 64 | | ion-tab | ionic-tab | 65 | 66 | 67 |

Side Menu

68 | 69 | | Component | Snippet Code | 70 | |----------------| :---------------:| 71 | | ion-side-menus | ionic-side-menus | 72 | 73 | 74 | 75 | 76 | | Component | Snippet Code | 77 | |-----------------------| :----------------------:| 78 | | ion-nav-view | ionic-nav-view | 79 | | ion-view | ionic-view | 80 | | ion-nav-buttons Left | ionic-nav-buttons:left | 81 | | ion-nav-buttons Right | ionic-nav-buttons:right | 82 | | ion-nav-back-button | ionic-nav-back-button | 83 | 84 | 85 | 86 | | Component | Snippet Code | 87 | | ---------------| :---------------:| 88 | | ion-header-bar | ionic-header-bar | 89 | | ion-footer-bar | ionic-footer-bar | 90 | 91 |

Content

92 | 93 | | Component | Snippet Code | 94 | |-----------------------| :----------------------:| 95 | | ion-content | ionic-content | 96 | | ion-pane | ionic-pane | 97 | | ion-refresher | ionic-refresher | 98 | 99 |

Scroll

100 | 101 | | Component | Snippet Code | 102 | |---------------------------| :----------------------:| 103 | | ion-scroll | ionic-scroll | 104 | | ion-infinite-scroll | ionic-infinite-scrol | 105 | 106 | 107 |

List

108 | 109 | | Component | Snippet Code | 110 | |---------------------------| :----------------------:| 111 | | ion-list | ionic-list | 112 | | ion-item | ionic-item | 113 | | ion-reorder-button | ionic-reorder-button | 114 | | ion-option-button | ionic-option-button | 115 | | ion-delete-button | ionic-delete-button | 116 | 117 |

Forms

118 | 119 | | Component | Snippet Code | 120 | | --------------------------| :------------------------:| 121 | | ion-checkbox | ionic-checkbox | 122 | | ion-radio | ionic-radio | 123 | | ion-toggle | ionic-toggle | 124 | | ion-checkbox with theme | ionic-checkbox:themecolor | 125 | 126 | ##### You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table. 127 | 128 |

Slide Box

129 | 130 | | Component | Snippet Code | 131 | | --------------| :--------------:| 132 | | ion-slide-box | ionic-slide-box | 133 | | ion-slide | ionic-slide | 134 | 135 |

Popover

136 | 137 | | Component | Snippet Code | 138 | | --------------------------| :------------------------:| 139 | | ion-popover-view | ionic-popover | 140 | 141 | 142 | ## Simple HTML Ionic Snippets 143 | 144 | ##### You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in following tables. 145 | 146 | Example : ionic-css-footer:calm for calm theme footer. 147 | 148 |

Header & Footer Bar

149 | 150 | | Component | Snippet Code | 151 | |---------------------------| :----------------------------:| 152 | | Header Bar | ionic-css-header | 153 | | Header Bar Theme | ionic-css-header:themecolor | 154 | | Sub Header Bar | ionic-css-subheader | 155 | | Footer Bar | ionic-css-footer | 156 | | Footer Bar Theme | ionic-css-footer:themecolor | 157 | 158 |

Buttons Snippet

159 | 160 | | Component | Snippet Code | 161 | |---------------------------| :----------------------------------------:| 162 | | Button | ionic-css-button | 163 | | Button Theme | ionic-css-button:themecolor | 164 | | Full Width Button | ionic-css-button-full | 165 | | Full Width Button Theme | ionic-css-button-full:themecolor | 166 | | Large Button | ionic-css-button-large | 167 | | Large Button Theme | ionic-css-button-large:themecolor | 168 | | Small Button | ionic-css-button-small | 169 | | Small Button Theme | ionic-css-button-small:themecolor | 170 | | Outlined Button | ionic-css-button-outline | 171 | | Outlined Button Theme | ionic-css-button-outline:themecolor | 172 | | Clear Button | ionic-css-button-clear | 173 | | Clear Button Theme | ionic-css-button-clear:themecolor | 174 | 175 | 176 |

List Snippets

177 | 178 | | Component | Snippet Code | 179 | |-------------------------------| :----------------------------------------:| 180 | | List | ionic-css-list | 181 | | List Inset | ionic-css-list:inset | 182 | | List Item | ionic-css-list:item | 183 | | List Divider | ionic-css-list:divider | 184 | | List Item with Avatar | ionic-css-list-item:avatar | 185 | | List Item with Left Button | ionic-css-list-item:buttonleft | 186 | | List Item with Right Button | ionic-css-list-item:buttonright | 187 | | List Item with Left Icon | ionic-css-list-item:iconright | 188 | | List Item with Right Icon | ionic-css-list-item:iconleft | 189 | | List Item with Right Thumbnail| ionic-css-list-item:thumbright | 190 | | List Item with Left Thumbnail | ionic-css-list-item:thumbleft | 191 | 192 |

Card Snippets

193 | 194 | | Component | Snippet Code | 195 | |-------------------------------| :----------------------------------------:| 196 | | Card | ionic-css-card | 197 | | Card List | ionic-css-card:list | 198 | | Card Divider | ionic-css-card:divider | 199 | | Card Showcase | ionic-css-card:showcase | 200 | | Cards with Images | ionic-css-card:image | 201 | 202 |

Form Snippets

203 | 204 | | Component | Snippet Code | 205 | |-------------------------------| :----------------------------------------:| 206 | | Floating Form Element | ionic-css-form-floating | 207 | | Stacked Form Element | ionic-css-form-stacked | 208 | | Inset Form | ionic-css-form-inset | 209 | | Placeholder Form Element | ionic-css-form-placehoder | 210 | | Header Form Elements | ionic-css-form-header | 211 | | Inline Form Elements | ionic-css-form-inline | 212 | | Icon based Form Elements | ionic-css-form-icon | 213 | 214 |

Toggle Snippets

215 | 216 | | Component | Snippet Code | 217 | |-------------------------------| :----------------------------------------:| 218 | | Toggle Default Theme | ionic-css-toggle | 219 | | Toggle with Theme | ionic-css-toggle:themecolor | 220 | 221 | ##### You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table. 222 | 223 |

Checkbox Snippets

224 | 225 | | Component | Snippet Code | 226 | |-----------------------------------| :----------------------------------------:| 227 | | Checkbox Default Theme | ionic-css-checkbox | 228 | | Checkbox with Theme | ionic-css-checkbox:themecolor | 229 | 230 | ##### You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table. 231 | 232 |

Radio Buttons Snippets

233 | 234 | | Component | Snippet Code | 235 | |-----------------------------------| :----------------------------------------:| 236 | | Radio Buttons | ionic-css-radio | 237 | 238 |

Range Snippets

239 | 240 | | Component | Snippet Code | 241 | |-----------------------------------| :----------------------------------------:| 242 | | Range Default Theme | ionic-css-range | 243 | | Range with Theme | ionic-css-range:themecolor | 244 | 245 | ##### You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table. 246 | 247 |

Select Snippets

248 | 249 | | Component | Snippet Code | 250 | |-----------------------------------| :----------------------------------------:| 251 | | Select Element | ionic-css-select | 252 | 253 |

Tabs Snippets

254 | 255 | | Component | Snippet Code | 256 | |-------------------------------| :----------------------------------------:| 257 | | Tabs | ionic-css-tabs | 258 | | Tabs with Theme | ionic-css-tabs:themecolor | 259 | | Tabs with Icon | ionic-css-tabs-icon | 260 | | Tabs with Icon & Theme | ionic-css-tabs-icon:themecolor | 261 | | Tabs with Top Icon | ionic-css-tabs-icontop | 262 | | Tabs with Top Icon & Theme | ionic-css-tabs-icontop:themecolor | 263 | | Tabs with Left Icon | ionic-css-tabs-iconleft | 264 | | Tabs with Left Icon & Theme | ionic-css-tabs-iconleft:themecolor | 265 | 266 | ##### You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table. 267 | 268 | ## JS Code Snippets for Ionic 269 | ### Theme Snippets will work only in JS File 270 | 271 |

Action Sheet JS Snippet

272 | 273 | | Component | Snippet Code | 274 | |-----------------------------------| :----------------------------------------:| 275 | | $ionicActionSheet | ionic-js-actionsheet | 276 | 277 |

Backdrop JS Snippet

278 | 279 | | Component | Snippet Code | 280 | |-----------------------------------| :----------------------------------------:| 281 | | $ionicBackdrop | ionic-js-backdrop | 282 | 283 |

Popover JS Snippet

284 | 285 | | Component | Snippet Code | 286 | |-----------------------------------| :----------------------------------------:| 287 | | $ionicPopover | ionic-js-popover | 288 | 289 |

Popup JS Snippet

290 | 291 | | Component | Snippet Code | 292 | |-----------------------------------| :----------------------------------------:| 293 | | Alert $ionicPopup | ionic-js-popup:alert | 294 | | Confirm $ionicPopup | ionic-js-popup:confirm | 295 | | Prompt $ionicPopup | ionic-js-popup:prompt | 296 | 297 | 298 | ## License 299 | 300 | Ionic Atom Plugin is open-sourced software licensed under the [MIT License ](http://opensource.org/licenses/MIT). 301 | -------------------------------------------------------------------------------- /keymaps/ionic-framework-snippets.cson: -------------------------------------------------------------------------------- 1 | # Keybindings require three things to be fully defined: A selector that is 2 | # matched against the focused element, the keystroke and the command to 3 | # execute. 4 | # 5 | # Below is a basic keybinding which registers on all platforms by applying to 6 | # the root workspace element. 7 | 8 | # For more detailed documentation see 9 | # https://atom.io/docs/latest/behind-atom-keymaps-in-depth 10 | 'atom-workspace': 11 | 'ctrl-alt-o': 'ionic-framework-snippets:toggle' 12 | -------------------------------------------------------------------------------- /lib/ionic-framework-snippets-view.coffee: -------------------------------------------------------------------------------- 1 | module.exports = 2 | class IonicFrameworkSnippetsView 3 | constructor: (serializedState) -> 4 | # Create root element 5 | @element = document.createElement('div') 6 | @element.classList.add('ionic-framework-snippets') 7 | 8 | # Create message element 9 | message = document.createElement('div') 10 | message.textContent = "The IonicFrameworkSnippets package is Alive! It's ALIVE!" 11 | message.classList.add('message') 12 | @element.appendChild(message) 13 | 14 | # Returns an object that can be retrieved when package is activated 15 | serialize: -> 16 | 17 | # Tear down any state and detach 18 | destroy: -> 19 | @element.remove() 20 | 21 | getElement: -> 22 | @element 23 | -------------------------------------------------------------------------------- /lib/ionic-framework-snippets.coffee: -------------------------------------------------------------------------------- 1 | IonicFrameworkSnippetsView = require './ionic-framework-snippets-view' 2 | {CompositeDisposable} = require 'atom' 3 | 4 | module.exports = IonicFrameworkSnippets = 5 | ionicFrameworkSnippetsView: null 6 | modalPanel: null 7 | subscriptions: null 8 | 9 | activate: (state) -> 10 | @ionicFrameworkSnippetsView = new IonicFrameworkSnippetsView(state.ionicFrameworkSnippetsViewState) 11 | @modalPanel = atom.workspace.addModalPanel(item: @ionicFrameworkSnippetsView.getElement(), visible: false) 12 | 13 | # Events subscribed to in atom's system can be easily cleaned up with a CompositeDisposable 14 | @subscriptions = new CompositeDisposable 15 | 16 | # Register command that toggles this view 17 | @subscriptions.add atom.commands.add 'atom-workspace', 'ionic-framework-snippets:toggle': => @toggle() 18 | 19 | deactivate: -> 20 | @modalPanel.destroy() 21 | @subscriptions.dispose() 22 | @ionicFrameworkSnippetsView.destroy() 23 | 24 | serialize: -> 25 | ionicFrameworkSnippetsViewState: @ionicFrameworkSnippetsView.serialize() 26 | 27 | toggle: -> 28 | console.log 'IonicFrameworkSnippets was toggled!' 29 | 30 | if @modalPanel.isVisible() 31 | @modalPanel.hide() 32 | else 33 | @modalPanel.show() 34 | -------------------------------------------------------------------------------- /menus/ionic-framework-snippets.cson: -------------------------------------------------------------------------------- 1 | # See https://atom.io/docs/latest/hacking-atom-package-word-count#menus for more details 2 | 'context-menu': 3 | 'atom-text-editor': [ 4 | { 5 | 'label': 'Toggle ionic-framework-snippets' 6 | 'command': 'ionic-framework-snippets:toggle' 7 | } 8 | ] 9 | 'menu': [ 10 | { 11 | 'label': 'Packages' 12 | 'submenu': [ 13 | 'label': 'ionic-framework-snippets' 14 | 'submenu': [ 15 | { 16 | 'label': 'Toggle' 17 | 'command': 'ionic-framework-snippets:toggle' 18 | } 19 | ] 20 | ] 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-framework-snippets", 3 | "main": "./lib/ionic-framework-snippets", 4 | "version": "1.2.1", 5 | "description": "A Snippet Plugin for Ionic Framework", 6 | "keywords": [ 7 | ], 8 | "activationCommands": { 9 | "atom-workspace": "ionic-framework-snippets:toggle" 10 | }, 11 | "repository": "https://github.com/imsingh/ionic-atom-plugin", 12 | "license": "MIT", 13 | "engines": { 14 | "atom": ">=0.174.0 <2.0.0" 15 | }, 16 | "dependencies": { 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /snippets/button.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Button': 4 | 'prefix':'ionic-css-button' 5 | 'body' : """ 6 | 9 | """ 10 | 11 | 'Button Light': 12 | 'prefix':'ionic-css-button:light' 13 | 'body' : """ 14 | 17 | """ 18 | 19 | 'Button Stable': 20 | 'prefix':'ionic-css-button:stable' 21 | 'body' : """ 22 | 25 | """ 26 | 27 | 'Button Positive': 28 | 'prefix':'ionic-css-button:positive' 29 | 'body' : """ 30 | 33 | """ 34 | 35 | 'Button Calm': 36 | 'prefix':'ionic-css-button:calm' 37 | 'body' : """ 38 | 41 | """ 42 | 43 | 'Button Balanced': 44 | 'prefix':'ionic-css-button:balanced' 45 | 'body' : """ 46 | 49 | """ 50 | 51 | 'Button Energized': 52 | 'prefix':'ionic-css-button:energized' 53 | 'body' : """ 54 | 57 | """ 58 | 59 | 'Button Assertive': 60 | 'prefix':'ionic-css-button:assertive' 61 | 'body' : """ 62 | 65 | """ 66 | 67 | 'Button Royal': 68 | 'prefix':'ionic-css-button:royal' 69 | 'body' : """ 70 | 73 | """ 74 | 75 | 'Button Dark': 76 | 'prefix':'ionic-css-button:dark' 77 | 'body' : """ 78 | 81 | """ 82 | 83 | # Block Level Buttons Snippets 84 | 85 | 'Button Block': 86 | 'prefix':'ionic-css-button-block' 87 | 'body' : """ 88 | 91 | """ 92 | 93 | 'Button Block Light': 94 | 'prefix':'ionic-css-button-block:light' 95 | 'body' : """ 96 | 99 | """ 100 | 101 | 'Button Block Stable': 102 | 'prefix':'ionic-css-button-block:stable' 103 | 'body' : """ 104 | 107 | """ 108 | 109 | 'Button Block Positive': 110 | 'prefix':'ionic-css-button-block:positive' 111 | 'body' : """ 112 | 115 | """ 116 | 117 | 'Button Block Calm': 118 | 'prefix':'ionic-css-button-block:calm' 119 | 'body' : """ 120 | 123 | """ 124 | 125 | 'Button Block Balanced': 126 | 'prefix':'ionic-css-button-block:balanced' 127 | 'body' : """ 128 | 131 | """ 132 | 133 | 'Button Block Energized': 134 | 'prefix':'ionic-css-button-block:energized' 135 | 'body' : """ 136 | 139 | """ 140 | 141 | 'Button Block Assertive': 142 | 'prefix':'ionic-css-button-block:assertive' 143 | 'body' : """ 144 | 147 | """ 148 | 149 | 'Button Block Royal': 150 | 'prefix':'ionic-css-button-block:royal' 151 | 'body' : """ 152 | 155 | """ 156 | 157 | 'Button Block Dark': 158 | 'prefix':'ionic-css-button-block:dark' 159 | 'body' : """ 160 | 163 | """ 164 | 165 | # Clear Button Snippets 166 | 167 | 'Button Clear': 168 | 'prefix':'ionic-css-button-clear' 169 | 'body' : """ 170 | 173 | """ 174 | 175 | 'Button Clear Light': 176 | 'prefix':'ionic-css-button-clear:light' 177 | 'body' : """ 178 | 181 | """ 182 | 183 | 'Button Clear Stable': 184 | 'prefix':'ionic-css-button-clear:stable' 185 | 'body' : """ 186 | 189 | """ 190 | 191 | 'Button Clear Positive': 192 | 'prefix':'ionic-css-button-clear:positive' 193 | 'body' : """ 194 | 197 | """ 198 | 199 | 'Button Clear Calm': 200 | 'prefix':'ionic-css-button-clear:calm' 201 | 'body' : """ 202 | 205 | """ 206 | 207 | 'Button Clear Balanced': 208 | 'prefix':'ionic-css-button-clear:balanced' 209 | 'body' : """ 210 | 213 | """ 214 | 215 | 'Button Clear Energized': 216 | 'prefix':'ionic-css-button-clear:energized' 217 | 'body' : """ 218 | 221 | """ 222 | 223 | 'Button Clear Assertive': 224 | 'prefix':'ionic-css-button-clear:assertive' 225 | 'body' : """ 226 | 229 | """ 230 | 231 | 'Button Clear Royal': 232 | 'prefix':'ionic-css-button-clear:royal' 233 | 'body' : """ 234 | 237 | """ 238 | 239 | 'Button Clear Dark': 240 | 'prefix':'ionic-css-button-clear:dark' 241 | 'body' : """ 242 | 245 | """ 246 | 247 | # Full Width Button Snippets 248 | 249 | 'prefix':'ionic-css-button-full' 250 | 'body' : """ 251 | 254 | """ 255 | 256 | 'Button Full Light': 257 | 'prefix':'ionic-css-button-full:light' 258 | 'body' : """ 259 | 262 | """ 263 | 264 | 'Button Full Stable': 265 | 'prefix':'ionic-css-button-full:stable' 266 | 'body' : """ 267 | 270 | """ 271 | 272 | 'Button Full Positive': 273 | 'prefix':'ionic-css-button-full:positive' 274 | 'body' : """ 275 | 278 | """ 279 | 280 | 'Button Full Calm': 281 | 'prefix':'ionic-css-button-full:calm' 282 | 'body' : """ 283 | 286 | """ 287 | 288 | 'Button Full Balanced': 289 | 'prefix':'ionic-css-button-full:balanced' 290 | 'body' : """ 291 | 294 | """ 295 | 296 | 'Button Full Energized': 297 | 'prefix':'ionic-css-button-full:energized' 298 | 'body' : """ 299 | 302 | """ 303 | 304 | 'Button Full Assertive': 305 | 'prefix':'ionic-css-button-full:assertive' 306 | 'body' : """ 307 | 310 | """ 311 | 312 | 'Button Full Royal': 313 | 'prefix':'ionic-css-button-full:royal' 314 | 'body' : """ 315 | 318 | """ 319 | 320 | 'Button Full Dark': 321 | 'prefix':'ionic-css-button-full:dark' 322 | 'body' : """ 323 | 326 | """ 327 | 328 | # Large Width Button Snippets 329 | 330 | 'Button Large': 331 | 'prefix':'ionic-css-button-large' 332 | 'body' : """ 333 | 336 | """ 337 | 338 | 'Button Large Light': 339 | 'prefix':'ionic-css-button-large:light' 340 | 'body' : """ 341 | 344 | """ 345 | 346 | 'Button Large Stable': 347 | 'prefix':'ionic-css-button-large:stable' 348 | 'body' : """ 349 | 352 | """ 353 | 354 | 'Button Large Positive': 355 | 'prefix':'ionic-css-button-large:positive' 356 | 'body' : """ 357 | 360 | """ 361 | 362 | 'Button Large Calm': 363 | 'prefix':'ionic-css-button-large:calm' 364 | 'body' : """ 365 | 368 | """ 369 | 370 | 'Button Large Balanced': 371 | 'prefix':'ionic-css-button-large:balanced' 372 | 'body' : """ 373 | 376 | """ 377 | 378 | 'Button Large Energized': 379 | 'prefix':'ionic-css-button-large:energized' 380 | 'body' : """ 381 | 384 | """ 385 | 386 | 'Button Large Assertive': 387 | 'prefix':'ionic-css-button-large:assertive' 388 | 'body' : """ 389 | 392 | """ 393 | 394 | 'Button Large Royal': 395 | 'prefix':'ionic-css-button-large:royal' 396 | 'body' : """ 397 | 400 | """ 401 | 402 | 'Button Large Dark': 403 | 'prefix':'ionic-css-button-large:dark' 404 | 'body' : """ 405 | 408 | """ 409 | 410 | # Small Width Button Snippets 411 | 412 | 'Button Small': 413 | 'prefix':'ionic-css-button-small' 414 | 'body' : """ 415 | 418 | """ 419 | 420 | 'Button Small Light': 421 | 'prefix':'ionic-css-button-small:light' 422 | 'body' : """ 423 | 426 | """ 427 | 428 | 'Button Small Stable': 429 | 'prefix':'ionic-css-button-small:stable' 430 | 'body' : """ 431 | 434 | """ 435 | 436 | 'Button Small Positive': 437 | 'prefix':'ionic-css-button-small:positive' 438 | 'body' : """ 439 | 442 | """ 443 | 444 | 'Button Small Calm': 445 | 'prefix':'ionic-css-button-small:calm' 446 | 'body' : """ 447 | 450 | """ 451 | 452 | 'Button Small Balanced': 453 | 'prefix':'ionic-css-button-small:balanced' 454 | 'body' : """ 455 | 458 | """ 459 | 460 | 'Button Small Energized': 461 | 'prefix':'ionic-css-button-small:energized' 462 | 'body' : """ 463 | 466 | """ 467 | 468 | 'Button Small Assertive': 469 | 'prefix':'ionic-css-button-small:assertive' 470 | 'body' : """ 471 | 474 | """ 475 | 476 | 'Button Small Royal': 477 | 'prefix':'ionic-css-button-small:royal' 478 | 'body' : """ 479 | 482 | """ 483 | 484 | 'Button Small Dark': 485 | 'prefix':'ionic-css-button-small:dark' 486 | 'body' : """ 487 | 490 | """ 491 | 492 | # Outlined Button Snippets 493 | 494 | 'prefix':'ionic-css-button-outline' 495 | 'body' : """ 496 | 499 | """ 500 | 501 | 'Button Outline Light': 502 | 'prefix':'ionic-css-button-outline:light' 503 | 'body' : """ 504 | 507 | """ 508 | 509 | 'Button Outline Stable': 510 | 'prefix':'ionic-css-button-outline:stable' 511 | 'body' : """ 512 | 515 | """ 516 | 517 | 'Button Outline Positive': 518 | 'prefix':'ionic-css-button-outline:positive' 519 | 'body' : """ 520 | 523 | """ 524 | 525 | 'Button Outline Calm': 526 | 'prefix':'ionic-css-button-outline:calm' 527 | 'body' : """ 528 | 531 | """ 532 | 533 | 'Button Outline Balanced': 534 | 'prefix':'ionic-css-button-outline:balanced' 535 | 'body' : """ 536 | 539 | """ 540 | 541 | 'Button Outline Energized': 542 | 'prefix':'ionic-css-button-outline:energized' 543 | 'body' : """ 544 | 547 | """ 548 | 549 | 'Button Outline Assertive': 550 | 'prefix':'ionic-css-button-outline:assertive' 551 | 'body' : """ 552 | 555 | """ 556 | 557 | 'Button Outline Royal': 558 | 'prefix':'ionic-css-button-outline:royal' 559 | 'body' : """ 560 | 563 | """ 564 | 565 | 'Button Outline Dark': 566 | 'prefix':'ionic-css-button-outline:dark' 567 | 'body' : """ 568 | 571 | """ 572 | -------------------------------------------------------------------------------- /snippets/card.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Card': 4 | 'prefix':'ionic-css-card' 5 | 'body' : """ 6 |
7 |
8 | ${1:This is a Card} 9 |
10 |
11 | """ 12 | 13 | 'Card List': 14 | 'prefix':'ionic-css-card:list' 15 | 'body' : """ 16 |
17 | 18 | 19 | 20 | ${1: First Item} 21 | 22 | 23 | 24 | 25 | ${2: Second Item} 26 | 27 | 28 | 29 | 30 | ${3: Third Item} 31 | 32 | 33 | 34 | 35 | ${4: Fourth Item} 36 | 37 | 38 |
39 | """ 40 | 41 | 'Card Divider': 42 | 'prefix':'ionic-css-card:divider' 43 | 'body' : """ 44 |
45 | I'm a Divider! 46 |
47 | """ 48 | 49 | 'Card Image': 50 | 'prefix':'ionic-css-card:image' 51 | 'body' : """ 52 |
53 | 54 |
55 | 56 |

${2:Pretty Hate Machine}

57 |

${3:Nine Inch Nails}

58 |
59 | 60 |
61 | 62 |
63 | 64 | 65 | 66 | ${6:Start listening} 67 | 68 | 69 |
70 | """ 71 | 72 | 'Card Showcase': 73 | 'prefix':'ionic-css-card:showcase' 74 | 'body' : """ 75 |
76 | 77 |
78 | 79 |

${2:Marty McFly}

80 |

${3:November 05, 1955}

81 |
82 | 83 |
84 | 85 |

86 | ${5:This is a "Facebook" styled Card. The header is created from a Thumbnail List item, 87 | the content is from a card-body consisting of an image and paragraph text. The footer 88 | consists of tabs, icons aligned left, within the card-footer.} 89 |

90 |

91 | ${7:1 Like} 92 | ${9:5 Comments} 93 |

94 |
95 | 96 |
97 | 98 | 99 | ${11:Like} 100 | 101 | 102 | 103 | ${13:Comment} 104 | 105 | 106 | 107 | ${15:Share} 108 | 109 |
110 | 111 |
112 | """ 113 | -------------------------------------------------------------------------------- /snippets/checkbox.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Checkbox': 4 | 'prefix':'ionic-css-checkbox' 5 | 'body' : """ 6 | 14 | """ 15 | 16 | 'Checkbox Light': 17 | 'prefix':'ionic-css-checkbox:light' 18 | 'body' : """ 19 | 27 | """ 28 | 29 | 'Checkbox Stable': 30 | 'prefix':'ionic-css-checkbox:stable' 31 | 'body' : """ 32 | 40 | """ 41 | 42 | 'Checkbox Positive': 43 | 'prefix':'ionic-css-checkbox:positive' 44 | 'body' : """ 45 | 53 | """ 54 | 55 | 'Checkbox Calm': 56 | 'prefix':'ionic-css-checkbox:calm' 57 | 'body' : """ 58 | 66 | """ 67 | 68 | 'Checkbox Balanced': 69 | 'prefix':'ionic-css-checkbox:balanced' 70 | 'body' : """ 71 | 79 | """ 80 | 81 | 'Checkbox Energized': 82 | 'prefix':'ionic-css-checkbox:energized' 83 | 'body' : """ 84 | 92 | """ 93 | 94 | 'Checkbox Assertive': 95 | 'prefix':'ionic-css-checkbox:assertive' 96 | 'body' : """ 97 | 105 | """ 106 | 107 | 'Checkbox Royal': 108 | 'prefix':'ionic-css-checkbox:royal' 109 | 'body' : """ 110 | 118 | """ 119 | 120 | 'Checkbox Dark': 121 | 'prefix':'ionic-css-checkbox:dark' 122 | 'body' : """ 123 | 131 | """ 132 | -------------------------------------------------------------------------------- /snippets/footer.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Footer': 4 | 'prefix':'ionic-css-footer' 5 | 'body' : """ 6 |
7 |

${1: Footer}

8 |
9 | """ 10 | 11 | 'Footer Light': 12 | 'prefix':'ionic-css-footer:light' 13 | 'body' : """ 14 |
15 |

${1: Footer}

16 |
17 | """ 18 | 19 | 'Footer Stable': 20 | 'prefix':'ionic-css-footer:stable' 21 | 'body' : """ 22 |
23 |

${1: Footer}

24 |
25 | """ 26 | 27 | 'Footer Positive': 28 | 'prefix':'ionic-css-footer:positive' 29 | 'body' : """ 30 |
31 |

${1: Footer}

32 |
33 | """ 34 | 35 | 'Footer Calm': 36 | 'prefix':'ionic-css-footer:calm' 37 | 'body' : """ 38 |
39 |

${1: Footer}

40 |
41 | """ 42 | 43 | 'Footer Balanced': 44 | 'prefix':'ionic-css-footer:balanced' 45 | 'body' : """ 46 |
47 |

${1: Footer}

48 |
49 | """ 50 | 51 | 'Footer Energized': 52 | 'prefix':'ionic-css-footer:energized' 53 | 'body' : """ 54 |
55 |

${1: Footer}

56 |
57 | """ 58 | 59 | 'Footer Assertive': 60 | 'prefix':'ionic-css-footer:assertive' 61 | 'body' : """ 62 |
63 |

${1: Footer}

64 |
65 | """ 66 | 67 | 'Footer Royal': 68 | 'prefix':'ionic-css-footer:royal' 69 | 'body' : """ 70 |
71 |

${1: Footer}

72 |
73 | """ 74 | 75 | 'Footer Dark': 76 | 'prefix':'ionic-css-footer:dark' 77 | 'body' : """ 78 |
79 |

${1: Footer}

80 |
81 | """ 82 | -------------------------------------------------------------------------------- /snippets/form.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Plachehoder Label': 4 | 'prefix':'ionic-css-form-placeholder' 5 | 'body' : """ 6 |
7 | 10 | 13 | 16 |
17 | """ 18 | 19 | 'Floating Label': 20 | 'prefix':'ionic-css-form-floating' 21 | 'body' : """ 22 |
23 | 27 | 31 | 35 |
36 | """ 37 | 38 | 'Stacked Label': 39 | 'prefix':'ionic-css-form-stacked' 40 | 'body' : """ 41 |
42 | 46 | 50 | 54 |
55 | """ 56 | 57 | 'Inline Label': 58 | 'prefix':'ionic-css-form-inline' 59 | 'body' : """ 60 |
61 | 65 | 69 |
70 | """ 71 | 72 | 'Form in Header': 73 | 'prefix':'ionic-css-form-header' 74 | 'body' : """ 75 |
76 | 80 | 83 |
84 | """ 85 | 86 | 'Form with Icons': 87 | 'prefix':'ionic-css-form-icon' 88 | 'body' : """ 89 |
90 | 94 |
95 | """ 96 | 97 | 'Inset Form': 98 | 'prefix':'ionic-css-form-inset' 99 | 'body' : """ 100 |
101 | 104 | 107 |
108 | """ 109 | -------------------------------------------------------------------------------- /snippets/header.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Header': 4 | 'prefix':'ionic-css-header' 5 | 'body' : """ 6 |
7 |

${1: Header}

8 |
9 | """ 10 | 11 | 'Header Light': 12 | 'prefix':'ionic-css-header:light' 13 | 'body' : """ 14 |
15 |

${1: Header}

16 |
17 | """ 18 | 19 | 'Header Stable': 20 | 'prefix':'ionic-css-header:stable' 21 | 'body' : """ 22 |
23 |

${1: Header}

24 |
25 | """ 26 | 27 | 'Header Positive': 28 | 'prefix':'ionic-css-header:positive' 29 | 'body' : """ 30 |
31 |

${1: Header}

32 |
33 | """ 34 | 35 | 'Header Calm': 36 | 'prefix':'ionic-css-header:calm' 37 | 'body' : """ 38 |
39 |

${1: Header}

40 |
41 | """ 42 | 43 | 'Header Balanced': 44 | 'prefix':'ionic-css-header:balanced' 45 | 'body' : """ 46 |
47 |

${1: Header}

48 |
49 | """ 50 | 51 | 'Header Energized': 52 | 'prefix':'ionic-css-header:energized' 53 | 'body' : """ 54 |
55 |

${1: Header}

56 |
57 | """ 58 | 59 | 'Header Assertive': 60 | 'prefix':'ionic-css-header:assertive' 61 | 'body' : """ 62 |
63 |

${1: Header}

64 |
65 | """ 66 | 67 | 'Header Royal': 68 | 'prefix':'ionic-css-header:royal' 69 | 'body' : """ 70 |
71 |

${1: Header}

72 |
73 | """ 74 | 75 | 'Header Dark': 76 | 'prefix':'ionic-css-header:dark' 77 | 'body' : """ 78 |
79 |

${1: Header}

80 |
81 | """ 82 | -------------------------------------------------------------------------------- /snippets/jsactioinsheet.cson: -------------------------------------------------------------------------------- 1 | ".source.js": 2 | 3 | 'ActionSheet': 4 | 'prefix':'ionic-js-actionsheet' 5 | 'body' : """ 6 | 7 | // Make Sure to Add the $ionicActionSheet as Dependency to the Controller 8 | 9 | // Show the action sheet 10 | var hideSheet = $ionicActionSheet.show({ 11 | buttons: [ 12 | { text: 'Share This' }, 13 | { text: 'Move' } 14 | ], 15 | destructiveText: 'Delete', 16 | titleText: 'Modify your album', 17 | cancelText: 'Cancel', 18 | cancel: function() { 19 | // add cancel code.. 20 | }, 21 | buttonClicked: function(index) { 22 | return true; 23 | } 24 | }); 25 | """ 26 | -------------------------------------------------------------------------------- /snippets/jsbackdrop.cson: -------------------------------------------------------------------------------- 1 | ".source.js": 2 | 3 | 'Backdrop': 4 | 'prefix':'ionic-js-backdrop' 5 | 'body' : """ 6 | function MyController($scope, $ionicBackdrop, $timeout) { 7 | //Show a backdrop for one second 8 | $scope.action = function() { 9 | $ionicBackdrop.retain(); 10 | $timeout(function() { 11 | $ionicBackdrop.release(); 12 | }, 1000); 13 | }; 14 | } 15 | """ 16 | -------------------------------------------------------------------------------- /snippets/jspopover.cson: -------------------------------------------------------------------------------- 1 | ".source.js": 2 | 3 | 'Popover': 4 | 'prefix':'ionic-js-popover' 5 | 'body' : """ 6 | 7 | //Make Sure to Inject $ionicPopover in Controller 8 | $ionicPopover.fromTemplateUrl('${1:my-popover.html}', { 9 | scope: $scope, 10 | }).then(function(popover) { 11 | $scope.popover = popover; 12 | }); 13 | $scope.openPopover = function($event) { 14 | $scope.popover.show($event); 15 | }; 16 | $scope.closePopover = function() { 17 | $scope.popover.hide(); 18 | }; 19 | //Cleanup the popover when we're done with it! 20 | $scope.$on('$destroy', function() { 21 | $scope.popover.remove(); 22 | }); 23 | // Execute action on hide popover 24 | $scope.$on('popover.hidden', function() { 25 | // Execute action 26 | }); 27 | // Execute action on remove popover 28 | $scope.$on('popover.removed', function() { 29 | // Execute action 30 | }); 31 | """ 32 | -------------------------------------------------------------------------------- /snippets/jspopup.cson: -------------------------------------------------------------------------------- 1 | ".source.js": 2 | 3 | 'Popup Alert': 4 | 'prefix':'ionic-js-popup:alert' 5 | 'body' : """ 6 | $scope.showAlert = function() { 7 | var alertPopup = $ionicPopup.alert({ 8 | title: '${1:Popup Title}', 9 | template: '${2:Its Content}' 10 | }); 11 | alertPopup.then(function(res) { 12 | console.log('${3:Thank you for not eating my delicious ice cream cone}'); 13 | }); 14 | }; 15 | }); 16 | """ 17 | 18 | 'Popup Confirm': 19 | 'prefix':'ionic-js-popup:confirm' 20 | 'body' : """ 21 | $scope.showConfirm = function() { 22 | var confirmPopup = $ionicPopup.confirm({ 23 | title: '${1:Title}', 24 | template: '${2: Its Content}' 25 | }); 26 | confirmPopup.then(function(res) { 27 | if(res) { 28 | console.log('You are sure'); 29 | } else { 30 | console.log('You are not sure'); 31 | } 32 | }); 33 | }; 34 | """ 35 | 36 | 'Popup Prompt': 37 | 'prefix':'ionic-js-popup:prompt' 38 | 'body' : """ 39 | $ionicPopup.prompt({ 40 | title: '${1:Title}', 41 | template: '${2: Template}', 42 | inputType: '${3:password}', 43 | inputPlaceholder: '${4:Placehoder Text}' 44 | }).then(function(res) { 45 | console.log('Your password is', res); 46 | }); 47 | """ 48 | -------------------------------------------------------------------------------- /snippets/list.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'List': 4 | 'prefix':'ionic-css-list' 5 | 'body' : """ 6 | 19 | """ 20 | 21 | 'List Inset': 22 | 'prefix':'ionic-css-list:inset' 23 | 'body' : """ 24 | 37 | """ 38 | 39 | 'List Item': 40 | 'prefix':'ionic-css-list-item' 41 | 'body' : """ 42 |
  • 43 | ${1: Item} 44 |
    • 45 | """ 46 | 47 | 'List Item': 48 | 'prefix':'ionic-css-list:divider' 49 | 'body' : """ 50 |
    51 | ${1:Item Divider} 52 |
    53 | """ 54 | 55 | 'List Item with Avatar': 56 | 'prefix':'ionic-css-list-item:avatar' 57 | 'body' : """ 58 | 59 | 60 |

    Avatar

    61 |

    I am Crazy, are you?.

    62 |     63 | """ 64 | 65 | 'List Item with Left Button': 66 | 'prefix':'ionic-css-list-item:buttonleft' 67 | 'body' : """ 68 |
    69 | Ionic 70 | 73 |
    74 | """ 75 | 76 | 'List Item with Right Button': 77 | 'prefix':'ionic-css-list-item:buttonright' 78 | 'body' : """ 79 |
    80 | Ionic 81 | 84 |
    85 | """ 86 | 87 | 'List Item with Left Icon': 88 | 'prefix':'ionic-css-list-item:iconleft' 89 | 'body' : """ 90 | 91 | 92 | Ionic 93 | 94 | """ 95 | 96 | 'List Item with Right Icon': 97 | 'prefix':'ionic-css-list-item:iconright' 98 | 'body' : """ 99 | 100 | 101 | Ionic 102 | 103 | """ 104 | 105 | 'List Item with Left Thumbnail': 106 | 'prefix':'ionic-css-list-item:thumbleft' 107 | 'body' : """ 108 | 109 | 110 |

    Thumbnail

    111 |

    I am Crazy.

    112 |     113 | """ 114 | 115 | 'List Item with Right Thumbnail': 116 | 'prefix':'ionic-css-list-item:thumbright' 117 | 'body' : """ 118 | 119 | 120 |

    Thumbnail

    121 |

    I am Crazy.

    122 |     123 | """ 124 | -------------------------------------------------------------------------------- /snippets/ngcontent.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Content': 4 | 'prefix':'ionic-content' 5 | 'body' : """ 6 | 18 | ${12:...} 19 | 20 | """ 21 | 22 | 'Pane': 23 | 'prefix':'ionic-pane' 24 | 'body' : """ 25 | 26 | ${1: Challenge Accepted! :P} 27 | 28 | """ 29 | 30 | 'Refresher': 31 | 'prefix':'ionic-refresher' 32 | 'body' : """ 33 | 36 | 37 | """ 38 | -------------------------------------------------------------------------------- /snippets/ngform.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Checkbox': 4 | 'prefix':'ionic-checkbox' 5 | 'body' : """ 6 | ${2:Label} 7 | """ 8 | 9 | 'Radio': 10 | 'prefix':'ionic-radio' 11 | 'body' : """ 12 | ${3:Label} 13 | ${6:Label} 14 | """ 15 | 16 | 'Toggle Default Theme': 17 | 'prefix':'ionic-toggle' 18 | 'body' : """ 19 | ${2:Airplane Mode} 20 | """ 21 | 22 | 'Toggle Light Theme': 23 | 'prefix':'ionic-toggle:light' 24 | 'body' : """ 25 | ${2:Airplane Mode} 26 | """ 27 | 28 | 'Toggle Stable Theme': 29 | 'prefix':'ionic-toggle:stable' 30 | 'body' : """ 31 | ${2:Airplane Mode} 32 | """ 33 | 34 | 'Toggle Positive Theme': 35 | 'prefix':'ionic-toggle:positive' 36 | 'body' : """ 37 | ${2:Airplane Mode} 38 | """ 39 | 40 | 'Toggle Calm Theme': 41 | 'prefix':'ionic-toggle:calm' 42 | 'body' : """ 43 | ${2:Airplane Mode} 44 | """ 45 | 46 | 'Toggle Balanced Theme': 47 | 'prefix':'ionic-toggle:balanced' 48 | 'body' : """ 49 | ${2:Airplane Mode} 50 | """ 51 | 52 | 'Toggle Energized Theme': 53 | 'prefix':'ionic-toggle:energized' 54 | 'body' : """ 55 | ${2:Airplane Mode} 56 | """ 57 | 58 | 'Toggle Assertive Theme': 59 | 'prefix':'ionic-toggle:assertive' 60 | 'body' : """ 61 | ${2:Airplane Mode} 62 | """ 63 | 64 | 'Toggle Royal Theme': 65 | 'prefix':'ionic-toggle:royal' 66 | 'body' : """ 67 | ${2:Airplane Mode} 68 | """ 69 | 70 | 'Toggle Dark Theme': 71 | 'prefix':'ionic-toggle:dark' 72 | 'body' : """ 73 | ${2:Airplane Mode} 74 | """ 75 | -------------------------------------------------------------------------------- /snippets/ngheaderfooter.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Header Bar': 4 | 'prefix':'ionic-header-bar' 5 | 'body' : """ 6 | 7 |
    8 | 9 |
    10 |

    Title!

    11 |
    12 | 13 |
    14 |     15 | """ 16 | 17 | 'Footer Bar': 18 | 'prefix':'ionic-footer-bar' 19 | 'body' : """ 20 | 21 |
    22 | 23 |
    24 |

    Title!

    25 |
    26 | 27 |
    28 |     29 | """ 30 | -------------------------------------------------------------------------------- /snippets/nglist.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'List': 4 | 'prefix':'ionic-list' 5 | 'body' : """ 6 | 7 | 8 | 9 | 10 | 11 | """ 12 | 13 | 'List Item': 14 | 'prefix':'ionic-item' 15 | 'body' : """ 16 | ${1:Item!} 17 | """ 18 | 19 | 'List with Delete Button': 20 | 'prefix':'ionic-delete-button' 21 | 'body' : """ 22 | 23 | 24 | 25 | ${2:Hello, list item!} 26 | 27 | 28 | 29 | ${3:Show Delete?} 30 | 31 | """ 32 | 33 | 'List with Option Button': 34 | 'prefix':'ionic-option-button' 35 | 'body' : """ 36 | 37 | 38 | ${1:I love kittens!} 39 | ${2:Share} 40 | ${3:Edit} 41 | 42 | 43 | """ 44 | 45 | 'List with Reorder Button': 46 | 'prefix':'ionic-reorder-button' 47 | 'body' : """ 48 | 49 | 50 | ${4:Item} 51 | 53 | 54 | 55 | 56 | """ 57 | 58 | 'List with Collection Repeat': 59 | 'prefix':'ionic-collection-repeat' 60 | 'body' : """ 61 | 62 |
    63 |
    68 | {{${2:item} }} 69 |
    70 |
    71 |     72 | """ 73 | -------------------------------------------------------------------------------- /snippets/ngnavigation.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Ion View': 4 | 'prefix':'ionic-view' 5 | 'body' : """ 6 | 7 | 8 | Content Here 9 | 10 | 11 | """ 12 | 13 | 'Ion Nav View': 14 | 'prefix':'ionic-nav-view' 15 | 'body' : """ 16 | 17 | 18 | 19 | 20 | """ 21 | 22 | 'Ion Nav Back button': 23 | 'prefix':'ionic-nav-back' 24 | 'body' : """ 25 | 26 | Back 27 | 28 | """ 29 | 30 | 'Ion Nav Left button': 31 | 'prefix':'ionic-nav-buttons:left' 32 | 'body' : """ 33 | 34 | 37 | 38 | """ 39 | 40 | 'Ion Nav Right button': 41 | 'prefix':'ionic-nav-buttons:right' 42 | 'body' : """ 43 | 44 | 47 | 48 | """ 49 | -------------------------------------------------------------------------------- /snippets/ngpopover.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Popover': 4 | 'prefix':'ionic-popover' 5 | 'body' : """ 6 |

    7 | 8 |

    9 | 10 | // You can place this template in seperate html file 11 | 21 | """ 22 | -------------------------------------------------------------------------------- /snippets/ngscroll.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Scroll': 4 | 'prefix':'ionic-scroll' 5 | 'body' : """ 6 | 7 | 8 |
    9 |
    10 | 11 |     12 | """ 13 | 14 | 'Infinite Scroll': 15 | 'prefix':'ionic-infinite-scroll' 16 | 'body' : """ 17 | 20 | 21 | """ 22 | -------------------------------------------------------------------------------- /snippets/ngsidemenu.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Side Menu': 4 | 'prefix':'ionic-side-menus' 5 | 'body' : """ 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | """ 20 | -------------------------------------------------------------------------------- /snippets/ngslidebox.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Slide Box': 4 | 'prefix':'ionic-slide-box' 5 | 'body' : """ 6 | 7 | 8 |

    ${3:BLUE}

    9 |     10 | 11 |

    ${4:YELLOW}

    12 |     13 | 14 |

    ${5:PINK}

    15 |     16 |     17 | """ 18 | 19 | 'Slide': 20 | 'prefix':'ionic-slide' 21 | 'body' : """ 22 | 23 |

    Content

    24 |     25 | """ 26 | -------------------------------------------------------------------------------- /snippets/ngtabs.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Tabs': 4 | 'prefix':'ionic-tabs' 5 | 'body' : """ 6 | 7 | 8 | 9 | ${2:} 10 | 11 | 12 | 13 | ${4:} 14 | 15 | 16 | 17 | ${6:} 18 | 19 | 20 | 21 | """ 22 | 23 | 'Tab': 24 | 'prefix':'ionic-tab' 25 | 'body' : """ 26 | 32 | 33 | """ 34 | -------------------------------------------------------------------------------- /snippets/radiobuttons.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Radio Buttons': 4 | 'prefix':'ionic-css-radio' 5 | 'body' : """ 6 |
    7 | 14 |
    15 | """ 16 | -------------------------------------------------------------------------------- /snippets/range.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Range': 4 | 'prefix':'ionic-css-range' 5 | 'body' : """ 6 |
    7 | 8 | 9 | 10 |
    11 | """ 12 | 13 | 'Range Light Theme': 14 | 'prefix':'ionic-css-range:light' 15 | 'body' : """ 16 |
    17 | 18 | 19 | 20 |
    21 | """ 22 | 23 | 'Range Stable Theme': 24 | 'prefix':'ionic-css-range:stable' 25 | 'body' : """ 26 |
    27 | 28 | 29 | 30 |
    31 | """ 32 | 33 | 'Range Positive Theme': 34 | 'prefix':'ionic-css-range:positive' 35 | 'body' : """ 36 |
    37 | 38 | 39 | 40 |
    41 | """ 42 | 43 | 'Range Calm Theme': 44 | 'prefix':'ionic-css-range:calm' 45 | 'body' : """ 46 |
    47 | 48 | 49 | 50 |
    51 | """ 52 | 53 | 'Range Balanced Theme': 54 | 'prefix':'ionic-css-range:balanced' 55 | 'body' : """ 56 |
    57 | 58 | 59 | 60 |
    61 | """ 62 | 63 | 'Range Energized Theme': 64 | 'prefix':'ionic-css-range:energized' 65 | 'body' : """ 66 |
    67 | 68 | 69 | 70 |
    71 | """ 72 | 73 | 'Range Assertive Theme': 74 | 'prefix':'ionic-css-range:assertive' 75 | 'body' : """ 76 |
    77 | 78 | 79 | 80 |
    81 | """ 82 | 83 | 'Range Royal Theme': 84 | 'prefix':'ionic-css-range:royal' 85 | 'body' : """ 86 |
    87 | 88 | 89 | 90 |
    91 | """ 92 | 93 | 'Range Dark Theme': 94 | 'prefix':'ionic-css-range:dark' 95 | 'body' : """ 96 |
    97 | 98 | 99 | 100 |
    101 | """ 102 | -------------------------------------------------------------------------------- /snippets/select.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Select': 4 | 'prefix':'ionic-css-select' 5 | 'body' : """ 6 |
    7 | 8 | 18 | 19 |
    20 | """ 21 | -------------------------------------------------------------------------------- /snippets/tabs.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Tabs': 4 | 'prefix':'ionic-css-tabs' 5 | 'body' : """ 6 |
    7 | 8 | ${1:Home} 9 | 10 | 11 | ${2:Favorites} 12 | 13 | 14 | ${3:Settings} 15 | 16 |
    17 | """ 18 | 19 | 'Tabs Light Theme': 20 | 'prefix':'ionic-css-tabs:light' 21 | 'body' : """ 22 |
    23 | 24 | ${1:Home} 25 | 26 | 27 | ${2:Favorites} 28 | 29 | 30 | ${3:Settings} 31 | 32 |
    33 | """ 34 | 35 | 'Tabs Stable Theme': 36 | 'prefix':'ionic-css-tabs:stable' 37 | 'body' : """ 38 |
    39 | 40 | ${1:Home} 41 | 42 | 43 | ${2:Favorites} 44 | 45 | 46 | ${3:Settings} 47 | 48 |
    49 | """ 50 | 51 | 'Tabs Positive Theme': 52 | 'prefix':'ionic-css-tabs:positive' 53 | 'body' : """ 54 |
    55 | 56 | ${1:Home} 57 | 58 | 59 | ${2:Favorites} 60 | 61 | 62 | ${3:Settings} 63 | 64 |
    65 | """ 66 | 67 | 'Tabs Calm Theme': 68 | 'prefix':'ionic-css-tabs:calm' 69 | 'body' : """ 70 |
    71 | 72 | ${1:Home} 73 | 74 | 75 | ${2:Favorites} 76 | 77 | 78 | ${3:Settings} 79 | 80 |
    81 | """ 82 | 83 | 'Tabs Balanced Theme': 84 | 'prefix':'ionic-css-tabs:balanced' 85 | 'body' : """ 86 |
    87 | 88 | ${1:Home} 89 | 90 | 91 | ${2:Favorites} 92 | 93 | 94 | ${3:Settings} 95 | 96 |
    97 | """ 98 | 99 | 'Tabs Energized Theme': 100 | 'prefix':'ionic-css-tabs:energized' 101 | 'body' : """ 102 |
    103 | 104 | ${1:Home} 105 | 106 | 107 | ${2:Favorites} 108 | 109 | 110 | ${3:Settings} 111 | 112 |
    113 | """ 114 | 115 | 'Tabs Assertive Theme': 116 | 'prefix':'ionic-css-tabs:assertive' 117 | 'body' : """ 118 |
    119 | 120 | ${1:Home} 121 | 122 | 123 | ${2:Favorites} 124 | 125 | 126 | ${3:Settings} 127 | 128 |
    129 | """ 130 | 131 | 'Tabs Royal Theme': 132 | 'prefix':'ionic-css-tabs:royal' 133 | 'body' : """ 134 |
    135 | 136 | ${1:Home} 137 | 138 | 139 | ${2:Favorites} 140 | 141 | 142 | ${3:Settings} 143 | 144 |
    145 | """ 146 | 147 | 'Tabs Dark Theme': 148 | 'prefix':'ionic-css-tabs:dark' 149 | 'body' : """ 150 |
    151 | 152 | ${1:Home} 153 | 154 | 155 | ${2:Favorites} 156 | 157 | 158 | ${3:Settings} 159 | 160 |
    161 | """ 162 | 163 | # Tabs with Icons 164 | 165 | 'Tabs with Icon': 166 | 'prefix':'ionic-css-tabs-icon' 167 | 'body' : """ 168 |
    169 | 170 | ${1:Home} 171 | 172 | 173 | ${2:Favorites} 174 | 175 | 176 | ${3:Settings} 177 | 178 |
    179 | """ 180 | 181 | 'Tabs with Icon Light Theme': 182 | 'prefix':'ionic-css-tabs-icon:light' 183 | 'body' : """ 184 |
    185 | 186 | ${1:Home} 187 | 188 | 189 | ${2:Favorites} 190 | 191 | 192 | ${3:Settings} 193 | 194 |
    195 | """ 196 | 197 | 'Tabs with Icon Stable Theme': 198 | 'prefix':'ionic-css-tabs-icon:stable' 199 | 'body' : """ 200 |
    201 | 202 | ${1:Home} 203 | 204 | 205 | ${2:Favorites} 206 | 207 | 208 | ${3:Settings} 209 | 210 |
    211 | """ 212 | 213 | 'Tabs with Icon Positive Theme': 214 | 'prefix':'ionic-css-tabs-icon:positive' 215 | 'body' : """ 216 |
    217 | 218 | ${1:Home} 219 | 220 | 221 | ${2:Favorites} 222 | 223 | 224 | ${3:Settings} 225 | 226 |
    227 | """ 228 | 229 | 'Tabs with Icon Calm Theme': 230 | 'prefix':'ionic-css-tabs-icon:calm' 231 | 'body' : """ 232 |
    233 | 234 | ${1:Home} 235 | 236 | 237 | ${2:Favorites} 238 | 239 | 240 | ${3:Settings} 241 | 242 |
    243 | """ 244 | 245 | 'Tabs with Icon Balanced Theme': 246 | 'prefix':'ionic-css-tabs-icon:balanced' 247 | 'body' : """ 248 |
    249 | 250 | ${1:Home} 251 | 252 | 253 | ${2:Favorites} 254 | 255 | 256 | ${3:Settings} 257 | 258 |
    259 | """ 260 | 261 | 'Tabs with Icon Energized Theme': 262 | 'prefix':'ionic-css-tabs-icon:energized' 263 | 'body' : """ 264 |
    265 | 266 | ${1:Home} 267 | 268 | 269 | ${2:Favorites} 270 | 271 | 272 | ${3:Settings} 273 | 274 |
    275 | """ 276 | 277 | 'Tabs with Icon Assertive Theme': 278 | 'prefix':'ionic-css-tabs-icon:assertive' 279 | 'body' : """ 280 |
    281 | 282 | ${1:Home} 283 | 284 | 285 | ${2:Favorites} 286 | 287 | 288 | ${3:Settings} 289 | 290 |
    291 | """ 292 | 293 | 'Tabs with Icon Royal Theme': 294 | 'prefix':'ionic-css-tabs-icon:royal' 295 | 'body' : """ 296 |
    297 | 298 | ${1:Home} 299 | 300 | 301 | ${2:Favorites} 302 | 303 | 304 | ${3:Settings} 305 | 306 |
    307 | """ 308 | 309 | 'Tabs with Icon Dark Theme': 310 | 'prefix':'ionic-css-tabs-icon:dark' 311 | 'body' : """ 312 |
    313 | 314 | ${1:Home} 315 | 316 | 317 | ${2:Favorites} 318 | 319 | 320 | ${3:Settings} 321 | 322 |
    323 | """ 324 | 325 | # Tabs with Left Icon 326 | 327 | 'Tabs with Left Icon': 328 | 'prefix':'ionic-css-tabs-iconleft' 329 | 'body' : """ 330 |
    331 | 332 | ${1:Home} 333 | 334 | 335 | ${2:Favorites} 336 | 337 | 338 | ${3:Settings} 339 | 340 |
    341 | """ 342 | 343 | 'Tabs with Left Icon Light Theme': 344 | 'prefix':'ionic-css-tabs-iconleft:light' 345 | 'body' : """ 346 |
    347 | 348 | ${1:Home} 349 | 350 | 351 | ${2:Favorites} 352 | 353 | 354 | ${3:Settings} 355 | 356 |
    357 | """ 358 | 359 | 'Tabs with Left Icon Stable Theme': 360 | 'prefix':'ionic-css-tabs-iconleft:stable' 361 | 'body' : """ 362 |
    363 | 364 | ${1:Home} 365 | 366 | 367 | ${2:Favorites} 368 | 369 | 370 | ${3:Settings} 371 | 372 |
    373 | """ 374 | 375 | 'Tabs with Left Icon Positive Theme': 376 | 'prefix':'ionic-css-tabs-iconleft:positive' 377 | 'body' : """ 378 |
    379 | 380 | ${1:Home} 381 | 382 | 383 | ${2:Favorites} 384 | 385 | 386 | ${3:Settings} 387 | 388 |
    389 | """ 390 | 391 | 'Tabs with Left Icon Calm Theme': 392 | 'prefix':'ionic-css-tabs-iconleft:calm' 393 | 'body' : """ 394 |
    395 | 396 | ${1:Home} 397 | 398 | 399 | ${2:Favorites} 400 | 401 | 402 | ${3:Settings} 403 | 404 |
    405 | """ 406 | 407 | 'Tabs with Left Icon Balanced Theme': 408 | 'prefix':'ionic-css-tabs-iconleft:balanced' 409 | 'body' : """ 410 |
    411 | 412 | ${1:Home} 413 | 414 | 415 | ${2:Favorites} 416 | 417 | 418 | ${3:Settings} 419 | 420 |
    421 | """ 422 | 423 | 'Tabs with Left Icon Energized Theme': 424 | 'prefix':'ionic-css-tabs-iconleft:energized' 425 | 'body' : """ 426 |
    427 | 428 | ${1:Home} 429 | 430 | 431 | ${2:Favorites} 432 | 433 | 434 | ${3:Settings} 435 | 436 |
    437 | """ 438 | 439 | 'Tabs with Left Icon Assertive Theme': 440 | 'prefix':'ionic-css-tabs-iconleft:assertive' 441 | 'body' : """ 442 |
    443 | 444 | ${1:Home} 445 | 446 | 447 | ${2:Favorites} 448 | 449 | 450 | ${3:Settings} 451 | 452 |
    453 | """ 454 | 455 | 'Tabs with Left Icon Royal Theme': 456 | 'prefix':'ionic-css-tabs-iconleft:royal' 457 | 'body' : """ 458 |
    459 | 460 | ${1:Home} 461 | 462 | 463 | ${2:Favorites} 464 | 465 | 466 | ${3:Settings} 467 | 468 |
    469 | """ 470 | 471 | 'Tabs with Left Icon Dark Theme': 472 | 'prefix':'ionic-css-tabs-iconleft:dark' 473 | 'body' : """ 474 |
    475 | 476 | ${1:Home} 477 | 478 | 479 | ${2:Favorites} 480 | 481 | 482 | ${3:Settings} 483 | 484 |
    485 | """ 486 | 487 | # Tabs with Top Icon 488 | 489 | 'Tabs with Top Icon': 490 | 'prefix':'ionic-css-tabs-icontop' 491 | 'body' : """ 492 |
    493 | 494 | ${1:Home} 495 | 496 | 497 | ${2:Favorites} 498 | 499 | 500 | ${3:Settings} 501 | 502 |
    503 | """ 504 | 505 | 'Tabs with Top Icon Light Theme': 506 | 'prefix':'ionic-css-tabs-icontop:light' 507 | 'body' : """ 508 |
    509 | 510 | ${1:Home} 511 | 512 | 513 | ${2:Favorites} 514 | 515 | 516 | ${3:Settings} 517 | 518 |
    519 | """ 520 | 521 | 'Tabs with Top Icon Stable Theme': 522 | 'prefix':'ionic-css-tabs-icontop:stable' 523 | 'body' : """ 524 |
    525 | 526 | ${1:Home} 527 | 528 | 529 | ${2:Favorites} 530 | 531 | 532 | ${3:Settings} 533 | 534 |
    535 | """ 536 | 537 | 'Tabs with Top Icon Positive Theme': 538 | 'prefix':'ionic-css-tabs-icontop:positive' 539 | 'body' : """ 540 |
    541 | 542 | ${1:Home} 543 | 544 | 545 | ${2:Favorites} 546 | 547 | 548 | ${3:Settings} 549 | 550 |
    551 | """ 552 | 553 | 'Tabs with Top Icon Calm Theme': 554 | 'prefix':'ionic-css-tabs-icontop:calm' 555 | 'body' : """ 556 |
    557 | 558 | ${1:Home} 559 | 560 | 561 | ${2:Favorites} 562 | 563 | 564 | ${3:Settings} 565 | 566 |
    567 | """ 568 | 569 | 'Tabs with Top Icon Balanced Theme': 570 | 'prefix':'ionic-css-tabs-icontop:balanced' 571 | 'body' : """ 572 |
    573 | 574 | ${1:Home} 575 | 576 | 577 | ${2:Favorites} 578 | 579 | 580 | ${3:Settings} 581 | 582 |
    583 | """ 584 | 585 | 'Tabs with Top Icon Energized Theme': 586 | 'prefix':'ionic-css-tabs-icontop:energized' 587 | 'body' : """ 588 |
    589 | 590 | ${1:Home} 591 | 592 | 593 | ${2:Favorites} 594 | 595 | 596 | ${3:Settings} 597 | 598 |
    599 | """ 600 | 601 | 'Tabs with Top Icon Assertive Theme': 602 | 'prefix':'ionic-css-tabs-icontop:assertive' 603 | 'body' : """ 604 |
    605 | 606 | ${1:Home} 607 | 608 | 609 | ${2:Favorites} 610 | 611 | 612 | ${3:Settings} 613 | 614 |
    615 | """ 616 | 617 | 'Tabs with Top Icon Royal Theme': 618 | 'prefix':'ionic-css-tabs-icontop:royal' 619 | 'body' : """ 620 |
    621 | 622 | ${1:Home} 623 | 624 | 625 | ${2:Favorites} 626 | 627 | 628 | ${3:Settings} 629 | 630 |
    631 | """ 632 | 633 | 'Tabs with Top Icon Dark Theme': 634 | 'prefix':'ionic-css-tabs-icontop:dark' 635 | 'body' : """ 636 |
    637 | 638 | ${1:Home} 639 | 640 | 641 | ${2:Favorites} 642 | 643 | 644 | ${3:Settings} 645 | 646 |
    647 | """ 648 | -------------------------------------------------------------------------------- /snippets/toggle.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 3 | 'Toggle Default Theme': 4 | 'prefix':'ionic-css-toggle' 5 | 'body' : """ 6 | 12 | """ 13 | 14 | 'Toggle Light Theme': 15 | 'prefix':'ionic-css-toggle:light' 16 | 'body' : """ 17 | 23 | """ 24 | 25 | 'Toggle Stable Theme': 26 | 'prefix':'ionic-css-toggle:stable' 27 | 'body' : """ 28 | 34 | """ 35 | 36 | 'Toggle Positive Theme': 37 | 'prefix':'ionic-css-toggle:positive' 38 | 'body' : """ 39 | 45 | """ 46 | 47 | 'Toggle Calm Theme': 48 | 'prefix':'ionic-css-toggle:calm' 49 | 'body' : """ 50 | 56 | """ 57 | 58 | 'Toggle Balanced Theme': 59 | 'prefix':'ionic-css-toggle:balanced' 60 | 'body' : """ 61 | 67 | """ 68 | 69 | 'Toggle Energized Theme': 70 | 'prefix':'ionic-css-toggle:energized' 71 | 'body' : """ 72 | 78 | """ 79 | 80 | 'Toggle Assertive Theme': 81 | 'prefix':'ionic-css-toggle:assertive' 82 | 'body' : """ 83 | 89 | """ 90 | 91 | 'Toggle Royal Theme': 92 | 'prefix':'ionic-css-toggle:royal' 93 | 'body' : """ 94 | 100 | """ 101 | 102 | 'Toggle Dark Theme': 103 | 'prefix':'ionic-css-toggle:dark' 104 | 'body' : """ 105 | 111 | """ 112 | -------------------------------------------------------------------------------- /spec/ionic-framework-snippets-spec.coffee: -------------------------------------------------------------------------------- 1 | IonicFrameworkSnippets = require '../lib/ionic-framework-snippets' 2 | 3 | # Use the command `window:run-package-specs` (cmd-alt-ctrl-p) to run specs. 4 | # 5 | # To run a specific `it` or `describe` block add an `f` to the front (e.g. `fit` 6 | # or `fdescribe`). Remove the `f` to unfocus the block. 7 | 8 | describe "IonicFrameworkSnippets", -> 9 | [workspaceElement, activationPromise] = [] 10 | 11 | beforeEach -> 12 | workspaceElement = atom.views.getView(atom.workspace) 13 | activationPromise = atom.packages.activatePackage('ionic-framework-snippets') 14 | 15 | describe "when the ionic-framework-snippets:toggle event is triggered", -> 16 | it "hides and shows the modal panel", -> 17 | # Before the activation event the view is not on the DOM, and no panel 18 | # has been created 19 | expect(workspaceElement.querySelector('.ionic-framework-snippets')).not.toExist() 20 | 21 | # This is an activation event, triggering it will cause the package to be 22 | # activated. 23 | atom.commands.dispatch workspaceElement, 'ionic-framework-snippets:toggle' 24 | 25 | waitsForPromise -> 26 | activationPromise 27 | 28 | runs -> 29 | expect(workspaceElement.querySelector('.ionic-framework-snippets')).toExist() 30 | 31 | ionicFrameworkSnippetsElement = workspaceElement.querySelector('.ionic-framework-snippets') 32 | expect(ionicFrameworkSnippetsElement).toExist() 33 | 34 | ionicFrameworkSnippetsPanel = atom.workspace.panelForItem(ionicFrameworkSnippetsElement) 35 | expect(ionicFrameworkSnippetsPanel.isVisible()).toBe true 36 | atom.commands.dispatch workspaceElement, 'ionic-framework-snippets:toggle' 37 | expect(ionicFrameworkSnippetsPanel.isVisible()).toBe false 38 | 39 | it "hides and shows the view", -> 40 | # This test shows you an integration test testing at the view level. 41 | 42 | # Attaching the workspaceElement to the DOM is required to allow the 43 | # `toBeVisible()` matchers to work. Anything testing visibility or focus 44 | # requires that the workspaceElement is on the DOM. Tests that attach the 45 | # workspaceElement to the DOM are generally slower than those off DOM. 46 | jasmine.attachToDOM(workspaceElement) 47 | 48 | expect(workspaceElement.querySelector('.ionic-framework-snippets')).not.toExist() 49 | 50 | # This is an activation event, triggering it causes the package to be 51 | # activated. 52 | atom.commands.dispatch workspaceElement, 'ionic-framework-snippets:toggle' 53 | 54 | waitsForPromise -> 55 | activationPromise 56 | 57 | runs -> 58 | # Now we can test for view visibility 59 | ionicFrameworkSnippetsElement = workspaceElement.querySelector('.ionic-framework-snippets') 60 | expect(ionicFrameworkSnippetsElement).toBeVisible() 61 | atom.commands.dispatch workspaceElement, 'ionic-framework-snippets:toggle' 62 | expect(ionicFrameworkSnippetsElement).not.toBeVisible() 63 | -------------------------------------------------------------------------------- /spec/ionic-framework-snippets-view-spec.coffee: -------------------------------------------------------------------------------- 1 | IonicFrameworkSnippetsView = require '../lib/ionic-framework-snippets-view' 2 | 3 | describe "IonicFrameworkSnippetsView", -> 4 | it "has one valid test", -> 5 | expect("life").toBe "easy" 6 | -------------------------------------------------------------------------------- /styles/ionic-framework-snippets.less: -------------------------------------------------------------------------------- 1 | // The ui-variables file is provided by base themes provided by Atom. 2 | // 3 | // See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less 4 | // for a full listing of what's available. 5 | @import "ui-variables"; 6 | 7 | .ionic-framework-snippets { 8 | } 9 | --------------------------------------------------------------------------------