From de4dd25f65d174aebe2006725d598200ddda7944 Mon Sep 17 00:00:00 2001 From: Ilya Radchenko Date: Wed, 30 Dec 2015 18:06:23 -0500 Subject: [PATCH 1/3] Add `closeOnClick` to paper-sidenav In response to #204 `closeOnClick` defaults to `true`, making this option backwards compatible. --- addon/components/paper-sidenav.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addon/components/paper-sidenav.js b/addon/components/paper-sidenav.js index 516ef2401..3ce534140 100644 --- a/addon/components/paper-sidenav.js +++ b/addon/components/paper-sidenav.js @@ -7,6 +7,7 @@ export default Ember.Component.extend({ 'locked-open': 'gt-sm', closed: true, + closeOnClick: true, navContainer: Ember.computed(function () { return this.nearestOfType(PaperNavContainer); @@ -38,7 +39,6 @@ export default Ember.Component.extend({ } }), - didInsertElement() { Ember.$(window).on('resize', this.get('__resizeWindow')); }, @@ -63,7 +63,7 @@ export default Ember.Component.extend({ }, click() { - if (this.get('isLockedOpen')) { + if (!this.get('closeOnClick') || this.get('isLockedOpen')) { return; } From 03e5f06696ce6ad45e7d7a7f156ca50228adb83a Mon Sep 17 00:00:00 2001 From: Ilya Radchenko Date: Thu, 31 Dec 2015 12:20:39 -0500 Subject: [PATCH 2/3] Add #253 to changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 63f566499..82fcbb106 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Ember Paper Changelog +### 0.2.11 +- [#253](https://github.com/miguelcobain/ember-paper/pull/253) Add `closeOnClick` to paper-sidenav + ### 0.2.10 (Nov 23, 2015) - [#178](https://github.com/miguelcobain/ember-paper/pull/178) Listen for model changes - [#219](https://github.com/miguelcobain/ember-paper/pull/219) Inject wormhole outlet through addon hook From 80180a8fc4f5a9c010bb956ac1e0d463ed4e5d4d Mon Sep 17 00:00:00 2001 From: Ilya Radchenko Date: Thu, 31 Dec 2015 12:52:22 -0500 Subject: [PATCH 3/3] [docs] Add `closeOnClick` attribute to sidenav docs Also fix sidenav example and fix scrolling --- tests/dummy/app/styles/app.scss | 7 +- tests/dummy/app/templates/sidenav.hbs | 96 ++++++++++++++------------- 2 files changed, 56 insertions(+), 47 deletions(-) diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss index df49442f7..827700877 100644 --- a/tests/dummy/app/styles/app.scss +++ b/tests/dummy/app/styles/app.scss @@ -17,6 +17,9 @@ body > div.ember-view:first-of-type { } .site-nav-container { - width: 100%; - height: 100%; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } diff --git a/tests/dummy/app/templates/sidenav.hbs b/tests/dummy/app/templates/sidenav.hbs index f8becd392..8a8f839c5 100644 --- a/tests/dummy/app/templates/sidenav.hbs +++ b/tests/dummy/app/templates/sidenav.hbs @@ -1,62 +1,68 @@ {{#paper-toolbar}} -
- {{#paper-sidenav-toggle as |toggle|}} - {{#paper-button target=toggle action="toggleMenu" icon-button=true}}{{paper-icon icon="menu"}}{{/paper-button}} - {{/paper-sidenav-toggle}} - Sidenav -
+
+ {{#paper-sidenav-toggle as |toggle|}} + {{#paper-button target=toggle action="toggleMenu" icon-button=true}}{{paper-icon icon="menu"}}{{/paper-button}} + {{/paper-sidenav-toggle}} + Sidenav +
{{/paper-toolbar}} + {{#paper-content class="md-padding"}} -
+
+

Demo

+

Try to resize this webpage.

-

Demo

-

Try to resize this webpage.

+

Sidenav attributes

-

Sidenav attributes

+

+ 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 +

-

locked-open: You chose can whenever the sidebar to 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.
+ Defaults to true. +

-

Template

+

Template

{{#code-block language='handlebars'}} \{{#paper-nav-container}} -\{{#paper-sidenav class="md-sidenav-left md-whiteframe-z2" locked-open="gt-sm"}} - \{{#paper-toolbar}} + \{{#paper-sidenav class="md-sidenav-left md-whiteframe-z2" locked-open="gt-sm"}} + \{{#paper-toolbar}} <div class="md-toolbar-tools"> - <div class="logo"> - <img src="ember-logo-white.png" height="30"/>  <strong>Paper</strong> - </div> + <div class="logo"> + <img src="ember-logo-white.png" height="30"/> + <strong>Paper</strong> + </div> </div> - \{{/paper-toolbar}} -\{{#paper-content}} - \{{#paper-list}} - \{{#paper-item action="transitionTo" param="index"}}Introduction\{{/paper-item}} - \{{#paper-item action="transitionTo" param="index"}}Another link\{{/paper-item}} -\{{/paper-list}} -\{{/paper-content}} -\{{/paper-sidenav}} - - <div layout="column" tabindex="-1" role="main" flex> -\{{#paper-toolbar}} - <div class="md-toolbar-tools"> -\{{#paper-sidenav-toggle as |toggle|}} -\{{#paper-button target=toggle action="toggleMenu" icon-button=true}}\{{paper-icon icon="menu"}}\{{/paper-button}} -\{{/paper-sidenav-toggle}} - <span class="md-breadcrumb-page">Title</span> - </div> -\{{/paper-toolbar}} -\{{#paper-content class="md-padding"}} - <p>My content</p> -\{{/paper-content}} - </div> -\{{/paper-nav-container}}{{/code-block}} + \{{/paper-toolbar}} + \{{#paper-content}} + \{{#paper-list}} + \{{#paper-item action="transitionTo" param="index"}}Introduction\{{/paper-item}} + \{{#paper-item action="transitionTo" param="index"}}Another link\{{/paper-item}} + \{{/paper-list}} + \{{/paper-content}} + \{{/paper-sidenav}} + <div layout="column" tabindex="-1" role="main" flex> + \{{#paper-toolbar}} + <div class="md-toolbar-tools"> + \{{#paper-sidenav-toggle as |toggle|}} + \{{#paper-button target=toggle action="toggleMenu" icon-button=true}}\{{paper-icon icon="menu"}}\{{/paper-button}} + \{{/paper-sidenav-toggle}} + <span class="md-breadcrumb-page">Title</span> + </div> + \{{/paper-toolbar}} -
+ \{{#paper-content class="md-padding"}} + <p>My content</p> + \{{/paper-content}} + </div> +\{{/paper-nav-container}} +{{/code-block}} +
{{/paper-content}} - -