commit 444e6541d40aa57bdea6787bfeb888c61ae34185
author Regan Hsu <hsuregan@chromium.org> Fri Mar 08 04:40:50 2019
committer Commit Bot <commit-bot@chromium.org> Fri Mar 08 04:40:50 2019
tree de1de2065ee88d583684564f263e14ca7847f2d4
parent 49c25140faea239bb07b5ac7c46cf445438ef95f

[CrOS Wallpaper App] Add ripple effect on selected category.

Currently there is no ripple effect when the user clicks on a wallpaper
category.  This CL adds that ripple effect.

Change-Id: Id7cf9fb12f26bbc4165919eb1f20c90210046022
Bug: 835194
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1507283
Reviewed-by: May Lippert <maybelle@chromium.org>
Reviewed-by: Wenzhao (Colin) Zang <wzang@chromium.org>
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#638914}

chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css

diff --git a/chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css b/chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css
index e7af165..170f706 100644
--- a/chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css
+++ b/chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css
@@ -69,6 +69,7 @@
   display: -webkit-box;
   height: 31px;
   margin-top: 8px;
+  overflow: hidden;
   pointer-events: auto;
   transition: border-top 130ms ease;
   user-select: none;
@@ -93,6 +94,20 @@
   font-weight: 500;
   line-height: 34px;
   padding: 0 30px;
+  position: relative;
+  transition: all 500ms ease;
+  width: 100%;
+}
+
+.ink {
+  background: rgb(232, 240, 254);
+  border-radius: 100%;
+  position: absolute;
+  transform: scale(0);
+}
+
+.ripple-category-list-item-animation {
+  animation: ripple-category-list-item 500ms linear;
 }
 
 #categories-list > li[selected] > div {
@@ -868,3 +883,9 @@
         transform: scale(1);
       }
 }
+
+@keyframes ripple-category-list-item {
+  100% { opacity: 0;
+         transform: scale(2.5);
+       }
+}

chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_categories_list.js

diff --git a/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_categories_list.js b/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_categories_list.js
index 4fd5313..0e0a4c8 100644
--- a/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_categories_list.js
+++ b/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_categories_list.js
@@ -70,9 +70,25 @@
         var div = self.ownerDocument.createElement('div');
         div.textContent = entry;
         li.appendChild(div);
-          li.addEventListener('mousedown', e => {
-            e.preventDefault();
-          });
+        div.addEventListener('mousedown', e => {
+          var targetEl = e.target;
+          var inkEl = targetEl.querySelector('.ink');
+          if (inkEl) {
+            inkEl.classList.remove('ripple-category-list-item-animation');
+          } else {
+            inkEl = document.createElement('span');
+            inkEl.classList.add('ink');
+            inkEl.style.width = inkEl.style.height =
+                Math.max(targetEl.offsetWidth, targetEl.offsetHeight) + 'px';
+            targetEl.appendChild(inkEl);
+          }
+          inkEl.style.left = (e.offsetX - 0.5 * inkEl.offsetWidth) + 'px';
+          inkEl.style.top = (e.offsetY - 0.5 * inkEl.offsetHeight) + 'px';
+          inkEl.classList.add('ripple-category-list-item-animation');
+        });
+        li.addEventListener('mousedown', e => {
+          e.preventDefault();
+        });
         return li;
       };
     },