jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

migrate long press to paper ripple (#2457)

Browse Source 
* migrate long press to paper ripple

* Add comment
This commit is contained in:
Paulus Schoutsen 2019-01-12 15:46:59 -08:00 committed by GitHub
parent 668d4e82ba
commit 0f53b7c832
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/panels/lovelace/common/directives/long-press-directive.ts
View File

@ -1,5 +1,8 @@
import { directive, PropertyPart } from "lit-html"; import { directive, PropertyPart } from "lit-html";
import "@material/mwc-ripple"; // See https://github.com/home-assistant/home-assistant-polymer/pull/2457
// on how to undo mwc -> paper migration
// import "@material/mwc-ripple";
import "@polymer/paper-ripple";
const isTouch = const isTouch =
"ontouchstart" in window || "ontouchstart" in window ||
@ -25,7 +28,7 @@ class LongPress extends HTMLElement implements LongPress {
constructor() { constructor() {
super(); super();
this.holdTime = 500; this.holdTime = 500;
this.ripple = document.createElement("mwc-ripple"); this.ripple = document.createElement("paper-ripple");
this.timer = undefined; this.timer = undefined;
this.held = false; this.held = false;
this.cooldownStart = false; this.cooldownStart = false;
@ -34,6 +37,7 @@ class LongPress extends HTMLElement implements LongPress {
public connectedCallback() { public connectedCallback() {
Object.assign(this.style, { Object.assign(this.style, {
borderRadius: "50%", // paper-ripple
position: "absolute", position: "absolute",
width: isTouch ? "100px" : "50px", width: isTouch ? "100px" : "50px",
height: isTouch ? "100px" : "50px", height: isTouch ? "100px" : "50px",
@ -42,7 +46,9 @@ class LongPress extends HTMLElement implements LongPress {
}); });
this.appendChild(this.ripple); this.appendChild(this.ripple);
this.ripple.primary = true; this.ripple.style.color = "#03a9f4"; // paper-ripple
this.ripple.style.color = "var(--primary-color)"; // paper-ripple
// this.ripple.primary = true;
[ [
"touchcancel", "touchcancel",
@ -140,14 +146,17 @@ class LongPress extends HTMLElement implements LongPress {
top: `${y}px`, top: `${y}px`,
display: null, display: null,
}); });
this.ripple.disabled = false; this.ripple.holdDown = true; // paper-ripple
this.ripple.active = true; this.ripple.simulatedRipple(); // paper-ripple
this.ripple.unbounded = true; // this.ripple.disabled = false;
// this.ripple.active = true;
// this.ripple.unbounded = true;
} }
private stopAnimation() { private stopAnimation() {
this.ripple.active = false; this.ripple.holdDown = false; // paper-ripple
this.ripple.disabled = true; // this.ripple.active = false;
// this.ripple.disabled = true;
this.style.display = "none"; this.style.display = "none";
} }
} }