Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update toolbars #367

Merged
merged 2 commits into from
May 5, 2016
Merged

update toolbars #367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8a3f1e8
update toolbars
miguelcobain May 5, 2016
51d7b23
update changelog
miguelcobain May 5, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ Contributions and pull requests are always welcome. Contributors may often be fo

- [#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.
- [#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`
Expand Down
6 changes: 6 additions & 0 deletions addon/components/paper-toolbar-tools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import Ember from 'ember';
const { Component } = Ember;

export default Component.extend({
classNames: ['md-toolbar-tools']
});
3 changes: 2 additions & 1 deletion addon/components/paper-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
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'],
tall: false,
Expand Down
3 changes: 3 additions & 0 deletions app/components/paper-toolbar-tools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import PaperToolbarTools from 'ember-paper/components/paper-toolbar-tools';

export default PaperToolbarTools;
3 changes: 3 additions & 0 deletions app/templates/components/paper-toolbar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{{yield (hash
tools=(component "paper-toolbar-tools")
)}}
2 changes: 1 addition & 1 deletion tests/dummy/app/templates/application.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}

Expand Down
183 changes: 90 additions & 93 deletions tests/dummy/app/templates/toolbar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,128 +1,125 @@
{{#paper-toolbar}}
<div class="md-toolbar-tools">
{{#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}}
<span class="md-breadcrumb-page">Toolbars</span>
</div>
{{/paper-toolbar-tools}}
{{/paper-toolbar}}
{{#paper-content class="md-padding"}}
<div class="doc-content">
{{#paper-toolbar}}
<div class="md-toolbar-tools">
{{#paper-button}}Example button{{/paper-button}}
{{#paper-button}}Example button{{/paper-button}}
</div>
{{/paper-toolbar}}

<p>"md-toolbar-tools" is a class that centers your elements in the toolbar.</p>


{{#paper-toolbar}}
<div class="md-toolbar-tools">
{{#paper-button}}
{{paper-icon 'menu'}}
{{#paper-toolbar-tools}}
{{#paper-button iconButton=true}}
{{paper-icon "menu"}}
{{/paper-button}}
<h2>
<span>Toolbar with Icon Buttons</span>
Toolbar with Icon Buttons
</h2>
<span flex></span>
{{#paper-button}}
{{paper-icon 'favorite'}}
<span class="flex"></span>
{{#paper-button iconButton=true}}
{{paper-icon "favorite"}}
{{/paper-button}}
{{#paper-button}}
{{paper-icon 'more-vert'}}
{{#paper-button iconButton=true}}
{{paper-icon "more_vert"}}
{{/paper-button}}
</div>
{{/paper-toolbar-tools}}
{{/paper-toolbar}}

<br />
{{#paper-toolbar}}
<div class="md-toolbar-tools">

{{#paper-toolbar as |toolbar|}}
{{#toolbar.tools}}
{{#paper-button}}
Go Back
{{/paper-button}}
<h2>
<span>Toolbar with Standard Buttons</span>
</h2>
<span flex></span>
<h2>Toolbar with Standard Buttons</h2>
<span class="flex"></span>
{{#paper-button raised=true}}
Learn More
{{/paper-button}}
{{#paper-button mini=true fab=true aria-label="Favorite"}}
{{paper-icon 'favorite'}}
{{#paper-button mini=true aria-label="Favorite"}}
{{paper-icon "favorite"}}
{{/paper-button}}
</div>
{{/toolbar.tools}}
{{/paper-toolbar}}

<br />

{{#paper-toolbar tall=true accent=true}}
<h2 class="md-toolbar-tools">
<span>Toolbar: tall, accent</span>
</h2>
{{#paper-toolbar-tools}}
<h2>Toolbar: tall=true, accent=true</h2>
{{/paper-toolbar-tools}}
{{/paper-toolbar}}

<br />
{{#paper-toolbar tall=true class="md-warn md-hue-3"}}

{{#paper-toolbar tall=true warn=true}}
<span flex></span>
<h2 class="md-toolbar-tools md-toolbar-tools-bottom">
<span class="md-flex">Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)</span>
</h2>
{{#paper-toolbar-tools}}
<h2>Toolbar: tall with actions pin to the bottom (tall=true warn=true)</h2>
{{/paper-toolbar-tools}}
{{/paper-toolbar}}


<h3>Template</h3>
{{#code-block language='handlebars'}}
\{{#paper-toolbar}}
&lt;div class="md-toolbar-tools"&gt;
\{{#paper-button}}Example button\{{/paper-button}}
\{{#paper-button}}Example button\{{/paper-button}}
&lt;/div&gt;

\{{#paper-toolbar}}
&lt;div class="md-toolbar-tools"&gt;
\{{#paper-button}}
\{{paper-icon 'menu'}}
\{{/paper-button}}
&lt;h2&gt;
&lt;span&gt;Toolbar with Icon Buttons&lt;/span&gt;
&lt;/h2&gt;
&lt;span flex&gt;&lt;/span&gt;
\{{#paper-button}}
\{{paper-icon 'favorite'}}
\{{/paper-button}}
\{{#paper-button}}
\{{paper-icon 'more-vert'}}
\{{/paper-button}}
&lt;/div&gt;
\{{/paper-toolbar}}

\{{#paper-toolbar}}
&lt;div class="md-toolbar-tools"&gt;
\{{#paper-button}}
Go Back
\{{/paper-button}}
&lt;h2&gt;
&lt;span&gt;Toolbar with Standard Buttons&lt;/span&gt;
&lt;/h2&gt;
&lt;span flex&gt;&lt;/span&gt;
\{{#paper-button raised=true}}
Learn More
\{{/paper-button}}
\{{#paper-button mini=true fab=true aria-label="Favorite"}}
\{{paper-icon 'favorite'}}
\{{/paper-button}}
&lt;/div&gt;
\{{/paper-toolbar}}

\{{#paper-toolbar tall=true accent=true}}
&lt;h2 class="md-toolbar-tools"&gt;
&lt;span&gt;Toolbar: tall, accent&lt;/span&gt;
&lt;/h2&gt;
\{{/paper-toolbar}}
\{{/paper-toolbar}}

\{{#paper-toolbar tall=true class="md-warn md-hue-3"}}
&lt;span flex&gt;&lt;/span&gt;
&lt;h2 class="md-toolbar-tools md-toolbar-tools-bottom"&gt;
&lt;span class="md-flex"&gt;Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)&lt;/span&gt;
{{#code-block language="handlebars"}}
\{{#paper-toolbar}}
\{{#paper-toolbar-tools}}
\{{#paper-button iconButton=true}}
\{{paper-icon "menu"}}
\{{/paper-button}}
&lt;h2&gt;
Toolbar with Icon Buttons
&lt;/h2&gt;
\{{/paper-toolbar}}
{{/code-block}}
&lt;span class="flex"&gt;&lt;/span&gt;
\{{#paper-button iconButton=true}}
\{{paper-icon "favorite"}}
\{{/paper-button}}
\{{#paper-button iconButton=true}}
\{{paper-icon "more_vert"}}
\{{/paper-button}}
\{{/paper-toolbar-tools}}
\{{/paper-toolbar}}

&lt;br /&gt;

\{{!-- using contextual components form --}}
\{{#paper-toolbar as |toolbar|}}
\{{#toolbar.tools}}
\{{#paper-button}}
Go Back
\{{/paper-button}}
&lt;h2&gt;Toolbar with Standard Buttons&lt;/h2&gt;
&lt;span class="flex"&gt;&lt;/span&gt;
\{{#paper-button raised=true}}
Learn More
\{{/paper-button}}
\{{#paper-button mini=true aria-label="Favorite"}}
\{{paper-icon "favorite"}}
\{{/paper-button}}
\{{/toolbar.tools}}
\{{/paper-toolbar}}

&lt;br /&gt;

\{{#paper-toolbar tall=true accent=true}}
\{{#paper-toolbar-tools}}
&lt;h2&gt;Toolbar: tall=true, accent=true&lt;/h2&gt;
\{{/paper-toolbar-tools}}
\{{/paper-toolbar}}

&lt;br /&gt;

\{{#paper-toolbar tall=true warn=true}}
&lt;span class="flex"&gt;&lt;/span&gt;
\{{#paper-toolbar-tools}}
&lt;h2&gt;Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)&lt;/h2&gt;
\{{/paper-toolbar-tools}}
\{{/paper-toolbar}}

{{~/code-block}}

</div>
{{/paper-content}}
19 changes: 15 additions & 4 deletions tests/integration/components/paper-toolbar-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,25 @@ moduleForComponent('paper-toolbar', 'Integration | Component | paper toolbar', {
});

test('uses md-tall class tall=true', function(assert) {
// Template block usage:
assert.expect(1);

this.render(hbs`
{{#paper-toolbar tall=true}}
<h2 class="md-toolbar-tools">
<span>Toolbar: tall, accent</span>
</h2>
{{/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);
});