mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-01-05 21:07:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance ZenWelcome component with improved layout and animation for radio buttons

Browse Source
This commit is contained in:
mr. M
2025-02-15 00:36:57 +01:00
parent d9960e8a5e
commit ca11631531
3 changed files with 40 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
l10n

Submodule l10n updated: 146e85615a...83464a5d35

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

@@ -103,5 +103,28 @@
overflow: hidden;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
gap: 1.1rem;
& label {
opacity: 0;
transition: scale 0.2s;
padding: 1.1rem 1.3rem;
border-radius: .6rem;
width: 50%;
border: 2px solid var(--zen-colors-border);
box-shadow: var(--zen-big-shadow);
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
&:hover {
scale: 1.015;
}
&:has(:checked) {
border: 2px solid var(--zen-primary-color);
scale: 1.03;
}
}
}
}

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

@@ -100,9 +100,7 @@
);
}
async fadeInContent(page) {
const contentElement = document.getElementById('zen-welcome-page-content');
contentElement.innerHTML = page.content;
async fadeInContent() {
await animate(
'#zen-welcome-page-content > *',
{ opacity: [0, 1], scale: [0.9, 1], filter: ['blur(2px)', 'blur(0px)'] },
@@ -157,8 +155,8 @@
}
await this.fadeInTitles(currentPage);
await this.fadeInButtons(currentPage);
await this.fadeInContent(currentPage);
currentPage.fadeIn();
await this.fadeInContent();
}
finish() {
@@ -197,14 +195,20 @@
},
},
],
content: `
<checkbox
class="clearingItemCheckbox"
data-l10n-id="item-history-form-data-downloads"
id="zen-welcome-set-default-browser"
/>
`,
fadeIn() {},
fadeIn() {
const xul = `
<html:label for="zen-welcome-set-default-browser">
<html:input type="radio" id="zen-welcome-set-default-browser" name="zen-welcome-set-default-browser"></html:input>
<html:span data-l10n-id="zen-welcome-set-default-browser"></html:span>
</html:label>
<html:label for="zen-welcome-dont-set-default-browser">
<html:input checked="true" type="radio" id="zen-welcome-dont-set-default-browser" name="zen-welcome-set-default-browser"></html:input>
<html:span data-l10n-id="zen-welcome-dont-set-default-browser"></html:span>
</html:label>
`;
const fragment = window.MozXULElement.parseXULToFragment(xul);
document.getElementById('zen-welcome-page-content').appendChild(fragment);
},
fadeOut() {},
},
];