Skip to content

GitLab

T
tangled
Commit fb2aa0a7 authored by Yue Cen's avatar Yue Cen Committed by Commit Bot
Browse files
Options

Recommend app screen: Add ripple effect to the chip and scrolling 

shadow effect.

Bug: 835029
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I677cbf3a3e34a84afabb839a2e8adc61fb27c1bb
Reviewed-on: https://chromium-review.googlesource.com/1139177
Commit-Queue: Yue Cen <rsgingerrs@chromium.org>
Reviewed-by: default avatarWenzhao (Colin) Zang <wzang@chromium.org>
Reviewed-by: default avatarAlexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#579274}
parent 6bbe791f
Hide whitespace changes
Inline Side-by-side
Showing with 118 additions and 9 deletions
chrome/browser/resources/chromeos/arc_support/images/ic_checkmark.svg
View file @ fb2aa0a7
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd"> <defs>
<filter id="ic_check_circle-1x-a" width="154.2%" height="154.2%" x="-27.1%" y="-22.9%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/>
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.34 0"/>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" filter="url(#ic_check_circle-1x-a)">
<polygon points="0 0 24 0 24 24 0 24"/> <polygon points="0 0 24 0 24 24 0 24"/>
<path fill="#1A73E8" d="M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2 L12,2 Z"/> <path fill="#1A73E8" d="M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2 L12,2 Z"/>
<polygon fill="#FFF" points="10 17 5 12.202 6.41 10.848 10 14.284 17.59 7 19 8.363"/> <polygon fill="#FFF" points="10 17 5 12.202 6.41 10.848 10 14.284 17.59 7 19 8.363"/>
......
chrome/browser/resources/chromeos/arc_support/recommend_app_list_view.css
View file @ fb2aa0a7
...@@ -9,12 +9,30 @@ ...@@ -9,12 +9,30 @@
} }
body { body {
margin: 12px 0 0 2px; margin: 0;
padding: 0; padding: 0;
} }
#recommend-apps-container {
max-height: 300px;
overflow: auto;
padding: 12px 64px 0 64px;
}
.shadow {
height: 10px;
margin-top: -10px;
}
#scroll-top.shadow {
box-shadow: 0 5px 6px -3px rgba(33, 33, 36, 0.06);
}
#scroll-bottom.shadow {
box-shadow: inset 0 -5px 6px -3px rgba(33, 33, 36, 0.06);
}
#recommend-apps-container .item { #recommend-apps-container .item {
cursor: pointer;
float: left; float: left;
position: relative; position: relative;
} }
...@@ -31,6 +49,10 @@ body { ...@@ -31,6 +49,10 @@ body {
margin-bottom: 22px; margin-bottom: 22px;
} }
#recommend-apps-container .item:nth-last-child(-n+3) {
margin-bottom: 5px;
}
#recommend-apps-container .item .image-picker { #recommend-apps-container .item .image-picker {
background: url(images/ic_checkmark.svg) no-repeat; background: url(images/ic_checkmark.svg) no-repeat;
display: none; display: none;
...@@ -48,9 +70,42 @@ body { ...@@ -48,9 +70,42 @@ body {
#recommend-apps-container .item .chip { #recommend-apps-container .item .chip {
border-radius: 4px; border-radius: 4px;
box-shadow: 1px 1px 4px rgba(60, 64, 67, 0.3), 1px 2px 4px 1px rgba(60, 64, 67, 0.15); box-shadow:
1px 1px 4px rgba(60, 64, 67, 0.30),
1px 2px 4px 1px rgba(60, 64, 67, 0.15);
height: 60px; height: 60px;
overflow: hidden;
position: relative;
width: 192px; width: 192px;
--x: 0;
--y: 0;
}
@keyframes ripple {
30% {
transform: scale(7);
}
100% {
opacity: 0;
}
}
#recommend-apps-container .item .chip .ripple {
animation: ripple 1s forwards;
background: rgba(32, 33, 36, 0.14);
border-radius: 50%;
height: 100px;
left: calc(var(--x) * 1px);
position: absolute;
top: calc(var(--y) * 1px);
transform: translate(-50%, -50%);
width: 100px;
}
#recommend-apps-container .item .chip:active {
box-shadow:
0 1px 2px 0 rgba(60, 64, 67, 0.30),
0 3px 6px 2px rgba(60, 64, 67, 0.15);
} }
img.app-icon { img.app-icon {
......
chrome/browser/resources/chromeos/arc_support/recommend_app_list_view.html
View file @ fb2aa0a7
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
<link rel="stylesheet" type="text/css" href="recommend_app_list_view.css"> <link rel="stylesheet" type="text/css" href="recommend_app_list_view.css">
</head> </head>
<body> <body>
<div id="scroll-top"></div>
<div id="recommend-apps-container"></div> <div id="recommend-apps-container"></div>
<div id="scroll-bottom"></div>
</body> </body>
</html> </html>
chrome/browser/resources/chromeos/arc_support/recommend_app_list_view.js
View file @ fb2aa0a7
...@@ -11,7 +11,6 @@ function generateContents(appIcon, appTitle, appPackageName) { ...@@ -11,7 +11,6 @@ function generateContents(appIcon, appTitle, appPackageName) {
item.classList.add('item'); item.classList.add('item');
item.classList.add('checked'); item.classList.add('checked');
item.setAttribute('data-packagename', appPackageName); item.setAttribute('data-packagename', appPackageName);
item.onclick = toggleCheckStatus;
var imagePicker = doc.createElement('div'); var imagePicker = doc.createElement('div');
imagePicker.classList.add('image-picker'); imagePicker.classList.add('image-picker');
...@@ -19,6 +18,9 @@ function generateContents(appIcon, appTitle, appPackageName) { ...@@ -19,6 +18,9 @@ function generateContents(appIcon, appTitle, appPackageName) {
var chip = doc.createElement('div'); var chip = doc.createElement('div');
chip.classList.add('chip'); chip.classList.add('chip');
chip.addEventListener('mousedown', addRippleCircle);
chip.addEventListener('mouseup', toggleCheckStatus);
chip.addEventListener('animationend', removeRippleCircle);
item.appendChild(chip); item.appendChild(chip);
var img = doc.createElement('img'); var img = doc.createElement('img');
...@@ -35,10 +37,32 @@ function generateContents(appIcon, appTitle, appPackageName) { ...@@ -35,10 +37,32 @@ function generateContents(appIcon, appTitle, appPackageName) {
recommendAppsContainer.appendChild(item); recommendAppsContainer.appendChild(item);
} }
// Add a layer on top of the chip to create the ripple effect.
function addRippleCircle(e) {
let chip = e.currentTarget;
let item = chip.parentNode;
let offsetX = e.pageX - item.offsetLeft;
let offsetY = e.pageY - item.offsetTop;
chip.style.setProperty('--x', offsetX);
chip.style.setProperty('--y', offsetY);
chip.innerHTML += '<div class="ripple"></div>';
}
// After the animation ends, remove the ripple layer.
function removeRippleCircle(e) {
let chip = e.currentTarget;
let rippleLayers = chip.querySelectorAll('.ripple');
for (let rippleLayer of rippleLayers) {
if (rippleLayer.className === 'ripple') {
rippleLayer.remove();
}
}
}
// Toggle the check status of an app. If an app is selected, add the "checked" // Toggle the check status of an app. If an app is selected, add the "checked"
// class so that the checkmark is visible. Otherwise, remove the checked class. // class so that the checkmark is visible. Otherwise, remove the checked class.
function toggleCheckStatus(e) { function toggleCheckStatus(e) {
var item = e.currentTarget; var item = e.currentTarget.parentNode;
item.classList.toggle('checked'); item.classList.toggle('checked');
} }
...@@ -49,4 +73,20 @@ function getSelectedPackages() { ...@@ -49,4 +73,20 @@ function getSelectedPackages() {
selectedPackages.push(checkedItem.dataset.packagename); selectedPackages.push(checkedItem.dataset.packagename);
} }
return selectedPackages; return selectedPackages;
} }
\ No newline at end of file
// Add the scrolling shadow effect.
(function() {
const shadowThreshold = 5;
var doc = document;
doc.getElementById('recommend-apps-container').onscroll = function() {
doc.getElementById('scroll-top')
.classList[this.scrollTop > shadowThreshold ? 'add' : 'remove']('shadow');
doc.getElementById('scroll-bottom')
.classList
[this.scrollHeight - this.clientHeight - this.scrollTop <
shadowThreshold ?
'remove' :
'add']('shadow');
};
})();
\ No newline at end of file
chrome/browser/resources/chromeos/login/recommend_apps.css
View file @ fb2aa0a7
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
} }
#app-list-view-container { #app-list-view-container {
height: 100%; height: 312px;
padding: 0 52px 0 62px; margin-top: 8px;
padding: 0;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment