mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance Zen welcome component styling and functionality, including improved animations and layout adjustments

Browse Source
This commit is contained in:
mr. M
2025-02-14 13:02:04 +01:00
parent b393979d53
commit 1298c67d1b
2 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/browser/base/content/zen-styles/zen-welcome.css
View File

@@ -6,10 +6,10 @@
display: flex;
align-items: center;
justify-content: center;
}
& + #zen-sidebar-splitter {
display: none;
}
:root[zen-welcome-stage] #zen-sidebar-splitter {
display: none;
}
#zen-welcome-start {
@@ -44,6 +44,7 @@
}
#zen-welcome-pages {
opacity: 0;
justify-content: start;
align-items: start;
display: none;
@@ -63,4 +64,22 @@
flex-direction: column;
gap: 5px;
}
#zen-welcome-page-sidebar-content {
& h1 {
font-size: 2rem;
font-weight: 600;
margin-bottom: 1rem;
}
& p {
font-size: 1.2rem;
margin: 0;
opacity: .6;
}
}
& button {
justify-content: center;
}
}

22
src/browser/base/zen-components/ZenWelcome.mjs
View File

@@ -15,6 +15,7 @@
}
function initializeZenWelcome() {
document.documentElement.setAttribute('zen-welcome-stage', 'true');
const XUL = `
<html:div id="zen-welcome">
<html:div id="zen-welcome-start">
@@ -49,16 +50,17 @@
init() {
document.getElementById('zen-welcome-pages').style.display = 'flex';
document.getElementById('zen-welcome-start').style.display = 'none';
document.getElementById('zen-welcome-start').remove();
animate('#zen-welcome-pages', { opacity: [0, 1] });
}
async fadeInTitles(page) {
const [title1, description1] = document.l10n.formatValues(page.content);
const titleElement = document.getElementById('zen-welcome-page-content-title');
const [title1, description1] = await document.l10n.formatValues(page.content);
const titleElement = document.getElementById('zen-welcome-page-sidebar-content');
titleElement.innerHTML = `<html:h1>${title1}</html:h1><html:p>${description1}</html:p>`;
await animate(
'#zen-welcome-page-content-title h1, #zen-welcome-page-content-title p',
{ opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] },
'#zen-welcome-page-sidebar-content > *',
{ opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] },
{
delay: getMotion().stagger(0.6, { startDelay: 0.2 }),
type: 'spring',
@@ -78,6 +80,7 @@
if (i++ === 0) {
buttonElement.classList.add('primary');
}
buttonElement.classList.add('footer-button');
buttonElement.addEventListener('click', async () => {
const shouldSkip = await button.onclick();
if (shouldSkip) {
@@ -88,9 +91,9 @@
}
await animate(
'#zen-welcome-page-sidebar-buttons button',
{ opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] },
{ opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] },
{
delay: getMotion().stagger(0.6, { startDelay: 0.2 }),
delay: getMotion().stagger(0.2),
type: 'spring',
stiffness: 300,
damping: 20,
@@ -136,12 +139,17 @@
this._currentPage++;
const currentPage = this._pages.shift();
if (!currentPage) {
this.finish();
return;
}
await this.fadeInTitles(currentPage);
await this.fadeInButtons(currentPage);
currentPage.fadeIn();
}
finish() {
document.documentElement.removeAttribute('zen-welcome-stage');
}
}
function getWelcomePages() {