CCA: Add hover effect and inkdrop effect to setting buttons

Bug: 1123750
Test: Manually
Change-Id: Ia7ea22289b2463a83f0a241983560d4d0e9c955a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2416478Reviewed-by: Shik Chen <shik@chromium.org>
Commit-Queue: Inker Kuo <inker@chromium.org>
Auto-Submit: Inker Kuo <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#808204}

chromeos/components/camera_app_ui/resources/src/css/main.css

@@ -23,7 +23,8 @@ body {
 }
 
 button,
-input {
+input,
+label {
   background-color: transparent;
   border-radius: 4px;
   border-style: none;
@@ -555,7 +556,6 @@ body.tab-navigation #switch-device:focus::after {
   background-color: rgba(24, 24, 24, 1);
   background-size: cover;
   height: var(--big-icon);
-  position: relative;
   width: var(--big-icon);
 }
 
@@ -1133,6 +1133,7 @@ body:not(.recording-ui-paused) #record-time [i18n-content=record_video_paused_ms
 
 .menu-header,
 .menu-item {
+  --hover-color: rgba(255, 255, 255, 0.06);
   --toggled-color: rgb(140, 180, 245);
 
   align-items: center;
@@ -1147,6 +1148,54 @@ body:not(.recording-ui-paused) #record-time [i18n-content=record_video_paused_ms
   text-align: left;
 }
 
+button.menu-item:hover,
+label.menu-item:hover {
+  background-color: var(--hover-color);
+}
+
+/* Inkdrop effect. */
+button.menu-item,
+label.menu-item {
+  overflow: hidden;
+}
+
+body.tab-navigation button.menu-item:focus::after,
+body.tab-navigation label.menu-item:focus::after {
+  bottom: 0;
+  top: 0;
+}
+
+button.menu-item::before,
+label.menu-item::before {
+  background: white;
+  border-radius: 50%;
+  content: '';
+  height: 0;
+  left: var(--drop-x);
+  position: absolute;
+  top: var(--drop-y);
+  transform: translate(-50%, -50%);
+  width: 0;
+}
+
+button.menu-item.animate::before,
+label.menu-item.animate::before {
+  animation: inkdrop 500ms ease-out;
+}
+
+@keyframes inkdrop {
+  0% {
+    height: 0;
+    opacity: 0.6;
+    width: 0;
+  }
+  100% {
+    height: calc(var(--drop-radius) * 2);
+    opacity: 0;
+    width: calc(var(--drop-radius) * 2);
+  }
+}
+
 .menu-item.resol-item {
   padding-left: 60px;
 }
@@ -1232,6 +1281,10 @@ body.tab-navigation button.menu-item:focus::after {
   background-image: url(../images/settings_button_back.svg);
 }
 
+.menu-header .icon:hover {
+  background-color: var(--hover-color);
+}
+
 #settings-gridtype .icon {
   background-image: url(../images/settings_grid_type.svg);
 }

chromeos/components/camera_app_ui/resources/src/js/main.js

@@ -102,6 +102,7 @@ export class App {
     document.title = browserProxy.getI18nMessage('name');
     util.setupI18nElements(document.body);
     this.setupToggles_();
+    this.setupSettingEffect_();
 
     const resolutionSettings = new ResolutionSettings(
         this.infoUpdater_, this.photoPreferrer_, this.videoPreferrer_);
@@ -174,6 +175,15 @@ export class App {
     });
   }
 
+  /**
+   * Sets up inkdrop effect for settings view.
+   * @private
+   */
+  setupSettingEffect_() {
+    dom.getAll('button.menu-item, label.menu-item', HTMLElement)
+        .forEach((el) => util.setInkdropEffect(el));
+  }
+
   /**
    * Starts the app by loading the model and opening the camera-view.
    * @return {!Promise}

chromeos/components/camera_app_ui/resources/src/js/util.js

@@ -417,3 +417,24 @@ export function bindElementAriaLabelWithState(
     element.setAttribute('aria-label', browserProxy.getI18nMessage(label));
   });
 }
+
+/**
+ * Sets inkdrop effect on button or label in setting menu.
+ * @param {!HTMLElement} el
+ */
+export function setInkdropEffect(el) {
+  el.addEventListener('click', (e) => {
+    const tRect =
+        assertInstanceof(e.target, HTMLElement).getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const dropX = tRect.left + e.offsetX - elRect.left;
+    const dropY = tRect.top + e.offsetY - elRect.top;
+    const maxDx = Math.max(Math.abs(dropX), Math.abs(elRect.width - dropX));
+    const maxDy = Math.max(Math.abs(dropY), Math.abs(elRect.height - dropY));
+    const radius = Math.hypot(maxDx, maxDy);
+    el.style.setProperty('--drop-x', `${dropX}px`);
+    el.style.setProperty('--drop-y', `${dropY}px`);
+    el.style.setProperty('--drop-radius', `${radius}px`);
+    animateOnce(el);
+  });
+}

chromeos/components/camera_app_ui/resources/src/js/views/settings.js

@@ -627,6 +627,8 @@ export class ResolutionSettings extends BaseSettings {
     resolutions.forEach((r) => {
       const item = /** @type {!HTMLElement} */ (
           document.importNode(this.resItemTempl_.content, true));
+      const label = dom.getFrom(item, 'label', HTMLLabelElement);
+      util.setInkdropEffect(label);
       const input = dom.getFrom(item, 'input', HTMLInputElement);
       item.querySelector('span').textContent = optTextTempl(r, resolutions);
       input.name = menu.dataset['name'];