diff --git a/addon/components/paper-checkbox.js b/addon/components/paper-checkbox.js index 8351c36a4..b10a24330 100644 --- a/addon/components/paper-checkbox.js +++ b/addon/components/paper-checkbox.js @@ -1,30 +1,37 @@ import Ember from 'ember'; import BaseFocusable from './base-focusable'; +import RippleMixin from '../mixins/ripple-mixin'; -export default BaseFocusable.extend({ +var KEY_CODE_SPACE = 32; + +export default BaseFocusable.extend(RippleMixin,{ classNames:['paper-checkbox'], - classNameBindings:['checked'], + classNameBindings:['checked:paper-checked'], + + //Alow element to be focusable by supplying a tabindex 0 + attributeBindings:['tabindex'], + tabindex:function(){ + return this.get('disabled') ? '-1' : '0'; + }.property('disabled'), + checked:false, + toggle:true, - checked:Ember.computed.alias('active'), - didInsertElement:function(){ - this._super(); - this.$('.paper-checkbox-mark').on('animationend MSAnimationEnd webkitAnimationEnd', - Ember.$.proxy(this.checkboxAnimationEnd,this)); - }, - willDestroyElement:function(){ - this._super(); - this.$('.paper-checkbox-mark').off('animationend MSAnimationEnd webkitAnimationEnd'); + rippleContainerSelector:'.paper-container', + + center: true, + animationDuration: 300, + mousedownPauseTime: 180, + animationName: 'inkRippleCheckbox', + animationTimingFunction: 'linear', + + click:function(){ + if(!this.get('disabled')){ + this.toggleProperty('checked'); + } }, - checkedDidChange:Ember.observer('checked',function(){ - this.setProperties({ - checkmark: !this.get('checked'), - box: this.get('checked') - }); - }).on('didInsertElement'), - checkboxAnimationEnd:function(){ - this.setProperties({ - checkmark: this.get('checked'), - box: !this.get('checked') - }); + keyPress:function(ev){ + if(ev.which === KEY_CODE_SPACE) { + this.click(); + } } }); diff --git a/addon/mixins/ripple-mixin.js b/addon/mixins/ripple-mixin.js index 2dc267a8d..c74720ad3 100644 --- a/addon/mixins/ripple-mixin.js +++ b/addon/mixins/ripple-mixin.js @@ -56,11 +56,14 @@ export default Ember.Mixin.create({ //TODO handle mouse hold case }, + // Override to place ripple container in a different element, + // otherwise it will be appended on root element + rippleContainerSelector:'', rippleContainer:null, createRippleContainer:function(){ if(!this.rippleContainer){ this.rippleContainer = Ember.$('
'); - this.$().append(this.rippleContainer); + this.$(this.rippleContainerSelector).append(this.rippleContainer); } return this.rippleContainer; }, diff --git a/app/templates/components/paper-checkbox.hbs b/app/templates/components/paper-checkbox.hbs index b943de59c..a27544cee 100644 --- a/app/templates/components/paper-checkbox.hbs +++ b/app/templates/components/paper-checkbox.hbs @@ -1,10 +1,8 @@ -
- {{paper-ripple recenteringTouch=true - lastDownEvent=lastDownEvent lastUpEvent=lastUpEvent classNames="circle"}} -
+
+
{{#if template}} -
+
{{yield}}
-{{/if}} \ No newline at end of file +{{/if}} diff --git a/index.js b/index.js index 59284910f..5ab5ce872 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,7 @@ 'use strict'; +var path = require('path'); + module.exports = { name: 'ember-paper', blueprintsPath: function blueprintsPath() { @@ -16,6 +18,7 @@ module.exports = { app.import('vendor/ember-paper/paper-ripple.css'); app.import('vendor/ember-paper/paper-shadow.css'); app.import('vendor/ember-paper/paper-button.css'); + app.import('vendor/ember-paper/paper-checkbox.css'); app.import('vendor/ember-paper/styles.css'); app.import(app.bowerDirectory+'/hammerjs/hammer.js'); diff --git a/vendor/ember-paper/paper-checkbox.css b/vendor/ember-paper/paper-checkbox.css new file mode 100644 index 000000000..e191e1e79 --- /dev/null +++ b/vendor/ember-paper/paper-checkbox.css @@ -0,0 +1,87 @@ +/* PAPER CHECKBOX */ +.paper-checkbox { + display: block; + margin: 15px; + white-space: nowrap; + cursor: pointer; + outline: none; +} +.paper-checkbox .paper-container { + position: relative; + top: 4px; + display: inline-block; + width: 18px; + height: 18px; +} +.paper-checkbox .paper-container .paper-ripple-container { + position: absolute; + display: block; + width: 54px; + height: 54px; + left: -18px; + top: -18px; +} +.paper-checkbox .paper-icon { + transition: 240ms; + position: absolute; + top: 0; + left: 0; + width: 18px; + height: 18px; + border: 2px solid; + border-radius: 2px; +} +.paper-checkbox.paper-checked .paper-icon { + border: none; +} +.paper-checkbox[disabled] { + cursor: no-drop; +} +.paper-checkbox:focus .paper-label { + border-color: black; +} +.paper-checkbox.paper-checked .paper-icon:after { + transform: rotate(45deg); + position: absolute; + left: 6px; + top: 2px; + display: table; + width: 6px; + height: 12px; + border: 2px solid; + border-top: 0; + border-left: 0; + content: ' '; +} +.paper-checkbox .paper-label { + border: 1px dotted transparent; + position: relative; + display: inline-block; + margin-left: 10px; + vertical-align: middle; + white-space: normal; + pointer-events: none; +} +/* THEMING */ + +.paper-checkbox .paper-ripple { + color: #0a8f08; +} +.paper-checkbox.paper-checked .paper-ripple { + color: #757575; +} +.paper-checkbox .paper-icon { + border-color: rgba(0, 0, 0, 0.54); +} +.paper-checkbox.paper-checked .paper-icon { + background-color: rgba(43, 175, 43, 0.87); +} +.paper-checkbox.paper-checked .paper-icon:after { + border-color: #eeeeee; +} +.paper-checkbox.disabled .paper-icon { + border-color: rgba(0, 0, 0, 0.26); +} +.paper-checkbox.disabled.paper-checked .paper-icon { + background-color: rgba(0, 0, 0, 0.26); +} diff --git a/vendor/ember-paper/paper-ripple.css b/vendor/ember-paper/paper-ripple.css index ae757e58d..3ec2aaf99 100644 --- a/vendor/ember-paper/paper-ripple.css +++ b/vendor/ember-paper/paper-ripple.css @@ -1,5 +1,36 @@ /* PAPER RIPPLE */ +/* Checkbox ripple keyframes */ +@-webkit-keyframes inkRippleCheckbox { + 0% { + transform: scale(0); + opacity: 0.4; + } + 50% { + transform: scale(1.0); + opacity: 0.4; + } + 100% { + transform: scale(1.0); + opacity: 0; + } +} + +@keyframes inkRippleCheckbox { + 0% { + transform: scale(0); + opacity: 0.4; + } + 50% { + transform: scale(1.0); + opacity: 0.4; + } + 100% { + transform: scale(1.0); + opacity: 0; + } +} + /* Button ripple keyframes */ @-webkit-keyframes inkRippleButton { 0% { diff --git a/vendor/ember-paper/styles.css b/vendor/ember-paper/styles.css index 69c572230..1fc160b53 100644 --- a/vendor/ember-paper/styles.css +++ b/vendor/ember-paper/styles.css @@ -1,5 +1,10 @@ /* TODO separate into different files */ +/* GLOBAL */ +*, *:before, *:after { + box-sizing: border-box; +} + /* PAPER RADIO BUTTON */ .paper-radio { display: inline-block; @@ -95,259 +100,6 @@ background-color: #5a5a5a; } -/* PAPER CHECKBOX */ -.paper-checkbox { - display: inline-block; - white-space: nowrap; -} - -.paper-checkbox:focus { - outline: none; -} - -.paper-checkbox-container { - position: relative; - width: 18px; - height: 18px; - cursor: pointer; - -webkit-transform: translateZ(0); - transform: translateZ(0); - display: inline-block; - vertical-align: middle; -} - -.paper-checkbox .paper-ripple{ - position: absolute; - top: -15px; - left: -15px; - width: 48px; - height: 48px; - color: #5a5f5a; -} - -.paper-checkbox.checked .paper-ripple { - color: #0f9d58; -} - -.paper-checkbox .paper-checkbox-mark { - position: absolute; - box-sizing: border-box; - top: 0px; - left: 0px; - width: 18px; - height: 18px; - border: solid 2px; - border-color: #5a5a5a; - pointer-events: none; -} - -/* checkbox checked animations */ -.paper-checkbox .paper-checkbox-mark.checked.box { - border: solid 2px; - -webkit-animation: box-shrink 140ms ease-out forwards; - animation: box-shrink 140ms ease-out forwards; -} - -@-webkit-keyframes box-shrink { - 0% { - -webkit-transform: rotate(0deg); - top: 0px; - left: 0px; - width: 18px; - height: 18px; - } - 100% { - -webkit-transform: rotate(45deg); - top: 13px; - left: 5px; - width: 4px; - height: 4px; - } -} - -@keyframes box-shrink { - 0% { - transform: rotate(0deg); - top: 0px; - left: 0px; - width: 18px; - height: 18px; - } - 100% { - transform: rotate(45deg); - top: 13px; - left: 5px; - width: 4px; - height: 4px; - } -} - -.paper-checkbox .paper-checkbox-mark.checked.checkmark { - border-left: none; - border-top: none; - -webkit-animation: checkmark-expand 140ms ease-out forwards; - animation: checkmark-expand 140ms ease-out forwards; -} - -@-webkit-keyframes checkmark-expand { - 0% { - -webkit-transform: rotate(45deg); - top: 13px; - left: 5px; - width: 4px; - height: 4px; - } - 100% { - -webkit-transform: rotate(45deg); - top: -4px; - left: 6px; - width: 10px; - height: 21px; - border-right-width: 2px; - border-bottom-width: 2px; - } -} - -@keyframes checkmark-expand { - 0% { - transform: rotate(45deg); - top: 13px; - left: 5px; - width: 4px; - height: 4px; - } - 100% { - transform: rotate(45deg); - top: -4px; - left: 6px; - width: 10px; - height: 21px; - border-right-width: 2px; - border-bottom-width: 2px; - } -} - -.paper-checkbox .paper-checkbox-mark.checked { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - top: -4px; - left: 6px; - width: 10px; - height: 21px; - border-top: none; - border-left: none; - border-right-width: 2px; - border-bottom-width: 2px; - border-color: #0f9d58; -} - -/* checkbox unchecked animations */ -.paper-checkbox .paper-checkbox-mark.unchecked.checkmark { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - border-left: none; - border-top: none; - -webkit-animation: checkmark-shrink 140ms ease-out forwards; - animation: checkmark-shrink 140ms ease-out forwards; -} - -@-webkit-keyframes checkmark-shrink { - 0% { - top: -4px; - left: 6px; - width: 10px; - height: 21px; - border-right-width: 2px; - border-bottom-width: 2px; - } - 100% { - top: 13px; - left: 5px; - width: 4px; - height: 4px; - } -} - -@keyframes checkmark-shrink { - 0% { - top: -4px; - left: 6px; - width: 10px; - height: 21px; - border-right-width: 2px; - border-bottom-width: 2px; - } - 100% { - top: 13px; - left: 5px; - width: 4px; - height: 4px; - } -} - -.paper-checkbox .paper-checkbox-mark.unchecked.box { - -webkit-animation: box-expand 140ms ease-out forwards; - animation: box-expand 140ms ease-out forwards; -} - -@-webkit-keyframes box-expand { - 0% { - -webkit-transform: rotate(45deg); - top: 13px; - left: 5px; - width: 4px; - height: 4px; - } - 100% { - -webkit-transform: rotate(0deg); - top: 0px; - left: 0px; - width: 18px; - height: 18px; - } -} - -@keyframes box-expand { - 0% { - transform: rotate(45deg); - top: 13px; - left: 5px; - width: 4px; - height: 4px; - } - 100% { - transform: rotate(0deg); - top: 0px; - left: 0px; - width: 18px; - height: 18px; - } -} - -/* label */ -.paper-checkbox .paper-checkbox-label { - position: relative; - display: inline-block; - vertical-align: middle; - padding-left: 8px; - white-space: normal; - pointer-events: none; -} - -.paper-checkbox .paper-checkbox-label.hidden { - display: none; -} - -/* disabled state */ -.paper-checkbox[disabled] { - pointer-events: none; -} - -.paper-checkbox[disabled] .paper-checkbox-mark { - opacity: 0.33; - border-color: #5a5a5a; -} - /* PAPER TOGGLE BUTTON */ .paper-toggle { display: inline-block;