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

Refactor welcome screen preferences and animations for improved user experience

Browse Source
This commit is contained in:
mr. M
2025-02-15 16:44:13 +01:00
parent 852d928860
commit 59c559de14
4 changed files with 18 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/browser/app/profile/zen-browser.js
View File

@@ -75,8 +75,7 @@ pref("app.update.checkInstallTime.days", 6);
// CUSTOM ZEN PREFS
pref('zen.welcome-screen.enabled', true, sticky);
pref('zen.welcome-screen.seen', false);
pref('zen.welcome-screen.seen', false, sticky);
pref('zen.tabs.vertical', true);
pref('zen.tabs.vertical.right-side', false);

3
src/browser/base/content/ZenStartup.mjs
View File

@@ -122,8 +122,7 @@
_checkForWelcomePage() {
if (
!Services.prefs.getBoolPref('zen.welcome-screen.seen', false) &&
Services.prefs.getBoolPref('zen.welcome-screen.enabled', true)
!Services.prefs.getBoolPref('zen.welcome-screen.seen', false)
) {
//Services.prefs.setBoolPref('zen.welcome-screen.seen', true);
console.log('ZenStartup: Show welcome page');

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

@@ -69,12 +69,12 @@
width: 100%;
height: 100%;
opacity: 0;
font-size: 7em;
display: flex;
justify-content: center;
align-items: center;
color: transparent;
text-shadow: 1px 1px var(--zen-primary-color);
color: var(--zen-primary-color);
fill: var(--zen-primary-color);
background-image: url(chrome://browser/skin/zen-icons/essential-add.svg);
background-size: 15%;
background-repeat: no-repeat;
background-position: center;
}
}
@@ -91,20 +91,14 @@
}
& p {
font-size: medium;
margin: 0 0 1.1rem 0;
color: light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6));
}
& > * {
opacity: 0;
}
}
& button {
justify-content: center;
align-items: center;
opacity: 0;
}
#zen-welcome-page-content {

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

@@ -62,7 +62,7 @@
(description2 ? `<html:p>${description2}</html:p>` : '');
await animate(
'#zen-welcome-page-sidebar-content > *',
{ opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] },
{ x: ['100%', 0], filter: ['blur(2px)', 'blur(0px)'] },
{
delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
type: 'spring',
@@ -91,7 +91,7 @@
}
await animate(
'#zen-welcome-page-sidebar-buttons button',
{ opacity: [0, 1], x: [100, 0], filter: ['blur(2px)', 'blur(0px)'] },
{ x: ['100%', 0], filter: ['blur(2px)', 'blur(0px)'] },
{
delay: getMotion().stagger(0.1, { startDelay: 0.4 }),
type: 'spring',
@@ -115,7 +115,7 @@
async fadeOutButtons() {
await animate(
'#zen-welcome-page-sidebar-buttons button',
{ opacity: [1, 0], x: [0, -100], filter: ['blur(0px)', 'blur(2px)'] },
{ x: [0, '-100%'], filter: ['blur(0px)', 'blur(2px)'] },
{
type: 'spring',
bounce: 0,
@@ -129,7 +129,7 @@
async fadeOutTitles() {
await animate(
'#zen-welcome-page-sidebar-content > *',
{ opacity: [1, 0], x: [0, -100], filter: ['blur(0px)', 'blur(2px)'] },
{ x: [0, '-100%'], filter: ['blur(0px)', 'blur(2px)'] },
{
delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
type: 'spring',
@@ -170,21 +170,22 @@
}
async finish() {
await animate('#zen-welcome-page-content', { x: [0, '100%'] }, { duration: 0.2 });
await animate('#zen-welcome-page-content', { x: [0, '100%'] }, { bounce: 0 });
document.getElementById('zen-welcome-page-content').remove();
await this.animHeart();
await animate('#zen-welcome-pages', { scale: [1, 1.01, 0], opacity: [1, 0.7, 0] }, { duration: 0.4 });
await animate('#zen-welcome-pages', { opacity: [1, 0] });
document.getElementById('zen-welcome').remove();
document.documentElement.removeAttribute('zen-welcome-stage');
for (const element of document.getElementById('browser').children) {
element.style.opacity = 0;
element.style.removeProperty('display');
}
await animate('#browser > *', { opacity: [0, 1] });
}
async animHeart() {
const heart = document.createElement('div');
heart.id = 'zen-welcome-heart';
heart.textContent = '❤️';
const sidebar = document.getElementById('zen-welcome-page-sidebar');
sidebar.style.width = '100%';
sidebar.appendChild(heart);
@@ -192,8 +193,8 @@
'#zen-welcome-heart',
{ opacity: [0, 1, 1, 1, 0], scale: [0.5, 1, 1.2, 1, 1.2] },
{
duration: 1.6,
ease: 'cubic-bezier(0.23, 1, 0.32, 1)',
duration: 1.8,
delay: 0.2,
}
);
}