mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-05 17:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed on boarding search engine icons (closes https://github.com/zen-browser/desktop/issues/3575) and improved animation speed/delays as well (https://github.com/zen-browser/desktop/issues/4035)

Browse Source
This commit is contained in:
mr. M
2024-12-28 20:22:46 +01:00
parent 50320d9d9c
commit 3c496b5694
3 changed files with 70 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/browser/components/zen-welcome/welcome.css
View File

@@ -50,6 +50,16 @@ body {
justify-content: space-between;
align-items: center;
z-index: 2;
& button {
opacity: 0;
animation: fadeIn .5s ease-in-out forwards;
animation-delay: .8s;
}
& button:nth-child(2) {
animation-delay: 1s;
}
}
body:has(#welcome:not([hidden='true'])) {
@@ -236,9 +246,11 @@ input[type='checkbox'] {
display: flex;
}
.page:not([hidden='true']) > * {
.page:not([hidden='true']) > *:not(:has(.delay-animation)),
.delay-animation,
.delay-animation-2 {
opacity: 0;
animation: fadeInRight 0.3s ease-in-out forwards;
animation: fadeIn .5s ease-in-out forwards;
}
#importBrowser {
@@ -281,7 +293,7 @@ input[type='checkbox'] {
}
}
@keyframes fadeInRight {
@keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, 40px, 0);
@@ -296,20 +308,34 @@ input[type='checkbox'] {
}
/* There should be no more than 5 elements in a page */
.page:not([hidden='true']) > *:nth-child(2),
#layoutList [layout]:nth-child(2) {
animation-delay: 0.1s;
}
.page:not([hidden='true']) > *:nth-child(3),
#layoutList [layout]:nth-child(3) {
.page:not([hidden='true']) > *:nth-child(2):not(:has(.delay-animation)) {
animation-delay: 0.2s;
}
.page:not([hidden='true']) > *:nth-child(4) {
animation-delay: 0.3s;
}
.page:not([hidden='true']) > *:nth-child(5) {
.page:not([hidden='true']) > *:nth-child(3),
.delay-animation:nth-child(1) {
animation-delay: 0.4s;
}
.page:not([hidden='true']) > *:nth-child(4),
.delay-animation:nth-child(2) {
animation-delay: 0.6s;
}
.page:not([hidden='true']) > *:nth-child(5),
.delay-animation:nth-child(3),
.delay-animation-2:nth-child(1) {
animation-delay: 0.8s;
}
.page:not([hidden='true']) > *:nth-child(6),
.delay-animation:nth-child(4),
.delay-animation-2:nth-child(2) {
animation-delay: 1s;
}
#welcome {
& h1 {
animation-duration: .8s !important;
}
}
.card h3 {
margin-top: 10px;
@@ -412,4 +438,10 @@ input[type='checkbox'] {
&.selected {
transform: scale(1.01);
}
& img {
width: 30px;
height: 30px;
border-radius: 15px;
}
}

16
src/browser/components/zen-welcome/welcome.html
View File

@@ -58,12 +58,12 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<p data-l10n-id="welcome-dialog-theme-subtext"></p>
</div>
<div>
<h2 data-l10n-id="welcome-dialog-theme-header-1"></h2>
<div id="colorListWrapper">
<h2 data-l10n-id="welcome-dialog-theme-header-1" class="delay-animation"></h2>
<div id="colorListWrapper" class="delay-animation">
</div>
<h2 data-l10n-id="welcome-dialog-theme-header-2"></h2>
<h2 data-l10n-id="welcome-dialog-theme-header-2" class="delay-animation"></h2>
<div id="themeList" class="cardGroup">
<svg viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg" class="delay-animation-2">
<g clip-path="url(#clip0_404_2706)">
<rect width="700" height="700" fill="#F4F4F4"/>
<g filter="url(#filter0_d_404_2706)">
@@ -92,7 +92,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
</clipPath>
</defs>
</svg>
<svg viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg" class="delay-animation-2">
<g clip-path="url(#clip0_404_2709)">
<rect width="700" height="700" fill="#515151"/>
<g filter="url(#filter0_d_404_2709)">
@@ -131,15 +131,15 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<p data-l10n-id="welcome-dialog-layout-subtext"></p>
</div>
<div id="layoutList" class="cardGroup">
<hbox layout="single" class="selected">
<hbox layout="single" class="selected delay-animation">
<img src="chrome://browser/content/zen-images/layouts/single-toolbar.png" />
<p data-l10n-id="welcome-dialog-layout-single-toolbar"></p>
</hbox>
<hbox layout="multiple">
<hbox layout="multiple" class="delay-animation">
<img src="chrome://browser/content/zen-images/layouts/multiple-toolbar.png" />
<p data-l10n-id="welcome-dialog-layout-multiple-toolbar"></p>
</hbox>
<hbox layout="collapsed">
<hbox layout="collapsed" class="delay-animation">
<img src="chrome://browser/content/zen-images/layouts/collapsed.png" />
<p data-l10n-id="welcome-dialog-layout-collapsed-toolbar"></p>
</hbox>

17
src/browser/components/zen-welcome/welcome.js
View File

@@ -293,11 +293,20 @@ class Pages {
if (this.pages.currentPage === 1) {
this.prevEl.setAttribute('disabled', 'true');
}
for (const button of document.getElementById('buttons-footer').children) {
button.style.display = 'none';
// Re-animate the buttons
setTimeout(() => {
button.style.removeProperty('display');
});
}
});
}
next() {
this.currentPage++;
document.getElementById('main-view').setAttribute('data-page', this.currentPage);
if (this.currentPage >= this.pages.length) {
// We can use internal js apis to close the window. We also want to set
@@ -309,6 +318,14 @@ class Pages {
return;
}
for (const button of document.getElementById('buttons-footer').children) {
button.style.display = 'none';
// Re-animate the buttons
setTimeout(() => {
button.style.removeProperty('display');
});
}
this._displayCurrentPage();
}