Ripple effect everywhere, fixes #2

xemantic · Jul 21, 2017 · 4b11ab4 · 4b11ab4
1 parent e7c7c46
commit 4b11ab4
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 15 deletions.
diff --git a/github-users-web-client/src/main/java/com/xemantic/ankh/Elements.java b/github-users-web-client/src/main/java/com/xemantic/ankh/Elements.java
@@ -25,6 +25,7 @@
 import com.intendia.rxgwt.elemental2.RxElemental2;
 import com.xemantic.githubusers.logic.eventbus.Trigger;
 import elemental2.dom.Element;
+import elemental2.dom.Event;
 import elemental2.dom.HTMLButtonElement;
 import elemental2.dom.HTMLElement;
 import mdc.ripple.MDCRipple;
@@ -47,7 +48,10 @@ public Elements(Element element) {
 
   public static Observable<Trigger> observeClicksOf(Element element) {
     Objects.requireNonNull(element);
-    return RxElemental2.fromEvent(element, RxElemental2.click).map(e -> Trigger.INSTANCE);
+    MDCRipple.attachTo(element);
+    return RxElemental2.fromEvent(element, RxElemental2.click)
+        .doOnNext(Event::preventDefault)
+        .map(e -> Trigger.INSTANCE);
   }
 
   public static void removeChildren(Element element) {
@@ -62,14 +66,12 @@ public HTMLElement get(String selector) {
   }
 
   public HTMLButtonElement getButton(String selector) {
-    HTMLButtonElement button = (HTMLButtonElement) element.querySelector(selector);
-    MDCRipple.attachTo(button);
-    return button;
+    return (HTMLButtonElement) get(selector);
   }
 
   public Observable<Trigger> observeClicksOf(String selector) {
-    Element child = element.querySelector(selector);
-    return RxElemental2.fromEvent(child, RxElemental2.click).map(e -> Trigger.INSTANCE);
+    Element child = get(selector);
+    return observeClicksOf(child);
   }
 
 }
diff --git a/github-users-web-client/src/main/java/com/xemantic/githubusers/web/view/templates.soy b/github-users-web-client/src/main/java/com/xemantic/githubusers/web/view/templates.soy
@@ -35,12 +35,13 @@
   <header class="mdc-toolbar mdc-toolbar--fixed">
     <div class="mdc-toolbar__row">
       <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-        <a class="drawer-handle mdc-ripple-surface material-icons mdc-toolbar__icon--menu menu">menu</a>
+        <a class="drawer-handle mdc-ripple-surface mdc-ripple-surface--primary material-icons mdc-toolbar__icon--menu menu"
+           href="#"
+           data-mdc-ripple-is-unbounded>menu</a>
       </section>
       <section>
         <i class="search-icon material-icons">search</i>
         <input class="user-query-input"
-               type="text"
                placeholder="Search GitHub users"
                aria-label="Search GitHub users">
       </section>
@@ -83,16 +84,16 @@
       </header>
       <nav class="mdc-temporary-drawer__content mdc-list-group">
         <div class="mdc-list">
-          <a class="read-about-action mdc-list-item">
+          <a class="read-about-action mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">help</i>About
           </a>
-          <a class="open-project-on-github-action mdc-list-item">
+          <a class="open-project-on-github-action mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">edit</i>Project on GitHub
           </a>
         </div>
         <hr class="mdc-list-divider"></hr>
         <div class="mdc-list">
-          <a class="select-language-action mdc-list-item">
+          <a class="select-language-action mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">language</i>Language
           </a>
         </div>

diff --git a/github-users-web-server/src/main/webapp/index-dev.html b/github-users-web-server/src/main/webapp/index-dev.html
@@ -35,11 +35,11 @@
     <header class="mdc-toolbar mdc-toolbar--fixed">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <a class="material-icons mdc-toolbar__icon--menu menu">menu</a>
+          <a class="material-icons mdc-toolbar__icon--menu menu" href="#">menu</a>
         </section>
         <section>
           <i class="search-icon material-icons">search</i>
-          <input class="user-query-input" type="text" />
+          <input class="user-query-input" />
         </section>
       </div>
     </header>

diff --git a/github-users-web-server/src/main/webapp/index.html b/github-users-web-server/src/main/webapp/index.html
@@ -13,11 +13,11 @@
     <header class="mdc-toolbar mdc-toolbar--fixed">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
-          <a class="material-icons mdc-toolbar__icon--menu menu">menu</a>
+          <a class="material-icons mdc-toolbar__icon--menu menu" href="#">menu</a>
         </section>
         <section>
           <i class="search-icon material-icons">search</i>
-          <input class="user-query-input" type="text" />
+          <input class="user-query-input" />
         </section>
       </div>
     </header>