javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-26 08:13:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

That ripple shit

Browse Source
This commit is contained in:
Max Lynch
2015-07-20 16:02:48 -05:00
parent e30cfed8d4
commit 872b4db0dd
11 changed files with 98 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ionic/components/material/button.ts Normal file
View File

@ -0,0 +1,22 @@
import {ElementRef, Directive, onDestroy} from 'angular2/angular2';
import {IonicConfig} from '../../config/config';
import {MaterialRippleEffect} from '../material/ripple';
@Directive({
selector: 'button,[button]',
lifecycle: [onDestroy]
})
export class MaterialButton {
constructor(elementRef: ElementRef, config: IonicConfig) {
this.elementRef = elementRef;
if(config.setting('mdRipple')) {
this.ripple = new MaterialRippleEffect(this);
}
}
onDestroy() {
}
}

20
ionic/components/material/ripple.ts
View File

@ -1,24 +1,18 @@
/**
* Portions lovingly adapted from Material Design Lite
* Lovingly Adapted from Material Design Lite
* Copyright Google, 2015, Licensed under the Apache 2 license.
* https://github.com/google/material-design-lite
*/
import {Directive, ElementRef} from 'angular2/angular2';
import {ElementRef, forwardRef} from 'angular2/angular2';
@Directive({
selector: '[md-ripple]',
host: {
'(click)': 'elementClicked($event)'
}
})
export class MaterialRipple {
constructor(elementRef: ElementRef) {
this.elementRef = elementRef;
import {MaterialButton} from './button';
export class MaterialRippleEffect {
constructor(button: MaterialButton) {
this.elementRef = button.elementRef;
this.element = this.elementRef.nativeElement;
console.log('Ripple', elementRef);
var rippleContainer = document.createElement('span');
rippleContainer.classList.add('md-ripple-container');
this.rippleElement = document.createElement('span');

6
ionic/components/material/variables.scss
View File

@ -1,3 +1,9 @@
$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
$animation-curve-default: $animation-curve-fast-out-slow-in !default;
$shadow-multiplier: 0.7;
$shadow-key-umbra-opacity: $shadow-multiplier * 0.2;
$shadow-key-penumbra-opacity: $shadow-multiplier * 0.14;