Permalink
Browse files

fix: Accordion showed ripple when user clicks on content, solves #12

  • Loading branch information...
MikeMitterer committed Jul 30, 2015
1 parent 01581c1 commit 307c2c59e9a18cf2a053e7e1d8a274b37a4cb4b9
Showing with 105 additions and 48 deletions.
  1. +1 −1 example/_templates/default.html
  2. +25 −6 lib/src/components/MaterialRipple.dart
  3. +76 −38 site/web/images/logo-drawer.svg
  4. +3 −3 site/web/index.html
@@ -29,7 +29,7 @@
<!--<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>-->
<!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
<!--<link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">-->
<link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">
<link rel="stylesheet" href="prism-default.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="styles.css">
@@ -142,13 +142,28 @@ class MaterialRipple extends MdlComponent {
//event.preventDefault();
//event.stopPropagation();
bool _hasRipple(final dom.Element element) {
if(element is dom.HtmlElement == false) { return false; }
final dom.Element child = element.firstChild;
return element.classes.contains(_cssClasses.MDL_RIPPLE) ||
(child != null && child is dom.HtmlElement && child.classes.contains(_cssClasses.MDL_RIPPLE));
}
final bool hasRipple = _hasRipple(event.target);
if(!hasRipple) {
return;
}
if (rippleElement.style.width == null && rippleElement.style.height == null) {
final dom.Rectangle rect = element.getBoundingClientRect();
final dom.Rectangle rect = bound;
_boundHeight = rect.height;
_boundWidth = rect.width;
_rippleSize = (Math.sqrt(rect.width * rect.width + rect.height * rect.height) * 2 + 2).toInt();
rippleElement.style.width = "${_rippleSize}px";
rippleElement.style.height = "${_rippleSize}px";
}
rippleElement.classes.add(_cssClasses.IS_VISIBLE);
@@ -200,12 +215,16 @@ class MaterialRipple extends MdlComponent {
y = ((clientY - bound.top) as double).round();
}
//
_updateDimension();
_setRippleXY(x, y);
_setRippleStyles(true);
dom.window.requestAnimationFrame(_animFrameHandler);
_logger.info("X $x Y $y ${bound} ${event.target} T ${hasRipple}");
if(hasRipple) {
_updateDimension();
_setRippleXY(x, y);
_setRippleStyles(true);
dom.window.requestAnimationFrame(_animFrameHandler);
}
}
}
@@ -3,56 +3,94 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY st0 "font-family:'Handwriting-Dakota';">
<!ENTITY st1 "font-family:'Montserrat-Bold';">
<!ENTITY st2 "fill:none;stroke:#FFFFFF;">
<!ENTITY st3 "display:inline;fill:#1F4AFF;">
<!ENTITY st4 "fill:#0042DF;stroke:#1F6AFF;stroke-width:0.25;">
<!ENTITY st5 "fill:#0039BF;stroke:#1F6AFF;stroke-width:0.25;">
<!ENTITY st6 "fill:#F7931E;">
<!ENTITY st7 "fill:#002F9F;stroke:#1F6AFF;stroke-width:0.25;">
<!ENTITY st8 "fill:#205AE3;stroke:#1F6AFF;stroke-width:0.25;">
<!ENTITY st9 "font-size:29.5049;">
<!ENTITY st10 "letter-spacing:-0.7;">
<!ENTITY st11 "display:none;">
<!ENTITY st12 "font-size:30.1279;">
<!ENTITY st2 "fill:#002F9F;stroke:#FFFFFF;stroke-width:0.5;">
<!ENTITY st3 "font-size:27.4945;">
<!ENTITY st4 "display:inline;fill:#1F4AFF;">
<!ENTITY st5 "fill:#0039BF;stroke:#FFFFFF;stroke-width:0.25;">
<!ENTITY st6 "fill:#205AE3;stroke:#FFFFFF;stroke-width:0.5;">
<!ENTITY st7 "fill:#205AE3;">
<!ENTITY st8 "fill:#002F9F;stroke:#FFFFFF;stroke-width:0.25;">
<!ENTITY st9 "font-size:15.1369;">
<!ENTITY st10 "fill:#809EFF;">
<!ENTITY st11 "font-family:'ArialNarrow';">
<!ENTITY st12 "font-size:29.5049;">
<!ENTITY st13 "fill:#0039BF;stroke:#FFFFFF;stroke-width:0.5;">
<!ENTITY st14 "fill:#0042DF;stroke:#FFFFFF;stroke-width:0.5;">
<!ENTITY st15 "letter-spacing:-0.6;">
<!ENTITY st16 "fill:#002F9F;">
<!ENTITY st17 "fill:#0039BF;">
<!ENTITY st18 "fill:#0042DF;">
<!ENTITY st19 "display:none;">
]>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="205px"
height="45px" viewBox="0 0 205 45" style="enable-background:new 0 0 205 45;" xml:space="preserve">
<g id="Layer_2" style="&st11;">
<rect x="-38.2" y="-15.2" style="&st3;" width="309.8" height="77.2"/>
<g id="Layer_2" style="&st19;">
<rect x="-38.2" y="-15.2" style="&st4;" width="309.8" height="77.2"/>
</g>
<g id="Layer_1">
<text transform="matrix(1.0035 0 0 1 54.3213 25.3438)" style="&st1; &st12;">DART</text>
<text transform="matrix(1.0035 0 0 1 68.1738 -38.9629)" style="&st8; &st1; &st12;">MDL</text>
<text transform="matrix(1.6187 -0.8015 0.4437 0.8962 93.2402 -75.7197)" style="&st5; &st0; &st3; &st15;">/</text>
<g>
<g>
<path style="&st8;" d="M13.5,26.7c-0.4,0.4-1.1,0.4-1.5-0.2C8.1,21.4,4.4,16.1,0.8,11.4c-0.4-0.5-0.4-1.2,0-1.5
C0.9,9.8,1,9.7,1.1,9.6c0.4-0.3,1-0.3,1.4,0.2c3.7,4.6,7.4,9.8,11.3,14.7c0.4,0.5,0.4,1.3,0,1.8C13.7,26.5,13.6,26.6,13.5,26.7z"
<path style="&st7;" d="M26.8,28c-0.5,0.3-1.2-0.1-1.4-0.7c-2.6-5.9-5-11.7-7.5-17c-0.3-0.6-0.1-1.2,0.4-1.5
c0.1-0.1,0.3-0.1,0.4-0.2c0.5-0.2,1.1,0,1.4,0.6c2.5,5.4,5,11.2,7.6,16.9c0.3,0.6,0.1,1.3-0.4,1.6C27.1,27.8,27,27.9,26.8,28z"/>
<path style="&st16;" d="M24.2,29.9c-0.1,0.6-0.4,1-0.7,0.9c-2.7-1.2-5.3-2.7-7.8-4.5c-0.3-0.2-0.4-0.8-0.3-1.3
c0-0.1,0.1-0.3,0.1-0.4c0.1-0.5,0.4-0.8,0.7-0.7c2.5,1.6,5.1,2.9,7.8,4.1c0.3,0.1,0.4,0.7,0.3,1.4C24.3,29.5,24.2,29.7,24.2,29.9
z"/>
<path style="&st16;" d="M33.6,20.4c-0.5,0.3-1.2,0.1-1.4-0.5C29.6,14.4,27,8.7,24.5,3.3c-0.3-0.6-0.1-1.3,0.4-1.6
c0.1-0.1,0.3-0.2,0.4-0.3c0.5-0.3,1.1-0.1,1.4,0.5c2.5,5.4,5.1,11.1,7.7,16.6c0.3,0.6,0.1,1.3-0.4,1.7
C33.9,20.2,33.8,20.3,33.6,20.4z"/>
<path style="&st17;" d="M30.2,24.1c-0.5,0.3-1.2,0-1.4-0.6c-2.6-5.7-5.1-11.5-7.6-16.8c-0.3-0.6-0.1-1.3,0.4-1.5
C21.7,5.1,21.9,5,22,4.9c0.5-0.3,1.1-0.1,1.4,0.5c2.5,5.4,5,11.1,7.7,16.7c0.3,0.6,0.1,1.3-0.4,1.7C30.5,23.9,30.4,24,30.2,24.1z
"/>
<path style="&st18;" d="M22.3,33.4c-0.1,0.6-0.4,1-0.7,0.8c-2.7-1.5-5.2-3.3-7.5-5.3c-0.2-0.2-0.4-0.8-0.3-1.3
c0-0.1,0-0.3,0.1-0.4c0.1-0.5,0.4-0.7,0.6-0.5c2.4,1.9,4.9,3.5,7.6,4.9c0.3,0.1,0.4,0.8,0.3,1.4C22.4,33.1,22.3,33.3,22.3,33.4z"
/>
<path style="&st7;" d="M11.6,29.7c0.1,0.7-0.1,1.2-0.4,1.2c-2.8-0.2-5.4-0.8-7.9-1.8c-0.3-0.1-0.5-0.7-0.6-1.4c0-0.2,0-0.3,0-0.5
c-0.1-0.6,0.1-1.1,0.4-1c2.5,0.9,5.2,1.4,7.9,1.6c0.3,0,0.6,0.6,0.6,1.3C11.5,29.3,11.5,29.5,11.6,29.7z"/>
<path style="&st7;" d="M17.9,16.9c-0.4,0.5-1.1,0.5-1.5,0C12.5,12.2,8.8,7.3,5,3.1C4.6,2.6,4.6,1.9,5,1.5
c0.1-0.1,0.2-0.2,0.3-0.4c0.4-0.5,1-0.5,1.4,0c3.7,4.2,7.5,9.1,11.4,13.6c0.4,0.5,0.4,1.3,0,1.8C18.1,16.6,18,16.8,17.9,16.9z"/>
<path style="&st5;" d="M15.6,21.6c-0.4,0.5-1.1,0.4-1.5-0.1c-3.9-4.9-7.6-9.9-11.3-14.3C2.4,6.7,2.4,6,2.8,5.6
C2.9,5.5,3,5.4,3.1,5.3c0.4-0.4,1-0.4,1.4,0.1c3.7,4.4,7.5,9.3,11.4,14.1c0.4,0.5,0.4,1.3,0,1.8C15.8,21.4,15.7,21.5,15.6,21.6z"
<path style="&st16;" d="M31.4,41.9c0.5-0.3,0.8-0.9,0.6-1.2c-1.5-2.8-3.1-5.7-4.5-8.6c-0.2-0.3-0.7-0.3-1.2-0.1
c-0.1,0.1-0.3,0.1-0.4,0.2c-0.5,0.3-0.8,0.7-0.6,1c1.5,3,2.9,6,4.5,8.8c0.2,0.3,0.7,0.3,1.2,0C31.1,42.1,31.3,42,31.4,41.9z"/>
<path style="&st7;" d="M28.3,45.3c0.5-0.3,0.8-0.8,0.6-1.1c-1.5-2.9-3-5.9-4.5-9c-0.2-0.3-0.7-0.4-1.2-0.2
c-0.1,0.1-0.3,0.1-0.4,0.2c-0.5,0.2-0.8,0.6-0.6,0.9c1.4,3.1,2.9,6.2,4.4,9.2c0.2,0.3,0.7,0.4,1.2,0.1
C28,45.4,28.2,45.4,28.3,45.3z"/>
<path style="&st17;" d="M52.7,19.9c0.1-0.6-0.3-0.9-0.8-0.8c-4.9,1.4-10.3,1.8-15.7,1.3c-0.6,0-1.1,0.5-1.2,1.1
c0,0.2,0,0.4-0.1,0.6c-0.1,0.7,0.4,1.3,0.9,1.3c5.5,0.4,10.9-0.1,15.8-1.7c0.5-0.2,1-0.8,1-1.4C52.7,20.3,52.7,20.1,52.7,19.9z"
/>
<path style="&st4;" d="M10.8,34.2c0.1,0.7-0.1,1.2-0.4,1.2C7.6,35,5,34.2,2.5,32.9c-0.3-0.1-0.5-0.8-0.6-1.4c0-0.2,0-0.3,0-0.5
c-0.1-0.6,0.1-1,0.4-0.9c2.4,1.2,5.1,1.9,7.8,2.2c0.3,0,0.6,0.6,0.6,1.3C10.8,33.8,10.8,34,10.8,34.2z"/>
<path style="&st7;" d="M21.4,38.7c0.4-0.6,0.5-1.2,0.3-1.4c-2.2-2-4.4-4.2-6.5-6.5c-0.2-0.3-0.7-0.1-1.1,0.4
c-0.1,0.1-0.2,0.3-0.3,0.4c-0.4,0.5-0.5,1.1-0.3,1.3c2.1,2.5,4.3,4.8,6.5,6.9c0.2,0.2,0.7,0,1.1-0.6C21.2,39,21.3,38.8,21.4,38.7
z"/>
<path style="&st8;" d="M19.5,43.5c0.4-0.5,0.5-1.2,0.3-1.4c-2.2-2.1-4.4-4.5-6.5-7c-0.2-0.3-0.7-0.1-1.1,0.3
c-0.1,0.1-0.2,0.2-0.3,0.4c-0.4,0.4-0.5,1-0.3,1.3c2.1,2.6,4.3,5.2,6.5,7.4c0.2,0.2,0.8,0,1.2-0.5C19.3,43.8,19.4,43.6,19.5,43.5
z"/>
<path style="&st5;" d="M37.1,11.5c-0.1-0.5-0.6-0.8-1.1-0.6c-5,2.1-10.3,4-15.6,5.3c-0.6,0.1-1,0.8-0.8,1.5
c0,0.2,0.1,0.4,0.1,0.6c0.1,0.7,0.7,1.1,1.2,1c5.4-1.4,10.7-3.5,15.6-5.8c0.5-0.3,0.9-0.9,0.8-1.5C37.2,11.8,37.1,11.6,37.1,11.5
<path style="&st7;" d="M46.6,30.4c0.1-0.7-0.3-1.1-0.9-0.9c-5.2,1.2-10.9,1-16.4-0.2c-0.6-0.1-1.1,0.3-1.2,0.9
c0,0.2,0,0.4-0.1,0.5c-0.1,0.7,0.3,1.3,0.9,1.5c5.5,1.3,11.2,1.4,16.5,0.2c0.6-0.1,1.1-0.8,1.1-1.4
C46.6,30.7,46.6,30.5,46.6,30.4z"/>
<path style="&st18;" d="M49.6,25.3c0.1-0.6-0.3-1-0.9-0.9c-5.1,1.3-10.6,1.5-16.1,0.8c-0.6-0.1-1.1,0.4-1.2,1.1
c0,0.2,0,0.4-0.1,0.5c-0.1,0.7,0.3,1.3,0.9,1.4c5.5,0.8,11.1,0.6,16.2-0.9c0.5-0.2,1-0.8,1.1-1.4C49.5,25.7,49.5,25.5,49.6,25.3z
"/>
</g>
</g>
<g>
<g>
<path style="&st6;" d="M39.6-35.4c-0.4,0.5-1,0.5-1.4,0c-3.6-4.8-7-9.2-9.8-11.5c-0.3-0.2-0.3-0.8,0-1.4c0.1-0.1,0.2-0.3,0.2-0.4
c0.3-0.5,0.8-0.8,1.1-0.5c3,2.4,6.5,6.8,10.1,11.6c0.4,0.5,0.4,1.4,0,1.9C39.8-35.6,39.7-35.5,39.6-35.4z"/>
<path style="&st2;" d="M37.9-32.1c0.1,0.7-0.1,1.3-0.4,1.3c-2.5,0.1-4.9,0-7-0.5c-0.2,0-0.5-0.6-0.5-1.2c0-0.2,0-0.3,0-0.5
c-0.1-0.6,0.1-1,0.3-1c2.1,0.2,4.5,0.2,7,0c0.3,0,0.5,0.5,0.6,1.3C37.9-32.5,37.9-32.3,37.9-32.1z"/>
<path style="&st2;" d="M43.6-46c-0.4,0.5-1,0.6-1.4,0.1c-3.7-4.7-7.3-8.9-10.5-11.1c-0.3-0.2-0.4-0.9,0-1.6
c0.1-0.2,0.2-0.4,0.3-0.5c0.3-0.7,0.9-1,1.2-0.8c3.3,2.4,7,6.8,10.7,11.5c0.4,0.5,0.4,1.4,0,1.9C43.9-46.3,43.8-46.2,43.6-46z"/>
<path style="&st13;" d="M41.5-40.9c-0.4,0.5-1,0.6-1.4,0C36.5-45.6,33-49.8,30-51.9c-0.3-0.2-0.3-0.9,0-1.5
c0.1-0.2,0.2-0.3,0.3-0.5c0.3-0.6,0.8-0.9,1.2-0.7c3.2,2.3,6.7,6.6,10.4,11.3c0.4,0.5,0.4,1.4,0,1.9
C41.7-41.2,41.6-41.1,41.5-40.9z"/>
<path style="&st14;" d="M37.3-27.2c0.1,0.7-0.1,1.3-0.4,1.3c-2.5-0.1-4.8-0.6-6.9-1.4c-0.2-0.1-0.5-0.7-0.5-1.2
c0-0.2,0-0.3,0-0.5c-0.1-0.6,0.1-1,0.3-0.9c2.1,0.6,4.4,0.9,6.9,0.9c0.3,0,0.5,0.6,0.6,1.3C37.2-27.6,37.2-27.4,37.3-27.2z"/>
<path style="&st2;" d="M46.8-22.9c0.4-0.6,0.5-1.3,0.3-1.5c-2-2.2-4-4.5-5.9-6.9c-0.2-0.3-0.7,0-1,0.5c-0.1,0.1-0.2,0.3-0.3,0.4
c-0.3,0.5-0.5,1.2-0.3,1.4c1.9,2.5,3.9,4.9,5.9,7.2c0.2,0.2,0.7,0,1-0.6C46.7-22.5,46.7-22.7,46.8-22.9z"/>
<path style="&st6;" d="M45.1-17.8c0.4-0.6,0.5-1.2,0.3-1.5c-2-2.3-4-4.7-5.9-7.2c-0.2-0.3-0.7-0.1-1,0.4
c-0.1,0.1-0.2,0.3-0.3,0.4c-0.3,0.5-0.5,1.1-0.3,1.4c1.9,2.6,3.9,5.2,5.9,7.6c0.2,0.3,0.7,0,1-0.6C44.9-17.5,45-17.6,45.1-17.8z"
/>
<path style="&st13;" d="M60.8-46.9c-0.1-0.6-0.5-1.1-0.9-1.2c-4-0.6-8.9,0.1-14,1.2c-0.5,0.1-0.9,0.8-0.8,1.6
c0,0.2,0.1,0.4,0.1,0.6c0.1,0.7,0.6,1.2,1.1,1.1c5-1.2,9.9-2.1,13.9-1.9c0.4,0,0.7-0.4,0.6-1C60.8-46.6,60.8-46.7,60.8-46.9z"/>
<path style="&st6;" d="M57.5-38.1c-0.1-0.6-0.5-1-1-0.9c-4.4,1.2-9.6,2.7-14.6,3.9c-0.5,0.1-0.9,0.8-0.8,1.5
c0,0.2,0.1,0.4,0.1,0.6c0.1,0.7,0.6,1.2,1.1,1.1c5-1.1,10.1-2.8,14.5-4.3c0.5-0.2,0.8-0.8,0.7-1.4C57.6-37.8,57.6-37.9,57.5-38.1
z"/>
<path style="&st8;" d="M33.3,22.2c-0.1-0.6-0.6-0.8-1.2-0.5c-5.1,2.7-10.6,4.6-16,5.4c-0.6,0.1-1,0.7-0.9,1.4
c0,0.2,0.1,0.4,0.1,0.6c0.1,0.7,0.7,1.2,1.2,1.1c5.5-0.8,11-2.9,16.1-5.8c0.5-0.3,0.9-1,0.8-1.6C33.3,22.6,33.3,22.4,33.3,22.2z"
<path style="&st14;" d="M59.1-42.6c-0.1-0.6-0.5-1-1-1c-4.3,0.5-9.3,1.7-14.3,2.9c-0.5,0.1-0.9,0.8-0.8,1.6
c0,0.2,0.1,0.4,0.1,0.6c0.1,0.7,0.6,1.2,1.1,1.1c5-1.2,10-2.7,14.2-3.5c0.5-0.1,0.7-0.6,0.7-1.2C59.2-42.3,59.2-42.4,59.1-42.6z"
/>
<path style="&st4;" d="M35.1,17c-0.1-0.6-0.6-0.8-1.2-0.5c-5,2.5-10.4,4.4-15.8,5.5c-0.6,0.1-1,0.8-0.9,1.5
c0,0.2,0.1,0.4,0.1,0.6c0.1,0.7,0.7,1.2,1.2,1c5.5-1.1,10.9-3.3,15.8-6c0.5-0.3,0.9-1,0.8-1.6C35.2,17.3,35.2,17.2,35.1,17z"/>
</g>
</g>
<text transform="matrix(1.0035 0 0 1 121.3213 34.7207)" style="&st1; &st9;">DART</text>
<text transform="matrix(1.0035 0 0 1 36.9238 34.0371)" style="&st2; &st1; &st9;">MDL</text>
<text transform="matrix(1.2582 -0.623 0.4437 0.8962 104.418 37.1704)" style="&st6; &st0; &st12; &st10;">/</text>
<text transform="matrix(1.25 0 0 1 56.1743 40.752)" style="&st10; &st11; &st9;">Material Design Lite</text>
</g>
</svg>
View
@@ -29,7 +29,7 @@
<div class="android-header mdl-layout__header mdl-layout__header--waterfall mdl-color--primary">
<div class="mdl-layout__header-row">
<span class="android-title mdl-layout-title">
<img class="logo" src="images/logo-drawer.png">
<img class="logo" src="images/logo-drawer.svg">
</span>
<!-- Add spacer, to align navigation to the right in desktop -->
<div class="android-header-spacer mdl-layout-spacer"></div>
@@ -55,14 +55,14 @@
<li class="mdl-menu__item">Android History</li>
</ul>
<span class="mobile-title mdl-layout-title">
<img class="logo" src="images/logo-drawer.png">
<img class="logo" src="images/logo-drawer.svg">
</span>
</div>
</div>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">
<img class="logo" src="images/logo-drawer.png">
<img class="logo" src="images/logo-drawer.svg">
</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Phones1</a>

0 comments on commit 307c2c5

Please sign in to comment.