diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a2b51368..4ea9fc9d4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,7 +14,14 @@ Contributions and pull requests are always welcome. Contributors may often be fo - Actions maybe be specified by a string action name (`onChange="updateValue"`) or an action closure (`onChange=(action (mut "myValue"))`). If you need to specify a target or additional parameter, you must use an action closure. - Many attributes have been renamed for clarity and consistency. See the specific changes below. -#### 1.0.0 specific changes +#### 1.0.0-alpha.1 + +- [#365](https://github.com/miguelcobain/ember-paper/pull/365) paper-button: Support for `fab` and `mini`. +- [#362](https://github.com/miguelcobain/ember-paper/pull/362) paper-toolbar: Support for `tall`. +- [#364](https://github.com/miguelcobain/ember-paper/pull/364) Support installation via both npm versions 2 and 3. +- [#367](https://github.com/miguelcobain/ember-paper/pull/367) You should now use `paper-toolbar-tools` component (or respective contextual component) instead of the `md-toolbar-tools` class. + +#### 1.0.0-alpha.0 - [1a9b641](https://github.com/miguelcobain/ember-paper/commit/1a9b6411a8ca30f3e9440d8585dc0f1ff4ff7649) paper-progress-circular now uses `diameter` instead of `md-diameter` - [cf2a8da](https://github.com/miguelcobain/ember-paper/commit/cf2a8da350ea805e11eef36914ae76213b4c9f24) paper-progress-linear now uses `bufferValue` instead of `buffer-value` - [#285](https://github.com/miguelcobain/ember-paper/pull/285) paper-checkbox now uses *actions up, data down*. `onChange` action is mandatory. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8e415d043..de4f123da 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -11,6 +11,7 @@ Many ember-paper contributors hang out on the [e-paper channel on slack](https:/ * **jscs.** Before submitting a pull request, check for coding style issues with `jscs -c .jscsrc app addon`. +* **Comments.** Include block-style (`/**`) comments before functions with a non-trivial or non-obvious purpose. Include line-style (`//`) comments wherever code might not be obvious to a future contributor, years later, without your knowledge of the functioning of the code. If an intermediate-level Ember developer will wonder why something works, explain it. * **Actions.** Accept action closures rather than strings representing action names. `{{some-component someAction=(action "myAction")}}`, not `{{some-component someAction="myAction" param="the stuff" target=someTarget}}`. Invoke the action with `this.sendAction('onWhatever');`. There is no need to test for the presence of `onWhatever` as `sendAction` handles that situation. @@ -83,3 +84,22 @@ becomes `` should be implemented as an ember component, such as `{{paper-some-element}}`. * **Features.** Seek to provide feature parity using Angular Material styles, but implemented in an Ember-centric way. + +## Building and deploying the dummy app to github + +If needed, update `ember-cli-github-pages` to version `0.0.9` or later, or the latest master of `0.0.8`. This version supports the `destination` option. + +1. In the `master` branch, ensure that the version number in `package.json` reflects the current changes and CHANGELOG.md. If needed, bump the version number, commit, and make a git tag for the release. + +2. Build the `master` branch: +```bash +checkout master +mkdir release-1 # if the directory does not already exist +ember github-pages:commit --message "Publish gh-pages for v1.0.0-alpha.0" --destination "release-1" +``` + +3. If the `0.2` branch needs building, repeat step 2 for `release-0-2`. + +4. Checkout branch `gh-pages` and confirm that you are satisfied. + +5. Push `gh-pages` to github. diff --git a/addon/components/paper-button.js b/addon/components/paper-button.js index b8ec697d4..7dda9c9eb 100644 --- a/addon/components/paper-button.js +++ b/addon/components/paper-button.js @@ -11,9 +11,15 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, { type: 'button', tagName: 'button', classNames: ['paper-button', 'md-default-theme', 'md-button'], + raised: false, + iconButton: false, + fab: computed.reads('mini'), // circular button + mini: false, classNameBindings: [ 'raised:md-raised', - 'iconButton:md-icon-button' + 'iconButton:md-icon-button', + 'fab:md-fab', + 'mini:md-mini' ], // Ripple Overrides diff --git a/addon/components/paper-toolbar-tools.js b/addon/components/paper-toolbar-tools.js new file mode 100644 index 000000000..4ddd3dd33 --- /dev/null +++ b/addon/components/paper-toolbar-tools.js @@ -0,0 +1,6 @@ +import Ember from 'ember'; +const { Component } = Ember; + +export default Component.extend({ + classNames: ['md-toolbar-tools'] +}); diff --git a/addon/components/paper-toolbar.js b/addon/components/paper-toolbar.js index 00a41f698..c2638ba77 100644 --- a/addon/components/paper-toolbar.js +++ b/addon/components/paper-toolbar.js @@ -1,7 +1,10 @@ import Ember from 'ember'; import ColorMixin from 'ember-paper/mixins/color-mixin'; +const { Component } = Ember; -export default Ember.Component.extend(ColorMixin, { +export default Component.extend(ColorMixin, { tagName: 'md-toolbar', - classNames: ['md-default-theme'] + classNames: ['md-default-theme'], + tall: false, + classNameBindings: ['tall:md-tall'] }); diff --git a/app/components/paper-toolbar-tools.js b/app/components/paper-toolbar-tools.js new file mode 100644 index 000000000..b43660f63 --- /dev/null +++ b/app/components/paper-toolbar-tools.js @@ -0,0 +1,3 @@ +import PaperToolbarTools from 'ember-paper/components/paper-toolbar-tools'; + +export default PaperToolbarTools; diff --git a/app/templates/components/paper-card.hbs b/app/templates/components/paper-card.hbs index 9ad5d16ee..4749579b0 100644 --- a/app/templates/components/paper-card.hbs +++ b/app/templates/components/paper-card.hbs @@ -1,8 +1,8 @@ {{yield (hash - title=(component 'paper-card-title') - content=(component 'paper-card-content') - actions=(component 'paper-card-actions') - header=(component 'paper-card-header') - image=(component 'paper-card-image') - media=(component 'paper-card-media') + title=(component "paper-card-title") + content=(component "paper-card-content") + actions=(component "paper-card-actions") + header=(component "paper-card-header") + image=(component "paper-card-image") + media=(component "paper-card-media") )}} \ No newline at end of file diff --git a/app/templates/components/paper-toolbar.hbs b/app/templates/components/paper-toolbar.hbs new file mode 100644 index 000000000..66a33aeaa --- /dev/null +++ b/app/templates/components/paper-toolbar.hbs @@ -0,0 +1,3 @@ +{{yield (hash + tools=(component "paper-toolbar-tools") +)}} diff --git a/package.json b/package.json index 70f7c476d..292ff22a3 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ember-paper", "description": "The Ember approach to Material Design.", - "version": "0.2.12", + "version": "1.0.0-alpha.0", "directories": { "doc": "doc", "test": "tests" @@ -52,14 +52,14 @@ "loader.js": "^4.0.1" }, "dependencies": { - "angular-material-source": "angular/material#v1.0.6", "broccoli-autoprefixer": "^3.0.0", "broccoli-filter": "^1.2.3", "broccoli-funnel": "^1.0.1", "broccoli-merge-trees": "^1.1.0", "ember-cli-babel": "^5.1.6", "ember-css-transitions": "^0.1.0", - "ember-wormhole": "^0.3.4" + "ember-wormhole": "^0.3.4", + "angular-material-source": "angular/material#v1.0.6" }, "keywords": [ "ember-addon", diff --git a/tests/dummy/app/controllers/progress-circular.js b/tests/dummy/app/controllers/progress-circular.js index c6b15063f..08f07803e 100644 --- a/tests/dummy/app/controllers/progress-circular.js +++ b/tests/dummy/app/controllers/progress-circular.js @@ -1,22 +1,28 @@ import Ember from 'ember'; +const { Controller, run } = Ember; -export default Ember.Controller.extend({ +export default Controller.extend({ mode: 'query', - determinateValue: 30, + determinateValue: 0, + timer: null, - init() { + start() { + this.set('determinateValue', 30); this.setupTimer(); }, setupTimer() { - Ember.run.later(this, function() { - this.incrementProperty('determinateValue', 1); - if (this.get('determinateValue') > 100) { + this.set('timer', run.later(this, function() { + let value = this.incrementProperty('determinateValue', 1); + if (value > 100) { this.set('determinateValue', 30); } + this.setupTimer(); + }, 100)); + }, - Ember.run.later(this, this.setupTimer); - - }, 100); + stop() { + run.cancel(this.get('timer')); } + }); diff --git a/tests/dummy/app/controllers/progress-linear.js b/tests/dummy/app/controllers/progress-linear.js index cd1c9a2a8..73ec4cb0c 100644 --- a/tests/dummy/app/controllers/progress-linear.js +++ b/tests/dummy/app/controllers/progress-linear.js @@ -1,35 +1,45 @@ import Ember from 'ember'; +const { Controller, run } = Ember; -export default Ember.Controller.extend({ +export default Controller.extend({ mode: 'query', - determinateValue: 30, - determinateValue2: 30, - - init() { + determinateValue: 0, + determinateValue2: 0, + timer: null, + timer2: null, + + start() { + this.set('determinateValue', 30); + this.set('determinateValue2', 30); this.setupTimer(); this.setupTimer2(); }, setupTimer() { - Ember.run.later(this, function() { - this.incrementProperty('determinateValue', 1); + this.set('timer', run.later(this, function() { + let value = this.incrementProperty('determinateValue', 1); this.incrementProperty('determinateValue2', 1.5); - if (this.get('determinateValue') > 100) { + if (value > 100) { this.set('determinateValue', 30); this.set('determinateValue2', 30); } - Ember.run.later(this, this.setupTimer); + this.setupTimer(); - }, 100); + }, 100)); }, setupTimer2() { - Ember.run.later(this, function() { + this.set('timer2', run.later(this, function() { this.set('mode', this.get('mode') === 'query' ? 'determinate' : 'query'); Ember.run.later(this, this.setupTimer2); - }, 7200); + }, 7200)); + }, + + stop() { + run.cancel(this.get('timer')); + run.cancel(this.get('timer2')); } }); diff --git a/tests/dummy/app/routes/progress-circular.js b/tests/dummy/app/routes/progress-circular.js new file mode 100644 index 000000000..cf4ccb6ce --- /dev/null +++ b/tests/dummy/app/routes/progress-circular.js @@ -0,0 +1,15 @@ +import Ember from 'ember'; + +const { Route, on } = Ember; + +export default Route.extend({ + + onActivate: on('activate', function() { + this.controllerFor('progress-circular').start(); + }), + + onDeactivate: on('deactivate', function() { + this.controllerFor('progress-circular').stop(); + }) + +}); diff --git a/tests/dummy/app/routes/progress-linear.js b/tests/dummy/app/routes/progress-linear.js new file mode 100644 index 000000000..7a9fc7d42 --- /dev/null +++ b/tests/dummy/app/routes/progress-linear.js @@ -0,0 +1,15 @@ +import Ember from 'ember'; + +const { Route, on } = Ember; + +export default Route.extend({ + + onActivate: on('activate', function() { + this.controllerFor('progress-linear').start(); + }), + + onDeactivate: on('deactivate', function() { + this.controllerFor('progress-linear').stop(); + }) + +}); diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index b7720c9dc..21e0261aa 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -3,7 +3,7 @@ {{#paper-toolbar class="site-content-toolbar"}}
{{/paper-toolbar}} @@ -32,7 +32,7 @@ {{#paper-item onClick=(transition-to "sidenav")}}Sidenav {{paper-icon "warning" title="Not updated yet."}}{{/paper-item}} {{#paper-item onClick=(transition-to "slider")}}Slider {{paper-icon "warning" title="Not updated yet."}}{{/paper-item}} {{#paper-item onClick=(transition-to "switch")}}Switch{{/paper-item}} - {{#paper-item onClick=(transition-to "toolbar")}}Toolbar {{paper-icon "warning" title="Not updated yet."}}{{/paper-item}} + {{#paper-item onClick=(transition-to "toolbar")}}Toolbar{{/paper-item}} {{#paper-item onClick=(transition-to "typography")}}Typography{{/paper-item}} {{/paper-list}} diff --git a/tests/dummy/app/templates/button.hbs b/tests/dummy/app/templates/button.hbs index 2d1b3d55f..ab96ba40c 100644 --- a/tests/dummy/app/templates/button.hbs +++ b/tests/dummy/app/templates/button.hbs @@ -27,6 +27,8 @@ {{#paper-button raised=true primary=true onClick=(action "targetButton") bubbles=false}}Button no bubble{{/paper-button}}

+ {{#paper-button raised=true fab=true}}Fab{{/paper-button}} + {{#paper-button raised=true mini=true}}Mini{{/paper-button}} {{#paper-button iconButton=true}}{{paper-icon "accessibility"}}{{/paper-button}}

{{/custom-button}} @@ -53,6 +55,8 @@ \{{#paper-button raised=true primary=true onClick=(action "targetButton") bubbles=false}}Button no bubble\{{/paper-button}} </p> <p> + \{{#paper-button raised=true fab=true}}Fab\{{/paper-button}} + \{{#paper-button raised=true mini=true}}Mini\{{/paper-button}} \{{#paper-button iconButton=true}}\{{paper-icon "more-vert"}}\{{/paper-button}} </p> <p> diff --git a/tests/dummy/app/templates/checkbox.hbs b/tests/dummy/app/templates/checkbox.hbs index ff40ff15d..503543862 100644 --- a/tests/dummy/app/templates/checkbox.hbs +++ b/tests/dummy/app/templates/checkbox.hbs @@ -9,22 +9,46 @@ {{/paper-toolbar}} {{#paper-content class="md-padding"}} -
- {{#paper-checkbox value=value1 onChange=(action (mut value1))}}A checkbox: {{value1}}{{/paper-checkbox}} - {{#paper-checkbox value=value2 onChange=(action (mut value2))}}A checkbox: {{if value2 "yep" "nope"}}{{/paper-checkbox}} - {{#paper-checkbox value=value3 onChange=(action (mut value3)) disabled=true}}Checkbox (disabled){{/paper-checkbox}} - {{#paper-checkbox value=true onChange=(action (mut value4)) disabled=true}}Checkbox (disabled and value){{/paper-checkbox}} - {{#paper-checkbox value=value5 onChange=(action (mut value5)) noink=true}}Checkbox (no ink){{/paper-checkbox}} +
+ {{#paper-checkbox value=value1 onChange=(action (mut value1))}} + A checkbox: {{value1}} + {{/paper-checkbox}} + {{#paper-checkbox value=value2 onChange=(action (mut value2))}} + A checkbox: {{if value2 "yep" "nope"}} + {{/paper-checkbox}} + {{#paper-checkbox value=value3 onChange=(action (mut value3)) disabled=true}} + Checkbox (disabled) + {{/paper-checkbox}} + {{#paper-checkbox value=true onChange=(action (mut value4)) disabled=true}} + Checkbox (disabled and value) + {{/paper-checkbox}} + {{#paper-checkbox value=value5 onChange=(action (mut value5)) noink=true}} + Checkbox (no ink) + {{/paper-checkbox}} {{paper-checkbox label="Blockless version" value=value6 onChange=(action "toggleValue6")}}

Template

{{~#code-block language='handlebars'}} -\{{#paper-checkbox value=value1 onChange=(action (mut value1))}}A checkbox: \{{value1}}\{{/paper-checkbox}} -\{{#paper-checkbox value=value2 onChange=(action (mut value2))}}A checkbox: \{{if value2 "yep" "nope"}}\{{/paper-checkbox}} -\{{#paper-checkbox value=value3 onChange=(action (mut value3)) disabled=true}}Checkbox (disabled)\{{/paper-checkbox}} -\{{#paper-checkbox value=true onChange=(action (mut value4)) disabled=true}}Checkbox (disabled and checked)\{{/paper-checkbox}} -\{{#paper-checkbox value=value5 onChange=(action (mut value5)) noink=true}}Checkbox (no ink)\{{/paper-checkbox}} +\{{#paper-checkbox value=value1 onChange=(action (mut value1))}} + A checkbox: \{{value1}} +\{{/paper-checkbox}} + +\{{#paper-checkbox value=value2 onChange=(action (mut value2))}} + A checkbox: \{{if value2 "yep" "nope"}} +\{{/paper-checkbox}} + +\{{#paper-checkbox value=value3 onChange=(action (mut value3)) disabled=true}} + Checkbox (disabled) +\{{/paper-checkbox}} + +\{{#paper-checkbox value=true onChange=(action (mut value4)) disabled=true}} + Checkbox (disabled and checked) +\{{/paper-checkbox}} + +\{{#paper-checkbox value=value5 onChange=(action (mut value5)) noink=true}} + Checkbox (no ink) +\{{/paper-checkbox}} \{{paper-checkbox label="Blockless version" value=value6 onChange=(action "toggleValue6")}} {{~/code-block}} diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs index 69dd42b1f..2db5c9cf8 100644 --- a/tests/dummy/app/templates/index.hbs +++ b/tests/dummy/app/templates/index.hbs @@ -8,18 +8,24 @@ {{/paper-toolbar}} {{#paper-content flex=true scroll-y=true layout-padding=true}}
+ {{#paper-toolbar warn=true}} +
+

Pre-production Version

+
+ {{/paper-toolbar}} + {{#paper-content}} +

You are viewing the demonstration and documentation for a pre-production built of {{#code-inline}}ember-paper{{/code-inline}}. This version is in flux. For version 1.0, all components are being updated to reflect the latest Ember coding practices and Angular Material stylesheets. Components which have not yet been updated are shown with a {{paper-icon "warning"}} and are subject to API changes. Be sure to read CHANGELOG.md when updating.

+

Wrong version? The currently-released version of ember-paper is Version 0.2, currently installed by
{{#code-inline language='bash'}}ember install ember-paper{{/code-inline}}. See README.md for advice on which version to use.

+ {{/paper-content}} +

Welcome to Ember Paper.

This project aims to bring Google's new Material Design to Ember. The goal is to encapsulate everything possible in Ember components. This project is packaged as an Ember-cli addon.

-

You are viewing the demonstration page for a pre-production built of {{#code-inline}}ember-paper{{/code-inline}}. This version is in flux. For version 1.0, all components are being updated to reflect the latest Ember coding practices and Angular Material stylesheets. Components which have not yet been updated are shown with a {{paper-icon "warning"}} and are subject to API changes.

- -

The currently-released version of ember-paper is Version 0.2. See README.md for advice on which version to use.

-

Installation

-

Install your preferred version of this ember-cli addon in your ember-cli project. To install the 0.2 version:

+

Install your preferred version of this ember-cli addon in your ember-cli project. To install the 0.2 released version:

{{#code-block language='bash'}}$ ember install ember-paper{{/code-block}} -

To install the latest pre-release development version:

+

To install the latest pre-production 1.0 version:

{{#code-block language='bash'}}$ ember install miguelcobain/ember-paper{{/code-block}} @@ -42,8 +48,7 @@ 'media-src': "'self'" }{{/code-block}} -

You can find out more information on the CSP addon page here.

-

We also need to allow `data:` in `img-src` because of a current hack in paper-button.

+

You can find out more information on the CSP addon page here. We also need to allow `data:` in `img-src` because of a current hack in paper-button.

Finally, the examples contain a `transition-to` helper that is not installed by default. To use this helper run the following: @@ -51,13 +56,13 @@

Contribution

-

This is a very ambitious project. Google's design specs are extensive, and not trivial to implement. ember-paper is heavily based on Angular Material and Web Starter Kit (material-sprint branch). These seem to be the most useful resources at the moment. If you feel like porting or fixing an element or two, please drop a pull request or issue at GitHub!

-

I believe that with the help of everyone we can bring these amazing design spec to Ember in a modular and robust way. The Ember way.

+

This is a very ambitious project. Google's design specs are extensive, and non-trivial to implement. If you can port or fix a component or two, please drop a pull request or issue on GitHub or join us on slack. See README.md for more resources.

+

With everyone's help, we can bring this amazing design spec to Ember in a modular and elegant way. The Ember way.

Help us on Github! -

+ Fork

diff --git a/tests/dummy/app/templates/sidenav.hbs b/tests/dummy/app/templates/sidenav.hbs index 6198aac10..4bf65f84e 100644 --- a/tests/dummy/app/templates/sidenav.hbs +++ b/tests/dummy/app/templates/sidenav.hbs @@ -15,19 +15,18 @@

Sidenav attributes

- locked-open: You can chose when the sidenav should stay open, based on the screen size.
+ locked-open: You can chose when the sidenav should stay open, based on the screen size.
Available sizes are: sm, gt-sm, md, gt-md, lg, gt-lg

closeOnClick: An override for the sidenav closing if you click on the sidebar itself. Mainly - for use-cases where you have forms or something similar in the sidenav.
+ for use-cases where you have forms or something similar in the sidenav.
Defaults to true.

- Note: The following Sidenav example contains a transition-to helper that is not installed by default. To use this helper install the following: - {{#code-block language='bash'}}ember install ember-route-action{{/code-block}} + Note: The following Sidenav example contains a transition-to helper via the ember-route-action addon, which is not installed by default.

diff --git a/tests/dummy/app/templates/switch.hbs b/tests/dummy/app/templates/switch.hbs index 1d66332a7..93da89202 100644 --- a/tests/dummy/app/templates/switch.hbs +++ b/tests/dummy/app/templates/switch.hbs @@ -9,24 +9,39 @@ {{#paper-content class="md-padding"}}

- {{#paper-switch value=booleanProp1 onChange=(action (mut booleanProp1))}} {{booleanProp1}} {{/paper-switch}} - {{#paper-switch value=booleanProp2 onChange=(action (mut booleanProp2))}} {{booleanProp2}} {{/paper-switch}} - {{#paper-switch value=booleanProp3 onChange=(action "changeBooleanProp" "3") disabled=true}} Disabled switch {{/paper-switch}} - {{#paper-switch value=booleanProp4 onChange=(action "changeBooleanProp" "4") noink=true}} Noink switch {{/paper-switch}} - + {{#paper-switch value=booleanProp1 onChange=(action (mut booleanProp1))}} + {{booleanProp1}} + {{/paper-switch}} + {{#paper-switch value=booleanProp2 onChange=(action (mut booleanProp2))}} + {{booleanProp2}} + {{/paper-switch}} + {{#paper-switch value=booleanProp3 onChange=(action "changeBooleanProp" "3") disabled=true}} + Disabled switch + {{/paper-switch}} + {{#paper-switch value=booleanProp4 onChange=(action "changeBooleanProp" "4") noink=true}} + Noink switch + {{/paper-switch}} {{paper-switch label="Blockless version" value=booleanProp5 onChange=(action "changeBooleanProp" "5")}}

Template

- {{~#code-block language='handlebars'}} - \{{#paper-switch value=booleanProp1 onChange=(action (mut booleanProp1))}} \{{booleanProp1}} \{{/paper-switch}} +{{~#code-block language='handlebars'}} +\{{#paper-switch value=booleanProp1 onChange=(action (mut booleanProp1))}} + \{{booleanProp1}} +\{{/paper-switch}} - \{{#paper-switch value=booleanProp2 onChange=(action (mut booleanProp2))}} \{{booleanProp2}} \{{/paper-switch}} +\{{#paper-switch value=booleanProp2 onChange=(action (mut booleanProp2))}} + \{{booleanProp2}} +\{{/paper-switch}} - \{{#paper-switch value=booleanProp3 onChange=(action "changeBooleanProp" "3") disabled=true}} Disabled switch \{{/paper-switch}} +\{{#paper-switch disabled=true value=booleanProp3 onChange=(action "changeBooleanProp" "3")}} + Disabled switch +\{{/paper-switch}} - \{{#paper-switch value=booleanProp4 onChange=(action "changeBooleanProp" "4") noink=true}} Noink switch \{{/paper-switch}} +\{{#paper-switch noink=true value=booleanProp4 onChange=(action "changeBooleanProp" "4")}} + Noink switch +\{{/paper-switch}} - \{{paper-switch label="Blockless version" value=booleanProp5 onChange=(action "changeBooleanProp" "5")}} - {{~/code-block}} +\{{paper-switch label="Blockless version" value=booleanProp5 onChange=(action "changeBooleanProp" "5")}} +{{~/code-block}}
{{/paper-content}} diff --git a/tests/dummy/app/templates/toolbar.hbs b/tests/dummy/app/templates/toolbar.hbs index 642cca244..d3be308e4 100644 --- a/tests/dummy/app/templates/toolbar.hbs +++ b/tests/dummy/app/templates/toolbar.hbs @@ -1,29 +1,125 @@ {{#paper-toolbar}} -
+ {{#paper-toolbar-tools}} {{#paper-sidenav-toggle as |toggle|}} {{#paper-button onClick=(action "toggleMenu" target=toggle) iconButton=true}}{{paper-icon "menu"}}{{/paper-button}} {{/paper-sidenav-toggle}} Toolbars -
+ {{/paper-toolbar-tools}} {{/paper-toolbar}} {{#paper-content class="md-padding"}}
+ {{#paper-toolbar}} -
- {{#paper-button}}Example button{{/paper-button}} - {{#paper-button}}Example button{{/paper-button}} -
+ {{#paper-toolbar-tools}} + {{#paper-button iconButton=true}} + {{paper-icon "menu"}} + {{/paper-button}} +

+ Toolbar with Icon Buttons +

+ + {{#paper-button iconButton=true}} + {{paper-icon "favorite"}} + {{/paper-button}} + {{#paper-button iconButton=true}} + {{paper-icon "more_vert"}} + {{/paper-button}} + {{/paper-toolbar-tools}} + {{/paper-toolbar}} + +
+ + {{#paper-toolbar as |toolbar|}} + {{#toolbar.tools}} + {{#paper-button}} + Go Back + {{/paper-button}} +

Toolbar with Standard Buttons

+ + {{#paper-button raised=true}} + Learn More + {{/paper-button}} + {{#paper-button mini=true aria-label="Favorite"}} + {{paper-icon "favorite"}} + {{/paper-button}} + {{/toolbar.tools}} + {{/paper-toolbar}} + +
+ + {{#paper-toolbar tall=true accent=true}} + {{#paper-toolbar-tools}} +

Toolbar: tall=true, accent=true

+ {{/paper-toolbar-tools}} + {{/paper-toolbar}} + +
+ + {{#paper-toolbar tall=true warn=true}} + + {{#paper-toolbar-tools}} +

Toolbar: tall with actions pin to the bottom (tall=true warn=true)

+ {{/paper-toolbar-tools}} {{/paper-toolbar}} -

"md-toolbar-tools" is a class that centers your elements in the toolbar.

Template

-{{#code-block language='handlebars'}} -\{{#paper-toolbar}} - <div class="md-toolbar-tools"> - \{{#paper-button}}Example button\{{/paper-button}} - \{{#paper-button}}Example button\{{/paper-button}} - </div> -\{{/paper-toolbar}}{{/code-block}} + {{#code-block language="handlebars"}} + \{{#paper-toolbar}} + \{{#paper-toolbar-tools}} + \{{#paper-button iconButton=true}} + \{{paper-icon "menu"}} + \{{/paper-button}} + <h2> + Toolbar with Icon Buttons + </h2> + <span class="flex"></span> + \{{#paper-button iconButton=true}} + \{{paper-icon "favorite"}} + \{{/paper-button}} + \{{#paper-button iconButton=true}} + \{{paper-icon "more_vert"}} + \{{/paper-button}} + \{{/paper-toolbar-tools}} + \{{/paper-toolbar}} + + <br> + + \{{!-- using contextual components form --}} + \{{#paper-toolbar as |toolbar|}} + \{{#toolbar.tools}} + \{{#paper-button}} + Go Back + \{{/paper-button}} + <h2>Toolbar with Standard Buttons</h2> + <span class="flex"></span> + \{{#paper-button raised=true}} + Learn More + \{{/paper-button}} + \{{#paper-button mini=true aria-label="Favorite"}} + \{{paper-icon "favorite"}} + \{{/paper-button}} + \{{/toolbar.tools}} + \{{/paper-toolbar}} + + <br> + + \{{#paper-toolbar tall=true accent=true}} + \{{#paper-toolbar-tools}} + <h2>Toolbar: tall=true, accent=true</h2> + \{{/paper-toolbar-tools}} + \{{/paper-toolbar}} + + <br> + + \{{#paper-toolbar tall=true warn=true}} + <span class="flex"></span> + \{{#paper-toolbar-tools}} + <h2>Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)</h2> + \{{/paper-toolbar-tools}} + \{{/paper-toolbar}} + + {{~/code-block}} +
{{/paper-content}} diff --git a/tests/integration/components/paper-button-test.js b/tests/integration/components/paper-button-test.js index 1297209ef..b13f70393 100644 --- a/tests/integration/components/paper-button-test.js +++ b/tests/integration/components/paper-button-test.js @@ -70,3 +70,21 @@ test('uses md-icon-button class when iconButton=true', function(assert) { `); assert.ok(this.$('.md-button').hasClass('md-icon-button')); }); + +test('uses md-fab class when fab=true', function(assert) { + this.render(hbs` + {{#paper-button fab=true}} + A label + {{/paper-button}} + `); + assert.ok(this.$('.md-button').hasClass('md-fab')); +}); + +test('uses md-mini and md-fab class when mini=true', function(assert) { + this.render(hbs` + {{#paper-button mini=true}} + A label + {{/paper-button}} + `); + assert.ok(this.$('.md-button').is('.md-fab', '.md-mini')); +}); diff --git a/tests/integration/components/paper-toolbar-test.js b/tests/integration/components/paper-toolbar-test.js new file mode 100644 index 000000000..70f3a0aa6 --- /dev/null +++ b/tests/integration/components/paper-toolbar-test.js @@ -0,0 +1,30 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('paper-toolbar', 'Integration | Component | paper toolbar', { + integration: true +}); + +test('uses md-tall class tall=true', function(assert) { + assert.expect(1); + + this.render(hbs` + {{#paper-toolbar tall=true}} + {{/paper-toolbar}} + `); + + assert.ok(this.$('md-toolbar').hasClass('md-tall')); +}); + +test('paper-toolbar-tools uses .md-toolbar-tools class', function(assert) { + assert.expect(1); + + this.render(hbs` + {{#paper-toolbar tall=true}} + {{#paper-toolbar-tools}} + {{/paper-toolbar-tools}} + {{/paper-toolbar}} + `); + + assert.equal(this.$('.md-toolbar-tools').length, 1); +});