milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

update components

Browse source
This commit is contained in:
Luke Pulverenti 2015-10-14 11:54:37 -04:00
parent cbccf10bec
commit b0f79e54f4
4 changed files with 68 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

8
dashboard-ui/bower_components/paper-ripple/.bower.json vendored
View file

@ -1,6 +1,6 @@
{ {
"name": "paper-ripple", "name": "paper-ripple",
"version": "1.0.3", "version": "1.0.4",
"license": "http://polymer.github.io/LICENSE.txt", "license": "http://polymer.github.io/LICENSE.txt",
"description": "Adds a material design ripple to any container", "description": "Adds a material design ripple to any container",
"private": true, "private": true,
@ -32,11 +32,11 @@
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0" "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
}, },
"homepage": "https://github.com/polymerelements/paper-ripple", "homepage": "https://github.com/polymerelements/paper-ripple",
"_release": "1.0.3", "_release": "1.0.4",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.3", "tag": "v1.0.4",
"commit": "c6e9664ca79c74bbd4219077438c4d163d6be962" "commit": "5f5893ca7bd6a8413d2f777c092a1a179b6bd45e"
}, },
"_source": "git://github.com/polymerelements/paper-ripple.git", "_source": "git://github.com/polymerelements/paper-ripple.git",
"_target": "^1.0.0", "_target": "^1.0.0",

2
dashboard-ui/bower_components/paper-ripple/bower.json vendored
View file

@ -1,6 +1,6 @@
{ {
"name": "paper-ripple", "name": "paper-ripple",
"version": "1.0.3", "version": "1.0.4",
"license": "http://polymer.github.io/LICENSE.txt", "license": "http://polymer.github.io/LICENSE.txt",
"description": "Adds a material design ripple to any container", "description": "Adds a material design ripple to any container",
"private": true, "private": true,

58
dashboard-ui/bower_components/paper-ripple/paper-ripple.html vendored
View file

@ -24,7 +24,7 @@ Example:
</div> </div>
Note, it's important that the parent container of the ripple be relative position, otherwise Note, it's important that the parent container of the ripple be relative position, otherwise
the ripple will emanate outside of the desired container. the ripple will emanate outside of the desired container.
`paper-ripple` listens to "mousedown" and "mouseup" events so it would display ripple `paper-ripple` listens to "mousedown" and "mouseup" events so it would display ripple
effect when touches on it. You can also defeat the default behavior and effect when touches on it. You can also defeat the default behavior and
@ -83,7 +83,7 @@ Apply `circle` class to make the rippling effect within a circle.
@param {Object} detail @param {Object} detail
@param {Object} detail.node The animated node @param {Object} detail.node The animated node
--> -->
<template> <template>
<style> <style>
:host { :host {
@ -95,24 +95,30 @@ Apply `circle` class to make the rippling effect within a circle.
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
/* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers,
* creating a node (with a position:absolute) in the middle of an event
* handler "interrupts" that event handler (which happens when the
* ripple is created on demand) */
pointer-events: none;
} }
:host([animating]) { :host([animating]) {
/* This resolves a rendering issue in Chrome (as of 40) where the /* This resolves a rendering issue in Chrome (as of 40) where the
ripple is not properly clipped by its parent (which may have ripple is not properly clipped by its parent (which may have
rounded corners). See: http://jsbin.com/temexa/4 rounded corners). See: http://jsbin.com/temexa/4
Note: We only apply this style conditionally. Otherwise, the browser Note: We only apply this style conditionally. Otherwise, the browser
will create a new compositing layer for every ripple element on the will create a new compositing layer for every ripple element on the
page, and that would be bad. */ page, and that would be bad. */
-webkit-transform: translate(0, 0); -webkit-transform: translate(0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
:host([noink]) { :host([noink]) {
pointer-events: none; pointer-events: none;
} }
#background, #background,
#waves, #waves,
.wave-container, .wave-container,
@ -124,32 +130,32 @@ Apply `circle` class to make the rippling effect within a circle.
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#background, #background,
.wave { .wave {
opacity: 0; opacity: 0;
} }
#waves, #waves,
.wave { .wave {
overflow: hidden; overflow: hidden;
} }
.wave-container, .wave-container,
.wave { .wave {
border-radius: 50%; border-radius: 50%;
} }
:host(.circle) #background, :host(.circle) #background,
:host(.circle) #waves { :host(.circle) #waves {
border-radius: 50%; border-radius: 50%;
} }
:host(.circle) .wave-container { :host(.circle) .wave-container {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<div id="background"></div> <div id="background"></div>
<div id="waves"></div> <div id="waves"></div>
</template> </template>
@ -534,9 +540,9 @@ Apply `circle` class to make the rippling effect within a circle.
}, },
/** /**
* If true, the ripple will not generate a ripple effect * If true, the ripple will not generate a ripple effect
* via pointer interaction. * via pointer interaction.
* Calling ripple's imperative api like `simulatedRipple` will * Calling ripple's imperative api like `simulatedRipple` will
* still generate the ripple effect. * still generate the ripple effect.
*/ */
noink: { noink: {
@ -608,10 +614,10 @@ Apply `circle` class to make the rippling effect within a circle.
}, 1); }, 1);
}, },
/** /**
* Provokes a ripple down effect via a UI event, * Provokes a ripple down effect via a UI event,
* respecting the `noink` property. * respecting the `noink` property.
* @param {Event=} event * @param {Event=} event
*/ */
uiDownAction: function(event) { uiDownAction: function(event) {
if (!this.noink) { if (!this.noink) {
@ -619,10 +625,10 @@ Apply `circle` class to make the rippling effect within a circle.
} }
}, },
/** /**
* Provokes a ripple down effect via a UI event, * Provokes a ripple down effect via a UI event,
* *not* respecting the `noink` property. * *not* respecting the `noink` property.
* @param {Event=} event * @param {Event=} event
*/ */
downAction: function(event) { downAction: function(event) {
if (this.holdDown && this.ripples.length > 0) { if (this.holdDown && this.ripples.length > 0) {
@ -638,10 +644,10 @@ Apply `circle` class to make the rippling effect within a circle.
} }
}, },
/** /**
* Provokes a ripple up effect via a UI event, * Provokes a ripple up effect via a UI event,
* respecting the `noink` property. * respecting the `noink` property.
* @param {Event=} event * @param {Event=} event
*/ */
uiUpAction: function(event) { uiUpAction: function(event) {
if (!this.noink) { if (!this.noink) {
@ -649,10 +655,10 @@ Apply `circle` class to make the rippling effect within a circle.
} }
}, },
/** /**
* Provokes a ripple up effect via a UI event, * Provokes a ripple up effect via a UI event,
* *not* respecting the `noink` property. * *not* respecting the `noink` property.
* @param {Event=} event * @param {Event=} event
*/ */
upAction: function(event) { upAction: function(event) {
if (this.holdDown) { if (this.holdDown) {

56
dashboard-ui/vulcanize-out.html
View file

@ -13321,7 +13321,7 @@ is separate from validation, and `allowed-pattern` does not affect how the input
<dom-module id="paper-ripple" assetpath="bower_components/paper-ripple/"> <dom-module id="paper-ripple" assetpath="bower_components/paper-ripple/">
<template> <template>
<style> <style>
:host { :host {
@ -13333,24 +13333,30 @@ is separate from validation, and `allowed-pattern` does not affect how the input
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
/* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers,
* creating a node (with a position:absolute) in the middle of an event
* handler "interrupts" that event handler (which happens when the
* ripple is created on demand) */
pointer-events: none;
} }
:host([animating]) { :host([animating]) {
/* This resolves a rendering issue in Chrome (as of 40) where the /* This resolves a rendering issue in Chrome (as of 40) where the
ripple is not properly clipped by its parent (which may have ripple is not properly clipped by its parent (which may have
rounded corners). See: http://jsbin.com/temexa/4 rounded corners). See: http://jsbin.com/temexa/4
Note: We only apply this style conditionally. Otherwise, the browser Note: We only apply this style conditionally. Otherwise, the browser
will create a new compositing layer for every ripple element on the will create a new compositing layer for every ripple element on the
page, and that would be bad. */ page, and that would be bad. */
-webkit-transform: translate(0, 0); -webkit-transform: translate(0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
:host([noink]) { :host([noink]) {
pointer-events: none; pointer-events: none;
} }
#background, #background,
#waves, #waves,
.wave-container, .wave-container,
@ -13362,32 +13368,32 @@ is separate from validation, and `allowed-pattern` does not affect how the input
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#background, #background,
.wave { .wave {
opacity: 0; opacity: 0;
} }
#waves, #waves,
.wave { .wave {
overflow: hidden; overflow: hidden;
} }
.wave-container, .wave-container,
.wave { .wave {
border-radius: 50%; border-radius: 50%;
} }
:host(.circle) #background, :host(.circle) #background,
:host(.circle) #waves { :host(.circle) #waves {
border-radius: 50%; border-radius: 50%;
} }
:host(.circle) .wave-container { :host(.circle) .wave-container {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<div id="background"></div> <div id="background"></div>
<div id="waves"></div> <div id="waves"></div>
</template> </template>
@ -13772,9 +13778,9 @@ is separate from validation, and `allowed-pattern` does not affect how the input
}, },
/** /**
* If true, the ripple will not generate a ripple effect * If true, the ripple will not generate a ripple effect
* via pointer interaction. * via pointer interaction.
* Calling ripple's imperative api like `simulatedRipple` will * Calling ripple's imperative api like `simulatedRipple` will
* still generate the ripple effect. * still generate the ripple effect.
*/ */
noink: { noink: {
@ -13846,10 +13852,10 @@ is separate from validation, and `allowed-pattern` does not affect how the input
}, 1); }, 1);
}, },
/** /**
* Provokes a ripple down effect via a UI event, * Provokes a ripple down effect via a UI event,
* respecting the `noink` property. * respecting the `noink` property.
* @param {Event=} event * @param {Event=} event
*/ */
uiDownAction: function(event) { uiDownAction: function(event) {
if (!this.noink) { if (!this.noink) {
@ -13857,10 +13863,10 @@ is separate from validation, and `allowed-pattern` does not affect how the input
} }
}, },
/** /**
* Provokes a ripple down effect via a UI event, * Provokes a ripple down effect via a UI event,
* *not* respecting the `noink` property. * *not* respecting the `noink` property.
* @param {Event=} event * @param {Event=} event
*/ */
downAction: function(event) { downAction: function(event) {
if (this.holdDown && this.ripples.length > 0) { if (this.holdDown && this.ripples.length > 0) {
@ -13876,10 +13882,10 @@ is separate from validation, and `allowed-pattern` does not affect how the input
} }
}, },
/** /**
* Provokes a ripple up effect via a UI event, * Provokes a ripple up effect via a UI event,
* respecting the `noink` property. * respecting the `noink` property.
* @param {Event=} event * @param {Event=} event
*/ */
uiUpAction: function(event) { uiUpAction: function(event) {
if (!this.noink) { if (!this.noink) {
@ -13887,10 +13893,10 @@ is separate from validation, and `allowed-pattern` does not affect how the input
} }
}, },
/** /**
* Provokes a ripple up effect via a UI event, * Provokes a ripple up effect via a UI event,
* *not* respecting the `noink` property. * *not* respecting the `noink` property.
* @param {Event=} event * @param {Event=} event
*/ */
upAction: function(event) { upAction: function(event) {
if (this.holdDown) { if (this.holdDown) {